/* Homepage editorial sequence */

.editorial,
.inquiry,
.discover-panel {
  scroll-margin-top: var(--header-h);
}

.editorial {
  border-top: var(--rule) solid var(--hairline);
  background: var(--navy-deep);
}

.editorial--reverse {
  background: var(--navy);
}

/* The Yacht follows the statement straight on: no rule between them. */
.editorial--yacht { border-top: 0; }

.editorial__frame {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}

.editorial__copy {
  display: grid;
  place-items: center;
  padding: var(--section-pad-tight) var(--gutter);
}

.editorial__copy-inner {
  width: min(100%, var(--measure));
}

.editorial__prose,
.inquiry__prose {
  margin-top: var(--sp-6);
}

.editorial__media,
.editorial__media picture {
  min-height: 0;
  height: auto;
}

.editorial__media {
  --editorial-ratio: 16 / 10;
}

.editorial__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.editorial__media--aerial {
  background: none;
}



.editorial__link,
.inquiry__link,
.legal__link,
.discover-panel__back {
  display: inline-flex;
  align-items: center;
  min-height: var(--sp-6);
  border-bottom: var(--rule) solid var(--hairline-gold);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
}

.editorial__link {
  margin-top: var(--sp-5);
}

.editorial__link:hover,
.inquiry__link:hover,
.legal__link:hover,
.discover-panel__back:hover {
  color: var(--cream-muted);
}

.specs-trigger {
  width: fit-content;
  min-height: var(--sp-6);
  margin-top: var(--sp-4);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-body);
  font-variation-settings: 'wdth' var(--wdth-body);
  font-size: var(--fs-body-l);
  font-weight: var(--wt-body);
  line-height: var(--lh-body);
  color: var(--cream);
  text-decoration: none;
}

.specs-trigger__label {
  text-decoration-line: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: var(--rule);
  text-underline-offset: 0.08em;
  text-decoration-skip-ink: auto;
}

.specs-trigger__icon {
  width: var(--sp-2);
  height: var(--sp-2);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--gold);
  transition: transform var(--dur-hover) var(--ease);
}

.specs-trigger:active .specs-trigger__icon {
  transform: translateY(var(--rule));
}

.specs-modal {
  width: min(calc(100% - (var(--sp-4) * 2)), calc(var(--measure) + var(--sp-16)));
  max-width: none;
  max-height: calc(100dvh - (var(--sp-4) * 2));
  margin: auto;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: var(--rule) solid var(--hairline-strong);
  background: var(--navy);
  color: var(--cream);
  box-shadow: 0 var(--sp-3) var(--sp-12) var(--modal-shadow);
}

.specs-modal::backdrop {
  background: var(--modal-backdrop);
}

.specs-modal__header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--gutter);
  border-bottom: var(--rule) solid var(--hairline);
  background: var(--navy);
}

.specs-modal__close {
  min-inline-size: var(--sp-6);
  min-block-size: var(--sp-6);
  flex: none;
  appearance: none;
  border: 0;
  padding: var(--sp-1);
  background: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--cream-muted);
}

.specs-modal__close:hover {
  color: var(--cream);
}

.specs-modal__body {
  padding: var(--sp-4) var(--gutter) var(--sp-6);
}

@media (hover: hover) and (pointer: fine) {
  .specs-trigger:hover .specs-trigger__icon {
    transform: translate(var(--rule), calc(var(--rule) * -1));
  }
}

.deep-disclosure summary::-webkit-details-marker {
  display: none;
}

.inquiry {
  padding-block: var(--section-pad-tight);
  background: var(--navy-deep);
}

.inquiry__header .section-title {
  max-width: none;
}

/* Deep-content index. Only the selected chapter is shown. */

.discover-page {
  min-height: 100svh;
}

.discover-intro {
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-block: calc(var(--header-h) + var(--section-pad-tight)) var(--section-pad-tight);
  background: var(--navy-deep);
}

.discover-intro__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--sp-16);
  align-items: start;
}

.discover-intro__aside > .prose {
  margin-bottom: var(--sp-6);
}

.discover-index {
  border-top: var(--rule) solid var(--hairline);
}

.discover-index ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.discover-index a {
  min-height: var(--sp-10);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  border-bottom: var(--rule) solid var(--hairline);
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wdth-display);
  font-size: var(--fs-body-l);
  font-weight: var(--wt-body-strong);
  color: var(--cream);
  text-decoration: none;
}

.discover-index a span:last-child {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--tr-mono);
  color: var(--cream-muted);
}

.discover-index a:hover {
  border-bottom-color: var(--hairline-gold);
}

.discover-panel {
  display: none;
  min-height: 100svh;
  background: var(--navy-deep);
}

.discover-panel:target {
  display: block;
}

.discover-page:has(.discover-panel:target) .discover-intro,
.discover-page[data-chapter-view] .discover-intro {
  display: none;
}

.discover-panel:nth-of-type(odd) {
  background: var(--navy);
}

.discover-panel__frame {
  min-height: 100svh;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.discover-panel__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-h) + var(--section-pad-tight)) var(--gutter) var(--section-pad-tight);
}

.discover-panel__copy > .section-title {
  margin-top: 0;
}

.discover-panel__prose,
.discover-panel__lead {
  margin-top: var(--sp-6);
}

.discover-panel__media,
.discover-panel__media picture {
  min-height: 100%;
  height: 100%;
}

.discover-panel__media img {
  width: 100%;
  height: 100%;
  min-height: 100svh;
  object-fit: cover;
}

.deep-disclosure {
  margin-top: var(--sp-5);
  border-top: var(--rule) solid var(--hairline);
}

.deep-disclosure summary {
  min-height: var(--sp-6);
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--cream-muted);
}

.deep-disclosure__body {
  padding-block: var(--sp-4);
}

.manifest {
  margin-top: var(--sp-6);
  border-top: var(--rule) solid var(--hairline);
}

.manifest > div {
  display: grid;
  grid-template-columns: minmax(10rem, 0.7fr) minmax(0, 1.3fr);
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-bottom: var(--rule) solid var(--hairline);
}

.manifest dt {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--cream-muted);
}

.manifest dd {
  color: var(--cream);
}

.discover-panel__manifest {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--sp-16);
  align-content: center;
  padding-block: calc(var(--header-h) + var(--section-pad-tight)) var(--section-pad-tight);
}

.discover-panel__manifest > .discover-panel__back {
  grid-column: 1 / -1;
  justify-self: start;
}

.discover-panel__specifications {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--sp-16);
  align-content: center;
  padding-block: calc(var(--header-h) + var(--section-pad-tight)) var(--section-pad-tight);
}

.discover-panel__specifications > .discover-panel__back {
  grid-column: 1 / -1;
  justify-self: start;
}

.discover-panel__specifications-heading .prose {
  margin-top: var(--sp-3);
}

.manifest--wide {
  margin-top: 0;
}

.discover-panel--gallery {
  padding-block: calc(var(--header-h) + var(--section-pad-tight)) var(--section-pad-tight);
}

.discover-panel--gallery .section-title {
  margin-top: 0;
}

/* Categorised editorial gallery */

.gallery {
  margin-top: var(--sp-6);
}

.gallery__heading {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--sp-8);
  align-items: end;
}

.gallery__heading .prose {
  max-width: var(--measure);
}

.gallery__toolbar {
  position: sticky;
  top: var(--header-h);
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
  border-block: var(--rule) solid var(--hairline);
  background: var(--navy-deep);
}

.gallery__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

.gallery__filters button {
  min-height: var(--sp-6);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding-inline: var(--sp-2);
  border: var(--rule) solid var(--hairline);
  background: none;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--cream-muted);
  cursor: pointer;
}

.gallery__filters button span {
  color: var(--gold);
}

.gallery__filters button[aria-pressed='true'] {
  border-color: var(--cream);
  background: var(--cream);
  color: var(--navy-deep);
}

.gallery__status {
  flex: none;
  padding-block: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--cream-muted);
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  grid-auto-rows: var(--sp-16);
  gap: var(--sp-1);
  margin-top: var(--sp-3);
}

.gallery-card {
  position: relative;
  grid-column: span 4;
  grid-row: span 2;
  display: block;
  overflow: hidden;
  border: var(--rule) solid var(--hairline);
  background: var(--navy);
  color: var(--cream);
  text-decoration: none;
}

.gallery-card--wide {
  grid-column: span 8;
}

.gallery-card--feature {
  grid-column: span 8;
  grid-row: span 3;
}

.gallery-card--tall {
  grid-row: span 4;
}

.gallery-card[hidden] {
  display: none;
}

.gallery-card picture,
.gallery-card img {
  width: 100%;
  height: 100%;
}

.gallery-card img {
  object-fit: cover;
  transition: transform var(--dur-expand) var(--ease);
}

.gallery-card__meta {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-2);
  background: var(--hero-scrim-deep);
}

.gallery-card__meta > span:first-child {
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  font-weight: var(--wt-body-strong);
}

.gallery-card__meta > span:last-child,
.gallery-lightbox__category,
.gallery-lightbox__footer p {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--cream-muted);
}

.gallery-card:hover img {
  transform: scale(1.025);
}

html.no-js .gallery__filters {
  display: none;
}

.gallery-lightbox {
  /* centred, lifted off the page */
  width: calc(100% - var(--sp-8));
  max-width: var(--content-max);
  max-height: calc(100dvh - var(--sp-8));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: var(--rule) solid var(--hairline-gold);
  background: var(--navy-deep);
  color: var(--cream);
  box-shadow: 0 var(--sp-4) calc(var(--sp-16) * 1.5) var(--modal-lift);
}

.gallery-lightbox::backdrop {
  /* the page blurs away so the photograph is the only thing in focus */
  background: var(--control-ground);
  backdrop-filter: blur(14px) saturate(0.9);
}

.gallery-lightbox__shell {
  max-height: inherit;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.gallery-lightbox__header,
.gallery-lightbox__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
}

.gallery-lightbox__header {
  border-bottom: var(--rule) solid var(--hairline);
}

.gallery-lightbox__footer {
  position: relative;
  justify-content: center;
  border-top: var(--rule) solid var(--hairline);
}

.gallery-lightbox__title {
  margin-top: var(--sp-1);
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wdth-display);
  font-size: var(--fs-display-m);
  font-weight: var(--wt-display);
  line-height: var(--lh-display);
}

.gallery-lightbox__close,
.gallery-lightbox__footer button {
  min-inline-size: var(--sp-6);
  min-block-size: var(--sp-6);
  border: var(--rule) solid var(--hairline);
  background: none;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--cream);
  cursor: pointer;
}

.gallery-lightbox__figure {
  position: relative;
  /* A fixed viewing area. Without this the box resized to each
     photograph's aspect ratio, so the header and footer jumped on every
     step and the whole modal appeared to contract. */
  block-size: min(76vh, 46rem);
  min-height: 0;
  min-width: 0;
  overflow: hidden;          /* the photograph can never spill onto the bars */
  display: grid;
  place-items: center;
  background: var(--navy);
  padding: var(--sp-2);
}

.gallery-lightbox__figure picture {
  display: contents;
}

.gallery-lightbox__figure img {
  /* Sized to the box explicitly, exactly as the video below is, and for the
     same reason: max-height: 100% does not resolve against this grid area, so
     every photograph overflowed its cell and `overflow: hidden` quietly cut
     150 to 290px off it. A portrait frame lost the vessel altogether. Letting
     object-fit do the letterboxing is what actually holds. */
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
}

/* A slide that carries footage was escaping this box and showing a cropped
   fragment of its poster: only img was constrained, and on a video Chrome
   does not resolve max-height: 100% against the grid area, so the element
   took its poster's full 959x1659. Sizing it to the box explicitly and
   letting object-fit do the letterboxing is what actually holds. */
.gallery-lightbox__figure video {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
}

.legal__body {
  margin-top: var(--sp-8);
}

@media (max-width: 768px) {
  .editorial__frame,
  .discover-panel__frame {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .editorial__copy,
  .discover-panel__copy {
    min-height: 72svh;
    padding:
      calc(var(--header-h) + var(--sp-1))
      var(--gutter)
      var(--sp-4);
  }

  .editorial__media,
  .editorial__media picture,
  .discover-panel__media,
  .discover-panel__media picture {
    min-height: auto;
    height: auto;
  }

  .editorial__media img,
  .discover-panel__media img {
    min-height: auto;
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .inquiry__frame {
  display: block;
  border: var(--sp-1) solid var(--gold);
  background: var(--cream);
  box-shadow: var(--sp-2) var(--sp-2) 0 var(--hairline-gold);
}

  .inquiry__intro,
  .inquiry__panel {
    padding: var(--sp-5);
  }

  .inquiry__panel {
    margin-top: 0;
  }

  .discover-intro__inner,
  .discover-panel__manifest,
  .discover-panel__specifications {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .discover-intro {
    align-items: start;
  }

  .discover-panel__manifest,
  .discover-panel__specifications {
    align-content: start;
  }
}

@media (max-width: 520px) {
  .inquiry__details,
  .inquiry-form__row {
    grid-template-columns: 1fr;
  }

  .inquiry__intro,
  .inquiry__panel {
    padding: var(--sp-3);
  }

  .inquiry__panel {
    margin: 0 var(--sp-1) var(--sp-1);
  }

  .specs-modal {
    width: calc(100% - (var(--sp-2) * 2));
    max-height: calc(100dvh - (var(--sp-2) * 2));
  }

  .specs-modal__header,
  .specs-modal__body {
    padding-inline: var(--sp-2);
  }

  .specs-modal__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-1);
  }

  .specs-modal__header .section-title {
    min-width: 0;
    max-width: none;
    font-size: var(--fs-body-l);
  }
}

@media (max-width: 560px) {
  .manifest > div {
    grid-template-columns: 1fr;
    gap: var(--sp-1);
  }
}

/* ============================================================
   REVISIONS
   ============================================================ */

/* ---------- Editorial images: intrinsic ratios, alternating edges ---------- */
.editorial--yacht .editorial__frame {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}
.editorial--reverse .editorial__frame {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}
.editorial__media--aerial,
.editorial__media--aerial picture {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
/* One frame for both photographs, so The Yacht and Private Charter carry
   the same weight. 16:10 is the compromise ratio: 3/2 cuts the yacht's bow
   off the side, 16/9 crops the heads off the dining parasols. */
.editorial__media--aerial img,
.editorial__media--dining img {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: var(--editorial-ratio);
  object-fit: cover;
  object-position: 50% 50%;
}
.editorial__media--dining {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.editorial__media--dining picture {
  width: 100%;
  margin-right: auto;
}

/* ---------- Inquiry ---------- */
.inquiry__inner {
  display: block;
}
.inquiry__header {
  display: grid;
  justify-items: center;
  margin-bottom: var(--sp-6);
  text-align: center;
}
.inquiry__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--gold);
  margin-top: var(--sp-3);
}

.inquiry__frame {
  /* single column now that the contact side is gone */
  display: block;
  /* the card itself is the thing that shrinks, not its contents */
  width: min(100%, 44rem);
  margin-inline: auto;
  border: var(--sp-1) solid var(--gold);
  background: var(--cream);
  box-shadow: var(--sp-2) var(--sp-2) 0 var(--hairline-gold);
}
.inquiry__panel {
  width: 100%;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
}
.inquiry__form-title {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wdth-display);
  font-size: var(--fs-display-m);
  text-align: center;
  font-weight: var(--wt-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--navy-deep);
  text-wrap: balance;
}
.inquiry-form fieldset {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  border: 0;
}
.inquiry-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}
.inquiry-form label {
  display: grid;
  gap: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  line-height: var(--lh-mono);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--navy-soft);
}
.inquiry-form input,
.inquiry-form select,
.inquiry-form textarea {
  width: 100%;
  min-height: var(--sp-6);
  border: var(--rule) solid var(--hairline-gold);
  border-radius: 0;
  padding: var(--sp-1) var(--sp-2);
  background: var(--cream);
  color: var(--navy-deep);
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  letter-spacing: var(--tr-body);
  text-transform: none;
  opacity: 1;
}
.inquiry-form textarea {
  min-height: var(--sp-10);
  resize: vertical;
}
.inquiry-form button {
  min-height: var(--sp-6);
  border: 0;
  padding-inline: var(--sp-2);
  background: var(--gold);
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wdth-display);
  font-size: var(--fs-body-s);
  font-weight: var(--wt-body-strong);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--navy-deep);
  opacity: 1;
}
/* The honeypot. Off-screen rather than display:none, because a bot that
   reads the stylesheet skips anything hidden; this one it fills in. */
.inquiry-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.inquiry-form__status {
  margin-top: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body);
  text-align: center;
  color: var(--navy-deep);
}
.inquiry-form__status:empty { margin-top: 0; }
.inquiry-form__status[data-state='sent'] {
  padding-block: var(--sp-2);
  border-top: var(--rule) solid var(--hairline-gold);
  border-bottom: var(--rule) solid var(--hairline-gold);
}
.inquiry-form__status[data-state='failed'] { color: var(--navy-soft); }

/* ---------- Preferred dates: From / Until calendar ----------
   The panel drops from the field at the field's own width (never wider
   than a comfortable month), cream on cream with a gold hairline, so it
   reads as part of the card rather than a browser widget. Every rule is
   scoped under .inquiry-form so the form's gold button style never leaks
   onto the day cells. */
.inquiry-form .date-range { position: relative; }
.inquiry-form .date-range input[readonly] { cursor: pointer; }

.inquiry-form .date-range__panel {
  position: absolute;
  top: calc(100% + var(--sp-1));
  left: 0;
  z-index: 5;
  width: min(100%, 22rem);
  padding: var(--sp-2);
  border: var(--rule) solid var(--hairline-gold);
  background: var(--cream);
  color: var(--navy-deep);
  box-shadow: 0 var(--sp-2) var(--sp-4) var(--panel-shadow);
  transform-origin: top left;
  animation: date-range-open var(--dur-expand) var(--ease);
}
.inquiry-form .date-range__panel[hidden] { display: none; }

@keyframes date-range-open {
  from { opacity: 0; transform: translateY(calc(var(--sp-1) * -1)) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.inquiry-form .date-range__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  margin-bottom: var(--sp-1);
}

.inquiry-form .date-range__month {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  text-align: center;
  color: var(--navy-deep);
}

.inquiry-form .date-range__nav,
.inquiry-form .date-range__day,
.inquiry-form .date-range__clear {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--navy-deep);
  font-family: var(--font-body);
  font-variation-settings: normal;
  font-size: var(--fs-body-s);
  font-weight: var(--wt-body);
  letter-spacing: var(--tr-body);
  text-transform: none;
  cursor: pointer;
}

.inquiry-form .date-range__nav {
  inline-size: var(--sp-5);
  block-size: var(--sp-5);
  border: var(--rule) solid var(--hairline-gold);
}
.inquiry-form .date-range__nav:hover:not(:disabled) { border-color: var(--gold); }
.inquiry-form .date-range__nav:disabled { opacity: var(--disabled-opacity); cursor: default; }

.inquiry-form .date-range__weekdays,
.inquiry-form .date-range__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.inquiry-form .date-range__weekdays span {
  padding-block: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--tr-mono);
  text-align: center;
  text-transform: uppercase;
  color: var(--navy-soft);
}

.inquiry-form .date-range__day {
  aspect-ratio: 1;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease;
}
.inquiry-form .date-range__day:hover:not(:disabled, .is-from, .is-until) { background: var(--range-fill); }
.inquiry-form .date-range__day:disabled { color: var(--navy-soft); opacity: var(--disabled-opacity); cursor: default; }
.inquiry-form .date-range__day.is-today { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 0.3em; }
.inquiry-form .date-range__day.is-between { background: var(--range-fill); }
.inquiry-form .date-range__day.is-from,
.inquiry-form .date-range__day.is-until {
  background: var(--gold);
  color: var(--navy-deep);
  font-weight: var(--wt-body-strong);
}

.inquiry-form .date-range__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: var(--rule) solid var(--hairline-gold);
}

.inquiry-form .date-range__summary {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--navy-soft);
}

.inquiry-form .date-range__clear {
  font-size: var(--fs-mono-s);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  color: var(--navy-soft);
}

.inquiry-form .date-range__done {
  min-height: var(--sp-5);
  font-size: var(--fs-mono-s);
}

@media (prefers-reduced-motion: reduce) {
  .inquiry-form .date-range__panel { animation: none; }
}

.inquiry__form-note {
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  line-height: var(--lh-mono);
  color: var(--navy-soft);
  text-align: center;
}
@media (max-width: 640px) {
  .inquiry__details,
  .inquiry-form__row {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .editorial--yacht .editorial__frame,
  .editorial--reverse .editorial__frame {
    grid-template-columns: 1fr;
  }
  .editorial--reverse .editorial__copy {
    order: 1;
  }
  .editorial--reverse .editorial__media {
    order: 2;
  }
  .editorial__copy {
    min-height: 0;
  }
  .editorial__media--aerial,
  .editorial__media--dining {
    min-height: auto;
    height: auto;
  }
  .editorial__media--aerial picture,
  .editorial__media--dining picture {
    /* edge to edge on a phone; the inset is a desktop device only */
    width: 100%;
    margin: 0;
  }
  .editorial__media--aerial img,
  .editorial__media--dining img {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: var(--editorial-ratio);
    object-fit: cover;
  }

  .gallery__heading {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .gallery__toolbar {
    position: static;
    align-items: flex-start;
    flex-direction: column;
  }

  .gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: var(--sp-12);
  }

  .gallery-card {
    grid-column: span 1;
    grid-row: span 2;
  }

  .gallery-card--wide,
  .gallery-card--feature {
    grid-column: span 2;
    grid-row: span 3;
  }

  .gallery-card--tall {
    grid-column: span 1;
    grid-row: span 4;
  }

  .gallery-lightbox {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    border: 0;
  }

  .gallery-lightbox__shell {
    height: 100%;
  }

  .gallery-lightbox__figure img {
    max-height: 100%;
  }
  .inquiry__frame {
    grid-template-columns: 1fr;
  }
  .inquiry__intro,
  .inquiry__panel {
    padding: var(--sp-5);
  }
  .inquiry__panel {
    margin-top: 0;
  }
}
@media (max-width: 520px) {
  .inquiry__intro,
  .inquiry__panel {
    padding: var(--sp-3);
  }
  .inquiry__panel {
    margin: 0 var(--sp-1) var(--sp-1);
  }

  .gallery__filters button {
    flex: 1 1 auto;
    justify-content: space-between;
  }

  .gallery-card__meta > span:last-child {
    display: none;
  }

  .gallery-lightbox__header,
  .gallery-lightbox__footer {
    padding-inline: var(--sp-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-card img {
    transition: none;
  }
}

/* ---------- Footer ---------- */
.site-footer__inner {
  display: grid;
  gap: var(--sp-6);
  justify-items: center;
  text-align: center;
}
.site-footer__brand { display: grid; justify-items: center; gap: var(--sp-1); }
.site-footer__mark { width: auto; height: 2.75rem; flex: none; }
.site-footer__name {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wdth-display);
  font-weight: var(--wt-display);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
}
.site-footer__contact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  width: 100%;
  max-width: 44rem;
  margin: 0;
  padding-block: var(--sp-4);
  border-top: var(--rule) solid var(--hairline);
  border-bottom: var(--rule) solid var(--hairline);
}
.site-footer__contact dt {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--cream-muted);
  margin-bottom: var(--sp-1);
}
.site-footer__contact dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--cream);
}
.site-footer__end { display: grid; justify-items: center; gap: var(--sp-3); }
.site-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--sp-6);
  min-height: var(--sp-6);
  color: var(--gold);
  transition: color var(--dur-hover) var(--ease);
}
.site-footer__social:hover { color: var(--cream); }
.icon-instagram {
  width: var(--sp-3);
  height: var(--sp-3);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.icon-instagram__dot { fill: currentColor; stroke: none; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
@media (max-width: 640px) {
  .site-footer__contact { grid-template-columns: 1fr; gap: var(--sp-3); }
}


/* ---------- Technical specifications ----------
   Only the rows travel; the title and the chapter head stay put. */
.specs-scroll {
  max-height: min(62vh, 40rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: var(--rule) solid var(--hairline);
  margin-top: var(--sp-3);
}
.specs-scroll .plate { border-top: 0; }

/* ---------- Interiors: the amenities themselves ---------- */
/* One amenity at a time, swiped or stepped, the same as the cabins and the
   refit. As a grid this collapsed to a single column on a phone and became
   eight photographs stacked into four screens of scrolling. */
.amenity-carousel {
  display: grid;
  gap: var(--sp-2);
  align-content: center;
  align-self: center;
  padding: var(--sp-4);
  min-width: 0;
}
.amenity-carousel__track {
  min-width: 0;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.amenity-carousel__track::-webkit-scrollbar { display: none; }
.amenity-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-width: 0;
}
.amenity-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  border-top: var(--rule) solid var(--hairline);
  padding-top: var(--sp-2);
}
.amenity-carousel__controls button {
  min-inline-size: var(--sp-6);
  min-block-size: var(--sp-6);
  border: var(--rule) solid var(--hairline);
  background: none;
  color: var(--cream);
  cursor: pointer;
  transition: border-color var(--dur-hover) var(--ease);
}
.amenity-carousel__controls button:hover { border-color: var(--hairline-gold); }
.amenity-carousel__count {
  text-align: center;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--cream-muted);
}
.amenity { margin: 0; }
.amenity img {
  width: 100%;
  /* the width/height attributes map to a presentational height, which
     outranks aspect-ratio unless height is explicitly auto */
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: var(--navy);
}
.amenity figcaption {
  margin-top: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--cream-muted);
}

/* ---------- Cabins: photographs first, details on request ---------- */
.cabin-showcase {
  /* A fifth narrower than the page. At full width the photograph pushed the
     controls off a laptop screen entirely. */
  width: min(100%, calc(var(--content-max) * 0.78));
  min-height: 100svh;
  margin-inline: auto;
  padding: calc(var(--header-h) + var(--sp-3)) var(--gutter) var(--section-pad-tight);
  display: grid;
  align-content: center;
  gap: var(--sp-3);
}

.cabin-showcase__head {
  display: grid;
  justify-items: start;
  gap: var(--sp-1);
}

.cabin-carousel {
  display: grid;
  gap: var(--sp-2);
  min-width: 0;
  align-content: center;
  align-self: center;
}
.cabin-carousel__track {
  min-width: 0;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
  gap: 0;
  scrollbar-width: none;
}
.cabin-carousel__track::-webkit-scrollbar { display: none; }
.cabin-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-width: 0;
}
.cabin-slide img {
  width: 100%;
  height: auto;
  /* every room shares one frame, and nothing is cropped away */
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: var(--navy);
}
.cabin-showcase__summary {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}

.cabin-slide__name {
  margin-top: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--cream-muted);
}
.cabin-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  border-top: var(--rule) solid var(--hairline);
  padding-top: var(--sp-2);
}
.cabin-carousel__controls button {
  min-inline-size: var(--sp-6);
  min-block-size: var(--sp-6);
  border: var(--rule) solid var(--hairline);
  background: none;
  color: var(--cream);
  cursor: pointer;
  font-family: var(--font-mono);
}
.cabin-carousel__controls button:hover { border-color: var(--gold); color: var(--gold); }
.cabin-carousel__count {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--cream-muted);
}

.cabin-showcase__footer {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
}

.cabin-showcase__footer .specs-trigger,
.cabin-details-modal__fallback {
  margin-top: 0;
}

.cabin-details-modal .manifest {
  margin-top: var(--sp-4);
}

.cabin-details-modal__fallback {
  display: none;
}

/* A hash-targeted fallback keeps the details reachable when native dialogs or
   JavaScript are unavailable. Scripted activation never changes the hash. */
.cabin-details-modal:target:not([open]) {
  position: fixed;
  inset: var(--sp-4);
  z-index: var(--z-menu);
  display: block;
  width: auto;
  max-height: calc(100dvh - (var(--sp-4) * 2));
  margin: 0;
}

.cabin-details-modal:target:not([open]) .cabin-details-modal__fallback {
  display: inline-flex;
  margin-top: var(--sp-4);
}

.discover-page:has(.cabin-details-modal:target) .discover-intro {
  display: none;
}

/* ---------- A chapter opens as a carousel, not a wall of thumbnails ---------- */
.gallery-carousel { position: relative; display: grid; gap: var(--sp-2); min-width: 0; }
.gallery-carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}
.gallery-carousel__track::-webkit-scrollbar { display: none; }
.gallery-slide { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; }
.gallery-slide__link { display: block; }
.gallery-slide img {
  width: 100%;
  height: auto;               /* aspect-ratio needs this; see the amenity grid */
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: var(--navy);
}
.gallery-slide__name {
  margin-top: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--cream-muted);
}
.gallery-carousel__controls {
  /* the arrows sit beside the photograph, vertically centred, rather than
     parked in a bar underneath it */
  position: absolute;
  inset-inline: 0;
  top: calc(50% - var(--sp-6));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-inline: var(--sp-2);
  pointer-events: none;
}
.gallery-carousel__controls button {
  pointer-events: auto;
  min-inline-size: var(--sp-6);
  min-block-size: var(--sp-6);
  border: var(--rule) solid var(--hairline-gold);
  background: var(--control-ground);
  color: var(--cream);
  cursor: pointer;
  font-family: var(--font-mono);
}
.gallery-carousel__controls button:hover { border-color: var(--gold); color: var(--gold); }
.gallery-carousel__count {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--cream-muted);
}

/* ============================================================
   GALLERY — chapters first
   Each chapter is previewed by its own opening photograph, laid in
   as a darkened ground so the reader can see what they are about to
   open. The text alternates side to side to keep the rhythm.
   ============================================================ */
.gallery-chapters {
  display: grid;
  gap: var(--sp-2);
}

.gallery-chapter {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 13.5rem;
  padding: 0;
  border: 0;
  background: var(--navy);
  color: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
}

.gallery-chapter__media {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 0;
}
.gallery-chapter__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* a wide band across a tall room lands on the ceiling; bias it lower
     so the preview shows the room rather than the deckhead */
  object-position: 50% 62%;
  transition: transform var(--dur-expand) var(--ease);
}
.gallery-chapter:hover .gallery-chapter__media img,
.gallery-chapter:focus-visible .gallery-chapter__media img {
  transform: scale(1.04);
}

/* darkened, so the type stays the loudest thing in the frame */
.gallery-chapter::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    var(--scrim-strong) 0%,
    var(--scrim-mid) 46%,
    var(--scrim-soft) 100%);
}

.gallery-chapter__body {
  position: relative;
  z-index: 2;
  display: grid;
  padding: var(--sp-4);
  max-width: 46ch;
}
.gallery-chapter:nth-child(even) .gallery-chapter__body {
  justify-self: end;
  text-align: right;
}

.gallery-chapter__label {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wdth-display);
  font-weight: var(--wt-display);
  font-size: calc(var(--fs-display-m) * 0.8);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--cream);
}
.gallery-chapter__blurb {
  font-size: var(--fs-body);
  color: var(--cream);
}
.gallery-chapter__count {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--gold);
}

@media (max-width: 768px) {
  .gallery-chapter { min-height: 10.5rem; }
  .gallery-chapter__body { padding: var(--sp-3); max-width: none; }
  .gallery-chapter:nth-child(even) .gallery-chapter__body {
    justify-self: start;
    text-align: left;
  }
}


/* ============================================================
   THE YACHT AND PRIVATE CHARTER
   The photographs sit as lifted plates rather than raw bleeds, with
   the copy optically centred against them. Rounded corners are a
   deliberate departure from the brief's "no rounded corners", made
   at the client's request, and are confined to these photographs.
   ============================================================ */
.editorial__media picture {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 var(--sp-2) var(--sp-8) var(--media-lift);
}

/* a hairline of gold along the inner edge, the same detail as the rules */
.editorial__media picture::after {
  content: '';
  position: absolute;
  inset: 0;
  border: var(--rule) solid var(--hairline-gold);
  border-radius: inherit;
  pointer-events: none;
}

@media (max-width: 768px) {
  /* Edge to edge on a phone. An inset plate leaves a band of the chapter
     below showing through under the photograph, with the dividing rule
     stranded across it. */
  .editorial__media picture {
    border-radius: 0;
    box-shadow: none;
  }
  .editorial__media picture::after { border: 0; }
}


/* The plate is pulled in from the outer edge so the whole rounded frame
   reads, rather than half of it running off the side of the page. */
@media (min-width: 769px) {
  .editorial__media {
    display: grid;
    align-items: center;
    padding-block: var(--sp-8);
    padding-inline-end: var(--gutter);
  }
  .editorial--reverse .editorial__media {
    padding-inline-end: 0;
    padding-inline-start: var(--gutter);
  }
  .editorial__media,
  .editorial__media picture {
    min-height: 0;
    height: auto;
  }
  .editorial__media--aerial img,
  .editorial__media--dining img {
    width: 100%;
    height: auto;
    max-height: 72vh;
    object-fit: cover;
  }
}

/* ---------- Chapter reading order ----------
   The copy always precedes the photograph in the markup, so a phone
   reads title, then body, then image. On a wide screen the reversed
   chapters put the photograph back on the left visually, without
   disturbing that reading order. */
@media (min-width: 769px) {
  .discover-panel--reverse .discover-panel__media { order: -1; }
}

/* ============================================================
   GALLERY CHAPTERS ON A WIDE SCREEN
   The overlay treatment crops the photographs, so on a desktop the
   chapters go back to alternating columns: title one side, the whole
   photograph the other, swapping down the page. Phones keep the
   overlay, where a full-bleed preview reads better.
   ============================================================ */
@media (min-width: 769px) {
  .gallery-chapters { gap: var(--sp-3); }

  .gallery-chapter {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    min-height: 0;
    background: none;
    border-top: var(--rule) solid var(--hairline);
  }
  .gallery-chapters .gallery-chapter:last-child {
    border-bottom: var(--rule) solid var(--hairline);
  }

  /* the photograph takes its own column rather than lying behind the type */
  .gallery-chapter__media {
    position: static;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }
  .gallery-chapter__media img { object-position: 50% 50%; }

  /* no scrim is needed once the type has its own column */
  .gallery-chapter::after { content: none; }

  .gallery-chapter__body {
    position: static;
    align-content: center;
    justify-self: stretch;
    text-align: left;
    padding: var(--sp-5) var(--sp-4);
    max-width: none;
  }
  .gallery-chapter:nth-child(even) .gallery-chapter__body {
    justify-self: stretch;
    text-align: left;
  }

  /* alternate which side the photograph sits on */
  .gallery-chapter:nth-child(even) .gallery-chapter__media { order: 2; }
}


/* ============================================================
   THE LONG READ
   The refit account runs far longer than any other section, so
   it opens at the same height as its neighbours and the rest is
   held back. The cut is a blur rather than a hard edge: the last
   two lines soften and lift away instead of stopping mid-word,
   which reads as "there is more" without a gradient bar drawn
   over the text. No box, no shadow, no border.
   ============================================================ */
.longread {
  margin-top: var(--sp-6);
}

.longread__body {
  position: relative;
  overflow: hidden;
  /* the same depth as the prose beside it, so the columns agree */
  max-height: 21em;
  transition: max-height var(--dur-expand) var(--ease);
}

/* The fade itself. A mask leaves the text fully opaque until the
   last stretch, so nothing legible is dimmed prematurely. */
.longread[data-open='false'] .longread__body {
  mask-image: linear-gradient(to bottom,
    var(--mask-keep) 0%, var(--mask-keep) 62%,
    var(--mask-fade) 88%, var(--mask-drop) 100%);
}

/* The glassy part: a pane of blur sitting over the softened tail. It
   is inert, so the text underneath stays selectable and the reader
   can still drag through it. */
.longread[data-open='false'] .longread__body::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 7em;
  pointer-events: none;
  backdrop-filter: blur(2.5px);
  mask-image: linear-gradient(to bottom, var(--mask-drop) 0%, var(--mask-keep) 72%);
}

.longread[data-open='true'] .longread__body {
  max-height: 200em;
}

.longread__more {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin-top: var(--sp-3);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 0.35em;
  text-decoration-thickness: var(--rule);
  transition: color var(--dur-hover) var(--ease);
}
.longread__more:hover { color: var(--gold); }

/* No JavaScript: nothing can expand, so nothing is held back. */
html.no-js .longread__body { max-height: none; mask-image: none; }
html.no-js .longread__body::after { content: none; }
html.no-js .longread__more { display: none; }

@media (prefers-reduced-motion: reduce) {
  .longread__body { transition: none; }
}

/* ---------- Attribution ----------
   A signature, not a card. Three lines on a hairline, the name
   carrying the weight and the rest stepping back. */
.attribution {
  margin: var(--sp-6) 0 0;
  padding-top: var(--sp-3);
  border-top: var(--rule) solid var(--hairline-gold);
}
.attribution figcaption {
  display: grid;
  gap: 0.15em;
}
.attribution__name {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wdth-body);
  font-weight: var(--wt-body-strong);
  font-size: var(--fs-body);
  color: var(--cream);
}
.attribution__role,
.attribution__firm {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  line-height: var(--lh-mono);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--cream-muted);
}

/* ============================================================
   REFIT CAROUSEL
   The same scroll-snapped track as the cabins, so the two deep
   chapters behave alike.
   ============================================================ */
.refit-carousel {
  display: grid;
  align-content: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--gutter);
  min-width: 0;
}
.refit-carousel__track {
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: var(--sp-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.refit-carousel__track::-webkit-scrollbar { display: none; }
.refit-slide { scroll-snap-align: center; min-width: 0; }
.refit-slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
.refit-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  border-top: var(--rule) solid var(--hairline);
  padding-top: var(--sp-2);
}
.refit-carousel__controls button {
  appearance: none;
  background: none;
  border: var(--rule) solid var(--hairline);
  color: var(--cream);
  width: 2.75rem;
  height: 2.75rem;
  cursor: pointer;
  transition: border-color var(--dur-hover) var(--ease);
}
.refit-carousel__controls button:hover { border-color: var(--hairline-gold); }
.refit-carousel__count {
  grid-area: count;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-s);
  letter-spacing: var(--tr-mono);
  color: var(--cream-muted);
}

@media (max-width: 768px) {
  .refit-carousel { padding-inline: 0; margin-top: 0; }
  .refit-slide img { border-radius: 0; }

  /* Interiors leads with the photographs. `display: contents` lifts the copy's
     own children into the frame so the title can stay above the
     picture while the reading text drops below it. The carousel loses its
     inset and runs to both edges: the photograph is the point of the chapter,
     the prose is there for whoever scrolls on. */
  .discover-panel--media-first .discover-panel__frame { row-gap: var(--sp-3); }
  .discover-panel--media-first .discover-panel__copy { display: contents; }
  .discover-panel--media-first .section-title {
    order: 2;
    margin: calc(var(--header-h) + var(--sp-2)) var(--gutter) 0;
  }
  .discover-panel--media-first .amenity-carousel {
    order: 3;
    padding: 0;
  }
  /* The photograph runs to both edges; its caption and controls keep the
     page's gutter so they do not sit against the glass. */
  .discover-panel--media-first .amenity figcaption,
  .discover-panel--media-first .amenity-carousel__controls {
    padding-inline: var(--gutter);
  }

  /* Suites and Cabins the same way: the chapter was inset from both edges,
     which left the photograph boxed in while the amenities ran full width. */
  .cabin-showcase { padding-inline: 0; }
  .cabin-showcase__head,
  .cabin-showcase__footer,
  .cabin-carousel__controls { padding-inline: var(--gutter); }
  .discover-panel--media-first .discover-panel__prose {
    order: 4;
    margin: 0 var(--gutter) var(--sp-6);
  }

  /* A shorter preview, so Read more, the signature and the top of the
     photographs all sit within the first screen: the reader can see there
     is more below without being told. */
  .longread__body { max-height: 10.5em; }
  /* The fade is a share of the height, so a shorter preview would otherwise
     dim the introduction itself. Hold it back to the teased line. */
  .longread[data-open='false'] .longread__body {
    mask-image: linear-gradient(to bottom,
      var(--mask-keep) 0%, var(--mask-keep) 82%,
      var(--mask-fade) 95%, var(--mask-drop) 100%);
  }
  .longread[data-open='false'] .longread__body::after { height: 3em; }
  .longread[data-open='true'] .longread__body { max-height: 200em; }
  .longread { margin-top: var(--sp-1); }
  .attribution { margin-top: var(--sp-2); padding-top: var(--sp-2); }
  #the-refit .section-title { margin-bottom: var(--sp-1); }
  #the-refit .discover-panel__copy { padding-bottom: var(--sp-2); }

}

/* Small maker credit, quieter than the legal links above it. */
.site-footer__credit {
  margin: 0;
  text-align: center;
}
.site-footer__credit,
.site-footer__credit a {
  font-size: var(--fs-mono-xs, var(--fs-mono-s));
  color: var(--cream-faint, var(--cream-muted));
  opacity: 0.7;
}
.site-footer__credit a { text-decoration: none; }
.site-footer__credit a:hover { color: var(--cream); opacity: 1; }

/* ---------- The Yacht and Private Charter: images arrive on scroll ---------- */
.editorial__media[data-reveal] {
  opacity: 0;
  /* Scaled down rather than up: growing past the final size would push a
     full-bleed phone image wider than the viewport mid-animation. */
  transform: translateY(48px) scale(0.96);
  transition: opacity 1100ms var(--ease), transform 1100ms var(--ease);
}
.editorial__media[data-reveal="in"] {
  opacity: 1;
  transform: none;
}
html.no-js .editorial__media[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .editorial__media[data-reveal],
  .editorial__media[data-reveal="in"] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ---------- Carousel controls beside the photograph ----------
   Only where there is width to spare. On a phone the arrows either side
   squeezed the picture into a letterbox, so there they stay underneath and
   the photograph keeps the full column, the way the Gallery behaves. */
@media (min-width: 769px) {
  .cabin-carousel,
  .amenity-carousel,
  .refit-carousel {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: 'prev frame next' '. count .';
    align-items: center;
    column-gap: var(--sp-3);
    row-gap: var(--sp-2);
  }

  .cabin-carousel__controls,
  .amenity-carousel__controls,
  .refit-carousel__controls { display: contents; }

  .cabin-carousel__track,
  .amenity-carousel__track,
  .refit-carousel__track { grid-area: frame; }

  .cabin-carousel [data-cabin-prev],
  .amenity-carousel [data-amenity-prev],
  .refit-carousel [data-refit-prev] { grid-area: prev; }

  .cabin-carousel [data-cabin-next],
  .amenity-carousel [data-amenity-next],
  .refit-carousel [data-refit-next] { grid-area: next; }

  .cabin-carousel__count,
  .amenity-carousel__count,
  .refit-carousel__count {
    grid-area: count;
    border-top: var(--rule) solid var(--hairline);
    padding-top: var(--sp-2);
  }
}


/* ============================================================
   FACTS STRIP
   One slim band between hairlines. Three items in a single row at
   every width: the figures and labels scale with the viewport, so
   nothing ever stacks, wraps or scrolls sideways at 360px.
   ============================================================ */
.facts {
  background: var(--navy-deep);
  padding-block: var(--sp-6);
}

/* A full-width band from edge to edge: gold hairlines above and below and a
   soft lift, so it floats clear of the photograph above it. */
.facts__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  margin: 0;
  padding: 0 max(var(--gutter), calc((100% - var(--content-max)) / 2));
  list-style: none;
  background: var(--navy);
  border-block: var(--rule) solid var(--hairline-gold);
  box-shadow: var(--band-shadow);
}

@media (min-width: 48.0625rem) {
  .facts { padding-block: var(--sp-8); }
}

.facts__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-4) clamp(0.25rem, 1.5vw, var(--sp-3));
  text-align: center;
}

.facts__item--lead { flex-grow: 1.55; }

.facts__figure {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wdth-display);
  font-weight: var(--wt-display);
  font-size: clamp(1.1rem, 5.2vw, 3rem);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-variant-numeric: tabular-nums;
  color: var(--cream);
  white-space: nowrap;
}

.facts__item--lead .facts__figure {
  font-size: clamp(1.4rem, 6.6vw, 3.75rem);
  color: var(--gold);
}

.facts__label {
  font-family: var(--font-mono);
  font-size: clamp(0.5rem, 2.15vw, var(--fs-mono-s));
  line-height: var(--lh-mono);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--cream-muted);
  white-space: nowrap;
}
@media (min-width: 37.5rem) {
  .facts__label { letter-spacing: var(--tr-mono); }
}

html.js .facts__figure[data-fade],
html.js .facts__figure[data-count] {
  opacity: 0;
  transition: opacity 900ms var(--ease);
}
html.js .facts__figure[data-ready] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html.js .facts__figure[data-fade],
  html.js .facts__figure[data-count] {
    opacity: 1;
    transition: none;
  }
}


/* ============================================================
   HISTORY TIMELINE
   A native scroll-snap carousel of tall portrait cards that loops:
   script clones the set either side and quietly re-centres, so after
   2024 comes 1921 again. Only the active card is in full colour and
   full size; the others are grey, dimmed and a tenth smaller.
   ============================================================ */
.history {
  --history-card: min(76%, 22rem);
  --history-gap: var(--sp-2);
  background: var(--navy-deep);
  padding-block: calc(var(--section-pad-tight) + var(--sp-6)) var(--sp-4);
  overflow: hidden;
}

/* The title is The Yacht's equal: same size, and the same text column as
   The Yacht's copy (a 1.1fr / 0.9fr frame, gutter padding, a measure-wide
   block centred in its column), so both headings share one left edge. */
.history__head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  margin-bottom: var(--sp-6);
}

.history__head-copy {
  display: grid;
  place-items: center;
  padding-inline: var(--gutter);
}

.history__head-inner { width: min(100%, var(--measure)); }

@media (max-width: 768px) {
  .history__head { grid-template-columns: 1fr; }
}

.history__carousel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'track' 'progress';
  max-width: 70rem;
  margin-inline: auto;
}

.history__track {
  grid-area: track;
  display: flex;
  gap: var(--history-gap);
  margin: 0;
  padding: var(--sp-1) 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.history__track::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .history__track { scroll-behavior: smooth; }
}

.history__track.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
  user-select: none;
}

.history__card {
  flex: 0 0 var(--history-card);
  cursor: pointer;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

/* The shrink and the grey live on this inner frame, never on the snap slot:
   the browser snaps to an element's transformed box, so scaling the slot itself
   moved the snap point mid-scroll and the card bounced before it settled. */
.history__frame {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--sp-1);
  padding: var(--sp-3);
  aspect-ratio: 3 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--navy);
  transition: filter var(--dur-focus) ease, transform var(--dur-focus) ease;
}

/* The loop's silent re-centre swaps one card for its twin: no fade for that. */
.history__track.is-jumping .history__frame { transition: none; }

.history__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--scrim-strong) 0%, var(--scrim-mid) 26%, var(--scrim-none) 55%);
  pointer-events: none;
}

html.js .history__card:not([data-active]) .history__frame {
  filter: var(--history-dim);
  transform: scale(0.9);
}

.history__card[data-active] { cursor: auto; }
.history__card picture { display: contents; }

.history__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.history__image--1921 { object-position: 50% 50%; }
.history__image--1926 { object-position: 45% 50%; }
.history__image--2024 { object-position: 42% 50%; }

/* 1945: a split card, the leaders above and the smoking room's leather
   chairs below, divided by a gold hairline. Stacked, not side by side: in a
   tall card each half stays wide enough to hold three seated figures. */
.history__split {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--rule);
  background: var(--hairline-gold);
}

.history__split picture {
  position: relative;
  display: block;
  min-height: 0;
  overflow: hidden;
}

.history__split-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.history__split-image--leaders { object-position: 50% 45%; }
.history__split-image--room { object-position: 50% 80%; }

.history__year,
.history__line {
  position: relative;
  z-index: 1;
  margin: 0;
}

.history__year {
  font-family: var(--font-year);
  font-size: clamp(3rem, 13vw, 4.25rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--tr-body);
  color: var(--cream);
}

.history__line {
  font-size: clamp(0.875rem, 3.6vw, var(--fs-body-s));
  line-height: 1.4;
  color: var(--cream);
  text-wrap: pretty;
}

.history__progress {
  grid-area: progress;
  justify-self: center;
  height: var(--rule);
  margin-top: var(--sp-4);
  width: min(100% - (var(--gutter) * 2), 14rem);
  background: var(--hairline);
}

.history__progress-fill {
  display: block;
  height: 100%;
  width: 25%;
  background: var(--gold);
  transition: width var(--dur-focus) var(--ease);
}

.history__arrow { display: none; }

/* Laptop and up: a smaller row that starts at the left, the active card in
   colour, the next in grey and the third peeking in about halfway. */
@media (min-width: 48.0625rem) {
  /* Desktop: the title sits about 96px higher, closer to The Yacht, and
     further from the cards, so the band of empty navy above it closes up. */
  .history { padding-top: calc(var(--section-pad-tight) + var(--sp-6) - var(--sp-12)); }
  .history__head { margin-bottom: var(--sp-10); }
  .history__carousel { width: min(70rem, 100% - var(--gutter) * 2); }
  .history__track {
    --history-card: min(calc((100% - var(--history-gap) * 2) / 2.5), 60vh * 0.8);
  }
  .history__card { scroll-snap-align: start; }
  .history__frame { aspect-ratio: 4 / 5; }
}

/* Mouse and trackpad: the arrows sit on either side of the row, always
   visible, so it is obvious where to click. Touch screens swipe instead. */
@media (hover: hover) and (pointer: fine) {
  .history__track { cursor: grab; }

  .history__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    inline-size: var(--sp-6);
    block-size: var(--sp-6);
    margin-top: calc(var(--sp-6) / -2 - var(--sp-4) / 2);
    border: var(--rule) solid var(--hairline-gold);
    background: var(--control-ground);
    color: var(--cream);
    cursor: pointer;
    font-family: var(--font-mono);
    transition: border-color var(--dur-hover) ease, color var(--dur-hover) ease;
  }
  .history__arrow--prev { left: var(--sp-1); }
  .history__arrow--next { right: var(--sp-1); }
  .history__arrow:hover { border-color: var(--gold); color: var(--gold); }
}

/* Wide enough: the arrows step out beside the row instead of over it. */
@media (hover: hover) and (pointer: fine) and (min-width: 48.0625rem) {
  .history__carousel {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: 'prev track next' '. progress .';
    align-items: center;
    column-gap: var(--sp-3);
  }
  .history__arrow {
    position: static;
    margin-top: 0;
  }
  .history__arrow--prev { grid-area: prev; }
  .history__arrow--next { grid-area: next; }
}