:root {
    --bmk-page: min(1720px, 94vw);
    --page: min(1720px, 94vw);
    --shell: min(1720px, 94vw);
    --bmk-reading: 760px
}

.page-shell,
.bmk-page-shell {
    width: var(--bmk-page);
    margin-inline: auto
}

@media (min-width:1600px) {

    .page-shell,
    .bmk-page-shell {
        width: min(1720px, 94vw)
    }
}

@media (max-width:760px) {
    :root {
        --bmk-page: calc(100vw - 48px);
        --page: calc(100vw - 48px);
        --shell: calc(100vw - 48px)
    }
}

/* =========================================================
   GLOBAL MOBILE HERO ALIGNMENT
========================================================= */

@media (max-width: 620px) {

  /* Shared hero containers */
  .hero,
  .destination-hero,
  .services-hero,
  .planning-hero,
  .about-hero,
  .journal-hero,
  .connect-hero {
    position: relative;

    min-height: 620px;
    height: 620px;

    overflow: hidden;
  }


  /* Shared hero photography */
  .hero img,
  .destination-hero-image,
  .services-hero img,
  .planning-hero img,
  .about-hero img,
  .journal-hero img,
  .connect-hero img {
    width: 100%;
    height: 100%;

    object-fit: cover;
  }


  /* Shared copy anchor */
  .hero-copy,
  .destination-hero-copy,
  .services-hero__copy,
  .planning-hero-copy,
  .about-hero-copy,
  .journal-hero-copy,
  .connect-hero-copy {
    position: absolute;

    left: 24px;
    right: 24px;

    top: 118px;
    bottom: auto;

    width: auto;
    max-width: 520px;

    margin: 0;
    padding: 0;

    transform: none;
  }


  /* Eyebrow alignment */
  .hero-copy .eyebrow,
  .destination-hero-copy .eyebrow,
  .services-hero__copy .eyebrow,
  .planning-hero-copy .eyebrow,
  .about-hero-copy .eyebrow,
  .journal-hero-copy .eyebrow,
  .connect-hero-copy .eyebrow {
    margin-top: 0;
  }
}
/* =========================================================
   GLOBAL MOBILE HERO ALIGNMENT
   Shared vertical rhythm across all BMK page heroes
========================================================= */

@media (max-width: 760px) {

  /* -------------------------------------------------------
     HERO CONTAINERS
  ------------------------------------------------------- */

  body[data-page="home"] .hero,
  body[data-page="planning"] .planning-hero,
  body[data-page="destinations"] .destination-hero,
  body[data-page="travel-services"] .services-hero,
  body[data-page="journal"] .journal-hero,
  body[data-page="about"] .about-hero,
  body[data-page="connect"] .connect-hero {
    position: relative;
    height: 620px;
    min-height: 620px;
    overflow: hidden;
  }


  /* -------------------------------------------------------
     HERO IMAGES
  ------------------------------------------------------- */

  body[data-page="home"] .hero-image,
  body[data-page="planning"] .planning-hero img,
  body[data-page="destinations"] .destination-hero-image,
  body[data-page="travel-services"] .services-hero img,
  body[data-page="journal"] .journal-hero img,
  body[data-page="about"] .about-hero > img,
  body[data-page="connect"] .connect-hero > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }


  /* -------------------------------------------------------
     SHARED COPY ANCHOR
  ------------------------------------------------------- */

  body[data-page="home"] .hero-copy,
  body[data-page="planning"] .planning-hero__copy,
  body[data-page="destinations"] .destination-hero-copy,
  body[data-page="travel-services"] .services-hero__copy,
  body[data-page="journal"] .journal-hero-copy,
  body[data-page="about"] .about-hero-copy,
  body[data-page="connect"] .connect-hero .hero-copy {
    position: absolute;

    top: 132px;
    left: 24px;
    right: 24px;
    bottom: auto;

    width: auto;
    max-width: 620px;

    margin: 0;
    padding: 0;

    transform: none;
  }


  /* -------------------------------------------------------
     EYEBROW
  ------------------------------------------------------- */

  body[data-page="home"] .hero-copy .eyebrow,
  body[data-page="planning"] .planning-hero__copy .eyebrow,
  body[data-page="destinations"] .destination-hero-copy .eyebrow,
  body[data-page="travel-services"] .services-hero__copy .eyebrow,
  body[data-page="journal"] .journal-hero-copy .eyebrow,
  body[data-page="about"] .about-hero-copy .eyebrow,
  body[data-page="connect"] .connect-hero .hero-copy .eyebrow {
    margin-top: 0;
    margin-bottom: 14px;
  }


  /* -------------------------------------------------------
     HEADLINE SCALE
     Same family, but not forced to identical line count
  ------------------------------------------------------- */

  body[data-page="home"] .hero h1,
  body[data-page="planning"] .planning-hero h1,
  body[data-page="destinations"] .destination-hero h1,
  body[data-page="travel-services"] .services-hero h1,
  body[data-page="journal"] .journal-hero h1,
  body[data-page="about"] .about-hero h1,
  body[data-page="connect"] .connect-hero h1 {
    margin-top: 0;
    font-size: clamp(46px, 12vw, 58px);
    line-height: .96;
  }
}
/* =========================================================
   GLOBAL TABLET HERO ALIGNMENT
   Keeps all BMK page heroes on one shared tablet rhythm
========================================================= */

@media (min-width: 761px) and (max-width: 1199px) {

  body[data-page="home"] .hero,
  body[data-page="planning"] .planning-hero,
  body[data-page="destinations"] .destination-hero,
  body[data-page="travel-services"] .services-hero,
  body[data-page="journal"] .journal-hero,
  body[data-page="about"] .about-hero,
  body[data-page="connect"] .connect-hero {
    position: relative;

    height: 700px;
    min-height: 700px;

    overflow: hidden;
  }

  body[data-page="home"] .hero-copy,
  body[data-page="planning"] .planning-hero__copy,
  body[data-page="destinations"] .destination-hero-copy,
  body[data-page="travel-services"] .services-hero__copy,
  body[data-page="journal"] .journal-hero-copy,
  body[data-page="about"] .about-hero-copy,
  body[data-page="connect"] .connect-hero .hero-copy {
    position: absolute;

    top: 150px;
    left: 6vw;
    right: 6vw;
    bottom: auto;

    width: auto;
    max-width: 760px;

    margin: 0;
    padding: 0;

    transform: none;
  }

  body[data-page="home"] .hero-copy .eyebrow,
  body[data-page="planning"] .planning-hero__copy .eyebrow,
  body[data-page="destinations"] .destination-hero-copy .eyebrow,
  body[data-page="travel-services"] .services-hero__copy .eyebrow,
  body[data-page="journal"] .journal-hero-copy .eyebrow,
  body[data-page="about"] .about-hero-copy .eyebrow,
  body[data-page="connect"] .connect-hero .hero-copy .eyebrow {
    margin-top: 0;
    margin-bottom: 16px;
  }

  body[data-page="home"] .hero h1,
  body[data-page="planning"] .planning-hero h1,
  body[data-page="destinations"] .destination-hero h1,
  body[data-page="travel-services"] .services-hero h1,
  body[data-page="journal"] .journal-hero h1,
  body[data-page="about"] .about-hero h1,
  body[data-page="connect"] .connect-hero h1 {
    margin-top: 0;

    font-size: clamp(54px, 7vw, 72px);
    line-height: .96;
  }
}