/* ==========================================================================
   Wailea Photo — editorial layer (Nov 2026)
   Loaded after site.css on every page. It restyles the shared chrome only —
   header, menu, Book Now / Concierge pills, music toggle and footer — so every
   page matches the editorial home and pricing pages without touching page
   content, URLs, structured data or translations.
   Markup for the header and menu is written into each page by
   tools/sync-chrome.py; edit it there, not by hand.
   ========================================================================== */

:root{
  --ed-teal:#315f69;
  --ed-teal-deep:#274d55;
  --ed-cream:#f4efe6;
  --ed-cream-hi:#fffaf2;
  --ed-gold:#e8c07a;
  --ed-sc:"Alegreya Sans SC","Alegreya Sans","Inter",Arial,sans-serif;
  --ed-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- top bar ---------- */
.site-header.ed{
  flex-direction:row;justify-content:space-between;align-items:center;
  padding:20px 26px;color:var(--ed-cream-hi);
}
.site-header.ed:before{height:130px;background:linear-gradient(180deg,rgba(20,40,45,.5),rgba(20,40,45,0))}
.site-header.ed .brand{
  font-family:var(--ed-sc);font-weight:500;font-size:15px;letter-spacing:.28em;line-height:1;text-transform:uppercase;text-align:left;
  color:var(--ed-cream-hi);text-shadow:0 1px 3px rgba(0,0,0,.45),0 2px 18px rgba(0,0,0,.35);
}
.site-header.ed .header-right{gap:18px}
.site-header.ed .menu-open-btn{
  font-family:var(--ed-sc);font-weight:700;font-size:14px;letter-spacing:.26em;color:var(--ed-cream-hi);
  text-shadow:0 1px 3px rgba(0,0,0,.45),0 2px 18px rgba(0,0,0,.35);
}
.site-header.ed .lang-switch summary{font-family:var(--ed-sc);font-weight:500;letter-spacing:.2em;text-shadow:0 1px 10px rgba(0,0,0,.4)}

/* pills */
.ed-pill{
  display:inline-flex;align-items:center;gap:10px;padding:10px 20px 10px 22px;border-radius:999px;
  border:1px solid rgba(244,239,230,.7);background:rgba(39,77,85,.42);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  color:var(--ed-cream);font-family:var(--ed-sc);font-weight:500;font-size:13px;letter-spacing:.28em;line-height:1;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;
  box-shadow:0 6px 24px rgba(0,0,0,.18);transition:background .35s,color .35s,border-color .35s;
}
.ed-pill:hover{background:var(--ed-cream);color:var(--ed-teal-deep);border-color:var(--ed-cream)}
.ed-pill:focus-visible{outline:2px solid var(--ed-gold);outline-offset:3px}
.ed-book::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--ed-gold);animation:edPulse 2.6s ease-out infinite}
.ed-ask{padding:9px 18px 9px 20px;font-size:12px;letter-spacing:.26em;background:rgba(244,239,230,.14);border-color:rgba(244,239,230,.55)}
.ed-ask::after{content:"";width:12px;height:10px;border:1.4px solid currentColor;border-radius:3px 3px 3px 0}
@keyframes edPulse{0%{box-shadow:0 0 0 0 rgba(232,192,122,.55)}70%{box-shadow:0 0 0 9px rgba(232,192,122,0)}100%{box-shadow:0 0 0 0 rgba(232,192,122,0)}}
body.menu-open .ed-pills,body.ed-chat .ed-pills{opacity:0;pointer-events:none}
.ed-pills{display:flex;align-items:center;gap:12px;transition:opacity .3s}

/* the concierge opens from the pill, so its own round launcher is not needed */
.wpc-launcher{display:none!important}

/* ---------- menu overlay ---------- */
.menu.ed{
  background:var(--ed-teal-deep) url(menu-night.webp) center/cover;color:var(--ed-cream);
  align-items:center;text-align:center;
}
.menu.ed:before{content:"";position:absolute;inset:0;background:rgba(24,48,54,.62);pointer-events:none}
.menu.ed > *{position:relative}
.menu.ed a{font:300 clamp(30px,4.6vw,60px)/1.12 var(--serif);color:var(--ed-cream-hi);transition:opacity .3s}
.menu.ed > a:hover{opacity:.75}
.menu.ed .menu-close{color:var(--ed-cream-hi);font-weight:300;position:absolute}
.menu.ed .menu-foot{justify-content:center;max-width:820px}
.menu.ed .menu-foot a{font-family:var(--ed-sc);font-weight:500;font-size:12px;letter-spacing:.24em;color:rgba(244,239,230,.86)}
.menu.ed .menu-foot a:hover{color:var(--ed-cream-hi)}

/* ---------- music toggle ---------- */
.ed-snd{position:fixed;left:22px;bottom:22px;z-index:60;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(244,239,230,.6);background:rgba(39,77,85,.55);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;place-items:center;cursor:pointer;padding:0;color:var(--ed-cream)}
.ed-snd:hover{background:rgba(39,77,85,.8)}
.ed-snd:focus-visible{outline:2px solid var(--ed-gold);outline-offset:3px}
.ed-snd .bars{display:flex;align-items:flex-end;gap:2.5px;height:14px}
.ed-snd .bars i{width:2px;height:4px;background:var(--ed-cream);border-radius:1px}
.ed-snd.on .bars i{animation:edEq 1.1s ease-in-out infinite}
.ed-snd.on .bars i:nth-child(2){animation-delay:-.4s}.ed-snd.on .bars i:nth-child(3){animation-delay:-.75s}.ed-snd.on .bars i:nth-child(4){animation-delay:-.2s}
.ed-snd:not(.on)::after{content:"";position:absolute;width:22px;height:1.5px;background:var(--ed-cream);transform:rotate(-45deg)}
@keyframes edEq{0%,100%{height:4px}50%{height:14px}}
body.menu-open .ed-snd,body.ed-chat .ed-snd{opacity:0;pointer-events:none}

/* ---------- footer ---------- */
footer{background:var(--ed-teal-deep);color:var(--ed-cream)}
footer .footer-mark-col .mark{font-family:var(--ed-sc);font-weight:500;font-size:16px;letter-spacing:.3em;text-transform:uppercase}
footer .footer-mark-col .mark i{color:var(--ed-gold)}
footer .footer-mark-col p{color:rgba(244,239,230,.78)}
footer .footer-col h5{font-family:var(--ed-sc);font-weight:500;font-size:12px;letter-spacing:.26em;color:rgba(244,239,230,.7)}
footer .footer-col a{font-family:var(--serif);font-size:19px;line-height:1.9;color:var(--ed-cream-hi)}
footer .footer-col a:hover{color:var(--ed-gold)}
footer .footer-bottom{font-family:var(--ed-sc);letter-spacing:.24em;color:rgba(244,239,230,.72)}
footer .ed-foot-book{margin-top:26px}

@media (max-width:780px){
  .site-header.ed{padding:16px 18px}
  .site-header.ed .brand{font-size:13px;letter-spacing:.24em}
  .site-header.ed .header-right{gap:14px}
  /* on phones the pills move to the bottom of the screen, within thumb reach */
  .ed-pills{position:fixed;right:12px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;flex-direction:row-reverse;gap:8px}
  .ed-pill{padding:12px 18px 12px 20px;font-size:12px;letter-spacing:.2em;background:rgba(39,77,85,.78)}
  .ed-ask{padding:11px 16px;background:rgba(39,77,85,.66)}
  .ed-snd{left:14px;bottom:calc(18px + env(safe-area-inset-bottom));width:40px;height:40px}
  footer{padding-bottom:120px}
}
@media (max-width:380px){.ed-ask::after{display:none}.ed-pill{letter-spacing:.14em;padding-left:14px;padding-right:14px}}
@media (prefers-reduced-motion:reduce){.ed-book::after,.ed-snd.on .bars i{animation:none}}

/* ---------- Guides (atlas.html index + Keep reading / From the Guides blocks) ---------- */
.guides-index{padding:6vh 7vw 4vh;max-width:1320px;margin:0 auto}
.gnav{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:8px 10px;justify-content:center;padding:84px 0 18px;margin:0 -7vw 4vh;
  background:linear-gradient(180deg,var(--paper) 78%,rgba(245,239,229,0))}
.gnav a{font-family:var(--ed-sc);font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--ed-teal-deep);
  padding:9px 16px;border:1px solid rgba(49,95,105,.35);border-radius:999px;transition:background .3s,color .3s}
.gnav a:hover{background:var(--ed-teal);color:var(--ed-cream-hi);border-color:var(--ed-teal)}
.gtopic{padding:7vh 0 2vh;scroll-margin-top:150px}
.gtopic header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 30px;border-top:1px solid var(--line);padding-top:26px;margin-bottom:34px}
.gtopic h2{font:400 clamp(32px,3.4vw,50px)/1.05 var(--serif);margin:0}
.gtopic header p{margin:0;max-width:44ch;font-size:16px;line-height:1.6;color:rgba(27,25,23,.7)}
.ggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:46px 3vw}
.gcard{display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.gcard figure{margin:0 0 18px;aspect-ratio:3/2;overflow:hidden;border-radius:2px;background:var(--paper2);
  box-shadow:0 2px 4px rgba(27,25,23,.08),0 14px 28px -10px rgba(27,25,23,.28),0 34px 50px -24px rgba(27,25,23,.3);transition:transform .6s var(--ed-ease),box-shadow .6s}
.gcard img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ed-ease)}
.gcard:hover figure{transform:translateY(-6px)}
.gcard:hover img{transform:scale(1.04)}
.gcard .gt{font-family:var(--ed-sc);font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ed-teal)}
.gcard h3{font:400 clamp(23px,1.9vw,28px)/1.15 var(--serif);margin:6px 0 8px}
.gcard p{margin:0;font-size:15px;line-height:1.65;color:rgba(27,25,23,.72)}
.gcard .go{margin-top:12px;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ed-teal-deep);border-bottom:1px solid rgba(49,95,105,.3);align-self:flex-start}
.gnote{margin:7vh 0 0;padding-top:24px;border-top:1px solid var(--line);font-size:15px;color:rgba(27,25,23,.7)}
.gnote a{color:var(--ed-teal-deep)}
.guides-more{max-width:1320px;margin:0 auto;padding:12vh 7vw 10vh}
.gm-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 22px;border-top:1px solid var(--line);padding-top:26px;margin-bottom:38px}
.gm-k{font-family:var(--ed-sc);font-weight:500;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--ed-teal)}
.gm-head h2{font:400 clamp(30px,3vw,46px)/1 var(--serif);margin:0;flex:1}
.gm-all{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ed-teal-deep)}
@media (max-width:980px){.ggrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .ggrid{grid-template-columns:1fr;gap:40px}
  .gnav{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:74px 18px 14px;margin:0 -7vw 3vh;scrollbar-width:none}
  .gnav::-webkit-scrollbar{display:none}
  .gnav a{flex:none}
}

/* ==========================================================================
   Editorial page layer — every content page (not the home or pricing pages,
   which have their own stylesheets). Restyles the shared site.css building
   blocks so service, resort, guide and utility pages match the editorial look,
   without touching their copy.
   ========================================================================== */
body:not(.home):not(.pricing-ed){--ed-ink-soft:rgba(27,25,23,.74)}

/* labels */
body:not(.home):not(.pricing-ed) main .chapter,
body:not(.home):not(.pricing-ed) main .eyebrow{font-family:var(--ed-sc);font-weight:500;font-size:12px;letter-spacing:.3em;text-transform:uppercase}
body:not(.home):not(.pricing-ed) main .chapter{color:var(--ed-teal)}

/* hero */
body:not(.home):not(.pricing-ed) .page-hero{height:76svh;min-height:520px}
body:not(.home):not(.pricing-ed) .page-hero:after{background:linear-gradient(90deg,rgba(20,40,45,.5),rgba(20,40,45,.12) 50%,transparent 75%),linear-gradient(180deg,rgba(20,40,45,.3),rgba(20,40,45,0) 30%,rgba(20,40,45,.45))}
body:not(.home):not(.pricing-ed) .page-hero .page-hero-copy .eyebrow{display:block;color:var(--ed-cream-hi);text-shadow:0 1px 12px rgba(0,0,0,.45)}
body:not(.home):not(.pricing-ed) .page-hero .page-hero-copy h1{font-weight:300;line-height:1.02;letter-spacing:-.02em;text-shadow:0 2px 34px rgba(0,0,0,.35)}
body:not(.home):not(.pricing-ed) .page-hero .page-hero-copy p{text-shadow:0 1px 14px rgba(0,0,0,.45)}

/* headings a touch lighter, like the editorial pages */
body:not(.home):not(.pricing-ed) main h2{font-weight:300!important;letter-spacing:-.015em}

/* buttons become pills (several guides carry inline button styles, hence !important) */
body:not(.home):not(.pricing-ed) main .button{
  display:inline-flex!important;align-items:center;gap:10px;border-radius:999px!important;padding:15px 28px!important;
  background:var(--ed-teal)!important;border:1px solid var(--ed-teal)!important;color:var(--ed-cream-hi)!important;
  font-family:var(--ed-sc)!important;font-weight:500!important;font-size:12px!important;letter-spacing:.24em!important;text-transform:uppercase;text-decoration:none!important;
  box-shadow:0 10px 24px -10px rgba(20,40,45,.55);transition:background .35s,color .35s,transform .35s var(--ed-ease)}
body:not(.home):not(.pricing-ed) main .button:hover{background:var(--ed-teal-deep)!important;transform:translateY(-2px)}
body:not(.home):not(.pricing-ed) main .page-hero .button{background:var(--ed-cream)!important;border-color:var(--ed-cream)!important;color:var(--ed-teal-deep)!important}
body:not(.home):not(.pricing-ed) main .button-outline{border-radius:999px;font-family:var(--ed-sc);font-weight:500;font-size:12px;letter-spacing:.24em;padding:15px 28px}
body:not(.home):not(.pricing-ed) main .button.ghost{background:transparent!important;color:var(--ed-teal-deep)!important;border-color:rgba(49,95,105,.45)!important;box-shadow:none}

/* photos float */
body:not(.home):not(.pricing-ed) .content-split-image,
body:not(.home):not(.pricing-ed) .experience-gallery figure{border-radius:2px;
  box-shadow:0 2px 4px rgba(27,25,23,.08),0 18px 34px -12px rgba(27,25,23,.32),0 44px 64px -28px rgba(27,25,23,.36)}
body:not(.home):not(.pricing-ed) .atlas-photo-caption{font-family:var(--ed-sc);font-weight:500;letter-spacing:.2em;text-transform:uppercase;font-size:11px}

/* highlights, FAQ */
body:not(.home):not(.pricing-ed) .experience-highlight strong{font-weight:400}
body:not(.home):not(.pricing-ed) .experience-highlights{border-left-color:rgba(49,95,105,.3)}
body:not(.home):not(.pricing-ed) .faq-item summary{font-weight:400}
body:not(.home):not(.pricing-ed) .faq-item summary:after{color:var(--ed-teal)}

/* teal bands: the closing "Ready for your session?" call, quote bands and CTA blocks */
body:not(.home):not(.pricing-ed) main .reserve,
body:not(.home):not(.pricing-ed) main .reserve.short{min-height:0;padding:14vh 7vw;background:var(--ed-teal)!important;color:var(--ed-cream)!important}
body:not(.home):not(.pricing-ed) main .reserve .chapter,
body:not(.home):not(.pricing-ed) main .experience-cta .chapter,
body:not(.home):not(.pricing-ed) main .quote-band .chapter{color:var(--ed-gold)}
body:not(.home):not(.pricing-ed) main .reserve h2{color:var(--ed-cream-hi)}
body:not(.home):not(.pricing-ed) main .reserve .button,
body:not(.home):not(.pricing-ed) main .experience-cta .button{background:var(--ed-cream)!important;border-color:var(--ed-cream)!important;color:var(--ed-teal-deep)!important}
body:not(.home):not(.pricing-ed) main .experience-cta{background:var(--ed-teal-deep)}
body:not(.home):not(.pricing-ed) main .quote-band{background-color:var(--ed-teal)}
body:not(.home):not(.pricing-ed) main .quote-band p{font-weight:300}
@media (max-width:780px){
  body:not(.home):not(.pricing-ed) .page-hero{height:70svh;min-height:460px}
  body:not(.home):not(.pricing-ed) main .button{padding:14px 22px!important;font-size:11px!important;letter-spacing:.2em!important}
}
/* no sideways pan/bounce on phones: clip anything wider than the screen at the page edge */
html{overflow-x:clip;overscroll-behavior-x:none}
body{overflow:visible}
.site-header.ed .lang-switch ul{left:auto;right:0}
/* booking pills: larger, bold lettering */
.ed-pill{font-weight:700}
.ed-book{font-size:14px;letter-spacing:.2em}
body:not(.home):not(.pricing-ed) main .button,body:not(.home):not(.pricing-ed) main .button-outline{font-weight:700!important;font-size:14px!important;letter-spacing:.16em!important}
@media (max-width:820px){
  .ed-pill{font-size:13px;letter-spacing:.14em}
  .ed-book{font-size:14px}
  body:not(.home):not(.pricing-ed) main .button,body:not(.home):not(.pricing-ed) main .button-outline{font-size:14px!important;letter-spacing:.12em!important;padding:16px 24px!important}
}
/* one-time glow inviting phone visitors to turn the music on */
.ed-snd.hint{animation:edHint 1.7s ease-out 3}
@keyframes edHint{0%{box-shadow:0 0 0 0 rgba(232,192,122,.75)}100%{box-shadow:0 0 0 16px rgba(232,192,122,0)}}
@media (prefers-reduced-motion:reduce){.ed-snd.hint{animation:none;border-color:var(--ed-gold)}}
/* smooth scrolling (Lenis, computers only) */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}