/* Noctara · dark-sky observatory retreat */
@font-face { font-family: "Newsreader"; src: url(https://demo.uichemy.com/wp-content/uploads/2026/10/noctara__fonts-newsreader-latin.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url(https://demo.uichemy.com/wp-content/uploads/2026/10/noctara__fonts-manrope-latin.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Red Hat Mono"; src: url(https://demo.uichemy.com/wp-content/uploads/2026/10/noctara__fonts-redhatmono-latin.woff2) format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }

:root {
  --night: #08042A;
  --aurora: #37FFAE;
  --amber: #FFBA38;
  --ice: #5BE0FF;
  --white: #FFFFFF;
  --black: #000000;
  --ice-glow: #21466A;          /* color-mix(ice 30%, night) — checked */
  /* night-vision set (checked) */
  --band-field-nv: #262244;    /* color-mix(white 12%, night) — checked */

  --f-title: "Newsreader", "Times New Roman", serif;
  --f-ui: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Red Hat Mono", ui-monospace, Menlo, monospace;
  --gut: clamp(16px, 4vw, 64px);
  --navf: 0;
  --nav-ink: color-mix(in srgb, var(--white), var(--black) calc(var(--navf) * 100%));
}

/* Night vision: token swap (bands drop to a dim field, ink turns light) + a luminance→red
   colour matrix on the root (the root element keeps fixed positioning intact). */
html.nv { filter: url(#nvMatrix); --nav-ink: var(--white); }
html.nv .band-ice, html.nv .band-amber, html.nv .band-aurora { --band-field: #262244; background: var(--band-field); --black: #FFFFFF; color: var(--white); }
html.nv .nav__cta, html.nv .btn-aurora { background: transparent; color: var(--white); border-color: var(--white); }
html.nv .mopt:has(input:checked) { background: transparent; color: var(--white); box-shadow: inset 0 0 0 2px var(--white); }
html.nv .tonight__data > div { border-color: rgba(255,255,255,.35); }
html.nv .instrument__list li { opacity: .62; }
html.nv .instrument__list li.is-active { opacity: 1; }
html.nv .ln-r { opacity: .62; }

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; background: var(--night); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--night); color: var(--white); font-family: var(--f-ui); font-weight: 400; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
::selection { background: var(--aurora); color: var(--black); }

.label { font-family: var(--f-mono); font-weight: 500; font-size: 11px; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; margin: 0; }
.title { font-family: var(--f-title); font-weight: 200; text-transform: uppercase; letter-spacing: .12em; line-height: 1.02; margin: 0; font-optical-sizing: auto; }

.band-ice { background: var(--ice); color: var(--black); }
.band-amber { background: var(--amber); color: var(--black); }
.band-aurora { background: var(--aurora); color: var(--black); }
:focus-visible { outline: 2px solid var(--aurora); outline-offset: 3px; }
.band-ice :focus-visible, .band-amber :focus-visible, .band-aurora :focus-visible { outline-color: var(--black); }

/* ---------- Loader ---------- */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--night); display: grid; place-items: center; }
.loader__inner { display: grid; gap: 10px; text-align: center; }
.loader__line { font-family: var(--f-mono); font-weight: 500; font-size: 12px; letter-spacing: .14em; margin: 0; opacity: 0; white-space: pre; min-height: 1.5em; color: var(--white); }
.loader__line + .loader__line { color: var(--aurora); }
.skip-intro .loader { display: none; }

/* ---------- Nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 20px var(--gut); color: var(--nav-ink); pointer-events: none; }
.nav > * { pointer-events: auto; }
.nav::before { content: ""; position: absolute; inset: 0 0 -24px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(8,4,42,.88) 0%, rgba(8,4,42,.55) 55%, rgba(8,4,42,0) 100%); opacity: calc(1 - var(--navf)); }
.nav__mark { font-family: var(--f-title); font-weight: 300; font-size: 17px; letter-spacing: .34em; text-decoration: none; justify-self: start; }
.nav__links { display: flex; gap: 28px; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.nav__links a { text-decoration: none; position: relative; opacity: .82; transition: opacity .25s; }
.nav__links a:hover { opacity: 1; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s cubic-bezier(.6,0,.2,1); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__right { justify-self: end; display: flex; align-items: center; gap: 12px; }
.nv-toggle { display: inline-flex; align-items: center; gap: 9px; background: none; border: 1px solid currentColor; border-radius: 0; padding: 8px 12px; cursor: pointer; font-family: var(--f-mono); font-weight: 500; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--nav-ink); }
.nv-toggle__dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid currentColor; transition: background .3s; }
.nv-toggle[aria-pressed="true"] .nv-toggle__dot { background: currentColor; }
.nav__cta { text-decoration: none; font-size: 13px; font-weight: 600; background: var(--aurora); color: var(--black); padding: 9px 14px; border: 1px solid var(--aurora); transition: background .25s, color .25s; }
.nav__cta:hover { background: transparent; color: var(--nav-ink); border-color: currentColor; }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100vh; height: 100svh; }
.hero__stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--night); }
.hero__backdrop { position: absolute; inset: -6% 0 0 0; width: 100%; height: 112%; object-fit: cover; opacity: .34; will-change: transform; }
.hero__stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(8,4,42,.6); }
.hero__stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8,4,42,.55) 0%, rgba(8,4,42,0) 30%, rgba(8,4,42,0) 70%, rgba(8,4,42,.9) 100%); }
.hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__flash { position: absolute; inset: 0; background: var(--aurora); opacity: 0; pointer-events: none; z-index: 2; mix-blend-mode: normal; }
.hero__numerals { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; pointer-events: none; }
.hero__num { grid-area: 1 / 1; font-family: var(--f-title); font-weight: 200; font-size: 30vw; line-height: 1; letter-spacing: .02em; color: rgba(91,224,255,.10); opacity: 0; white-space: nowrap; }
.chapter { position: absolute; z-index: 3; max-width: 46rem; }
.chapter.is-hero { left: 50%; top: 22%; transform: translateX(-50%); width: min(92vw, 80rem); max-width: none; text-align: center; }
.chapter.is-left { left: var(--gut); top: 50%; translate: 0 -50%; max-width: none; }
.chapter.is-right { right: var(--gut); top: 50%; translate: 0 -50%; max-width: none; text-align: right; }
.chapter:not(.is-hero) .chapter__title { white-space: nowrap; }
.chapter > * { will-change: transform, opacity, filter; }
.chapter__kicker { color: var(--aurora); margin-bottom: 22px; }
.chapter__title { font-size: clamp(44px, 7.2vw, 128px); }
.chapter.is-hero .chapter__title span { display: block; }
.chapter:not(.is-hero) .chapter__title { font-size: clamp(40px, 6vw, 104px); }
.chapter__body { margin: 26px 0 0; font-size: clamp(16px, 1.25vw, 19px); max-width: 30rem; color: var(--white); }
.chapter.is-hero .chapter__body { margin-inline: auto; font-family: var(--f-mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.chapter.is-right .chapter__body { margin-left: auto; }
.chapter[data-ch="1"], .chapter[data-ch="2"] { opacity: 0; visibility: hidden; }
.hero__hud { position: absolute; z-index: 3; left: var(--gut); right: var(--gut); bottom: 22px; display: flex; justify-content: space-between; color: rgba(255,255,255,.7); }
.hero__scroll { color: var(--aurora); }

/* ---------- Tonight (ice band) ---------- */
.tonight { display: grid; grid-template-columns: minmax(160px, 15vw) 1fr; grid-template-areas: "disc head" "data data"; gap: 48px 5vw; padding: 13vh var(--gut) 11vh; align-items: center; }
.tonight__disc { grid-area: disc; }
.tonight__disc canvas { width: 100%; height: auto; aspect-ratio: 1; display: block; }
.tonight__head { grid-area: head; }
.tonight__title { font-size: clamp(40px, 6.4vw, 112px); margin: 14px 0 18px; }
.tonight__lede { max-width: 34rem; margin: 0; font-size: 16px; }
.tonight__data { grid-area: data; display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; border-top: 1px solid var(--black); }
.tonight__data > div { padding: 18px 16px 0 0; border-right: 1px solid rgba(0,0,0,.25); }
.tonight__data > div + div { padding-left: 16px; }
.tonight__data > div:last-child { border-right: 0; }
.tonight__data dd { margin: 8px 0 0; font-family: var(--f-title); font-weight: 300; font-size: clamp(26px, 2.6vw, 44px); letter-spacing: .04em; line-height: 1.1; text-transform: uppercase; }

/* ---------- Moon ---------- */
.moon { position: relative; }
.moon__stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--night); }
.moon__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.moon__halo { position: absolute; left: 50%; top: 58%; width: 80vh; height: 80vh; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(91,224,255,.22) 0%, rgba(91,224,255,.08) 38%, rgba(91,224,255,0) 66%); pointer-events: none; }
.moon__header { position: absolute; z-index: 3; left: 0; right: 0; top: 32vh; text-align: center; padding: 0 var(--gut); opacity: 0; }
.moon__header .label { color: var(--aurora); margin-bottom: 14px; }
.moon__title { font-size: clamp(28px, 3.3vw, 58px); white-space: nowrap; text-shadow: 0 0 28px var(--night), 0 0 10px var(--night), 0 0 3px var(--night); }
.moon__title #mTime { color: var(--amber); }
.moon__leaders { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.moon__leaders line { stroke: var(--aurora); stroke-width: 1; }
.moon__leaders circle { fill: none; stroke: var(--aurora); stroke-width: 1; }
.moon__points { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.mpt { position: absolute; width: min(19rem, 24vw); visibility: hidden; }
.mpt > * { opacity: var(--face, 1); }
.mpt .label { color: var(--aurora); display: block; margin-bottom: 6px; }
.mpt p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--white); }
.mpt[data-side="r"] { text-align: right; }

/* ---------- Exposure (amber band) ---------- */
.exposure__stage { height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5vw; padding: 0 var(--gut); overflow: hidden; }
.exposure__copy { align-self: center; }
.exposure__title { font-size: clamp(44px, 5.6vw, 104px); margin: 18px 0 32px; }
.exposure__cap { font-size: clamp(17px, 1.4vw, 21px); max-width: 22rem; margin: 0; }
.exposure__frame { position: relative; width: min(74vh, 46vw); aspect-ratio: 1; perspective: 1000px; perspective-origin: 50% 50%; }
.exposure__tiles { position: absolute; inset: 0; transform-style: preserve-3d; }
.tile { position: absolute; background-image: url(https://demo.uichemy.com/wp-content/uploads/2026/10/noctara-fast__exposure-nebula-03.webp); background-repeat: no-repeat; will-change: transform, opacity, filter; backface-visibility: hidden; }
.exposure__mark { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-family: var(--f-title); font-weight: 200; text-transform: uppercase; letter-spacing: .3em; font-size: clamp(26px, 3.4vw, 56px); color: var(--white); opacity: 0; pointer-events: none; text-shadow: 0 0 30px rgba(0,0,0,.35); }
.exposure__meta { position: absolute; left: 0; bottom: -28px; }

/* ---------- Instrument ---------- */
.instrument__stage { position: relative; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: minmax(0, 1fr); overflow: hidden; background: linear-gradient(180deg, var(--ice-glow) 0%, var(--night) 62%); }
.instrument__copy { padding: 13vh 0 6vh var(--gut); justify-content: center; display: flex; flex-direction: column; z-index: 2; }
.instrument__copy > .label { color: var(--ice); }
.instrument__title { font-size: clamp(36px, 4.2vw, 76px); margin: 14px 0 5vh; white-space: nowrap; }
.instrument__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.2vh; max-width: 26rem; }
.instrument__list li { padding-left: 20px; border-left: 1px solid rgba(255,255,255,.18); opacity: .32; transition: opacity .5s, border-color .5s; }
.instrument__list li.is-active { opacity: 1; border-color: var(--aurora); }
.instrument__list .label { color: var(--ice); }
.instrument__list strong { display: block; font-family: var(--f-title); font-weight: 300; text-transform: uppercase; letter-spacing: .1em; font-size: clamp(20px, 1.9vw, 30px); line-height: 1.15; margin: 4px 0 4px; }
.instrument__list p { margin: 0; font-size: 14px; color: rgba(255,255,255,.78); }
.instrument__view { position: relative; }
.instrument__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.instrument__readout { position: absolute; right: var(--gut); bottom: 40px; display: flex; gap: 22px; color: var(--ice); }

/* ---------- Rooms (aurora band) ---------- */
.rooms { padding: 16vh 0 10vh; }
.rooms__top { padding: 0 var(--gut); }
.rooms__intro { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-top: 5vh; }
.rooms__intro .label { max-width: 16rem; }
.rooms__title { font-size: clamp(44px, 7vw, 124px); text-align: right; }
.rooms__topimg { height: 72vh; overflow: hidden; }
.rooms__topimg img { width: 100%; height: 112%; object-fit: cover; will-change: transform; }
.rooms__reveal { position: relative; height: 100vh; margin: 12vh 0; overflow: hidden; }
.rooms__reveal-in { position: absolute; inset: 0; background: var(--black) url(https://demo.uichemy.com/wp-content/uploads/2026/10/noctara-fast__rooms-overhead-15.webp) center / cover no-repeat; display: grid; place-items: end start; padding: var(--gut); will-change: transform; }
.rooms__reveal-in::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 55%); }
.rooms__reveal-in p { position: relative; color: var(--white); font-size: clamp(30px, 4.4vw, 76px); max-width: 20ch; }
.rooms__reveal-mask { position: absolute; inset: 0; overflow: hidden; will-change: transform; }
.rooms__list { display: grid; gap: 16vh; padding: 0 var(--gut); }
.room { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 5vw; align-items: center; }
.room.is-flip .room__imgs { order: 2; }
.room__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6vw; }
.room__img { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; background: rgba(0,0,0,.12); }
.room__img.is-offset { margin-top: 14vh; }
.room__img img { width: 100%; height: 112%; object-fit: cover; will-change: transform; }
.room__name { font-family: var(--f-title); font-weight: 200; text-transform: uppercase; letter-spacing: .12em; font-size: clamp(34px, 3.8vw, 64px); line-height: 1.05; margin: 14px 0 28px; }
.room__p { font-size: clamp(16px, 1.3vw, 20px); line-height: 1.5; }
.ln { display: block; position: relative; height: 1.5em; }
.ln-r, .ln-l { position: absolute; top: 0; white-space: nowrap; will-change: transform; }
.ln-r { right: 0; opacity: .38; }
.ln-l { left: 0; }
.room__price { font-family: var(--f-title); font-weight: 300; font-size: clamp(24px, 2.2vw, 36px); letter-spacing: .04em; margin: 32px 0 0; display: flex; align-items: baseline; gap: 12px; border-top: 1px solid var(--black); padding-top: 16px; }

/* ---------- Nights ---------- */
.nights { padding: 18vh var(--gut) 14vh; }
.nights__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 10vh; }
.nights__head .label { color: var(--amber); }
.nights__title { font-size: clamp(44px, 7vw, 124px); }
.nights__line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 12vh 2vw; }
.nt { grid-column: span 4; }
.nt.is-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 3vw; align-items: end; }
.nt:nth-child(2) { grid-column: 1 / span 6; }
.nt:nth-child(3) { grid-column: 8 / span 5; margin-top: 18vh; }
.nt:nth-child(4) { grid-column: 2 / span 4; }
.nt:nth-child(5) { grid-column: 7 / span 5; margin-top: 10vh; }
.nt__img { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; background: rgba(255,255,255,.05); }
.nt.is-wide .nt__img { aspect-ratio: 16 / 9; }
.nt:nth-child(2) .nt__img { aspect-ratio: 4 / 3; }
.nt__img img { width: 100%; height: 112%; object-fit: cover; will-change: transform; }
.nt__txt { padding-top: 20px; }
.nt__time { display: block; font-family: var(--f-title); font-weight: 200; font-size: clamp(40px, 4.4vw, 76px); letter-spacing: .06em; line-height: 1; color: var(--amber); }
.nt h3 { font-family: var(--f-mono); font-weight: 500; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--aurora); margin: 14px 0 8px; }
.nt p { margin: 0; max-width: 26rem; color: rgba(255,255,255,.82); }

/* ---------- Book + footer ---------- */
.book { padding: 16vh 0 0; border-top: 1px solid rgba(55,255,174,.35); }
.book__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 6vw; padding: 0 var(--gut); }
.book__head .label { color: var(--aurora); }
.book__title { font-size: clamp(44px, 6.4vw, 112px); margin: 18px 0 28px; }
.book__lede { max-width: 28rem; margin: 0; color: rgba(255,255,255,.82); }
.book__form { display: grid; gap: 28px; align-content: start; }
.book__moons { border: 0; margin: 0; padding: 0; min-width: 0; }
.book__moons legend { padding: 0; margin-bottom: 14px; color: rgba(255,255,255,.7); }
.book__moon-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid rgba(255,255,255,.3); }
.mopt { position: relative; cursor: pointer; display: block; padding: 18px 16px 16px; border-right: 1px solid rgba(255,255,255,.3); transition: background .3s, color .3s; }
.mopt:last-child { border-right: 0; }
.mopt input { position: absolute; opacity: 0; pointer-events: none; }
.mopt__d { display: block; font-family: var(--f-title); font-weight: 300; font-size: clamp(24px, 2.1vw, 34px); letter-spacing: .05em; text-transform: uppercase; line-height: 1.1; }
.mopt__w { display: block; margin-top: 6px; }
.mopt:hover { background: rgba(55,255,174,.1); }
.mopt:has(input:checked) { background: var(--aurora); color: var(--black); }
.mopt:has(input:focus-visible) { outline: 2px solid var(--aurora); outline-offset: 2px; }
.book__row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.field { display: grid; gap: 8px; }
.field .label { color: rgba(255,255,255,.7); }
.field input, .field select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.45); border-radius: 0; padding: 10px 0; font-size: 17px; color: var(--white); outline: none; transition: border-color .25s; }
.field select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(-45deg, transparent 50%, currentColor 50%); background-position: right 6px center, right 0 center; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 24px; }
.field select option { background: var(--night); color: var(--white); }
.field input:focus, .field select:focus { border-color: var(--aurora); }
.field input::placeholder { color: rgba(255,255,255,.4); }
.btn-aurora { justify-self: start; display: inline-flex; align-items: center; gap: 28px; background: var(--aurora); color: var(--black); border: 1px solid var(--aurora); border-radius: 0; padding: 16px 22px; font-weight: 600; font-size: 15px; cursor: pointer; transition: background .25s, color .25s; }
.btn-aurora:hover { background: transparent; color: var(--aurora); }
.book__msg { margin: 0; min-height: 1.5em; font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }

.foot { position: relative; margin-top: 14vh; }
.foot__gl { display: block; width: 100%; height: 25vw; }
.foot__word { display: none; margin: 0; font-family: var(--f-title); font-weight: 300; font-size: 17vw; letter-spacing: .08em; line-height: 1; text-align: center; color: var(--amber); }
.no-webgl .foot__gl { display: none; }
.no-webgl .foot__word { display: block; }
.foot__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 28px var(--gut) 34px; border-top: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.72); }
.foot__row a { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); }
.foot__row a:hover { color: var(--aurora); border-color: var(--aurora); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .nav { grid-template-columns: auto 1fr; }
}
@media (max-width: 767px) {
  .nav { gap: 10px; padding: 14px 16px; }
  .nav__mark { font-size: 14px; letter-spacing: .28em; }
  .nv-toggle { padding: 7px 9px; font-size: 10px; }
  .nav__cta { padding: 8px 10px; font-size: 12px; }
  .nav__cta-long { display: none; }
  .chapter.is-hero { top: 18%; }
  .chapter.is-left, .chapter.is-right { left: 16px; right: 16px; top: 26%; translate: none; text-align: left; }
  .chapter.is-right .chapter__body { margin-left: 0; }
  .chapter__title { font-size: 10vw; letter-spacing: .08em; }
  .chapter:not(.is-hero) .chapter__title { font-size: 10.5vw; }
  .hero__num { font-size: 42vw; }
  .hero__hud .hero__scroll { display: none; }

  .tonight { grid-template-columns: 34vw 1fr; grid-template-areas: "disc head" "data data"; gap: 28px 18px; padding: 12vh 16px 9vh; }
  .tonight__title { font-size: 9vw; }
  .tonight__lede { display: none; }
  .tonight__data { grid-template-columns: 1fr 1fr; }
  .tonight__data > div { padding: 14px 10px 14px 0; border-right: 0; border-bottom: 1px solid rgba(0,0,0,.25); }
  .tonight__data > div + div { padding-left: 0; }
  .tonight__data > div:nth-child(even) { padding-left: 12px; border-left: 1px solid rgba(0,0,0,.25); }

  .moon__header { top: 24vh; }
  .moon__halo { top: 38%; width: 60vh; height: 60vh; }
  .moon__title { font-size: 6.4vw; white-space: normal; }
  .moon__points { top: auto; bottom: 0; height: auto; padding: 48px 16px 24px; background: linear-gradient(180deg, rgba(8,4,42,0) 0%, rgba(8,4,42,.92) 72px); display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; position: absolute; }
  .mpt { position: relative; width: auto; left: auto !important; top: auto !important; text-align: left !important; }
  .mpt p { font-size: 12px; line-height: 1.35; }
  .moon__leaders { display: none; }

  .exposure__stage { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; gap: 30px; padding: 70px 16px 40px; }
  .exposure__title { font-size: 13vw; margin: 10px 0 14px; }
  .exposure__frame { width: min(88vw, 56vh); justify-self: center; }

  .instrument__stage { grid-template-columns: 1fr; grid-template-rows: 48% 52%; }
  .instrument__view { grid-row: 1; }
  .instrument__copy { grid-row: 2; padding: 0 16px 22px; }
  .instrument__copy > .label, .instrument__title { display: none; }
  .instrument__list { gap: 12px; }
  .instrument__list p { font-size: 13px; }
  .instrument__readout { right: 16px; bottom: 24px; }

  .rooms { padding-top: 12vh; }
  .rooms__intro { flex-direction: column; align-items: start; }
  .rooms__title { text-align: left; font-size: 12vw; }
  .rooms__topimg { height: 52vh; }
  .rooms__reveal { height: 80vh; }
  .room, .room.is-flip { grid-template-columns: 1fr; gap: 36px; }
  .room.is-flip .room__imgs { order: 0; }
  .room__img.is-offset { margin-top: 8vh; }
  .room__p { font-size: 15px; }

  .nights__head { flex-direction: column; align-items: start; }
  .nights__line { grid-template-columns: 1fr; gap: 9vh; }
  .nt, .nt:nth-child(n), .nt.is-wide { grid-column: 1 / -1; margin-top: 0; display: block; }

  .book__grid { grid-template-columns: 1fr; gap: 48px; padding: 0 16px; }
  .book__row { grid-template-columns: 1fr; }
  .mopt { padding: 14px 10px; }
  .mopt__d { font-size: 20px; }
  .foot__gl { height: 30vw; }
  .foot__row { grid-template-columns: 1fr 1fr; padding: 22px 16px 28px; }
}
@media (max-width: 420px) {
  .nv-toggle__label { font-size: 0; }
  .nv-toggle__label::after { content: "Red"; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* WordPress / Elementor compatibility: the active WordPress theme styles <body> and every heading as well
   (Twenty Twenty-Five sets body weight 300 and -0.1px tracking, and h1-h6 weight 400, -0.1px tracking,
   line-height 1.125 and preset sizes); Elementor zeroes every <figure> margin inside a widget at (0,4,1).
   Restore the browser defaults this page relies on at element level (every class rule above still wins) and
   re-assert the one figure margin this design uses, with Elementor's own prefix. Elementor's `.elementor img { height: auto }`
   (0,1,1) also beats the single-class hero backdrop height, so re-assert it at (0,2,0). Inert in a plain browser. 
   When the page's own Elementor post CSS is missing, the section container falls back to the kit's 10px padding
   and 20px gap; zero them on the container that holds this page's sections. */
html body { font-weight: 400; letter-spacing: normal; }
html body :is(h1, h2, h3, h4, h5, h6) { font-weight: bold; letter-spacing: normal; line-height: inherit; }
html body h1 { font-size: 2em; }
html body h2 { font-size: 1.5em; }
html body h3 { font-size: 1.17em; }
.elementor .elementor-widget:not(.elementor-widget-text-editor):not(.elementor-widget-theme-post-content) .room__img.is-offset { margin-top: 14vh; }
@media (max-width: 767px) { .elementor .elementor-widget:not(.elementor-widget-text-editor):not(.elementor-widget-theme-post-content) .room__img.is-offset { margin-top: 8vh; } }
.elementor .hero__backdrop { width: 100%; height: 112%; }
html body .elementor .e-con.e-parent:has(> .elementor-element [class^="uichemy-"]) { --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; --row-gap:0px; --column-gap:0px; --gap:0px 0px; }