/* Spencer's Observatory — Version 2 "Lights Out".
   Hero: Orlando-style plain-WebGL photo stage on the observatory's own painted mural (LIKED D): smooth
   top-to-bottom depth field, a gold pointer light, painted stars that twinkle, one click sweep, slow push-in.
   Ground: the observatory's Sonoran sky photo as the fixed world with octopuss-depth layers; sections are
   night-blue at alpha .55–.95 over it. Pinned chapters stack for each kind of visitor; a tall sticky photo
   break slides the grounds in. Type: Young Serif (display, echoing the hand-painted sign) + Familjen Grotesk. */
@font-face{font-family:"Young Serif";src:url(/assets/fonts/young-serif-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Familjen";src:url(/assets/fonts/familjen-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Familjen";src:url(/assets/fonts/familjen-600.woff2) format("woff2");font-weight:600;font-display:swap}
:root{--night:#070b1f;--blue:#2b2fa6;--gold:#e8c57a;--gold-d:#d4ad5c;--cream:#f4eedf;--rule:rgba(244,238,223,.22);
  --fd:"Young Serif",Georgia,serif;--fb:"Familjen",ui-sans-serif,system-ui,sans-serif;--ease:cubic-bezier(.22,1,.36,1);--gut:clamp(18px,4.5vw,64px);--bar:0px}
@media (max-width:899px){:root{--bar:84px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{margin:0;background:var(--night);color:var(--cream);font:400 17px/1.6 var(--fb);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.22em}
h1,h2,h3{font-family:var(--fd);font-weight:400;letter-spacing:-.02em;line-height:.98;margin:0}
p{margin:0 0 1em}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--cream);color:var(--night);padding:12px 18px;border-radius:999px}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.eyebrow{font:600 13px/1.3 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 18px}
.acts{display:flex;flex-wrap:wrap;gap:10px}
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:999px;border:1.5px solid rgba(244,238,223,.85);color:var(--cream);background:rgba(7,11,31,.35);font:600 15px/1 var(--fb);text-decoration:none;cursor:pointer;transition:background-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
.pill:hover{background:var(--cream);color:var(--night);transform:translateY(-2px)}
.pill:active{transform:scale(.97)}
.pill--gold{background:var(--gold);border-color:var(--gold);color:#1a1405}
.pill--gold:hover{background:var(--gold-d);border-color:var(--gold-d);color:#1a1405}

#world{position:fixed;inset:0;z-index:-2;background:var(--night) url(/assets/media/sonoran-skies.webp) 50% 50%/cover no-repeat}

/* Header: glass bar that hides on the way down */
.hd{position:fixed;z-index:40;top:0;left:0;right:0;padding:14px var(--gut)}
.hd__in{display:flex;align-items:center;gap:18px;min-height:60px;padding:0 10px 0 22px;border-radius:999px;background:rgba(7,11,31,.62);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(244,238,223,.14)}
.mark{font:400 21px/1 var(--fd);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;gap:.3em;white-space:nowrap}
.mark i{font-style:normal;color:var(--gold)}
.hd__nav{margin-left:auto;display:flex;gap:2px}
.hd__nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;text-decoration:none;font-weight:600;font-size:15px;transition:background-color .2s var(--ease)}
.hd__nav a:hover{background:rgba(244,238,223,.1)}
.hd__nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--gold);border-radius:0}
.hd .pill{min-height:46px;padding:0 20px}
.hd__menu{display:none;margin-left:auto;align-items:center;gap:10px;min-height:46px;padding:0 18px;border-radius:999px;border:1.5px solid rgba(244,238,223,.8);background:transparent;color:var(--cream);font:600 14px/1 var(--fb);cursor:pointer;position:relative}
.hd__menu span{display:block;width:16px;height:1.5px;background:currentColor;position:absolute;left:18px}
.hd__menu span:first-child{top:19px}.hd__menu span:nth-child(2){top:25px}
.hd__menu{padding-left:44px}
@media (max-width:899px){.hd__nav,.hd__cta{display:none}.hd__menu{display:inline-flex}.mark{font-size:18px}}
@media (max-width:380px){.hd{padding:10px}.hd__in{gap:10px;padding:0 6px 0 14px}.mark{font-size:16px}.hd__menu{padding:0 14px 0 40px}.hd__menu span{left:16px}}
.chapters{position:relative}

/* Right drawer menu */
.drawer{position:fixed;inset:0;z-index:60}
.drawer[hidden]{display:none}
.drawer__scrim{position:absolute;inset:0;background:rgba(3,5,14,.6);opacity:0;transition:opacity .45s var(--ease)}
.drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(480px,100%);background:#0b1030;overflow-y:auto;padding:16px 26px 30px;display:flex;flex-direction:column;gap:18px;transform:translateX(100%);transition:transform .5s var(--ease);box-shadow:-30px 0 60px rgba(0,0,0,.4)}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer.is-open .drawer__panel{transform:none}
.drawer__top{display:flex;justify-content:flex-end;min-height:60px;align-items:center}
.drawer__close{min-height:48px;padding:0 22px;border-radius:999px;border:1.5px solid var(--cream);background:none;color:var(--cream);font:600 14px/1 var(--fb);cursor:pointer}
.drawer__img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:18px}
.drawer nav a{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule);font:400 clamp(34px,8vw,48px)/1.05 var(--fd);text-decoration:none;transition:color .2s,padding-left .3s var(--ease)}
.drawer nav a small{font:600 12px/1 var(--fb);letter-spacing:.1em;color:var(--gold)}
.drawer nav a:hover{color:var(--gold);padding-left:6px}
.drawer nav a[aria-current]{color:var(--gold)}
.drawer__foot{display:grid;gap:10px;margin-top:auto}

/* Hero: WebGL stage on the mural */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;background:var(--night)}
.hero-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;transform:scale(1.08)}
#stage{position:absolute;inset:0;width:100%;height:100%;display:none}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(7,11,31,.92) 0%,rgba(7,11,31,.6) 34%,rgba(7,11,31,.12) 62%),linear-gradient(90deg,rgba(7,11,31,.6) 0%,rgba(7,11,31,0) 58%)}
.hero-light{position:absolute;z-index:1;left:-30vmax;top:-30vmax;width:60vmax;height:60vmax;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(232,197,122,.32) 0%,rgba(232,197,122,0) 62%);mix-blend-mode:screen}
.hero-in{position:absolute;z-index:2;left:var(--gut);right:var(--gut);bottom:clamp(30px,7vh,80px);max-width:1080px}
.hero h1{font-size:clamp(40px,8.4vw,138px);line-height:.94;margin-bottom:22px;text-wrap:balance}
.hero-lede{font-size:clamp(17px,1.5vw,21px);max-width:46ch;margin-bottom:26px}
.hero-cap{margin:22px 0 0;font-size:13px;color:rgba(244,238,223,.82)}
@media (max-width:899px){.hero-still{object-position:50% 50%}.hero-cap{display:none}}

/* Frosted ticker with drifting glow */
.ticker{position:relative;overflow:hidden;padding:clamp(40px,6vw,80px) var(--gut);background:linear-gradient(180deg,rgba(7,11,31,.95) 0%,rgba(7,11,31,.7) 100%)}
.glow{position:absolute;width:46vmax;height:46vmax;border-radius:50%;filter:blur(40px);opacity:.5;pointer-events:none}
.glow--a{left:-10vmax;top:-26vmax;background:radial-gradient(circle,#2b2fa6 0%,transparent 66%);animation:drift 18s var(--ease) infinite alternate}
.glow--b{right:-12vmax;bottom:-30vmax;background:radial-gradient(circle,rgba(232,197,122,.55) 0%,transparent 66%);animation:drift 22s var(--ease) infinite alternate-reverse}
@keyframes drift{to{transform:translate3d(12vw,6vh,0) scale(1.12)}}
.ticker__glass{position:relative;max-width:1280px;margin:0 auto;padding:22px clamp(18px,3vw,40px);border-radius:28px;background:rgba(244,238,223,.07);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(244,238,223,.16)}
.ticker ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px;font-size:16px}
.ticker b{font:400 30px/1 var(--fd);color:var(--gold);margin-right:6px;vertical-align:-3px}

/* Pinned chapters: each kind of visitor, over the observatory's own photos */
.chap{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--night)}
.chap__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chap::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(7,11,31,.93) 0%,rgba(7,11,31,.72) 46%,rgba(7,11,31,.38) 100%)}
.chap--r::after,.c2::after,.c4::after{background:linear-gradient(270deg,rgba(7,11,31,.93) 0%,rgba(7,11,31,.72) 46%,rgba(7,11,31,.38) 100%)}
.chap__in{position:relative;z-index:1;width:min(640px,100% - 2*var(--gut));margin-left:var(--gut)}
.chap__in--r{margin-left:auto;margin-right:var(--gut)}
.chap h2{font-size:clamp(40px,5.8vw,92px);margin-bottom:24px}
.chap p:not(.eyebrow){font-size:clamp(17px,1.4vw,20px);max-width:44ch}
.c1 .chap__bg{object-position:60% 40%}.c3 .chap__bg{object-position:30% 60%}.c4 .chap__bg{object-position:50% 70%}
@media (max-width:899px){.chap[data-om-chapter]{position:relative!important;transform:none!important;filter:none!important}.chap{min-height:auto;padding:40vh 0 60px;align-items:flex-end}.chap::after,.c2::after,.c4::after{background:linear-gradient(0deg,rgba(7,11,31,.95) 0%,rgba(7,11,31,.78) 48%,rgba(7,11,31,.25) 100%)}.chap__in,.chap__in--r{margin:0 var(--gut)}}
.noanim .chap[data-om-chapter]{position:relative!important;transform:none!important;filter:none!important}

/* Sticky photo break: the grounds slide in */
.pbreak{position:relative;background:linear-gradient(180deg,rgba(7,11,31,.9) 0%,rgba(7,11,31,.62) 50%,rgba(7,11,31,.92) 100%)}
.pbreak__head{position:relative;z-index:3;max-width:560px}
.pbreak h2{font-size:clamp(38px,5vw,80px);margin-bottom:18px}
.pb{position:relative;margin:0;border-radius:20px;overflow:hidden;border:1.5px solid rgba(244,238,223,.8);box-shadow:0 34px 70px -30px rgba(0,0,0,.85);background:var(--night)}
.pb img{width:100%;height:100%;object-fit:cover}
.pb figcaption{position:absolute;left:12px;bottom:12px;padding:6px 12px;border-radius:999px;background:rgba(7,11,31,.85);font-size:12.5px;font-weight:600}
@media (min-width:900px){
  .pin .pbreak{height:240vh}
  .pbreak__sticky{position:relative;height:100vh;padding:120px var(--gut) 60px;overflow:hidden}
  .pin .pbreak__sticky{position:sticky;top:0}
  .pb{position:absolute;will-change:transform}
  .pb1{left:44%;top:12%;width:21%;height:62%}
  .pb2{right:var(--gut);top:16%;width:30%;height:34%}
  .pb3{left:var(--gut);bottom:7%;width:22%;height:50%}
  .pb4{right:8%;bottom:8%;width:36%;height:36%}
  .pin .pb1{transform:translate3d(0,calc((1 - var(--p,1)) * 60vh),0)}
  .pin .pb2{transform:translate3d(calc((1 - var(--p,1)) * 60vw),0,0)}
  .pin .pb3{transform:translate3d(calc((1 - var(--p,1)) * -50vw),0,0)}
  .pin .pb4{transform:translate3d(0,calc((1 - var(--p,1)) * 80vh),0)}
}
@media (max-width:899px){.pbreak__sticky{padding:70px var(--gut);display:grid;grid-template-columns:1fr 1fr;gap:10px}.pbreak__head{grid-column:1/-1;margin-bottom:14px}.pb{position:relative;aspect-ratio:3/4}.pb2,.pb4{aspect-ratio:auto;grid-column:1/-1;height:52vw}}

/* Signature tool */
.picker{position:relative;padding:clamp(90px,10vw,150px) var(--gut);background:linear-gradient(90deg,rgba(7,11,31,.94) 0%,rgba(7,11,31,.62) 100%)}
.picker__in{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center}
.picker h2{font-size:clamp(42px,5.6vw,90px);margin-bottom:22px}
.picker__glass{padding:clamp(24px,3.4vw,48px);border-radius:28px;background:rgba(11,16,48,.72);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(244,238,223,.16)}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px}
.choice{min-height:60px;padding:10px 18px;border-radius:18px;border:1.5px solid rgba(244,238,223,.6);background:transparent;color:var(--cream);font:600 16px/1.2 var(--fb);text-align:left;cursor:pointer;transition:background-color .2s var(--ease),border-color .2s,color .2s,transform .2s var(--ease)}
.choice:hover{transform:translateY(-3px);border-color:var(--cream)}
.choice[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:#1a1405}
.answer{padding:22px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-bottom:22px}
.answer__k{font:600 12px/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:rgba(244,238,223,.8);margin-bottom:12px}
.answer__name{font:400 clamp(38px,4.4vw,64px)/1 var(--fd);margin-bottom:12px;color:var(--gold)}
.answer__why{font-size:20px;margin-bottom:10px}
.answer__note{font-size:15px;color:rgba(244,238,223,.82);margin:0}
.answer.swap .answer__name,.answer.swap .answer__why{animation:fade .5s var(--ease) both}
@keyframes fade{from{opacity:.25;transform:translateY(8px)}}
@media (max-width:899px){.picker__in{grid-template-columns:1fr}}
@media (max-width:420px){.choices{grid-template-columns:1fr}}
.no-js .choices,.no-js #pick-email{display:none}

/* Footer: map first, booking card beside it */
.ft{position:relative;padding:clamp(80px,9vw,130px) var(--gut) calc(30px + var(--bar));background:linear-gradient(180deg,rgba(7,11,31,.7) 0%,rgba(7,11,31,.95) 60%)}
.ft__in{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,40px);align-items:stretch}
.ft__map{border-radius:28px;overflow:hidden;border:2px solid var(--gold);min-height:420px;background:#0b1030}
.ft__map iframe{width:100%;height:100%;min-height:420px;border:0;display:block;filter:saturate(.7) contrast(1.05)}
.ft__card{overflow-wrap:anywhere;padding:clamp(24px,3vw,44px);border-radius:28px;background:rgba(244,238,223,.07);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(244,238,223,.16);display:flex;flex-direction:column;justify-content:center}
.ft__big{font:400 clamp(30px,3vw,46px)/1.05 var(--fd);margin-bottom:22px}
.ft__tel{font:400 clamp(30px,3.2vw,48px)/1.2 var(--fd);color:var(--gold);text-decoration:none}
.ft__card a{display:inline-block;padding:6px 0}
.ft__addr{color:rgba(244,238,223,.85);font-size:15px}
.ft__card .pill{align-self:flex-start;padding:0 26px}
.ft__end{max-width:1280px;margin:40px auto 0;padding-top:18px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;font-size:14px;color:rgba(244,238,223,.82)}
.ft__end nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.ft__end a{display:inline-block;padding:12px 0}
@media (max-width:899px){.ft__in{grid-template-columns:1fr}.ft__map,.ft__map iframe{min-height:320px}}

/* Inner pages */
.ph{position:relative;min-height:88svh;display:flex;align-items:flex-end;overflow:hidden;padding:140px var(--gut) clamp(40px,7vw,90px);isolation:isolate}
.ph__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.ph::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(7,11,31,.94) 0%,rgba(7,11,31,.6) 40%,rgba(7,11,31,.25) 75%),linear-gradient(90deg,rgba(7,11,31,.55),rgba(7,11,31,0) 60%)}
.ph h1{font-size:clamp(50px,9vw,150px);line-height:.94;margin-bottom:22px;max-width:14ch}
.ph p:not(.eyebrow){font-size:clamp(17px,1.5vw,21px);max-width:48ch}
.band{position:relative;padding:clamp(80px,9vw,130px) var(--gut);background:linear-gradient(90deg,rgba(7,11,31,.94) 0%,rgba(7,11,31,.68) 100%)}
.band--flip{background:linear-gradient(270deg,rgba(7,11,31,.94) 0%,rgba(7,11,31,.62) 100%)}
.band__in{max-width:1280px;margin:0 auto}
.statement{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(24px,4vw,60px);align-items:end}
.statement h2{font-size:clamp(40px,6vw,100px)}
@media (max-width:799px){.statement{grid-template-columns:minmax(0,1fr);align-items:start}}
.inst{list-style:none;margin:0;padding:0;border-top:1px solid var(--cream)}
.inst li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:24px;align-items:center;padding:26px 0;border-bottom:1px solid var(--rule)}
.inst h3{font-size:clamp(28px,3.4vw,52px)}
.inst q{font-size:19px}
.inst img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:14px}
@media (max-width:799px){.inst li{grid-template-columns:1fr;gap:10px}}
.pull{font:400 clamp(30px,3.8vw,58px)/1.1 var(--fd);max-width:24ch;margin:0 0 24px}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 60px}
.cols h3{font:600 19px/1.3 var(--fb);margin-bottom:8px;color:var(--gold)}
.cols p{margin:0}
@media (max-width:799px){.cols{grid-template-columns:1fr}}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:center;padding:clamp(30px,4vw,56px) 0;border-top:1px solid var(--rule)}
.steps li:nth-child(even) figure{order:2}
.steps figure{margin:0;border-radius:20px;overflow:hidden;border:1.5px solid rgba(244,238,223,.75)}
.steps img{width:100%;aspect-ratio:4/3;object-fit:cover}
.steps h3{font-size:clamp(32px,4vw,60px);margin-bottom:14px}
.steps h3::before{counter-increment:s;content:"0" counter(s);display:block;font:600 13px/1 var(--fb);letter-spacing:.14em;color:var(--gold);margin-bottom:14px}
@media (max-width:799px){.steps li{grid-template-columns:1fr}.steps li:nth-child(even) figure{order:0}}
.rates{list-style:none;margin:0;padding:0}
.rates li{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--rule);font-size:18px}
.rates b{font:400 26px/1 var(--fd);color:var(--gold);white-space:nowrap}

/* Call pill */
.callpill{position:fixed;z-index:50;right:24px;bottom:24px;display:flex;align-items:center;justify-content:center;min-height:54px;padding:0 26px;border-radius:999px;background:var(--gold);color:#1a1405;font:600 15px/1 var(--fb);text-decoration:none;box-shadow:0 14px 30px rgba(0,0,0,.45);transition:opacity .3s var(--ease),visibility .3s,transform .3s var(--ease)}
.callpill:hover{transform:translateY(-2px)}
.callpill.is-hidden{opacity:0;visibility:hidden}
@media (max-width:899px){.callpill{left:12px;right:12px;bottom:12px}}
.no-js .callpill{display:none}
.om-tag{font-family:var(--fb)!important;--om-tag-bg:var(--gold);--om-tag-fg:#1a1405}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.noanim *,.noanim *::before,.noanim *::after{animation:none!important;transition:none!important}