/* Park Details in the HOMEPAGE type design ("Calm Coast", measured from the live homepage at 1900 px, 2026-09-30).
   Preview only (/sandpiper/park-details-home-fonts/). Linked LAST.
   Homepage roles, reproduced with the homepage's own size-adjust values so glyphs render identically:
     titles   Wondar Quason 96%   85.819px / 84.961px  ls -.01em  #073b57
     accent   Middleton 87%       1.1026 × title, line-height .72, #917658
     kicker   Neue Frutiger 102%  14.258px caps, ls 5.611px, #9c8268
     lead     Neue Frutiger 88%   500 24px / 32.4px, ls -.012em, #0b4b69
     button   Neue Frutiger 88%   24.6px, ls -.66px, #0a2f55
     card h3  Neue Frutiger 88%   500 24px, #0b4b69       caption 19px / 1.35, #7f8795
     stat     Neue Frutiger 88%   500 44.4px, #0a3257    stat label 14.7px caps, ls .9px, #85776c
   Desktop sizes scale with the viewport (px at 1900 × 100vw/1900), as the Park Details sections do. */
@font-face{font-family:"HP Display";src:url("../fonts/library/wondar-quason/wondar-quason-400.woff2") format("woff2");font-weight:400;font-display:swap;size-adjust:96%}
@font-face{font-family:"HP Accent";src:url("../fonts/library/middleton/middleton-400.woff2") format("woff2");font-weight:400;font-display:swap;size-adjust:87%}
@font-face{font-family:"HP Text";src:url("../fonts/library/neue-frutiger/neue-frutiger-400.woff2") format("woff2");font-weight:200 800;font-display:swap;size-adjust:88%}
@font-face{font-family:"HP Label";src:url("../fonts/library/neue-frutiger/neue-frutiger-400.woff2") format("woff2");font-weight:200 800;font-display:swap;size-adjust:102%}

:root{
  --hp:calc(100vw / 1900);
  --hp-display:"HP Display",Georgia,serif;
  --hp-accent:"HP Accent",cursive;
  --hp-text:"HP Text",Arial,sans-serif;
  --hp-label:"HP Label",Arial,sans-serif;
  --hp-navy:#073b57;
  --hp-sand:#917658;
  --hp-kicker:#9c8268;
  --hp-lead:#0b4b69;
  --hp-cap:#7f8795;
}

/* ================= families (every width) ================= */
body .pdh__title-main,body .ig__l1,body .ig__with,body .am__t1,body .cs__title,body .ctx__title{font-family:var(--hp-display)!important;font-weight:400!important;font-style:normal!important}
body .pdh__title-script,body .ig .ig__script,body .am__script,body .cs__title em,body .ctx__title em{font-family:var(--hp-accent)!important;font-weight:400!important;font-style:normal!important;-webkit-text-stroke:0!important}
body .pdh__lead,body .ig__lead,body .am__text,body .cs__txt p,body .ctx__lead,body .pdh__book,body .ctx__btn,
body .am__name,body .am__thumb-label,body .cs__card h3,body .cs__size,body .cs__feats li,body .ig__stats b,body .ig__stats small,body .ig__unit{font-family:var(--hp-text)!important;font-style:normal!important}
body .pdh__crumbs,body .pdh__links a,body .ig__k,body .ig__stats li > span:not(.ig__fig),body .am__k,body .am__cta,body .cs__k,body .ctx__k{font-family:var(--hp-label)!important}

/* ================= colours (light sections; the dark hero keeps white + gold) ================= */
body .ig__l1,body .ig__with,body .am__t1,body .cs__title,body .ctx__title{color:var(--hp-navy)!important}
body .ig .ig__script,body .am__script,body .cs__title em,body .ctx__title em{color:var(--hp-sand)!important;-webkit-text-stroke:0!important}
body .ig__k,body .am__k,body .cs__k,body .ctx__k{color:var(--hp-kicker)!important;text-transform:uppercase}
body .ig__k i,body .am__k i{background:#b0977f!important}
body .ig__lead,body .ctx__lead{color:var(--hp-lead)!important}
body .am__name,body .cs__card h3,body .am__thumb-label{color:var(--hp-lead)!important}
body .am__text,body .cs__txt p:not(.cs__size){color:var(--hp-cap)!important}
body .ig__stats b,body .ig__stats small,body .ig__unit{color:#0a3257!important}
body .ig__stats li > span:not(.ig__fig){color:#85776c!important}

/* ================= desktop sizes and flow ================= */
@media (min-width:1101px){
  /* ---- hero: the homepage hero voice (title 112.5, accent 106.9, eyebrow 17 / .22em, lead 24) ---- */
  body .pdh .pdh__crumbs{font-weight:500;font-size:calc(17 * var(--hp));letter-spacing:.22em;gap:calc(12 * var(--hp))}
  body .pdh .pdh__title{margin-top:calc(22 * var(--hp))}
  body .pdh .pdh__title-main{font-size:calc(104 * var(--hp));line-height:.96;letter-spacing:-.01em}
  body .pdh .pdh__title-script{margin:calc(-4 * var(--hp)) 0 0 calc(4 * var(--hp));font-size:calc(106.9 * var(--hp));line-height:1.05;letter-spacing:0;word-spacing:0}
  body .pdh .pdh__lead{margin:calc(22 * var(--hp)) 0 0 calc(4 * var(--hp));max-width:calc(560 * var(--hp));font-weight:500;font-size:calc(24 * var(--hp));line-height:calc(32.4 * var(--hp));letter-spacing:-.012em}
  body .pdh .pdh__links a{font-weight:500;font-size:calc(15.2 * var(--hp));letter-spacing:.12em}
  body .pdh .pdh__book{padding-left:calc(30 * var(--hp));font-weight:500;font-size:calc(18 * var(--hp));letter-spacing:0;text-transform:none}

  /* ---- kickers ---- */
  body .ig__k,body .am__k,body .cs__k,body .ctx__k{font-weight:400;font-size:calc(14.258 * var(--hp));line-height:1;letter-spacing:calc(5.611 * var(--hp))}

  /* ---- "Inside the gate": the title flows like the homepage's stacked headings ---- */
  body .ig .ig__title{inset:auto;left:53.97%;right:0;top:5.5%;pointer-events:auto;letter-spacing:0}
  body .ig .ig__l1,body .ig .ig__with,body .ig .ig__l2 .ig__script,body .ig .ig__l3{position:static;left:auto;top:auto;padding:0;white-space:nowrap}
  body .ig .ig__l1{display:block;font-size:calc(85.819 * var(--hp));line-height:calc(84.961 * var(--hp));letter-spacing:-.01em}
  body .ig .ig__with{display:inline;font-size:calc(85.819 * var(--hp));line-height:calc(84.961 * var(--hp));letter-spacing:-.01em}
  body .ig .ig__l2 .ig__script{display:inline-block;margin-left:calc(12 * var(--hp));font-size:calc(94.624 * var(--hp));line-height:.72;letter-spacing:0}
  /* "settle in." sits beside "room to" on the second line */
  body .ig .ig__l3{display:inline-block;margin:0 0 0 calc(var(--ig-gap, 18) * var(--hp));font-size:calc(94.624 * var(--hp));line-height:.72;letter-spacing:0}
  body .ig .ig__lead{top:30%;width:44%;font-weight:500;font-size:calc(22 * var(--hp));line-height:calc(31 * var(--hp));letter-spacing:-.012em}
  body .ig .ig__stats b,body .ig .ig__unit{font-weight:500;font-size:calc(44.4 * var(--hp))!important;line-height:1;letter-spacing:-.03em}
  body .ig .ig__stats small{font-weight:500;font-size:.62em;letter-spacing:0}
  body .ig .ig__stats li > span:not(.ig__fig){font-size:calc(13.4 * var(--hp));line-height:1.25;letter-spacing:calc(.9 * var(--hp))}

  /* ---- Resort amenities: centred heading block like the homepage's section heads ---- */
  body .am .am__k{left:50%;transform:translateX(-50%);top:calc(78 * var(--m))}
  body .am .am__title{position:absolute;left:0;right:0;top:calc(106 * var(--m));text-align:center}
  body .am .am__t1,body .am .am__script{position:static;display:block;left:auto;top:auto}
  body .am .am__t1{font-size:calc(85.819 * var(--hp));line-height:calc(84.961 * var(--hp));letter-spacing:-.01em}
  body .am .am__script{margin-top:calc(2 * var(--hp));font-size:calc(94.624 * var(--hp));line-height:.8;letter-spacing:0}
  body .am .am__name{font-weight:500;font-size:calc(var(--tsz) * .74 * var(--m));line-height:1.3;letter-spacing:0}
  body .am .am__text{font-weight:400;font-size:calc(var(--psz) * 1.06 * var(--m));line-height:1.35;letter-spacing:-.005em}
  body .am .am__cta{font-weight:500;font-size:calc(12.4 * var(--m));letter-spacing:.14em}
  body .am .am__thumb-label{font-weight:500;font-size:calc(15.2 * var(--m));letter-spacing:0}

  /* ---- Four ways to park here ---- */
  body .cs .cs__title{font-size:calc(85.819 * var(--hp));line-height:calc(84.961 * var(--hp));letter-spacing:-.01em}
  body .cs .cs__title em{font-size:1.1026em;line-height:.72;letter-spacing:0}
  body .cs .cs__card h3{font-weight:500;font-size:calc(26 * var(--hp));line-height:1.3;letter-spacing:0}
  body .cs .cs__size{font-weight:500;font-size:calc(19 * var(--hp));line-height:1.35;color:var(--hp-sand)!important}
  body .cs .cs__txt p:not(.cs__size){font-size:calc(17.5 * var(--hp));line-height:1.35;letter-spacing:-.005em}
  body .cs .cs__feats li{font-weight:500;font-size:calc(17 * var(--hp));letter-spacing:0;color:var(--hp-lead)!important}

  /* ---- closing band ---- */
  body .ctx .ctx__title{font-size:calc(85.819 * var(--hp));line-height:calc(84.961 * var(--hp));letter-spacing:-.01em}
  body .ctx .ctx__title em{font-size:1.1026em;line-height:.72;letter-spacing:0}
  body .ctx .ctx__lead{font-weight:500;font-size:calc(24 * var(--hp));line-height:calc(32.4 * var(--hp));letter-spacing:-.012em}
  body .ctx .ctx__btn{font-weight:400;font-size:calc(24.6 * var(--hp));letter-spacing:calc(-.66 * var(--hp))}
}