/* Local attractions — live HTML recreation of the supplied 1672 × 941 artwork. */
.lae {
  --frame: 1900px;
  --rail: 170px;
  --cream: #faf6ef;
  --blue: #073b57;
  --gold: #9b7954;
  position: relative;
  isolation: isolate;
  min-height: 1070px;
  padding: 150px 0 110px;
  overflow: hidden;
  background: var(--cream);
}

.lae::before,
.lae::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.lae::before {
  inset: -3px;
  background:
    linear-gradient(to bottom, var(--cream) 0, rgba(250,246,239,0) 5.5%, rgba(250,246,239,0) 93.5%, var(--cream) 100%),
    linear-gradient(to right, var(--cream) 0, rgba(250,246,239,0) 2.5%, rgba(250,246,239,0) 97.5%, var(--cream) 100%),
    url("../img/intro-v2/ee-html-background.png") center / cover no-repeat;
}

.lae::after {
  inset: 0;
  background: linear-gradient(to bottom, var(--cream), rgba(250,246,239,0) 36px, rgba(250,246,239,0) calc(100% - 48px), var(--cream));
}

.lae__frame {
  position: relative;
  width: min(100%, var(--frame));
  min-height: 810px;
  margin-inline: auto;
  padding-inline: var(--rail);
}

.lae__intro {
  position: relative;
  z-index: 2;
  width: 470px;
}

.lae__kicker {
  margin: 0 0 22px;
  color: #a18161;
  font: 400 13px/1 "Univers Next", system-ui, sans-serif;
  letter-spacing: .25em;
  text-transform: uppercase;
}

/* heading in the hero's "Classic Resort" type (2026-09-24): Bauer Bodoni lines, Snell Roundhand accent word in sand.
   The map below keeps its old position (the .lae-map top margins below add back the height the heading lost). */
@font-face { font-family: "LAE Bauer Bodoni"; src: url("../fonts/library/bauer-bodoni/bauer-bodoni-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "LAE Snell Roundhand"; src: url("../fonts/library/snell-roundhand/snell-roundhand-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
.lae__title {
  margin: -.16em 0 0;
  color: var(--blue);
  font: 400 64px/1.12 "LAE Bauer Bodoni", Georgia, serif;
  letter-spacing: -.01em;
}

.lae__title-line { display: block; white-space: nowrap; }

.lae__title em {
  display: inline-block;
  margin: 0 .05em 0 .03em;
  color: #917658;
  font: 400 1.6em/.6 "LAE Snell Roundhand", Georgia, serif;
  font-style: normal;
  letter-spacing: 0;
  vertical-align: -.02em;
  transform: rotate(-1.5deg);
  -webkit-text-stroke: .2px currentColor;
}

.lae__sub {
  margin: 18px 0 0;
  color: #5c6b70;
  font: 400 16px/1.55 "Univers Next", system-ui, sans-serif;
  letter-spacing: .01em;
}

.lae-map {
  position: relative;
  width: 506px;
  height: 450px;
  margin: 29px 0 0 -40px;   /* 22 + 7: the Bodoni heading is 7px shorter */
}

.lae-map__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  opacity: .9;
  -webkit-mask-image: radial-gradient(ellipse 54% 48% at 50% 48%, #000 52%, rgba(0,0,0,.88) 67%, rgba(0,0,0,.34) 84%, transparent 100%);
  mask-image: radial-gradient(ellipse 54% 48% at 50% 48%, #000 52%, rgba(0,0,0,.88) 67%, rgba(0,0,0,.34) 84%, transparent 100%);
}

.lae-map__routes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.lae-map__routes path {
  fill: none;
  stroke: rgba(172,138,91,.72);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lae-map__star {
  position: absolute;
  left: 56.5%;
  top: 36%;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
  background: #a98452;
  clip-path: polygon(50% 0,60% 38%,100% 50%,60% 62%,50% 100%,40% 62%,0 50%,40% 38%);
  filter: drop-shadow(0 2px 2px rgba(75,64,47,.18));
}

.lae-map__label {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #0b5365;
  font: 400 14px/1.15 "Univers Next", system-ui, sans-serif;
  white-space: nowrap;
  text-align: left;
}

.lae-map__label::before {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border: 3px solid #0c82b8;
  border-radius: 50%;
  background: var(--cream);
}

.lae-map__label--ferry { left: 43.5%; top: 2%; }
.lae-map__label--strand { left: 16%; top: 29%; }
.lae-map__label--bishop { left: 19%; top: 39%; }
.lae-map__label--sandpiper { left: 61%; top: 27%; }
.lae-map__label--stewart { left: 55.5%; top: 41%; }
.lae-map__label--pier { left: 32%; top: 53%; }
.lae-map__label--sandpiper::before { border-color: #067a77; }

.lae-map__label--sandpiper span::after {
  content: "201 Seawall Blvd";
  display: block;
  margin-top: 3px;
  color: #647076;
  font-size: 11px;
  font-style: italic;
}

.lae-map__gulf {
  position: absolute;
  left: 54%;
  top: 69%;
  margin: 0;
  color: rgba(54,71,72,.8);
  font: 400 27px/.92 "Castile-Mastah", "Brush Script MT", cursive;
  text-align: center;
  transform: rotate(-3deg);
}

.lae-map__gulf span { display: block; font-size: .75em; }

.lae-map__compass {
  position: absolute;
  right: 8.5%;
  bottom: 17%;
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border: 1px solid rgba(33,72,76,.65);
  border-radius: 50%;
  color: #36575e;
}

.lae-map__compass::before {
  content: "";
  width: 14px;
  height: 30px;
  background: linear-gradient(to right, #b3915f 0 50%, #f3ece0 50%);
  clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
}

.lae-map__compass::after {
  content: "N";
  position: absolute;
  top: -18px;
  font: 400 11px/1 "Univers Next", system-ui, sans-serif;
}

.lae-map__label:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.lae__showcase {
  position: absolute;
  z-index: 3;
  top: 40px;
  left: 670px;
  right: var(--rail);
  height: 690px;
}

.lae__cards {
  position: relative;
  height: 560px;
}

.lae-card {
  position: absolute;
  top: 55px;
  display: none;
  flex-direction: column;
  width: 284px;
  height: 474px;
  overflow: hidden;
  border: 1px solid rgba(7,59,87,.07);
  border-radius: 17px;
  background: rgba(255,253,248,.98);
  box-shadow: 0 19px 46px rgba(28,53,59,.16), 0 3px 10px rgba(28,53,59,.07);
  color: var(--blue);
  text-decoration: none;
  transform: translateZ(0);
  transition: left .55s cubic-bezier(.22,1,.36,1), width .55s cubic-bezier(.22,1,.36,1), height .55s cubic-bezier(.22,1,.36,1), top .55s cubic-bezier(.22,1,.36,1), opacity .25s ease;
}

.lae-card.is-prev,
.lae-card.is-active,
.lae-card.is-next { display: flex; }

.lae-card.is-prev { left: 20px; }
.lae-card.is-active { left: 329px; top: 4px; width: 343px; height: 555px; z-index: 2; }
.lae-card.is-next { left: 697px; width: 290px; height: 478px; }

.lae-card__photo {
  display: block;
  flex: 0 0 338px;
  overflow: hidden;
  background: #d9e6e4;
}

.lae-card.is-active .lae-card__photo { flex-basis: 414px; }
.lae-card.is-next .lae-card__photo { flex-basis: 355px; }

.lae-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}

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

.lae-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
  padding: 18px 20px 17px;
  background: rgba(255,253,248,.99);
}

.lae-card.is-active .lae-card__body { padding: 20px 23px 18px; }

.lae-card__body h3 {
  margin: 0;
  color: var(--blue);
  font: 450 21px/1.08 "Gate Newsreader", Georgia, serif;
  letter-spacing: -.015em;
}

.lae-card.is-active .lae-card__body h3 { font-size: 24px; }

.lae-card__body small {
  display: block;
  margin-top: 5px;
  color: #9a7a5b;
  font: 400 12px/1.2 "Univers Next", system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lae-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #627179;
  font: 400 13px/1 "Univers Next", system-ui, sans-serif;
}

.lae-card__meta svg { width: 18px; height: 18px; fill: none; stroke: #8e775e; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.lae__arrow {
  position: absolute;
  z-index: 5;
  top: 257px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(7,59,87,.22);
  border-radius: 50%;
  background: rgba(250,246,239,.9);
  color: var(--blue);
  box-shadow: 0 8px 26px rgba(42,65,68,.08);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.lae__arrow--prev { left: -48px; }
.lae__arrow--next { right: -14px; }
.lae__arrow svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lae__arrow:hover { background: var(--blue); color: #fff; transform: scale(1.04); }
.lae__arrow:focus-visible { outline: 3px solid #a07c57; outline-offset: 3px; }

.lae__dots {
  position: absolute;
  top: 595px;
  left: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transform: translateX(-50%);
}

.lae__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b9c8c7;
  transition: width .25s ease, border-radius .25s ease, background .25s ease;
}

.lae__dot[aria-selected="true"] { width: 27px; border-radius: 999px; background: #0b7180; }
.lae__dot:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.lae__all {
  position: absolute;
  top: 640px;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 274px;
  height: 61px;
  padding: 0 9px 0 27px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font: 400 17px/1 "Gate Newsreader", Georgia, serif;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(7,59,87,.14);
  transition: transform .2s ease, background .2s ease;
}

.lae__all span {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
}

.lae__all svg { width: 20px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lae__all:hover { background: #0b506c; transform: translateY(-2px); }
.lae__all:focus-visible { outline: 3px solid #a07c57; outline-offset: 4px; }

.lae ::selection { color: #fff; background: rgba(7,59,87,.86); }

@media (max-width: 1540px) {
  .lae { min-height: 1010px; }
  .lae__showcase {
    left: 570px;
    transform: scale(.88);
    transform-origin: left top;
    width: 1060px;
    right: auto;
  }
}

@media (max-width: 1250px) {
  .lae { --rail: 80px; min-height: 1580px; padding-bottom: 120px; }
  .lae__frame { min-height: 1200px; }
  .lae__intro { width: 100%; }
  .lae__title { font-size: 60px; }
  .lae-map { margin-top: 19px; }
  .lae__showcase {
    top: 690px;
    left: var(--rail);
    right: var(--rail);
    width: 1060px;
    transform: scale(.9);
  }
}

@media (max-width: 1120px) {
  .lae__showcase { transform: scale(.8); }
}

@media (max-width: 1000px) {
  .lae__showcase { transform: scale(.7); }
}

@media (max-width: 880px) {
  .lae__showcase { transform: scale(.6); }
}

@media (min-width: 761px) and (max-width: 800px) {
  .lae__showcase { transform: scale(.52); }
}

@media (max-width: 760px) {
  .lae {
    --rail: 24px;
    min-height: auto;
    padding: 150px 0 100px;
  }

  .lae::before {
    background:
      linear-gradient(to bottom, var(--cream) 0, rgba(250,246,239,.06) 8%, rgba(250,246,239,.06) 91%, var(--cream) 100%),
      url("../img/intro-v2/ee-html-background.png") 32% center / auto 100% no-repeat;
    opacity: .84;
  }

  .lae__frame { min-height: 0; }
  .lae__intro { width: 100%; }
  .lae__kicker { margin-bottom: 18px; font-size: 12px; }
  .lae__title { font-size: clamp(40px, 12.2vw, 56px); line-height: 1.12; }
  .lae__title-line { white-space: normal; }
  .lae__sub { margin-top: 16px; font-size: 15px; }

  .lae-map {
    width: min(118%, 506px);
    height: auto;
    aspect-ratio: 506 / 450;
    margin: clamp(34px, calc(54px - 4.35vw), 40px) 0 0 -9%;   /* 22 + the 12..15px the heading lost */
  }

  .lae__showcase {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    height: 650px;
    margin-top: 18px;
    transform: none;
  }

  .lae__cards { height: 510px; }
  .lae-card.is-prev,
  .lae-card.is-next { display: none; }
  .lae-card.is-active {
    top: 0;
    left: 50%;
    width: min(100%, 343px);
    height: 500px;
    transform: translateX(-50%);
  }
  .lae-card.is-active .lae-card__photo { flex-basis: 360px; }
  .lae-card.is-active .lae-card__body { padding: 20px 22px 18px; }
  .lae__arrow { top: 226px; width: 44px; height: 44px; background: rgba(250,246,239,.96); }
  .lae__arrow--prev { left: -12px; }
  .lae__arrow--next { right: -12px; }
  .lae__dots { top: 532px; left: 50%; }
  .lae__all { position: absolute; top: 588px; right: 0; width: 250px; }
}

@media (prefers-reduced-motion: reduce) {
  .lae-card,
  .lae-card__photo img,
  .lae__arrow,
  .lae__dot,
  .lae__all { transition: none; }
}