/* Aerial hero (.pha) polish, loaded after park-here-aerial-live.css.
   1) "Menu" as a frosted glass pill so it reads over the aerial photo (pairs with the navy Book Your Stay pill).
   2) Copy block spacing: the lines were touching (eyebrow 13px off the title, "Beach There." overlapping
      "Park Here." by 9px and grazing the lead). Gaps are now ~26 / 14 / 30px ink to ink, the script ends
      level with the title, and a soft cream glow (no edge) keeps the text clear of the photo. */

.pha__menu{
  position:relative;
  gap:14px;
  min-width:0;
  padding:0 26px 0 22px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(252,249,243,.9),rgba(246,240,229,.82));
  color:var(--navy);
  cursor:pointer;
  box-shadow:
    0 12px 30px -8px rgba(6,34,48,.38),     /* the lift off the photo */
    0 2px 6px rgba(6,34,48,.12),
    inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
          backdrop-filter:blur(14px) saturate(1.25);
  transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.pha__menu-lines{width:26px;gap:6px}
.pha__menu-label{letter-spacing:.01em}
.pha__menu:hover{
  background:linear-gradient(180deg,#fffdf8,#f8f2e7);
  transform:translateY(-2px);
  box-shadow:0 16px 34px -8px rgba(6,34,48,.42),0 2px 6px rgba(6,34,48,.12),inset 0 1px 0 #fff;
}
.pha__menu:focus-visible{outline:3px solid #0f6f86;outline-offset:4px}

@media (max-width:1450px){
  .pha__menu{padding:0 22px 0 19px}
}

/* phones/tablets: the label is hidden, so the button becomes a glass circle beside the Book button */
@media (max-width:900px){
  .pha__menu{
    width:48px;
    min-width:48px;
    height:48px;
    padding:0;
    justify-content:center;
  }
  .pha__menu-lines{width:22px;gap:5px}
}

@media (prefers-reduced-motion:reduce){.pha__menu{transition:none}}

/* ---------- copy spacing ---------- */
.pha__eyebrow{margin-bottom:31px}
.pha__title-script{margin-top:34px;font-size:86px}
.pha__lead{margin-top:60px}
@media (max-width:1450px){
  .pha__title-script{font-size:74px;margin-top:30px}
  .pha__lead{margin-top:56px}
}
@media (max-width:900px){
  .pha__eyebrow{margin-bottom:20px}
  .pha__title-script{margin:22px 0 0 0;font-size:clamp(48px,13.6vw,64px)}
  .pha__lead{margin-top:40px}
}
@media (min-width:901px){
  .pha__copy::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:-90px -190px -90px -150px;
    pointer-events:none;
    background:radial-gradient(closest-side, rgba(250,247,240,.8) 0%, rgba(250,247,240,.62) 45%, rgba(250,247,240,.26) 75%, rgba(250,247,240,0) 100%);
  }
}

/* ---------- 3) headline type: "Classic Resort" (client pick 2026-09-24, option 1 of /hero-font-options/) ----------
   "Park Here." Bauer Bodoni, "Beach There." Snell Roundhand in sand. Sized so "Park Here." keeps the old 502px ink width at
   1900 and the script ends level with it; ink gaps ~26 / 14 / 30px. Values from /root/sandpiper-hero-fonts/params.json (f1). */
@font-face{font-family:"PHA Bauer Bodoni";src:url("../fonts/library/bauer-bodoni/bauer-bodoni-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"PHA Snell Roundhand";src:url("../fonts/library/snell-roundhand/snell-roundhand-400.woff2") format("woff2");font-weight:400;font-display:swap}
.pha{--hm:112.5;--hs:106.9}
.pha .pha__title-main{
  margin-top:-.143em;
  font-family:"PHA Bauer Bodoni",Georgia,serif;
  font-weight:400;
  font-size:calc(var(--hm) * 1px);
  line-height:.9;
  letter-spacing:-.01em;
}
.pha .pha__title-script{
  margin:.156em 0 0 -.02em;
  color:#917658;
  font-family:"PHA Snell Roundhand",Georgia,serif;
  font-size:calc(var(--hs) * 1px);
  line-height:.9;
  letter-spacing:0;
  transform:rotate(-1.5deg);
  -webkit-text-stroke:.2px currentColor;
}
.pha .pha__lead{margin-top:calc(-.018 * var(--hs) * 1px)}
@media (max-width:1450px){
  .pha .pha__title-main{font-size:calc(var(--hm) * .855px)}
  .pha .pha__title-script{font-size:calc(var(--hs) * .855px)}
  .pha .pha__lead{margin-top:calc(-.018 * var(--hs) * .855px)}
}
@media (max-width:900px){
  .pha .pha__title-main{font-size:calc(var(--hm) / 110 * clamp(58px, 17vw, 78px))}
  .pha .pha__title-script{font-size:calc(var(--hs) / 110 * clamp(58px, 17vw, 78px))}
  .pha .pha__lead{margin-top:calc(-.018 * var(--hs) / 110 * clamp(58px, 17vw, 78px))}
}

/* Lead statement: a larger, lower two-line lockup beneath the script headline. */
.pha .pha__lead{
  margin-top:30px;
  max-width:620px;
  font-family:"CSF News",Georgia,serif;
  font-size:29px;
  line-height:1.32;
}
@media (max-width:1450px){
  .pha .pha__lead{
    margin-top:28px;
    max-width:600px;
    font-size:25px;
  }
}
@media (max-width:900px){
  .pha .pha__lead{
    position:relative;
    top:22px;
    margin-top:0;
    max-width:440px;
    font-size:21px;
    line-height:1.3;
  }
}
@media (max-width:400px){
  .pha .pha__lead{
    max-width:100%;
    font-size:18.75px;
    line-height:1.36;
    letter-spacing:-.03em;
  }
}