/* Home page content width = 1400px (client, 2026-10-28): every section's side rail becomes
   (frame width - 1400px) / 2, so at 1900 the content runs 250px in from each side, at 1600 100px, and below
   ~1530px a fluid gutter (64px at 1530, 60px at 1440, 40px at 950). Sections whose frame is capped at 1900 measure from the frame edge; the full-bleed
   sections (amenities, beach, footer) measure from the viewport edge, which gives the same content box.
   Phones (<=900px) keep their 24px rails. Loaded last. */
:root{--sp-content:1400px;--sp-gutter:clamp(40px,4.2vw,64px)}
@media(min-width:901px){
  .gulf-hero-live .pha,
  .cc-intro,
  .grv,
  .gsp,
  .bkr{--sp-rail:max(var(--sp-gutter),calc((min(100vw,1900px) - var(--sp-content)) / 2))}
  .gulf-hero-live .pha{--rail:var(--sp-rail)}
  .cc-intro{--cc-rail:var(--sp-rail)}
  .grv{--rail:var(--sp-rail)}
  .gsp{--gsp-rail:var(--sp-rail)}
  .bkr{--bkr-rail:var(--sp-rail)}
  /* full-bleed sections: rail from the viewport edge */
  .gulf-hero-live #resort-amenities{--rail:max(var(--sp-gutter),calc((100vw - var(--sp-content)) / 2))}
  #the-beach.beach19{--beach19-rail:max(var(--sp-gutter),calc((100vw - var(--sp-content)) / 2))}
  .fcs{--rail:max(var(--sp-gutter),calc((min(100vw,1900px) - var(--sp-content)) / 2))} /* 2026-11-11: measured from the 1900px frame; .fcs adds its own centring offset, so a viewport-based rail was counted twice above 1900px */
  #the-beach.beach19 .beach19__frame{max-width:var(--sp-content)}
}
/* attractions is a fixed 1900px composition with its own fluid rails below 1540px; only its wide-screen rail moves */
@media(min-width:1540px){
  .lae{--rail:calc((min(100vw,1900px) - var(--sp-content)) / 2)}
}