:root{--hapri-teal:#00b1ac;--hapri-teal-deep:#007e7a}
@font-face{font-family:Be Vietnam;src:url('../../fonts/BeVietnam-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Be Vietnam;src:url('../../fonts/BeVietnam-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
*{box-sizing:border-box}body{margin:0;background:#f3f5f7;color:white;font:16px/1.5 'Be Vietnam',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #fff;outline-offset:5px}button{color:inherit}a{color:inherit}.observatory{min-height:735px;position:relative;overflow:hidden;isolation:isolate;background:var(--hapri-teal)}.masthead{height:103px;margin:0 5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff55;position:relative;z-index:3;gap:20px}.wordmark{font-size:28px;font-weight:700;letter-spacing:.12em;text-decoration:none;display:flex;align-items:center;gap:22px;line-height:1}.wordmark span{font-size:10px;line-height:1.5;font-weight:400;letter-spacing:0;color:#fff;border-left:1px solid #ffffff66;padding-left:22px}.edition{font-size:10px;letter-spacing:.2em;color:#fff}.scene{position:absolute;left:38%;right:0;top:99px;height:538px;z-index:0;mask-image:linear-gradient(90deg,transparent 0%,#000 9%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 9%)}canvas{display:block;width:100%;height:100%;touch-action:pan-y}.copy{position:relative;z-index:2;width:54%;padding:75px 0 80px 5%;pointer-events:none}.copy a{pointer-events:auto}.eyebrow{display:flex;gap:14px;align-items:center;font-size:10px;font-weight:400;letter-spacing:.16em;color:#fff;margin:0 0 24px}.line{display:block;width:23px;height:1px;background:#fff;flex-shrink:0}h1{font-size:clamp(44px,5.6vw,80px);font-weight:400;line-height:1.13;letter-spacing:-.055em;margin:0;min-height:2.26em}h1 span{color:#fff}.description{font-size:15px;line-height:1.9;color:#fff;margin:26px 0 31px;min-height:3.8em;max-width:400px}.primary{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;text-decoration:none;font-size:13px;min-height:52px;border-bottom:1px solid #ffffffaa;padding-bottom:9px}.cta-arrow{display:grid;place-items:center;font-size:28px;font-weight:400;transition:transform .25s}.primary:hover .cta-arrow{transform:translate(3px,-3px)}.object-caption{position:absolute;right:9%;top:160px;display:flex;align-items:center;gap:11px;font-size:9px;letter-spacing:.16em;color:#fff;z-index:1}.hairline{width:40px;height:1px;background:#ffffff66}.channels{position:relative;margin:0 5%;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #ffffff66;z-index:2}.channel{position:relative;text-align:left;display:flex;align-items:center;gap:18px;padding:22px 25px 25px 0;background:none;border:0;min-height:109px}.channel+.channel{padding-left:28px}.channel+.channel::before{content:'';position:absolute;left:0;top:25px;bottom:25px;border-left:1px solid #ffffff55}.channel::after{content:'';position:absolute;left:0;right:0;top:-1px;height:2px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .5s}.channel[aria-pressed=true]::after{transform:scaleX(1)}.channel-index{font-size:11px;color:#fff;align-self:start;padding-top:4px}.channel-copy{flex:1;min-width:0}.channel strong{display:block;font-size:16px;font-weight:400;letter-spacing:-.015em}.channel small{display:block;font-size:11px;color:#fff;margin-top:5px;line-height:1.6}.channel-arrow{font-size:24px;color:#fff;opacity:0;transition:opacity .3s,transform .3s}.channel[aria-pressed=true] .channel-arrow,.channel:hover .channel-arrow{opacity:1}.channel:hover .channel-arrow{transform:translate(2px,-2px)}.prototype-note{display:flex;justify-content:space-between;gap:20px;padding:20px 5%;font-size:11px;color:#5a6878}.prototype-note a{color:#007e7a;text-underline-offset:4px;white-space:nowrap}.fallback{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:35px}.fallback img{width:100%;max-width:410px;opacity:.55}.fallback p{font-size:13px;color:#fff;max-width:380px}.observatory[data-state=fallback] .object-caption{display:none}[hidden]{display:none!important}
@media(min-width:1550px){.observatory{min-height:805px}.copy{padding-top:98px;padding-bottom:105px}.scene{height:630px}.object-caption{top:166px}}
@media(max-width:1000px) and (min-width:701px){.wordmark span{display:none}.copy{width:56%;padding-top:77px}h1{font-size:53px}.scene{left:39%;height:530px}.edition{font-size:9px}.description{font-size:14px;max-width:330px}.channel{gap:12px}.channel+.channel{padding-left:20px}.channel small{font-size:10px}.object-caption{right:6%;font-size:8px}}
@media(max-width:700px){.observatory{min-height:0}.masthead{height:78px;margin:0 6%}.wordmark{font-size:23px;gap:0}.wordmark span,.edition{display:none}.copy{width:100%;padding:37px 6% 0}.eyebrow{font-size:8px;letter-spacing:.14em;margin-bottom:20px;gap:10px}.line{width:17px}h1{font-size:clamp(42px,10.8vw,65px);line-height:1.15;letter-spacing:-.05em;min-height:2.3em}.description{font-size:13px;line-height:1.8;margin:20px 0 18px;min-height:3.6em;max-width:340px}.primary{font-size:12px;min-height:46px;gap:28px}.cta-arrow{font-size:25px}.scene{position:relative;left:auto;right:auto;top:auto;width:100%;height:340px;margin-top:2px;mask-image:none;-webkit-mask-image:none}.object-caption{top:auto;bottom:228px;right:auto;left:6%;font-size:8px}.channels{display:block;margin:0 6%}.channel,.channel+.channel{min-height:66px;padding:15px 0;gap:14px;width:100%;border-bottom:1px solid #ffffff55}.channel+.channel::before{display:none}.channel::after{display:none}.channel strong{font-size:13px}.channel small{display:none}.channel-index{font-size:9px;align-self:center;padding:0}.channel-arrow{font-size:21px}.channel[aria-pressed=true]{color:#fff}.prototype-note{font-size:10px;flex-direction:column;gap:8px;padding:17px 6%}.fallback{padding:25px 35px}.fallback img{max-width:310px}.fallback p{font-size:11px}}
.scene::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,var(--hapri-teal),transparent 13%),linear-gradient(90deg,var(--hapri-teal),transparent 13%)}
@media(max-width:700px){.scene::after{background:linear-gradient(0deg,var(--hapri-teal),transparent 15%),linear-gradient(180deg,var(--hapri-teal),transparent 12%)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
/* Keep the masthead compact and share a hero row so artwork cannot cover channels. */
@media(min-width:701px){
  .observatory{min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:56px minmax(clamp(430px,36vw,560px),1fr) auto}
  .masthead{grid-area:1/1;height:56px}
  .copy{grid-area:2/1;padding-top:20px;padding-bottom:24px}
  .eyebrow{margin-bottom:14px}
  .scene{grid-area:2/1/3/2;top:0;bottom:0;height:auto;max-height:70vw}
  .object-caption{grid-area:2/1/3/2;top:16px}
  .channels{grid-area:3/1}
}
@media(max-width:700px){
  .masthead{height:52px}
  .copy{padding-top:16px}
  .eyebrow{margin-bottom:14px}
}
/* Preserve the approved full layout while fitting existing short Wix frames. */
body{background:var(--hapri-teal)}
@media(max-height:500px){
  .observatory{display:block;min-height:100svh;height:100svh}
  .masthead,.object-caption,.description{display:none}
  .copy{width:50%;height:calc(100svh - 50px);padding:14px 0 14px 5%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
  .eyebrow{font-size:8px;letter-spacing:.08em;gap:8px;margin-bottom:10px}
  h1{font-size:clamp(20px,3.6vw,42px);min-height:0;line-height:1.12}
  .primary{font-size:11px;min-height:32px;margin-top:12px;padding-bottom:4px;gap:12px}
  .cta-arrow{font-size:21px}
  .scene{position:absolute;left:48%;right:0;top:0;bottom:50px;width:auto;height:auto;margin:0}
  .channels{position:absolute;left:5%;right:5%;bottom:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr)}
  .channel,.channel+.channel{width:100%;min-height:50px;padding:10px 6px;gap:0;border-bottom:0}
  .channel+.channel::before{display:block;top:10px;bottom:10px}
  .channel strong{font-size:11px}
  .channel-index,.channel small,.channel-arrow{display:none}
}