/* The opening screen includes the header and adapts to the available viewport.
   Kept separate so the inner pages retain their own layouts. */
@media screen {
  .page-index {
    --home-viewport: 100vh;
    --home-gap: clamp(12px, 1.4vw, 24px);
    --home-topline: 36px;
  }
  @supports (height: 100dvh) {
    .page-index {--home-viewport: 100dvh}
  }
  .page-index .topline {
    height: var(--home-topline);
    min-height: 0;
    padding-block: 0;
  }
  .page-index main {padding-top: var(--home-gap)}
  .page-index .home-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    grid-template-rows: minmax(0, 1fr);
    height: calc(var(--home-viewport) - var(--header-height) - var(--home-topline) - 2 * var(--home-gap));
    min-height: 0;
    max-width: none;
    width: auto;
    padding: 0;
    margin: 0 var(--home-gap) var(--home-gap);
    isolation: isolate;
  }
  .page-index .home-hero .hero-content {
    align-self: center;
    justify-self: center;
    min-width: 0;
    width: 100%;
    max-width: 1000px;
    margin: 0;
    padding: clamp(24px, 4vh, 70px) clamp(24px, 3.5vw, 100px);
  }
  .page-index .home-hero .eyebrow {
    margin-bottom: clamp(14px, 2.5vh, 32px);
    font-size: clamp(11px, .85vw, 14px);
  }
  .page-index .home-hero h1 {
    font-size: clamp(36px, min(4.8vw, 8vh), 128px);
    line-height: 1.1;
    letter-spacing: -.045em;
  }
  .page-index .home-hero .hero-description {
    max-width: 38ch;
    margin-block: clamp(16px, 2.8vh, 36px);
    font-size: clamp(16px, 1.25vw, 20px);
    line-height: 1.65;
  }
  .page-index .home-hero .hero-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    max-width: none;
  }
  .page-index .home-hero .hero-actions .button {
    min-width: 0;
    min-height: 52px;
    padding: 13px 22px;
    font-size: 15px;
    gap: 18px;
  }
  .page-index .home-hero .hero-actions .text-link {
    min-height: 44px;
    font-size: 15px;
    gap: 14px;
  }
  .page-index .hero-scene {
    min-height: 0;
    height: auto;
    margin: 0;
    border-radius: 0;
  }
  .page-index .hero-scene .hero-image {object-position: center}
  .page-index .hero-scene .hero-bottom {bottom: 24px}
  .page-index .hero-scene .hero-postcard {bottom: 112px}

  /* Portrait tablets leave a generous photograph below the introduction. */
  @media (min-width: 621px) and (max-width: 1024px) and (orientation: portrait) {
    .page-index .home-hero {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto minmax(0, 1fr);
    }
    .page-index .home-hero .hero-content {padding: 26px 34px}
    .page-index .home-hero .eyebrow {margin-bottom: 14px}
    .page-index .home-hero h1 {font-size: clamp(38px, 5.3vw, 56px)}
    .page-index .home-hero .hero-description {max-width: 60ch;margin-block: 16px;font-size: 17px}
    .page-index .hero-scene {margin: 0 12px 12px;border-radius: 16px}
    .page-index .hero-scene .slide-caption {display: block;max-width: 55%}
  }

  /* In shorter portrait tablet windows, share one controls row so the video
     card cannot extend beyond the top of the photograph. */
  @media (min-width: 621px) and (max-width: 1024px) and (orientation: portrait) and (max-height: 800px) {
    .page-index .hero-scene .hero-postcard {
      inset: auto auto 18px 18px;
      width: auto;
      max-width: calc(100% - 200px);
      min-height: 44px;
      padding: 10px 14px;
      gap: 10px;
    }
    .page-index .hero-scene .postcard-photo,
    .page-index .hero-scene .postcard-copy > span {display: none}
    .page-index .hero-scene .postcard-copy strong {font-size: 13px;line-height: 1.4}
    .page-index .hero-scene .postcard-arrow {display: block;margin: 0;font-size: 18px}
    .page-index .hero-scene .hero-bottom {
      inset: auto 18px 18px auto;
      width: auto;
      border: 0;
      padding: 0;
    }
    .page-index .hero-scene .hero-controls {width: auto}
    .page-index .hero-scene .slide-caption {display: none}
  }

  /* A single image-backed composition keeps phone and short-screen openings
     complete. The last row is reserved for video and photo controls. */
  @media (max-width: 620px), (max-height: 500px), (min-width: 621px) and (max-width: 1024px) and (max-height: 650px) {
    .page-index {--home-gap: 8px;--home-topline: 34px}
    .page-index .home-hero {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr) 76px;
      border: 0;
      border-radius: 18px;
      color: #fffdf5;
      background: #193c31;
    }
    .page-index .home-hero .hero-content {
      grid-column: 1;
      grid-row: 1;
      position: relative;
      z-index: 1;
      padding: 22px clamp(20px, 5.5vw, 32px);
      max-width: 760px;
    }
    .page-index .home-hero .eyebrow {
      color: #fffdf5;
      font-size: 10px;
      letter-spacing: .1em;
      margin-bottom: 20px;
    }
    .page-index .home-hero .eyebrow::before {background: #d9bc83}
    .page-index .home-hero h1 {
      font-size: clamp(34px, min(9.6vw, 7.3vh), 58px);
      line-height: 1.12;
      color: #fffdf5;
      letter-spacing: -.04em;
    }
    .page-index .home-hero h1 em {color: #ead4a7}
    .page-index .home-hero .hero-description {
      max-width: 40ch;
      color: #fffdf5;
      font-size: 16px;
      line-height: 1.6;
      margin-block: 20px;
    }
    .page-index .home-hero .hero-actions {gap: 12px 20px}
    .page-index .home-hero .hero-actions .button {
      background: #faf3e1;
      color: #203c30;
      border-color: #faf3e1;
    }
    .page-index .home-hero .hero-actions .button:hover {background: #fffdf5}
    .page-index .home-hero .hero-actions .text-link {
      color: #fffdf5;
      border-color: #ffffff70;
      font-size: 14px;
    }
    .page-index .hero-scene {
      position: absolute;
      inset: 0;
      z-index: 0;
      margin: 0;
      border-radius: inherit;
    }
    .page-index .hero-scene .hero-shade {
      /* Keep the green tint while letting more of the photographs show through. */
      background: linear-gradient(90deg, rgba(16, 47, 41, .58), rgba(16, 47, 41, .3)), linear-gradient(0deg, rgba(11, 35, 31, .58), rgba(16, 47, 41, .07) 65%);
    }
    .page-index .home-hero .eyebrow,
    .page-index .home-hero h1,
    .page-index .home-hero .hero-description,
    .page-index .home-hero .hero-actions .text-link {
      text-shadow: 0 1px 3px rgba(6, 24, 18, .75);
    }
    .page-index .hero-scene .hero-postcard {
      display: flex;
      inset: auto auto 16px 16px;
      width: auto;
      min-height: 44px;
      max-width: calc(100% - 148px);
      padding: 9px 12px;
      gap: 8px;
      border-radius: 9px;
    }
    .page-index .hero-scene .postcard-photo,
    .page-index .hero-scene .postcard-copy > span {display: none}
    .page-index .hero-scene .postcard-copy strong {font-size: 12px;line-height: 1.4;white-space: nowrap}
    .page-index .hero-scene .postcard-arrow {display: block;font-size: 18px;margin: 0}
    .page-index .hero-scene .hero-bottom {
      inset: auto 16px 16px auto;
      width: auto;
      border: 0;
      padding: 0;
      margin: 0;
    }
    .page-index .hero-scene .hero-controls {width: auto;gap: 0}
    .page-index .hero-scene .slide-caption {display: none}
    .page-index .hero-scene .hero-controls > div {gap: 2px}
    .page-index .hero-scene .slide-dot {min-width: 32px;width: 32px;min-height: 44px;padding-inline: 5px}
  }

  @media (max-height: 700px) {
    .page-index {--home-topline: 0px}
    .page-index .topline {display: none}
  }
  @media (max-height: 600px) {
    .page-index {--header-height: 64px}
  }
  @media (max-width: 620px) and (max-height: 650px) {
    .page-index .home-hero .hero-content {padding-block: 14px}
    .page-index .home-hero .eyebrow {margin-bottom: 12px}
    .page-index .home-hero .hero-description {margin-block: 14px;line-height: 1.5}
    .page-index .home-hero .hero-actions {gap: 6px}
  }
  @media (max-width: 620px) and (max-height: 570px) {
    .page-index .home-hero .eyebrow {display: none}
    /* Booking stays visible in the header; avoid duplicating it in short views. */
    .page-index .home-hero .hero-actions .button {display: none}
  }
  @media (max-height: 500px) and (orientation: landscape), (min-width: 621px) and (max-width: 1024px) and (max-height: 650px) {
    .page-index .home-hero {grid-template-rows: minmax(0, 1fr) 64px}
    .page-index .home-hero .hero-content {max-width: 1000px;padding: 12px 28px}
    .page-index .home-hero .eyebrow {display: none}
    .page-index .home-hero h1 {font-size: clamp(26px, 4.5vw, 40px)}
    .page-index .home-hero h1 br {display: none}
    .page-index .home-hero .hero-description {max-width: 70ch;margin-block: 10px;font-size: 15px;line-height: 1.45}
    .page-index .home-hero .hero-actions .button {display: none}
    .page-index .home-hero .hero-actions .text-link {min-height: 44px}
    .page-index .hero-scene .hero-postcard,
    .page-index .hero-scene .hero-bottom {bottom: 10px}
  }
  @media (max-height: 300px) and (orientation: landscape), (max-width: 620px) and (max-height: 350px) {
    .page-index .home-hero {grid-template-rows: minmax(0, 1fr) 56px}
    .page-index .home-hero .hero-content {padding: 8px 20px}
    .page-index .home-hero h1 {font-size: 24px}
    .page-index .home-hero h1 br {display: none}
    .page-index .home-hero .hero-description {font-size: 14px;margin-block: 6px;line-height: 1.4}
    .page-index .home-hero .hero-actions {display: none}
    .page-index .hero-scene .hero-postcard,
    .page-index .hero-scene .hero-bottom {bottom: 6px}
  }
}