/* Section 02 "Coastal living for a simpler kind of happier." at 900px high on the 1900 frame (client, 2026-09-24).
   Loads after coastal-living-live.css and only re-times it:
   - the 1659 x 948 plate loses 80 comp px of plain sky/paper at the top and 50 at the bottom (818 rows kept),
     which then fill 1900 x 900, i.e. a 4% horizontal stretch of the photo, nothing else changes in the art;
   - --u becomes the vertical unit (900 / 818 of a comp px), so every size and every top in the old file follows it;
   - --ux is the horizontal unit (1900 / 1659), used for left edges so the live words stay seated on the painted
     rule, button ring and stat icons. */

.ix-slot{aspect-ratio:1900/900}

.coast{
  --ux:calc(100cqw / 1659);
  --u:calc(100cqw * 900 / 1900 / 818);
}

.coast__img{
  inset:auto;
  left:0;
  top:calc(-80 * var(--u));
  width:100%;
  height:calc(948 * var(--u));
}

.coast__kicker{left:calc(111 * var(--ux));top:calc((126.5 - 80) * var(--u));gap:calc(18 * var(--ux))}
.coast__kicker i{width:calc(50 * var(--ux))}
.coast__title{left:calc(148.4 * var(--ux));top:calc((150 - 80) * var(--u))}
.coast__lead{left:calc(148.4 * var(--ux));top:calc((452 - 80) * var(--u))}
.coast__more{left:calc(111 * var(--ux));top:calc((577 - 80) * var(--u));width:calc(243 * var(--ux))}
.coast__more::after{right:calc(30 * var(--ux))}
.coast__stats{top:calc((807.5 - 80) * var(--u))}
.coast__stats li:nth-child(1){left:calc(342 * var(--ux))}
.coast__stats li:nth-child(2){left:calc(654 * var(--ux))}
.coast__stats li:nth-child(3){left:calc(992 * var(--ux))}
.coast__stats li:nth-child(4){left:calc(1303 * var(--ux))}

/* ---------- stats (generated by /root/sandpiper-gap/gen.py) ---------- */
/* Numbers and labels re-fitted to the client comp: Newsreader 500 figures at normal spacing ("234 yd" keeps its space),
   Neue Haas Grotesk labels, the fourth label wrapping to two lines as in the comp. Tops are comp px (minus the 80px crop). */
@font-face{font-family:"CL Grotesk";src:url("../fonts/library/neue-haas-grotesk-text/neue-haas-grotesk-text-400.woff2") format("woff2");font-weight:400;font-display:swap}
.coast__stats{top:calc((808.15 - 80) * var(--u))}
.coast__stats li:nth-child(1){left:calc(343.45 * var(--ux))}
.coast__stats li:nth-child(2){left:calc(652.45 * var(--ux))}
.coast__stats li:nth-child(3){left:calc(983.5 * var(--ux))}
.coast__stats li:nth-child(4){left:calc(1301.05 * var(--ux))}
.coast__stats b{font:500 calc(40.358 * var(--u))/1 "PHA Newsreader",Georgia,serif;letter-spacing:calc(-1.2 * var(--u));font-optical-sizing:auto;color:#0a3257}
.coast__stats small{margin-top:calc((851.75 - 808.15) * var(--u) - 40.358 * var(--u));max-width:none;
  font:400 calc(13.366 * var(--u))/calc(16 * var(--u)) "CL Grotesk","Helvetica Neue",Arial,sans-serif;letter-spacing:calc(0.815 * var(--u));color:#85776c;white-space:nowrap}
.coast__stats li:nth-child(1) small{transform:translateX(calc(2.3 * var(--ux)))}
.coast__stats li:nth-child(2) small{transform:translateX(calc(2.2 * var(--ux)))}
.coast__stats li:nth-child(3) small{transform:translateX(calc(2.8 * var(--ux)))}
.coast__stats li:nth-child(4) small{transform:translateX(calc(6.4 * var(--ux)))}
.coast__stats li:nth-child(4) small{white-space:normal;max-width:calc(232 * var(--ux))}

/* ---------- gap to section 03 ---------- */
/* 150px from this section's last visible pixel (the stat panel's shadow, ~0.0074 x frame above the plate's bottom edge)
   to the first pixel of the "Inside the gate" photo (its canvas top + ~4u). Overrides gate5.css's --pt, which was
   derived for the previous intro. */
@media (min-width:761px){
  .ix-sec{padding-bottom:0}
  .g5 .g5__stage{--pt:calc(151px + 4 * var(--u) - 0.00737 * min(100cqw, var(--frame)))}
}
/* phones: section 03 opens with its kicker 69px into its box */
@media (max-width:760px){.ix-sec{padding-bottom:79px}}

/* ---------- let the stat panel's shadow finish (2026-09-25) ---------- */
/* The slot ends on plate row 898, but the panel's soft shadow (coastal-living-fix plate) only fades out by row ~906,
   so the shadow was cut into a straight line on top of section 03. Show 12 more plate rows below the slot (they end
   in exact page cream), keep the 80 cropped rows above hidden with a clip, and grow the section by those 12 rows. */
.ix-slot{overflow:visible}
.coast__img{clip-path:inset(calc(80 * var(--u)) 0 calc(38 * var(--u)) 0)}
@media (min-width:761px){
  .ix-sec{padding-bottom:calc(min(100vw, 1900px) * 900 / 1900 / 818 * 12)}
}

/* ---------- Henderson paragraph 36px higher at the 1900 frame; button left where it is ---------- */
.coast__lead{top:calc((452 - 80) * var(--u) - 36 * 100cqw / 1900)}