/* Section 04 "The island, from the east end." fixes (2026-09-25). Loads after section-transition-polish.css.
   1. Slider sits 60px lower on the side-by-side layout (>1250) so the cards clear the heading's first line;
      "All attractions" is moved back up 60px inside it, so it stays exactly where it was on the page.
   2. Cards ~8% shorter (the photo gives up the height; the text block is unchanged); arrows + dots follow the cards.
   3. The top-right watercolour splash is its own layer now (img/east-end-fix/splash.webp, lifted off the background,
      whose copy img/east-end-fix/bg.webp has it painted out) and sits 7% of the section lower, with a soft
      watercolour top edge where the old artwork was cut by the image's top row. Built by /root/sandpiper-lae-fix/splash.py. */

.lae::before{background-image:url("../img/east-end-fix/bg.webp")}

.lae::after{
  display:none;
}

@media (min-width:761px){
  .lae-card{height:436px}
  .lae-card.is-active{height:510px}
  .lae-card.is-next{height:440px}
  .lae-card__photo{flex-basis:300px}
  .lae-card.is-active .lae-card__photo{flex-basis:369px}
  .lae-card.is-next .lae-card__photo{flex-basis:317px}
  .lae__arrow{top:238px}
  .lae__dots{top:550px}
}

@media (min-width:1251px){
  .lae__showcase{top:100px}
  .lae__all{top:580px}
}
/* 1251..1540 the showcase is scale(.88): the 60px layout shift is 60 page px but the inner lift only 52.8, so lift 60/.88 */
@media (min-width:1251px) and (max-width:1540px){
  .lae__all{top:calc(640px - 60px / .88)}
}
/* ee-bishop.webp (cut from the comp) carries an 8px sliver of the comp's arrow on its left edge. The taller photo box used to
   crop it away (height-bound cover); the shorter one is width-bound and shows it, so overscan that one photo 12px a side. */
.lae-card__photo img[src*="ee-bishop"]{width:calc(100% + 24px);max-width:none;margin-left:-12px}
/* "Beach days, historic streets / and endless discovery." - client spec (Newsreader 500 24/1.35, -.012em, #0b4b69,
   max 560, margin 30 0 0 2), the same as the coastal-living lead. Full size at >=1900; below that it follows the
   heading's frame scale (24/1900 of the viewport) with a 17px floor for phones. The map below stays in flow, so it
   keeps its gap under the (now taller) subtitle. */
.lae__sub{
  --sub-u:clamp(.7083px, min(100vw, 1900px) / 1900, 1px);
  margin:calc(30 * var(--sub-u)) 0 0 calc(2 * var(--sub-u));
  max-width:calc(560 * var(--sub-u));
  color:#0b4b69;
  font:500 calc(24 * var(--sub-u))/1.35 "CSF News",Georgia,serif;
  letter-spacing:-.012em;
}
/* "All attractions": exact button treatment from the preceding "Explore the resort" CTA. */
.lae__all{
  justify-content:center;
  width:278.3px;
  height:61.6px;
  padding:0 44px;
  text-align:center;
  box-sizing:border-box;
  background:#fcf8f0;
  border:1.485px solid #dcc6ad;
  border-radius:999px;
  box-shadow:inset 0 1.1px 0 rgba(255,255,255,.75),0 2.2px 7.7px rgba(150,112,72,.12);
  color:#0a2f55;
  font:400 24.6px/1 "CSF News",Georgia,serif;
  letter-spacing:-.66px;
  transition:background-color .2s ease;
}
.lae__all span{
  position:absolute;
  right:33.2px;
  top:50%;
  width:8.8px;
  height:15.4px;
  border-radius:0;
  background:currentColor;
  transform:translateY(-50%);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.lae__all span svg{display:none}
.lae__all:hover{background:#f6efe3;transform:none}
.lae__all:focus-visible{outline:2px solid #0a2f55;outline-offset:4px}

/* Keep the slider's next control on the same right edge as the CTA below. */
.lae__arrow--next{right:0}

@media (max-width:760px){
  .lae__all{
    width:auto;
    height:56px;
    padding:0 32px;
    font-size:19px;
  }
  .lae__all span{right:24px;width:8px;height:14px}
}