/* css/language-dropdown.css */
/**
 * Language Dropdown Styles
 * Dropdown menu for language selection in landing pages
 */

/* Hidden utility class */
.hidden {
  display: none !important;
}

/* Dropdown wrapper positioning */
.language-dropdown-wrapper {
  position: relative;
}

/* Dropdown menu styles */
.language-dropdown-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 0.5rem;
  min-width: 160px;
  z-index: 50;
  border-radius: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
  animation: dropdownFadeIn 0.2s ease-out forwards;
  backdrop-filter: blur(18px);
  background: rgba(10, 5, 20, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Dropdown fade-in animation */
@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dropdown item base styles */
.dropdown-item {
  cursor: pointer;
  border-left: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: rgba(243, 232, 255, 0.85);
  transition: all 0.2s ease;
  text-decoration: none;
  width: 100%;
  box-sizing: border-box;
}

/* Dropdown item hover state */
.dropdown-item:hover:not(.disabled) {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  border-left-color: #ead4b4; /* dream-salmon */
}

/* Dropdown item active/disabled state (for future use) */
.dropdown-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Check icon styles */
.dropdown-item .text-dream-salmon {
  color: #ead4b4;
}

/* Hidden check icon */
.dropdown-item .current-lang-indicator.hidden {
  display: none;
}

/* Chevron rotation transition */
#dropdownChevron {
  transition: transform 0.3s ease;
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
  .language-dropdown-menu {
    right: -8px;
    min-width: 140px;
    font-size: 0.8125rem;
  }

  .dropdown-item {
    padding: 0.4rem 0.75rem;
  }
}

/* Ensure proper z-stacking */
.language-dropdown-menu {
  z-index: 50;
}

/* Glass button hover enhancement */
.glass-button:hover {
  border-color: #ead4b4; /* dream-salmon */
  color: white;
}

/* css/observatory.css */
/* Noctalia observatory landing layer.
 *
 * Editorial night-journal design on the canonical Noctalia palette
 * (constants/noctaliaPalette.ts, dark mode): ink grounds, ivory text,
 * champagne accent. Refinement comes from tints, veils, hairline gradients,
 * grain and depth — never from new hues. Champagne is a fill, line and glow
 * colour; accented copy uses `--oh-champagne-on`.
 *
 * Custom `oh-*` classes own the layout so the page does not depend on
 * Tailwind utilities being recompiled. This file only loads on
 * `layout: "landing"` pages, so the `:root` tokens and shared-shell
 * overrides below never leak into other pages.
 *
 * Contract: the hero LCP background below must keep referencing
 * /img/hero/noctalia-observatory-bg.webp (see check-web-performance-contract).
 */

:root {
  /* Canonical palette (dark). */
  --oh-ink: #03040d;
  --oh-ink-raised: #14131a;
  --oh-ivory: #fff9ef;
  --oh-ivory-muted: #b7aec9;
  --oh-champagne: #ead4b4;
  --oh-champagne-on: #ead4b4;
  --oh-on-champagne: #382d35;
  --oh-veil: rgba(25, 35, 68, 0.42);
  --oh-noir: #31354f;

  /* Tints derived from the palette. */
  --oh-ivory-80: rgba(255, 249, 239, 0.8);
  --oh-champagne-light: #f6ebda;
  --oh-champagne-12: rgba(234, 212, 180, 0.12);
  --oh-champagne-06: rgba(234, 212, 180, 0.06);
  --oh-line: rgba(234, 212, 180, 0.12);
  --oh-line-strong: rgba(234, 212, 180, 0.26);

  /* Light-mode palette for the single inverted (ivory) surface. */
  --oh-light-text: #382d35;
  --oh-light-muted: #64514f;
  --oh-light-accent: #7c4c2b;
  --oh-light-line: rgba(56, 45, 53, 0.14);
  /* Resting labels on ivory: 4.9:1, quieter than the text but still AA. */
  --oh-light-quiet: #7a6a68;

  --oh-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

::selection {
  background: var(--oh-champagne);
  color: var(--oh-on-champagne);
}

/* Reserve the mobile navigation's final size before its controller loads. */
@media (max-width: 767px) {
  .noctalia-premium-nav #navDesktopLangDropdown { display: none !important; }
  .noctalia-premium-nav #mobileMenuButton { display: inline-flex !important; }
}

.noctalia-observatory {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  isolation: isolate;
  color: var(--oh-ivory);
}

/* Ground: ink with a navy veil, a faint champagne dawn and a noir floor. */
.noctalia-observatory::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70rem 46rem at 12% -8%, var(--oh-veil), transparent 70%),
    radial-gradient(ellipse 48rem 34rem at 88% -4%, rgba(234, 212, 180, 0.07), transparent 70%),
    radial-gradient(ellipse 80rem 40rem at 50% 115%, rgba(49, 53, 79, 0.45), transparent 70%), var(--oh-ink);
}

/* Grain: a static, tiled noise texture keeps large ink areas from banding. */
.noctalia-observatory::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.98 0 0 0 0 0.94 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

.noctalia-observatory .text-dream-salmon {
  color: var(--oh-champagne-on);
}

.noctalia-observatory .text-dream-cream {
  color: var(--oh-ivory);
}

/* ---------------------------------------------------------------- */
/* Shared primitives                                                 */
/* ---------------------------------------------------------------- */

.noctalia-observatory .glass-button {
  background: transparent;
  border: 1px solid var(--oh-line-strong);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    border-color 200ms ease,
    color 200ms ease;
}

.noctalia-observatory .glass-button:hover {
  background: transparent;
  border-color: var(--oh-champagne);
  color: var(--oh-champagne-on);
}

.noctalia-observatory section {
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Decorative section index ("01", "02", …): a champagne rule and numeral. */
.oh-index {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  color: var(--oh-champagne-on);
  margin-bottom: 1.25rem;
}

.oh-index::before {
  content: '';
  width: 2.25rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--oh-champagne));
}

.oh-pricing-head .oh-index::after {
  content: '';
  width: 2.25rem;
  height: 1px;
  background: linear-gradient(90deg, var(--oh-champagne), transparent);
}

.oh-h2 {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 144;
  font-weight: 330;
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--oh-ivory);
  text-wrap: balance;
}

.oh-lede {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--oh-ivory-muted);
  max-width: 38rem;
}

.oh-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  max-width: 1200px;
  margin: 0 auto 4.5rem;
}

.oh-section-head .oh-lede {
  max-width: 30rem;
}

/* Primary CTA — champagne pill with a light top edge and a warm glow. The
 * stronger hover glow is a pre-rendered layer faded in with opacity. */
.oh-btn-primary {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 2.1rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--oh-champagne-light) 0%, var(--oh-champagne) 70%);
  color: var(--oh-on-champagne);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(56, 45, 53, 0.14),
    0 12px 32px -12px rgba(234, 212, 180, 0.5);
  transition: transform 160ms var(--oh-ease-out);
}

.oh-btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 18px 48px -10px rgba(234, 212, 180, 0.6);
  opacity: 0;
  transition: opacity 200ms ease;
}

.oh-btn-primary:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .oh-btn-primary:hover::after {
    opacity: 1;
  }
}

/* Secondary CTA — quiet text link with a champagne hairline. */
.oh-btn-quiet {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 1rem 0.25rem;
  color: var(--oh-ivory-80);
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 1.02rem;
  transition: color 200ms ease;
}

.oh-btn-quiet::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.7rem;
  height: 1px;
  background: linear-gradient(90deg, var(--oh-champagne), rgba(234, 212, 180, 0.2));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 250ms var(--oh-ease-out);
}

.oh-btn-quiet svg {
  color: var(--oh-champagne);
}

.oh-btn-quiet:hover {
  color: var(--oh-champagne-on);
}

.oh-btn-quiet:hover::after {
  transform: scaleX(1);
}

/* ---------------------------------------------------------------- */
/* 1. Hero                                                           */
/* ---------------------------------------------------------------- */

.noctalia-observatory > header {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  padding: 7.5rem clamp(1.25rem, 4vw, 3.5rem) clamp(1.75rem, 4.5vh, 3rem);
  overflow: hidden;
}

/* The purple-toned photograph is desaturated and veiled in ink so it reads
 * as part of the palette rather than a new hue. */
.noctalia-observatory > header::before {
  content: '';
  position: absolute;
  inset: 0;
  min-height: 100%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 75% 65% at 50% 38%, transparent 45%, rgba(3, 4, 13, 0.72) 100%),
    linear-gradient(180deg, rgba(3, 4, 13, 0.2), rgba(3, 4, 13, 0.55) 56%, rgba(3, 4, 13, 0.96)),
    url('/img/hero/noctalia-observatory-bg.webp') center center / cover no-repeat;
  opacity: 0.55;
  filter: saturate(0.55) contrast(1.04);
  transform: scale(1.01);
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
}

.noctalia-observatory > header > div {
  width: min(100%, 1240px);
  max-width: none;
}

.oh-hero-inner {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  text-align: left;
}

/* The title is the image of the first screen: two offset lines at poster
 * scale, the second in champagne. */
.oh-hero-title {
  max-width: none;
  margin: auto 0;
  padding: 2rem 0 3rem;
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 144;
  font-weight: 300;
  font-size: clamp(3.5rem, 10.4vw, 9.5rem);
  line-height: 0.94;
  letter-spacing: -0.035em;
  color: var(--oh-ivory);
}

.oh-hero-line {
  display: block;
}

.oh-hero-line + .oh-hero-line {
  padding-left: clamp(2.6rem, 13vw, 14rem);
}

/* One compound word over two lines: the hyphen is visual only. */
.oh-hero-line--joined::after {
  content: '-' / '';
}

.oh-hero-title .oh-accent-line {
  font-weight: 360;
  color: var(--oh-champagne-on);
  text-shadow: 0 0 48px rgba(234, 212, 180, 0.22);
}

.oh-hero-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem 3rem;
}

.oh-hero-intro {
  max-width: 38rem;
}

.oh-hero-lede {
  margin: 0 0 1.5rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.65;
  max-width: 31rem;
  color: var(--oh-ivory-80);
  text-wrap: pretty;
}

.oh-hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem 2rem;
  margin-bottom: 1.1rem;
}

.oh-hero-intro .oh-hero-cta {
  justify-content: flex-start;
  margin: 0;
}

.oh-hero-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--oh-ivory-muted);
}

.oh-hero-scroll::after {
  content: '';
  width: 1px;
  height: 4.5rem;
  background: linear-gradient(180deg, var(--oh-champagne), transparent);
  transform-origin: top center;
}

.oh-hero-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--oh-ivory-muted);
}

.oh-hero-note svg {
  color: var(--oh-champagne);
}

/* Sections without a locale id share this rhythm. */
.oh-section {
  padding-top: clamp(6rem, 10vw, 9rem);
  padding-bottom: 2rem;
}

.oh-dreams {
  position: relative;
  isolation: isolate;
  z-index: 1;
  padding-top: calc(clamp(3rem, 5vw, 4rem) + 3rem);
}

.oh-dreams-heading-end {
  display: none;
}

.oh-dreams-closing {
  width: 100%;
  max-width: 1200px;
  margin: 0.75rem auto 0;
  text-align: right;
}

@media (min-width: 1100px) {
  .oh-dreams > .oh-section-head {
    max-width: 1440px;
    flex-wrap: nowrap;
    align-items: baseline;
    column-gap: clamp(1.5rem, 3vw, 3rem);
  }

  .oh-dreams > .oh-section-head > .oh-h2 {
    flex: 0 0 auto;
    font-size: clamp(1.8rem, 3.1vw, 3.25rem);
    white-space: nowrap;
  }

  .oh-dreams-heading-end {
    display: block;
    margin: 0 0 0 auto;
    text-align: right;
  }

  .oh-dreams-closing {
    display: none;
  }
}

.oh-dreams::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: min(80rem, 100%);
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 22%, rgba(255, 249, 239, 0.5) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 14%, rgba(255, 249, 239, 0.38) 0 1px, transparent 2px),
    radial-gradient(circle at 89% 39%, rgba(234, 212, 180, 0.42) 0 1px, transparent 2px),
    radial-gradient(ellipse 65% 36% at 50% 19%, rgba(72, 55, 97, 0.3), transparent 76%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 4rem, #000 65rem, transparent 80rem);
  mask-image: linear-gradient(180deg, transparent 0, #000 4rem, #000 65rem, transparent 80rem);
}

/* Centered heads (pricing, FAQ). */
.oh-pricing-head {
  text-align: center;
  max-width: 1200px;
  margin: 0 auto 4rem;
}

/* Icon sizing (lucide svgs are inlined at build time). */
.oh-hero-note svg {
  width: 0.8rem;
  height: 0.8rem;
}

.oh-btn-primary svg,
.oh-btn-quiet svg {
  width: 1.05rem;
  height: 1.05rem;
}

.oh-symbol svg {
  width: 1rem;
  height: 1rem;
}

.oh-symbols-cta {
  text-align: center;
}

/* ---------------------------------------------------------------- */
/* 2. Manifesto: one sentence over the sky, then four promises       */
/* ---------------------------------------------------------------- */

.noctalia-observatory :is(#how-it-works, #comment-ca-marche, #como-funciona, #so-funktioniert-es, #come-funziona) {
  padding: clamp(7rem, 16vh, 12rem) clamp(1.25rem, 4vw, 3.5rem) clamp(6rem, 12vh, 9rem);
}

.oh-manifesto-head {
  max-width: 1240px;
  margin: 0 auto clamp(4rem, 9vw, 7.5rem);
}

.oh-manifesto-title {
  max-width: 17ch;
  margin: 0;
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 144;
  font-weight: 300;
  font-size: clamp(2.5rem, 5.8vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--oh-ivory);
  text-wrap: balance;
}

.oh-manifesto-head .oh-lede {
  margin: 2rem 0 0;
  max-width: 30rem;
  color: var(--oh-ivory-80);
}

.oh-promises {
  display: grid;
  gap: 2.75rem 2.5rem;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.oh-promise {
  position: relative;
  padding-top: 1.5rem;
}

.oh-promise::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--oh-champagne), rgba(234, 212, 180, 0.12));
  transform-origin: left center;
}

.oh-promise h3 {
  margin: 0 0 0.8rem;
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--oh-ivory);
}

.oh-promise p {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--oh-ivory-muted);
}

@media (min-width: 640px) {
  .oh-promises {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  .oh-promises {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Editorial phone frame (overrides the compiled 4px border). */
.noctalia-observatory .phone-frame {
  border: 1px solid transparent;
  border-radius: 26px;
  background:
    linear-gradient(var(--oh-ink), var(--oh-ink)) padding-box,
    linear-gradient(165deg, rgba(234, 212, 180, 0.42), rgba(234, 212, 180, 0.05) 40%, rgba(183, 174, 201, 0.16)) border-box;
  box-shadow:
    0 40px 80px -30px rgba(0, 0, 0, 0.85),
    0 24px 80px -40px rgba(234, 212, 180, 0.3);
}

/* ---------------------------------------------------------------- */
/* 6. Plans, on the ivory ground: hairlines instead of panels        */
/* ---------------------------------------------------------------- */

.oh-pricing {
  display: grid;
  max-width: 1040px;
  margin: 0 auto;
  border-top: 1px solid var(--oh-light-line);
}

.oh-plan {
  display: flex;
  flex-direction: column;
  padding: 2.25rem 0 2.5rem;
}

.oh-plan + .oh-plan {
  border-top: 1px solid var(--oh-light-line);
}

.oh-plan-head {
  margin-bottom: 1.75rem;
}

.oh-plan-tag {
  display: block;
  margin-bottom: 0.75rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oh-light-accent);
}

.oh-plan h3 {
  margin: 0 0 0.4rem;
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 144;
  font-weight: 300;
  font-size: 2.2rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--oh-light-text);
}

.oh-plan-price {
  margin-bottom: 0.9rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--oh-light-accent);
}

.oh-plan-desc {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--oh-light-muted);
}

.oh-plan ul {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 2.2rem;
  padding: 0;
  list-style: none;
}

.oh-plan ul li {
  position: relative;
  padding-left: 1.5rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--oh-light-text);
}

.oh-plan ul li::before {
  content: '';
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 0.7rem;
  height: 1px;
  background: var(--oh-light-accent);
}

.oh-plan .oh-plan-cta {
  align-self: flex-start;
  display: inline-flex;
  margin-top: auto;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  transition:
    border-color 200ms ease,
    background-color 200ms ease,
    transform 160ms var(--oh-ease-out);
}

.oh-plan--free .oh-plan-cta {
  border: 1px solid rgba(56, 45, 53, 0.32);
  color: var(--oh-light-text);
}

.oh-plan--plus .oh-plan-cta {
  border: 1px solid var(--oh-light-text);
  background: var(--oh-light-text);
  color: var(--oh-ivory);
}

@media (hover: hover) and (pointer: fine) {
  .oh-plan--free .oh-plan-cta:hover {
    border-color: var(--oh-light-text);
  }

  .oh-plan--plus .oh-plan-cta:hover {
    background: #2a2128;
  }
}

.oh-plan .oh-plan-cta:active {
  transform: scale(0.97);
}

.oh-plan-note {
  margin: 1rem 0 0;
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--oh-light-muted);
}

@media (min-width: 860px) {
  .oh-pricing {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .oh-plan {
    padding: 2.5rem clamp(1.5rem, 3vw, 3rem) 2.75rem 0;
  }

  .oh-plan + .oh-plan {
    padding-left: clamp(1.5rem, 3vw, 3rem);
    border-top: 0;
    border-left: 1px solid var(--oh-light-line);
  }
}

/* ---------------------------------------------------------------- */
/* 7. FAQ, on the ivory ground                                       */
/* ---------------------------------------------------------------- */

.oh-faq {
  max-width: 52rem;
  margin: 0 auto;
  border-top: 1px solid var(--oh-light-line);
}

.oh-faq details {
  border-bottom: 1px solid var(--oh-light-line);
}

.oh-faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: 1.22rem;
  line-height: 1.3;
  color: var(--oh-light-text);
}

.oh-faq summary::-webkit-details-marker {
  display: none;
}

/* The same "+" rotates into a "×" so the state change reads as one object. */
.oh-faq summary::after {
  content: '+';
  flex: none;
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--oh-light-accent);
  transition: transform 250ms var(--oh-ease-out);
}

.oh-faq details[open] summary::after {
  transform: rotate(45deg);
}

.oh-faq summary:focus-visible {
  outline: 2px solid var(--oh-light-accent);
  outline-offset: 4px;
  border-radius: 4px;
}

.oh-faq details p {
  max-width: 44rem;
  margin: 0 0 1.5rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--oh-light-muted);
}

@media (prefers-reduced-motion: no-preference) {
  .oh-faq details[open] p {
    animation: oh-faq-in 240ms var(--oh-ease-out);
  }
}

@keyframes oh-faq-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* ---------------------------------------------------------------- */
/* 4. Symbols: a typographic index, every question kept visible      */
/* ---------------------------------------------------------------- */

.noctalia-observatory :is(#symboles, #symbols, #simbolos, #traumsymbole, #simboli) {
  padding: clamp(6rem, 10vw, 9rem) clamp(1.25rem, 4vw, 3.5rem) clamp(4rem, 7vw, 6rem);
}

:is(#symboles, #symbols, #simbolos, #traumsymbole, #simboli) > .oh-section-head {
  max-width: 1240px;
}

.oh-symbols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1rem, 3vw, 2.5rem);
  max-width: 1240px;
  margin: 0 auto 3rem;
  border-top: 1px solid var(--oh-line);
  counter-reset: oh-symbol;
}

.oh-symbol {
  position: relative;
  display: block;
  padding: 1.5rem 2rem 1.6rem 0;
  border-bottom: 1px solid var(--oh-line);
  color: inherit;
  text-decoration: none;
  counter-increment: oh-symbol;
}

.oh-symbol::before {
  content: counter(oh-symbol, decimal-leading-zero);
  position: absolute;
  top: 1.85rem;
  right: 0;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--oh-ivory-muted);
  font-variant-numeric: tabular-nums;
}

.oh-symbol-name {
  display: block;
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 144;
  font-weight: 300;
  font-size: clamp(1.8rem, 3.3vw, 3.1rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--oh-ivory);
  transition:
    color 200ms ease,
    transform 300ms var(--oh-ease-out);
}

.oh-symbol-q {
  display: block;
  margin-top: 0.65rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--oh-ivory-muted);
  text-wrap: pretty;
}

.oh-symbol svg {
  position: absolute;
  right: 0;
  bottom: 1.7rem;
  color: var(--oh-champagne);
  opacity: 0;
  transform: translate3d(-4px, 4px, 0);
  transition:
    opacity 200ms ease,
    transform 300ms var(--oh-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  a.oh-symbol:hover .oh-symbol-name {
    color: var(--oh-champagne-on);
    transform: translate3d(0.25rem, 0, 0);
  }

  a.oh-symbol:hover svg {
    opacity: 1;
    transform: none;
  }
}

a.oh-symbol:focus-visible {
  outline: 2px solid var(--oh-champagne);
  outline-offset: 4px;
  border-radius: 4px;
}

a.oh-symbol:focus-visible svg {
  opacity: 1;
  transform: none;
}

@media (min-width: 900px) {
  .oh-symbols {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------- */
/* 8. Opening the eyes: back to night, the eyes reopen onto the app  */
/* ---------------------------------------------------------------- */

.noctalia-observatory .oh-ending {
  display: grid;
  gap: 3rem;
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3.5rem) clamp(5rem, 8vw, 8rem);
}

.oh-ending-portal {
  position: relative;
  display: flex;
  justify-content: center;
}

.oh-ending-portal .phone-frame {
  width: min(70%, 290px);
}

.oh-ending-copy {
  text-align: center;
}

.oh-ending-mentions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.75rem;
  margin: 0 0 1.75rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oh-ivory-muted);
}

.oh-ending-mentions span::before {
  content: '';
  display: inline-block;
  width: 0.35rem;
  height: 0.35rem;
  margin-right: 0.6rem;
  border-radius: 50%;
  background: var(--oh-champagne);
  vertical-align: 0.12em;
}

.oh-ending-title {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 144;
  font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--oh-ivory);
  text-wrap: balance;
}

.oh-ending-title span {
  display: block;
}

.oh-ending-title .oh-accent-line {
  color: var(--oh-champagne-on);
  text-shadow: 0 0 48px rgba(234, 212, 180, 0.22);
}

.oh-ending-copy .oh-lede {
  margin: 1.5rem auto 2.2rem;
}

@media (min-width: 900px) {
  .noctalia-observatory .oh-ending {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 5rem;
  }

  .oh-ending-copy {
    text-align: left;
  }

  .oh-ending-mentions {
    justify-content: flex-start;
  }

  .oh-ending-copy .oh-lede {
    margin-left: 0;
  }

  .oh-ending-copy :is(.oh-hero-cta, .oh-hero-note) {
    justify-content: flex-start;
  }
}

/* ---------------------------------------------------------------- */
/* Shared shell on landing pages (nav, footer)                       */
/* ---------------------------------------------------------------- */

body .noctalia-premium-nav .text-dream-salmon,
body #mobileMenuPanel .text-dream-salmon {
  color: var(--oh-champagne-on);
}

body .noctalia-premium-nav.py-2 {
  background: rgba(3, 4, 13, 0.78);
}

/* The consent panel styles are injected at runtime by site-shell.js; the
 * `body` prefix outranks them without !important. */
body .noctalia-consent-panel {
  border-color: var(--oh-line-strong);
  background: rgba(20, 19, 26, 0.96);
}

body .noctalia-consent-panel a,
body .noctalia-consent-manage:hover {
  color: var(--oh-champagne-on);
}

body .noctalia-consent-actions button {
  border-color: rgba(234, 212, 180, 0.5);
}

/* site-shell.js marks this colour !important. */
body .noctalia-consent-gpc {
  color: var(--oh-champagne-on) !important;
}

body .noctalia-consent-actions button:hover {
  border-color: var(--oh-champagne);
  background: var(--oh-champagne-12);
}

.landing-footer {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 4.5rem clamp(1.25rem, 3vw, 3rem) 2.5rem;
  background:
    radial-gradient(ellipse 40rem 18rem at 16% 0%, rgba(234, 212, 180, 0.07), transparent 70%),
    radial-gradient(ellipse 50rem 24rem at 90% 100%, var(--oh-veil), transparent 70%), var(--oh-ink);
  color: var(--oh-ivory);
}

.landing-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: min(100%, 1200px);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--oh-line-strong), transparent);
}

.landing-footer > .grid {
  display: grid !important;
  width: min(100%, 1200px);
  max-width: none;
  grid-template-columns: minmax(240px, 1.25fr) repeat(4, minmax(150px, 1fr));
  gap: clamp(1.5rem, 2.5vw, 2.75rem);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
  align-items: start;
}

.landing-footer > .grid > * {
  min-width: 0;
}

.landing-footer > .grid > :first-child {
  grid-column: auto !important;
}

.landing-footer h4,
.landing-footer h5 {
  color: var(--oh-ivory);
}

.landing-footer p,
.landing-footer li a,
.landing-footer .text-gray-500,
.landing-footer .text-gray-600 {
  color: var(--oh-ivory-muted);
}

.landing-footer li a:hover,
.landing-footer .text-dream-salmon {
  color: var(--oh-champagne-on);
}

.landing-footer .glass-button {
  border-color: var(--oh-line-strong);
  background: transparent;
}

.landing-footer > .border-t:last-child {
  width: min(100%, 1200px);
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  border-color: var(--oh-line);
  color: var(--oh-ivory-muted);
}

/* ---------------------------------------------------------------- */
/* Responsive                                                        */
/* ---------------------------------------------------------------- */

@media (max-width: 899px) {
  .noctalia-observatory > header {
    padding-top: 6rem;
  }

  .oh-dreams {
    padding-top: 4rem;
  }

  .oh-section-head {
    margin-bottom: 3rem;
  }

  .landing-footer {
    padding-top: 3.5rem;
  }

  .landing-footer > .grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (min-width: 900px) and (max-width: 1279px) {
  .landing-footer > .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) and (max-width: 1535px) {
  .landing-footer > .grid {
    grid-template-columns: minmax(220px, 1.15fr) repeat(4, minmax(135px, 1fr));
  }
}

/* Below desktop the five columns no longer fit: the brand takes its own
 * row and the link columns share the width. These rules follow the older
 * footer breakpoints above so they win at equal specificity. */
@media (max-width: 1099px) {
  .landing-footer > .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .landing-footer > .grid > :first-child {
    grid-column: 1 / -1 !important;
  }
}

@media (min-width: 900px) {
  .oh-hero-intro .oh-hero-cta {
    flex-wrap: nowrap;
  }

  .oh-hero-intro .oh-hero-cta > a {
    white-space: nowrap;
  }
}

@media (max-width: 699px) {
  .oh-hero-foot {
    flex-direction: column;
    align-items: stretch;
  }

  .oh-hero-scroll {
    display: none;
  }
}

@media (max-width: 639px) {
  .landing-footer > .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------- */
/* v4 chapters: base layout (all tiers, including static)            */
/* ---------------------------------------------------------------- */

.oh-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 01 Dream: example entries, styled like the app's journal cards. */
.oh-dream-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.oh-dream {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(234, 212, 180, 0.16);
  border-radius: 22px;
  background: linear-gradient(180deg, #17161f, #0c0c15);
  box-shadow: inset 0 1px 0 rgba(255, 249, 239, 0.06), 0 24px 48px -28px rgba(0, 0, 0, 0.8);
}

.oh-dream-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  background: #14131a;
}

.oh-dream-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.95rem 1.05rem 1.1rem;
}

.oh-dream-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  color: #b7aec9;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.oh-emotion {
  padding: 0.18rem 0.6rem;
  border: 1px solid rgba(234, 212, 180, 0.38);
  border-radius: 999px;
  color: var(--oh-champagne-on);
  font-size: 0.68rem;
  white-space: nowrap;
}

.oh-dream-title {
  margin: 0;
  color: #fff9ef;
  font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  font-size: 1.12rem;
  font-weight: 400;
  line-height: 1.25;
}

.oh-dream-excerpt,
.oh-dream-rest {
  margin: 0;
  color: #b7aec9;
  font-size: 0.86rem;
  line-height: 1.55;
}

.oh-dream-excerpt {
  quotes: '“' '”';
}

.oh-dream-excerpt:lang(fr) {
  quotes: '« ' ' »';
}

.oh-dream-excerpt:is(:lang(es), :lang(it)) {
  quotes: '«' '»';
}

.oh-dream-excerpt:lang(de) {
  quotes: '„' '“';
}

.oh-dream-excerpt::before {
  content: open-quote;
}

.oh-dream-excerpt::after {
  content: close-quote;
}

.oh-dream-more summary {
  color: var(--oh-champagne-on);
  font-size: 0.8rem;
  cursor: pointer;
}

.oh-dream-more[open] summary {
  margin-bottom: 0.4rem;
}

.oh-dream-symbols {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: auto 0 0;
  padding: 0.35rem 0 0;
  list-style: none;
}

.oh-dream-symbols li {
  padding: 0.14rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 249, 239, 0.07);
  color: #fff9ef;
  font-size: 0.7rem;
}

.oh-dream-symbols li::before {
  content: '# ';
  color: var(--oh-champagne-on);
}

.oh-dream-open {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}

.oh-dream-open:focus-visible {
  outline: 2px solid #ead4b4;
  outline-offset: 3px;
}

.oh-dreams-hint {
  display: none;
  margin-top: 1rem;
  color: var(--oh-champagne-on);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.oh-rec {
  max-width: 30rem;
  padding: 1.25rem 1.4rem 1.4rem;
  border-radius: 20px;
}

.oh-rec-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
  color: #fff9ef;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.oh-rec-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #ead4b4;
  box-shadow: 0 0 0 4px rgba(234, 212, 180, 0.16);
}

.oh-rec-time {
  margin-left: auto;
  color: #b7aec9;
  font-variant-numeric: tabular-nums;
}

.oh-rec-wave {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 64px;
}

.oh-rec-wave span {
  flex: 1;
  max-width: 5px;
  height: calc(var(--h) * 1%);
  border-radius: 3px;
  background: linear-gradient(180deg, #fff9ef, #ead4b4);
  opacity: 0.85;
  transform-origin: center;
}

.oh-rec-text {
  margin: 1.1rem 0 0;
  color: #fff9ef;
  font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  font-size: 1.02rem;
  font-style: italic;
  line-height: 1.55;
}

/* Step 1: a live capture screen in the same frame as the app screenshots. */
.noctalia-observatory .phone-frame.oh-live-phone {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 800 / 1639;
  overflow: hidden;
  padding: 3.6rem 1.5rem 7rem;
  background:
    radial-gradient(ellipse 120% 55% at 50% 34%, rgba(234, 212, 180, 0.08), transparent 68%) padding-box,
    linear-gradient(var(--oh-ink), var(--oh-ink)) padding-box,
    linear-gradient(165deg, rgba(234, 212, 180, 0.42), rgba(234, 212, 180, 0.05) 40%, rgba(183, 174, 201, 0.16)) border-box;
}

.oh-live-status {
  position: absolute;
  top: 1.1rem;
  left: 1.65rem;
  color: var(--oh-ivory);
  font-family: 'Outfit', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.oh-live-phone .oh-rec {
  max-width: none;
  padding: 0;
  border-radius: 0;
}

.oh-live-phone .oh-rec-head {
  font-size: 0.7rem;
}

.oh-live-phone .oh-rec-wave {
  justify-content: center;
  gap: 3px;
  height: 104px;
  margin-top: 2.6rem;
}

.oh-live-phone .oh-rec-text {
  margin-top: 2.2rem;
  font-size: 0.98rem;
}

.oh-live-button {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  margin-left: -1.8rem;
  border: 1px solid rgba(234, 212, 180, 0.55);
  border-radius: 50%;
  background: rgba(234, 212, 180, 0.08);
}

.oh-live-button::before {
  content: '';
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 4px;
  background: var(--oh-champagne);
}

.oh-live-button::after {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(234, 212, 180, 0.5);
  border-radius: 50%;
  opacity: 0;
}

/* 05 Waking: the single ivory chapter, in the palette's light mode.
 * A CSS dawn opens it, a dusk closes it; champagne is never text here. */
.oh-day {
  position: relative;
  isolation: isolate;
  padding-bottom: 30svh;
  color: var(--oh-light-text);
}

.oh-day::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(3, 4, 13, 0) 0,
    #0b0e1f 14svh,
    #252a45 32svh,
    #574a5c 48svh,
    #a48d88 62svh,
    #e2cdb4 76svh,
    #f8eedf 88svh,
    var(--oh-ivory) 100svh,
    var(--oh-ivory) calc(100% - 34svh),
    #efe0cb calc(100% - 27svh),
    #8f7a7c calc(100% - 18svh),
    #2b2c45 calc(100% - 9svh),
    rgba(3, 4, 13, 0) 100%
  );
}

.oh-day .oh-index {
  color: var(--oh-light-accent);
}

.oh-day .oh-index::before {
  background: linear-gradient(90deg, transparent, var(--oh-light-accent));
}

.oh-day .oh-h2 {
  color: var(--oh-light-text);
}

.oh-day .oh-lede {
  color: var(--oh-light-muted);
}

.oh-day .oh-btn-quiet {
  color: var(--oh-light-text);
}

.oh-day .oh-btn-quiet svg {
  color: var(--oh-light-accent);
}

.oh-day .oh-btn-quiet::after {
  background: linear-gradient(90deg, var(--oh-light-accent), rgba(124, 76, 43, 0.2));
  transform: scaleX(1);
}

.oh-day .oh-btn-quiet:hover {
  color: var(--oh-light-accent);
}

.oh-day .oh-section {
  padding-left: clamp(1.25rem, 4vw, 3.5rem);
  padding-right: clamp(1.25rem, 4vw, 3.5rem);
}

.noctalia-observatory .oh-wake {
  padding: 0 clamp(1.25rem, 4vw, 3.5rem);
}

.oh-wake-head {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  max-width: 1240px;
  margin: 0 auto;
  padding-bottom: clamp(1.5rem, 5vh, 3.5rem);
}

.oh-wake-title {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 144;
  font-weight: 300;
  font-size: clamp(3.6rem, 13.5vw, 12.5rem);
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: var(--oh-light-text);
}

.oh-wake-title span {
  display: block;
}

.oh-wake-title span + span {
  padding-left: clamp(1.5rem, 16vw, 18rem);
}

.oh-wake-signature {
  display: grid;
  gap: 3rem;
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 6rem) 0;
}

.oh-wake-object {
  display: flex;
  justify-content: center;
}

.oh-wake-object .phone-frame {
  width: min(72vw, 18rem);
  box-shadow:
    0 50px 90px -40px rgba(56, 45, 53, 0.55),
    0 30px 70px -40px rgba(124, 76, 43, 0.45);
}

.oh-specs {
  margin: 0;
  border-bottom: 1px solid var(--oh-light-line);
}

.oh-specs > div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.95rem 0;
  border-top: 1px solid var(--oh-light-line);
}

.oh-specs dt {
  padding-top: 0.2rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 0.66rem;
  line-height: 1.6;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oh-light-accent);
}

.oh-specs dd {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--oh-light-text);
}

.oh-wake-sentence {
  margin: 0 0 1.25rem;
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 144;
  font-weight: 300;
  font-size: clamp(1.8rem, 2.7vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--oh-light-text);
  text-wrap: balance;
}

.oh-wake-pitch .oh-lede {
  margin: 0 0 1.25rem;
}

@media (max-width: 999px) {
  .oh-wake-object {
    order: -1;
  }

  .oh-specs {
    order: 2;
  }
}

@media (min-width: 1000px) {
  .oh-wake-signature {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 19rem) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }
}

/* The app in five parts: an accordion whose open entry shows its object,
 * kept dark on the ivory ground like the app itself. */
.oh-features {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) 0;
}

.oh-feature {
  border-top: 1px solid var(--oh-light-line);
}

.oh-feature:last-of-type {
  border-bottom: 1px solid var(--oh-light-line);
}

.oh-feature > summary {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.1rem 0;
  cursor: pointer;
  list-style: none;
}

.oh-feature > summary::-webkit-details-marker {
  display: none;
}

.oh-feature > summary:focus-visible {
  outline: 2px solid var(--oh-light-accent);
  outline-offset: 4px;
  border-radius: 4px;
}

.oh-feature-num {
  min-width: 1.6rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: var(--oh-light-accent);
  font-variant-numeric: tabular-nums;
}

.oh-feature-title {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 144;
  font-weight: 300;
  font-size: clamp(1.9rem, 3.6vw, 3.3rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--oh-light-quiet);
  transition: color 200ms ease;
}

.oh-feature[open] .oh-feature-title {
  color: var(--oh-light-text);
}

@media (hover: hover) and (pointer: fine) {
  .oh-feature > summary:hover .oh-feature-title {
    color: var(--oh-light-text);
  }
}

.oh-feature-body {
  max-width: 31rem;
  padding: 0 0 1.75rem 2.85rem;
}

.oh-feature-body p {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--oh-light-muted);
}

.oh-feature-body .oh-feature-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  margin-top: 1rem;
}

.oh-feature-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid rgba(124, 76, 43, 0.35);
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--oh-light-text);
  transition:
    color 200ms ease,
    border-color 200ms ease;
}

.oh-feature-links a:hover {
  border-color: var(--oh-light-accent);
  color: var(--oh-light-accent);
}

.oh-feature-links svg {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--oh-light-accent);
}

.oh-feature-object {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 1.75rem;
  padding: 1.5rem;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(49, 53, 79, 0.6), transparent 70%),
    var(--oh-ink);
  color: var(--oh-ivory);
  box-shadow: 0 40px 80px -50px rgba(56, 45, 53, 0.65);
}

.oh-feature-object :is(.oh-journal, .oh-chart, .oh-streak) {
  width: 100%;
  max-width: 30rem;
  margin: 0;
  padding: 0;
}

.oh-feature-object .phone-frame {
  width: 12rem;
  flex: none;
}

/* Phones: the screenshot is cropped and fades into the panel. */
.oh-feature-object[data-object="phone"] {
  align-items: flex-start;
  height: 24rem;
  padding-bottom: 0;
}

.oh-feature-object[data-object="phone"]::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 5rem;
  background: linear-gradient(180deg, rgba(3, 4, 13, 0), var(--oh-ink));
  pointer-events: none;
}

@media (min-width: 900px) {
  .oh-features {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(3rem, 6vw, 6rem);
    align-content: start;
    min-height: 42rem;
  }

  .oh-feature {
    grid-column: 1;
  }

  .oh-feature-object {
    position: absolute;
    top: clamp(2rem, 5vw, 4rem);
    right: 0;
    bottom: clamp(2rem, 5vw, 4rem);
    width: calc((100% - clamp(3rem, 6vw, 6rem)) * 6 / 11);
    margin: 0;
    padding: 2.5rem;
  }

  .oh-feature-object[data-object="phone"] {
    align-items: center;
    height: auto;
    padding-bottom: 2.5rem;
  }

  .oh-feature-object[data-object="phone"]::after {
    display: none;
  }

  .oh-feature-object .phone-frame {
    width: auto;
    height: 100%;
    aspect-ratio: 800 / 1639;
  }
}

/* A live readout, like a log line at the foot of the chapter. */
.oh-readout {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.25rem 3rem;
  max-width: 1240px;
  margin: 0 auto;
  padding: 1.75rem 0 0;
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  color: var(--oh-light-text);
}

.oh-readout-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.oh-readout-item[hidden] {
  display: none;
}

.oh-readout-label {
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oh-light-accent);
}

.oh-readout-value {
  font-variant-numeric: tabular-nums;
}

.oh-day-section .oh-pricing-head {
  margin-bottom: 3rem;
}

/* 04 Remembering: the objects inside the waking accordion. */
.oh-remember-h3 {
  margin: 0 0 1rem;
  color: #fff9ef;
  font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 400;
}

.oh-timeline {
  position: relative;
  margin: 0;
  padding: 0 0 0 1.1rem;
  list-style: none;
}

.oh-timeline::before {
  content: '';
  position: absolute;
  top: 0.4rem;
  bottom: 0.4rem;
  left: 0.2rem;
  width: 1px;
  background: linear-gradient(180deg, rgba(234, 212, 180, 0.5), rgba(234, 212, 180, 0.05));
}

.oh-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.62rem 0;
  border-bottom: 1px solid rgba(255, 249, 239, 0.06);
  font-size: 0.86rem;
}

.oh-timeline-item:last-child {
  border-bottom: 0;
}

/* By this chapter the reader has met all ten dreams twice: phones keep the latest five. */
@media (max-width: 699px) {
  .oh-timeline-item:nth-child(n + 6) {
    display: none;
  }

  .oh-timeline-item:nth-child(5) {
    border-bottom: 0;
  }
}

.oh-timeline-item::before {
  content: '';
  position: absolute;
  left: -1.13rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ead4b4;
}

.oh-timeline-item time {
  color: #b7aec9;
  font-size: 0.76rem;
}

.oh-timeline-title {
  overflow: hidden;
  color: #fff9ef;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oh-chart-svg {
  display: block;
  width: 100%;
  height: auto;
}

.oh-chart-grid line {
  stroke: rgba(255, 249, 239, 0.07);
}

.oh-chart-line path {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.oh-chart-line.is-fear path {
  stroke: #b7aec9;
}

.oh-chart-line.is-serenity path {
  stroke: #ead4b4;
}

.oh-chart-line.is-fear circle {
  fill: #b7aec9;
}

.oh-chart-line.is-serenity circle {
  fill: #ead4b4;
}

.oh-chart-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
  color: #b7aec9;
  font-size: 0.72rem;
}

.oh-chart-legend {
  display: flex;
  gap: 1.25rem;
  margin: 0.8rem 0 0;
  padding: 0;
  color: #fff9ef;
  font-size: 0.8rem;
  list-style: none;
}

.oh-chart-legend li::before {
  content: '';
  display: inline-block;
  width: 1.1rem;
  height: 2px;
  margin-right: 0.45rem;
  vertical-align: middle;
  background: #b7aec9;
}

.oh-chart-legend .is-serenity::before {
  background: #ead4b4;
}

.oh-streak-stats {
  display: flex;
  gap: 2rem;
  margin-bottom: 1.1rem;
}

.oh-streak-stats p {
  margin: 0;
}

.oh-streak-num {
  color: #fff9ef;
  font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  font-size: 2.6rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.oh-streak-unit {
  color: #b7aec9;
  font-size: 0.85rem;
}

.oh-streak-label {
  display: block;
  margin-top: 0.35rem;
  color: var(--oh-champagne-on);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.oh-regularity {
  display: grid;
  grid-template-columns: repeat(7, 14px);
  gap: 7px;
}

.oh-regularity span {
  width: 14px;
  height: 14px;
  border: 1px solid rgba(255, 249, 239, 0.12);
  border-radius: 4px;
}

.oh-regularity span.is-on {
  border-color: transparent;
  background: #ead4b4;
  box-shadow: 0 0 8px rgba(234, 212, 180, 0.35);
}

.oh-regularity-caption {
  margin: 0.85rem 0 0;
  color: #b7aec9;
  font-size: 0.76rem;
}

/* `overflow-x: hidden` turns these into scroll containers, which breaks
 * position: sticky for the dream space; clip keeps the same clipping. */
@supports (overflow-x: clip) {
  html:has(.noctalia-observatory),
  html:has(.noctalia-observatory) body,
  main.noctalia-observatory {
    overflow-x: clip;
  }
}


/* ---------------------------------------------------------------- */
/* 03 Understanding: star map. This is the finished constellation;   */
/* experience.css stages it on scroll in the enhanced tiers.         */
/* ---------------------------------------------------------------- */

.oh-starmap-hint {
  margin: 1rem 0 0;
  color: var(--oh-champagne-on);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.oh-starmap-stage {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.oh-starmap-progress {
  display: none;
}

.oh-starmap-dreams {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.75rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.oh-starmap-dream {
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(255, 249, 239, 0.07);
}

.oh-starmap-title {
  margin: 0.35rem 0 0;
  color: #fff9ef;
  font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  font-size: 1.02rem;
  font-weight: 400;
}

.oh-starmap-text {
  margin: 0.5rem 0 0;
  color: #b7aec9;
  font-size: 0.92rem;
  line-height: 1.6;
}

.oh-starmap-dream:not(:first-child) .oh-starmap-text {
  display: none;
}

.oh-sym-word {
  position: relative;
  background: none;
  color: #fff9ef;
}

.oh-sym-word::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -0.12em;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: #ead4b4;
  box-shadow: 0 0 8px rgba(234, 212, 180, 0.7);
  transform-origin: left center;
}

.oh-starmap-map {
  position: relative;
  width: 100%;
  aspect-ratio: 10 / 7;
  border: 1px solid rgba(234, 212, 180, 0.12);
  border-radius: 28px;
  background: radial-gradient(ellipse at 50% 40%, #121330, #070816 62%, #03040d);
  box-shadow: inset 0 0 80px rgba(3, 4, 13, 0.9);
}

.oh-starmap-sky,
.oh-starmap-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.oh-starmap-sky {
  border-radius: inherit;
}

.oh-starmap-sky circle {
  fill: #fff9ef;
}

.oh-starmap-lines {
  overflow: visible;
}

.oh-link {
  fill: none;
  stroke: rgba(234, 212, 180, 0.78);
  stroke-width: calc(var(--w-now, var(--w, 1)) * 1px);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transition: opacity 250ms ease;
}

.oh-link-tip {
  fill: none;
  stroke: none;
}

.oh-starmap-stars {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.oh-star-item {
  position: absolute;
  top: var(--y);
  left: var(--x);
  z-index: 1;
  transform: translate(-50%, -24px);
  transition: opacity 250ms ease;
}

.oh-star-item:is(:hover, :focus-within, .is-pinned) {
  z-index: 6;
}

.oh-star {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0;
  border: 0;
  background: none;
  color: #fff9ef;
  cursor: pointer;
}

.oh-star img {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(234, 212, 180, 0.55), 0 0 18px rgba(234, 212, 180, 0.35);
  transform: scale(calc(0.82 + var(--c, 1) * 0.14));
  transition: transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.oh-star:focus-visible {
  outline: none;
}

.oh-star:focus-visible img {
  outline: 2px solid #ead4b4;
  outline-offset: 4px;
}

.oh-star-name {
  margin-top: calc((var(--c, 1) - 1) * 4px);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow: 0 0 4px #03040d, 0 0 10px #03040d;
}

.oh-star-item.is-label-above {
  transform: translate(-50%, calc(-100% + 24px));
}

.oh-star-item.is-label-above .oh-star {
  flex-direction: column-reverse;
}

.oh-star-card {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  z-index: 5;
  width: 15.5rem;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(234, 212, 180, 0.3);
  border-radius: 14px;
  background: rgba(12, 12, 21, 0.97);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.9);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}

.oh-star-item.is-card-above .oh-star-card {
  top: auto;
  bottom: calc(100% + 0.5rem);
}

.oh-star-item.is-card-left .oh-star-card {
  right: 0;
  left: auto;
  transform: none;
}

.oh-star-item.is-card-right .oh-star-card {
  left: 0;
  transform: none;
}

.oh-star-item:is(:hover, :focus-within, .is-pinned) .oh-star-card {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms ease;
}

.oh-star-card-title {
  margin: 0 0 0.5rem;
  color: var(--oh-champagne-on);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.oh-star-card ul {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.oh-star-card li {
  color: #fff9ef;
  font-size: 0.8rem;
  line-height: 1.35;
}

.oh-star-card time {
  color: #b7aec9;
  font-size: 0.72rem;
}

/* Focus a star: only its own lines and neighbours stay lit. */
.oh-starmap-map:has(.oh-star-item[data-sym="0"]:is(:hover, :focus-within, .is-pinned)) .oh-link:not([data-a="0"], [data-b="0"]),
.oh-starmap-map:has(.oh-star-item[data-sym="0"]:is(:hover, :focus-within, .is-pinned)) .oh-star-item:not([data-sym="0"], .nb-0),
.oh-starmap-map:has(.oh-star-item[data-sym="1"]:is(:hover, :focus-within, .is-pinned)) .oh-link:not([data-a="1"], [data-b="1"]),
.oh-starmap-map:has(.oh-star-item[data-sym="1"]:is(:hover, :focus-within, .is-pinned)) .oh-star-item:not([data-sym="1"], .nb-1),
.oh-starmap-map:has(.oh-star-item[data-sym="2"]:is(:hover, :focus-within, .is-pinned)) .oh-link:not([data-a="2"], [data-b="2"]),
.oh-starmap-map:has(.oh-star-item[data-sym="2"]:is(:hover, :focus-within, .is-pinned)) .oh-star-item:not([data-sym="2"], .nb-2),
.oh-starmap-map:has(.oh-star-item[data-sym="3"]:is(:hover, :focus-within, .is-pinned)) .oh-link:not([data-a="3"], [data-b="3"]),
.oh-starmap-map:has(.oh-star-item[data-sym="3"]:is(:hover, :focus-within, .is-pinned)) .oh-star-item:not([data-sym="3"], .nb-3),
.oh-starmap-map:has(.oh-star-item[data-sym="6"]:is(:hover, :focus-within, .is-pinned)) .oh-link:not([data-a="6"], [data-b="6"]),
.oh-starmap-map:has(.oh-star-item[data-sym="6"]:is(:hover, :focus-within, .is-pinned)) .oh-star-item:not([data-sym="6"], .nb-6),
.oh-starmap-map:has(.oh-star-item[data-sym="7"]:is(:hover, :focus-within, .is-pinned)) .oh-link:not([data-a="7"], [data-b="7"]),
.oh-starmap-map:has(.oh-star-item[data-sym="7"]:is(:hover, :focus-within, .is-pinned)) .oh-star-item:not([data-sym="7"], .nb-7),
.oh-starmap-map:has(.oh-star-item[data-sym="8"]:is(:hover, :focus-within, .is-pinned)) .oh-link:not([data-a="8"], [data-b="8"]),
.oh-starmap-map:has(.oh-star-item[data-sym="8"]:is(:hover, :focus-within, .is-pinned)) .oh-star-item:not([data-sym="8"], .nb-8),
.oh-starmap-map:has(.oh-star-item[data-sym="9"]:is(:hover, :focus-within, .is-pinned)) .oh-link:not([data-a="9"], [data-b="9"]),
.oh-starmap-map:has(.oh-star-item[data-sym="9"]:is(:hover, :focus-within, .is-pinned)) .oh-star-item:not([data-sym="9"], .nb-9),
.oh-starmap-map:has(.oh-star-item[data-sym="10"]:is(:hover, :focus-within, .is-pinned)) .oh-link:not([data-a="10"], [data-b="10"]),
.oh-starmap-map:has(.oh-star-item[data-sym="10"]:is(:hover, :focus-within, .is-pinned)) .oh-star-item:not([data-sym="10"], .nb-10),
.oh-starmap-map:has(.oh-star-item[data-sym="11"]:is(:hover, :focus-within, .is-pinned)) .oh-link:not([data-a="11"], [data-b="11"]),
.oh-starmap-map:has(.oh-star-item[data-sym="11"]:is(:hover, :focus-within, .is-pinned)) .oh-star-item:not([data-sym="11"], .nb-11),
.oh-starmap-map:has(.oh-star-item[data-sym="12"]:is(:hover, :focus-within, .is-pinned)) .oh-link:not([data-a="12"], [data-b="12"]),
.oh-starmap-map:has(.oh-star-item[data-sym="12"]:is(:hover, :focus-within, .is-pinned)) .oh-star-item:not([data-sym="12"], .nb-12),
.oh-starmap-map:has(.oh-star-item[data-sym="13"]:is(:hover, :focus-within, .is-pinned)) .oh-link:not([data-a="13"], [data-b="13"]),
.oh-starmap-map:has(.oh-star-item[data-sym="13"]:is(:hover, :focus-within, .is-pinned)) .oh-star-item:not([data-sym="13"], .nb-13),
.oh-starmap-map:has(.oh-star-item[data-sym="14"]:is(:hover, :focus-within, .is-pinned)) .oh-link:not([data-a="14"], [data-b="14"]),
.oh-starmap-map:has(.oh-star-item[data-sym="14"]:is(:hover, :focus-within, .is-pinned)) .oh-star-item:not([data-sym="14"], .nb-14),
.oh-starmap-map:has(.oh-star-item[data-sym="15"]:is(:hover, :focus-within, .is-pinned)) .oh-link:not([data-a="15"], [data-b="15"]),
.oh-starmap-map:has(.oh-star-item[data-sym="15"]:is(:hover, :focus-within, .is-pinned)) .oh-star-item:not([data-sym="15"], .nb-15) {
  opacity: 0.14;
}

.oh-starmap-stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  margin: 2.5rem 0 0;
  text-align: center;
}

.oh-starmap-stat > span {
  color: #fff9ef;
  font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
}

.oh-starmap-stat a {
  color: var(--oh-champagne-on);
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 699px) {
  .oh-starmap-map {
    aspect-ratio: 1 / 1.08;
    border-radius: 20px;
  }

  .oh-star img {
    width: 36px;
    height: 36px;
  }

  .oh-star-item {
    transform: translate(-50%, -18px);
  }

  .oh-star-item.is-label-above {
    transform: translate(-50%, calc(-100% + 18px));
  }

  .oh-star-name {
    font-size: 0.64rem;
  }

  .oh-star-card {
    width: 12.5rem;
  }
}

@media (min-width: 900px) {
  .oh-starmap-stage {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
    gap: 3rem;
  }

  .oh-starmap-dreams {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .oh-starmap-lines {
    filter: drop-shadow(0 0 3px rgba(234, 212, 180, 0.55));
  }
}

/* css/experience.css */
/* Noctalia experience layer — adaptive landing styles.
 *
 * Tier hooks (set by the inline detection script + experience.js):
 * - `html[data-exp-tier="static"]`: no JS motion at all, content always
 *   visible, CSS scroll-driven effects where supported.
 * - `html.exp-sky-on`: the canvas sky is rendering inside the hero.
 * - `html.exp-static`: JS-level static fallback (same rules as the tier).
 *
 * Only transform/opacity are animated here.
 */

/* ---------------------------------------------------------------- */
/* Canvas sky (full & light tiers).                                  */
/* ---------------------------------------------------------------- */

/* Inserted by experience.js as first child of the hero header, between the
 * hero background image (::before) and the content wrapper (z-10). */
.sky-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
}

/* The observatory sizes direct-child divs of the hero header to the content
 * column (`width: min(100%, 1240px)`), which used to pin the stage — and the
 * canvas — narrower than the hero on wide screens. Specificity (0,2,1) beats
 * that (0,1,2) rule so `inset: 0` alone drives the stage box. */
.noctalia-observatory > header > .sky-stage {
  width: auto;
  max-width: none;
}

html.exp-sky-on .sky-stage {
  opacity: 1;
}

.sky-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------- */
/* Hero film (full & light tiers).                                   */
/* The clip is graded in the file (desaturated, 55% over ink) so the */
/* browser only composites it; the veil and vignette above it are    */
/* static. It crossfades in from the still once it is playing.       */
/* ---------------------------------------------------------------- */

/* Keep the next chapter out of view until the opening film finishes.
 * The background stays present, so the hero can flow into the scene. */
.oh-dreams > * {
  transition: opacity 240ms var(--oh-ease-out);
}

html.exp-intro-pending .oh-dreams > * {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}

.oh-hero-film {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: #03040d;
  transition: opacity 1800ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.noctalia-observatory > header > .oh-hero-film {
  width: auto;
  max-width: none;
}

.oh-hero-film.is-playing {
  opacity: 1;
}

.oh-hero-film.is-handoff {
  transition: none;
}

.oh-hero-film video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.oh-hero-film::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 65% at 50% 38%, transparent 45%, rgba(3, 4, 13, 0.72) 100%),
    linear-gradient(180deg, rgba(3, 4, 13, 0.2), rgba(3, 4, 13, 0.55) 56%, rgba(3, 4, 13, 0.96));
}

/* Arrival: the hero stays ink until the opening film covers the screen, so
 * the still never flashes before the eye. On a cut or a missing film the
 * veil fades away instead. */
.noctalia-observatory > header::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #03040d;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease-out;
}

html.exp-intro-pending:not(.exp-intro-unveiled) .noctalia-observatory > header::after {
  opacity: 1;
}

/* A replayed film starts from the same ink: the hero copy leaves with the
 * sky, then returns once the film has handed over. */
.oh-hero-inner {
  transition: opacity 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.exp-intro-replay .oh-hero-inner {
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms ease-out, visibility 0s linear 600ms;
}

/* A viewport overlay, independent of the hero's height and clipping.
 * Only opacity changes during handoff, so the page never moves. */
.oh-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #03040d;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease-out;
}

.oh-intro-overlay.is-playing {
  opacity: 1;
  pointer-events: auto;
}

.oh-intro-overlay.is-leaving {
  opacity: 0;
  pointer-events: none;
  transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.oh-intro-overlay.is-cut {
  transition-duration: 260ms;
}

.oh-intro-overlay .oh-intro-video {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  /* Match the sky's crop even while mobile browser bars expand or collapse. */
  height: 100vh;
  height: 100lvh;
  object-fit: cover;
}

.oh-intro-skip {
  position: absolute;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 20;
  padding: 0.6rem 1.1rem;
  border: 1px solid rgba(234, 212, 180, 0.45);
  border-radius: 999px;
  background: rgba(3, 4, 13, 0.55);
  color: #fff9ef;
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.oh-intro-skip:hover {
  border-color: #ead4b4;
  background: rgba(3, 4, 13, 0.75);
}

.oh-intro-skip:active {
  transform: scale(0.97);
}

.oh-intro-skip:focus-visible {
  outline: 2px solid #ead4b4;
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- */
/* One night: dawn tint by chapter (enhanced tiers).                 */
/* Sits between the ink ground and the content; opacity only.        */
/* ---------------------------------------------------------------- */

.oh-dawn {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 120% 70% at 50% 115%, rgba(234, 212, 180, 0.15), rgba(234, 212, 180, 0.04) 45%, transparent 72%),
    linear-gradient(0deg, rgba(234, 212, 180, 0.045), transparent 55%);
  will-change: opacity;
}

/* Ending: the eyes open in a soft oval, then dissolve onto the app. */
.oh-ending-eye {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: min(150%, 620px);
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 42%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, #000 42%, transparent 72%);
  transition: opacity 1200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.oh-ending-eye.is-playing {
  opacity: 1;
}

.oh-ending-eye.is-done {
  opacity: 0;
}

.oh-ending-eye video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------- */
/* Headline letters (full & light tiers).                            */
/* ---------------------------------------------------------------- */

/* The tier is set in the head before first paint. Keep the plain title
 * hidden until its words have been wrapped, so it cannot flash before LCP. */
html[data-exp-tier="full"] .oh-hero-title.hero-anim,
html[data-exp-tier="light"] .oh-hero-title.hero-anim {
  opacity: 0;
  visibility: hidden;
  animation: exp-headline-fallback 0s 15s forwards;
}

/* If the animation module never loads, reveal the real HTML title. */
@keyframes exp-headline-fallback {
  to {
    opacity: 1;
    visibility: visible;
  }
}

html.exp-words .oh-hero-title.hero-anim {
  opacity: 1;
  visibility: visible;
  animation: none;
}

/* Letters stay inline so the title keeps its kerning; only opacity and
 * blur change, once, as the sky appears. */
.oh-word {
  white-space: nowrap;
}

html.exp-words .oh-char {
  opacity: 0;
  filter: blur(14px);
  transition:
    opacity 1100ms cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 1300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.exp-words .oh-hero-title.is-revealed .oh-char {
  opacity: 1;
  filter: none;
}

/* The scroll cue's line keeps descending, slowly. */
html.exp-motion .oh-hero-scroll::after {
  animation: oh-scroll-cue 2.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

@keyframes oh-scroll-cue {
  0% {
    opacity: 0;
    transform: scaleY(0);
  }
  35% {
    opacity: 1;
    transform: scaleY(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 1.5rem, 0) scaleY(1);
  }
}

/* ---------------------------------------------------------------- */
/* Hairlines draw in with their promise (enhanced tiers).            */
/* ---------------------------------------------------------------- */

html.exp-motion .oh-promise::before {
  transition: transform 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) 120ms;
}

html.exp-motion .oh-promise:not(.active)::before {
  transform: scaleX(0);
}

/* The open accordion entry brings its object up. */
html.exp-motion .oh-feature[open] .oh-feature-object {
  animation: oh-feature-in 600ms cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes oh-feature-in {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
}

/* ---------------------------------------------------------------- */
/* Static tier: content is visible with zero JS motion.              */
/* Specificity (0,2,1) beats `.reveal` / `.opacity-0` (0,1,0) so no  */
/* !important is needed and scroll-driven animations can still run.  */
/* ---------------------------------------------------------------- */

html[data-exp-tier="static"] .hero-anim,
html[data-exp-tier="static"] .reveal,
html.exp-static .hero-anim,
html.exp-static .reveal {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ---------------------------------------------------------------- */
/* CSS scroll-driven effects (progressive enhancement, static tier). */
/* Browsers without support keep the fully visible state above.      */
/* ---------------------------------------------------------------- */

@supports (animation-timeline: view()) {
  html[data-exp-tier="static"] .reveal {
    animation: exp-static-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}

@keyframes exp-static-reveal {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* prefers-reduced-motion lands on the static tier by design and must stay
 * completely still, scroll-driven effects included. */
@media (prefers-reduced-motion: reduce) {
  html[data-exp-tier="static"] .reveal {
    animation: none;
  }

  html.exp-motion .oh-promise::before {
    transform: none;
    transition: none;
  }

  html.exp-words .oh-char {
    opacity: 1;
    filter: none;
    transition: none;
  }

  html.exp-motion .oh-hero-scroll::after,
  html.exp-motion .oh-feature[open] .oh-feature-object {
    animation: none;
  }

  .oh-hero-film,
  .oh-intro-overlay,
  .oh-intro-skip,
  .oh-ending-eye {
    display: none;
  }

  .oh-dawn {
    transition: none;
  }
}

/* ---------------------------------------------------------------- */
/* 01 Dream in CSS 3D (enhanced tiers; html.exp-3d set by JS).       */
/* The list is a Fibonacci sphere; JS writes one transform per frame */
/* on the list and an opacity per card for depth.                    */
/* ---------------------------------------------------------------- */

html.exp-3d .oh-dreams > .oh-section-head {
  margin-bottom: 0.5rem;
}

html.exp-3d .oh-dreamspace {
  position: relative;
  height: 260vh;
  margin-top: 0;
}

html.exp-3d .oh-dreamspace-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  perspective: 1100px;
  perspective-origin: 50% 48%;
  touch-action: pan-y pinch-zoom;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}

/* Keep the sphere close to its heading on phones instead of centering it
 * halfway down an additional full screen. The scroll track stays intact. */
html.exp-3d .oh-dreamspace-pin {
  position: sticky;
  top: 0;
}

html.exp-3d .oh-dreamspace-pin > .oh-dreamspace-stage {
  position: relative;
  height: calc(100svh - 8rem);
}

@media (max-width: 699px) {
  html.exp-3d .oh-dreamspace-stage,
  html.exp-3d .oh-dreamspace-pin > .oh-dreamspace-stage {
    height: calc(68svh - 8rem);
    min-height: 26rem;
  }
}

html.exp-3d .oh-dreamspace-stage::before {
  content: '';
  position: absolute;
  inset: 10% 15%;
  background: radial-gradient(ellipse at center, rgba(234, 212, 180, 0.1), rgba(108, 86, 143, 0.08) 40%, transparent 70%);
  pointer-events: none;
}

html.exp-3d .oh-dream-list {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

html.exp-3d .oh-dream-slot {
  position: absolute;
  top: calc(var(--card-w, 214px) * -0.72);
  left: calc(var(--card-w, 214px) * -0.5);
  width: var(--card-w, 214px);
  transform-style: preserve-3d;
  transition: opacity 120ms linear;
}

html.exp-3d .oh-dream-slot.is-back {
  pointer-events: none;
}

html.exp-3d .oh-dream {
  backface-visibility: hidden;
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 249, 239, 0.08), 0 30px 60px -30px rgba(0, 0, 0, 0.9), 0 0 40px -18px rgba(234, 212, 180, 0.35);
  transition: filter 900ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

html.exp-3d .oh-dream-body {
  gap: 0.35rem;
  padding: 0.7rem 0.8rem 0.85rem;
}

html.exp-3d .oh-dream-excerpt {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.74rem;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

html.exp-3d .oh-dream-title {
  font-size: 0.98rem;
}

html.exp-3d .oh-dream :is(.oh-dream-more, .oh-dream-symbols) {
  display: none;
}

html.exp-3d .oh-dreamspace.is-fading .oh-dream {
  filter: blur(7px);
}

html.exp-3d .oh-dreamspace-stage.is-dragging {
  cursor: grabbing;
}

@media (hover: hover) and (pointer: fine) {
  html.exp-3d .oh-dreamspace-stage {
    cursor: grab;
  }

  html.exp-3d .oh-dreams-hint {
    display: block;
  }

  html.exp-3d .oh-dream-slot:not(.is-back) .oh-dream:hover {
    transform: translateZ(28px);
  }
}

@media (max-width: 699px) {
  html.exp-3d .oh-dream-meta {
    font-size: 0.62rem;
  }

  html.exp-3d .oh-dream-meta .oh-emotion {
    padding: 0.1rem 0.45rem;
    font-size: 0.6rem;
  }

  html.exp-3d .oh-dream-title {
    font-size: 0.84rem;
  }

  html.exp-3d .oh-dream-excerpt {
    -webkit-line-clamp: 2;
    font-size: 0.68rem;
  }
}

/* Lightbox (FLIP from the card). */
.oh-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 2.5rem);
}

.oh-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 4, 13, 0.82);
  opacity: 0;
  transition: opacity 180ms ease;
}

.oh-lightbox.is-open .oh-lightbox-backdrop {
  opacity: 1;
}

.oh-lightbox-panel {
  position: relative;
  display: grid;
  width: min(100%, 920px);
  max-height: calc(100svh - 2rem);
  overflow: auto;
  touch-action: pan-y pinch-zoom;
  border: 1px solid rgba(234, 212, 180, 0.2);
  border-radius: 24px;
  background: linear-gradient(180deg, #17161f, #0c0c15);
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.9);
  overscroll-behavior: contain;
  will-change: transform;
}

.oh-lightbox-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  max-height: 46svh;
  object-fit: cover;
}

.oh-lightbox-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.4rem 1.5rem 1.6rem;
}

.oh-lightbox-body .oh-dream-meta {
  padding-right: 3rem;
}

.oh-lightbox-body .oh-dream-symbols {
  margin-top: 0;
}

.oh-lightbox-title {
  margin: 0.2rem 0 0.4rem;
  color: #fff9ef;
  font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  line-height: 1.15;
}

.oh-lightbox-label {
  margin: 0.4rem 0 0;
  color: var(--oh-champagne-on);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.oh-lightbox-transcript p {
  margin: 0 0 0.7rem;
  color: #fff9ef;
  font-size: 0.98rem;
  line-height: 1.65;
}

.oh-lightbox-note {
  margin: 0.8rem 0 0;
  color: #b7aec9;
  font-size: 0.74rem;
}

.oh-lightbox-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid rgba(234, 212, 180, 0.4);
  border-radius: 50%;
  background: rgba(3, 4, 13, 0.7);
  color: #fff9ef;
  cursor: pointer;
}

.oh-lightbox-close svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.oh-lightbox-close:focus-visible {
  outline: 2px solid #ead4b4;
  outline-offset: 3px;
}

html.oh-lightbox-open,
html.oh-lightbox-open body {
  overflow: hidden;
}

@media (min-width: 820px) {
  .oh-lightbox-panel {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .oh-lightbox-img {
    height: 100%;
    max-height: none;
  }
}

/* Step 1: the live recording screen breathes, types and pulses. */
html.exp-motion .oh-rec-wave span {
  animation: oh-wave 1100ms ease-in-out infinite alternate;
  animation-delay: calc(var(--i, 0) * -83ms);
  animation-play-state: paused;
}

html.exp-motion .oh-rec.is-live .oh-rec-wave span {
  animation-play-state: running;
}

@keyframes oh-wave {
  from {
    transform: scaleY(0.3);
  }

  to {
    transform: scaleY(1);
  }
}

html.exp-motion .oh-rec-dot {
  animation: oh-rec-pulse 1400ms ease-in-out infinite;
}

@keyframes oh-rec-pulse {
  50% {
    opacity: 0.35;
  }
}

.oh-rec-word {
  opacity: 0.18;
  transition: opacity 500ms ease, filter 700ms cubic-bezier(0.23, 1, 0.32, 1);
}

html.exp-motion .oh-rec-word:not(.is-in) {
  filter: blur(2px);
}

.oh-rec-word.is-in {
  opacity: 1;
}

/* The stop button breathes only while the screen is on view. */
html.exp-motion .oh-live-phone:has(.oh-rec.is-live) .oh-live-button::after {
  animation: oh-live-ring 2200ms cubic-bezier(0.23, 1, 0.32, 1) infinite;
}

@keyframes oh-live-ring {
  from {
    transform: scale(1);
    opacity: 0.55;
  }

  to {
    transform: scale(1.45);
    opacity: 0;
  }
}

/* 04 Remembering: staged once. */
.oh-remember.is-staged .oh-timeline-item {
  opacity: 0;
  transform: translate3d(-10px, 0, 0);
  transition: opacity 600ms ease, transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.oh-remember.is-staged .oh-journal.is-in .oh-timeline-item {
  opacity: 1;
  transform: none;
}

.oh-remember.is-staged .oh-chart-line path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1800ms cubic-bezier(0.22, 0.61, 0.36, 1) 200ms;
}

.oh-remember.is-staged .oh-chart-line.is-serenity path {
  transition-delay: 500ms;
}

.oh-remember.is-staged .oh-chart-line circle {
  opacity: 0;
  transition: opacity 400ms ease;
  transition-delay: calc(400ms + var(--i, 0) * 250ms);
}

.oh-remember.is-staged .oh-chart.is-drawn .oh-chart-line path {
  stroke-dashoffset: 0;
}

.oh-remember.is-staged .oh-chart.is-drawn .oh-chart-line circle {
  opacity: 1;
}

.oh-remember.is-staged .oh-regularity span {
  transform: scale(0.3);
  opacity: 0;
  transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 300ms ease;
  transition-delay: calc(var(--i, 0) * 22ms);
}

.oh-remember.is-staged .oh-streak.is-in .oh-regularity span {
  transform: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html.exp-motion .oh-rec-wave span,
  html.exp-motion .oh-rec-dot,
  html.exp-motion .oh-live-button::after {
    animation: none;
  }
}


/* ---------------------------------------------------------------- */
/* 03 Understanding staged on scroll (html.exp-starmap).             */
/* ---------------------------------------------------------------- */

html.exp-starmap .oh-starmap {
  position: relative;
  height: 420vh;
}

html.exp-starmap .oh-starmap-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding: 5.5rem 0 1.5rem;
  align-content: center;
}

html.exp-starmap .oh-starmap-progress {
  display: block;
  margin: 0 0 0.9rem;
  color: var(--oh-champagne-on);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

html.exp-starmap .oh-starmap-dreams {
  display: grid;
  grid-template-columns: 1fr;
}

html.exp-starmap .oh-starmap-dream {
  grid-area: 1 / 1;
  padding: 1.2rem 1.3rem 1.3rem;
  border: 1px solid rgba(234, 212, 180, 0.16);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(23, 22, 31, 0.92), rgba(12, 12, 21, 0.92));
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 500ms ease, transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.exp-starmap .oh-starmap-dream.is-current {
  opacity: 1;
  transform: none;
}

/* The account being read is a ticket: notches at the perforation, date and
 * emotion above it, its number stamped in the corner. */
html.exp-starmap .oh-starmap-dreams {
  counter-reset: oh-dream;
}

html.exp-starmap .oh-starmap-dream {
  --oh-ticket-cut: 3.65rem;
  position: relative;
  padding-bottom: 1.5rem;
  counter-increment: oh-dream;
  -webkit-mask:
    radial-gradient(circle 9px at 0 var(--oh-ticket-cut), #0000 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 9px at 100% var(--oh-ticket-cut), #0000 98%, #000) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle 9px at 0 var(--oh-ticket-cut), #0000 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 9px at 100% var(--oh-ticket-cut), #0000 98%, #000) right / 51% 100% no-repeat;
}

html.exp-starmap .oh-starmap-dream .oh-dream-meta {
  margin-bottom: 0.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px dashed rgba(234, 212, 180, 0.3);
}

html.exp-starmap .oh-starmap-dream .oh-starmap-text {
  padding-right: 3.4rem;
}

html.exp-starmap .oh-starmap-dream::after {
  content: counter(oh-dream, decimal-leading-zero);
  position: absolute;
  right: 1rem;
  bottom: 0.9rem;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 1px solid rgba(234, 212, 180, 0.5);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px rgba(18, 17, 27, 0.95), inset 0 0 0 4px rgba(234, 212, 180, 0.28);
  color: var(--oh-champagne-on);
  font-family: 'Fraunces', serif;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
  transform: rotate(-14deg);
}

html.exp-starmap .oh-starmap-dream .oh-starmap-text {
  display: block;
}

html.exp-starmap .oh-type-word {
  opacity: 0;
  transition: opacity 260ms ease;
}

html.exp-starmap .oh-type-word.is-in {
  opacity: 1;
}

html.exp-starmap .oh-sym-word::after {
  transform: scaleX(0);
  transition: transform 450ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.exp-starmap .oh-sym-word.is-marked {
  color: var(--oh-champagne-on);
}

html.exp-starmap .oh-sym-word.is-marked::after {
  transform: none;
}

.oh-sym-ghost {
  position: fixed;
  z-index: 130;
  margin: 0;
  color: var(--oh-champagne-on);
  font-size: 0.92rem;
  line-height: 1.6;
  pointer-events: none;
  text-shadow: 0 0 12px rgba(234, 212, 180, 0.9);
  will-change: transform, opacity;
}

.oh-sym-ghost::after {
  display: none;
}

/* Scroll-driven symbol comet: a readable word carried by a champagne light. */
.oh-symbol-comet {
  top: 0;
  left: 0;
  padding: 0.2em 0.65em;
  border: 1px solid rgba(255, 231, 190, 0.65);
  border-radius: 999px;
  background: radial-gradient(ellipse, #544335 0%, #242032 75%);
  color: #fff5df;
  font-size: 0.95rem;
  white-space: nowrap;
  box-shadow: 0 0 10px #ead4b466, 0 0 28px #ead4b433;
  text-shadow: 0 0 8px #ead4b488;
}

.oh-symbol-comet::before {
  content: '';
  position: absolute;
  right: -4px;
  top: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff9eb;
  box-shadow: 0 0 8px #fff1cd, 0 0 18px #ead4b4;
}

.oh-comet-trail, .oh-comet-arrival {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 129;
  pointer-events: none;
  will-change: transform, opacity;
}

.oh-comet-trail {
  width: 30px;
  height: 3px;
  border-radius: 50%;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #ead4b400, #fff0ce);
  box-shadow: 0 0 8px #ead4b466;
}

.oh-comet-arrival {
  width: 52px;
  height: 52px;
  border: 1px solid #ead4b4;
  border-radius: 50%;
  background: radial-gradient(circle, #fff5df55, #ead4b400 65%);
  box-shadow: 0 0 18px #ead4b466;
}

@media (prefers-reduced-motion: reduce) {
  .oh-symbol-comet, .oh-comet-trail, .oh-comet-arrival { display: none; }
}

html.exp-starmap .oh-star-item {
  transition: opacity 500ms ease, visibility 0s;
}

html.exp-starmap .oh-star-item:not(.is-born) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease, visibility 0s linear 250ms;
}

html.exp-starmap .oh-star-item:not(.is-born) img {
  transform: scale(0.3);
}

html.exp-starmap .oh-star::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 48px;
  height: 48px;
  margin-left: -24px;
  border-radius: 50%;
  box-shadow: 0 0 26px 10px rgba(234, 212, 180, 0.5);
  transform: scale(calc(0.82 + var(--c, 1) * 0.14));
  opacity: 0;
  transition: opacity 500ms ease;
}

html.exp-starmap .oh-star-item.is-label-above .oh-star::before {
  top: auto;
  bottom: 0;
}

html.exp-starmap .oh-star-item.is-glow .oh-star::before {
  opacity: 1;
}

html.exp-starmap .oh-link {
  vector-effect: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1100ms cubic-bezier(0.22, 0.61, 0.36, 1), stroke-width 600ms ease, opacity 250ms ease;
}

html.exp-starmap .oh-link.is-drawn {
  stroke-dashoffset: 0;
}

html.exp-starmap .oh-link-tip {
  stroke: #fff9ef;
  stroke-width: 5px;
  stroke-linecap: round;
  stroke-dasharray: 0.02 2;
  stroke-dashoffset: 0.02;
  vector-effect: none;
  opacity: 0;
}

html.exp-starmap .oh-link-tip.is-running {
  animation: oh-tip 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes oh-tip {
  from {
    stroke-dashoffset: 0.02;
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  to {
    stroke-dashoffset: -0.98;
    opacity: 0;
  }
}

@media (min-width: 900px) {
  html.exp-starmap .oh-starmap-map {
    justify-self: center;
    width: min(100%, calc((100svh - 8rem) * 1.43));
  }
}

@media (max-width: 899px) {
  html.exp-starmap .oh-starmap {
    height: 380vh;
  }

  html.exp-starmap .oh-starmap-stage {
    grid-template-rows: auto 1fr;
    gap: 1rem;
    padding-top: 4.75rem;
    align-content: start;
  }

  html.exp-starmap .oh-starmap-dream {
    --oh-ticket-cut: 3.07rem;
    padding: 0.9rem 1rem 1rem;
  }

  html.exp-starmap .oh-star::before {
    width: 36px;
    height: 36px;
    margin-left: -18px;
    box-shadow: 0 0 20px 6px rgba(234, 212, 180, 0.5);
    transform: scale(calc(0.82 + var(--c, 1) * 0.14));
  }

  html.exp-starmap .oh-starmap-title {
    font-size: 0.95rem;
  }

  html.exp-starmap .oh-starmap-text {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.84rem;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  html.exp-starmap .oh-starmap-map {
    justify-self: center;
    width: min(100%, calc((100svh - 18rem) / 1.08));
  }
}

/* Shared sky from hero through the dream cards. */
.noctalia-observatory.oh-has-shared-sky { overflow: clip !important; }
        .oh-has-shared-sky > header::before { opacity: 0; }
        .oh-shared-sky {
          position: fixed;
          inset: 0 0 auto;
          height: 100vh;
          height: 100lvh;
          z-index: -2;
          pointer-events: none;
          overflow: hidden;
          contain: layout paint;
          will-change: opacity;
        }
        .oh-sky-poster {
          position: relative; height: 100%; overflow: hidden;
        }
        .oh-sky-media {
          position: absolute; inset: 0;
          transform-origin: 50% 38%;
          will-change: transform;
          background: url('/img/hero/noctalia-observatory-bg.webp') center / cover no-repeat;
        }
        @media (prefers-reduced-motion: reduce) {
          .oh-sky-media { transform: none !important; will-change: auto; }
        }
        .sky-stage { display: none; }
        .oh-sky-media > .oh-hero-film { inset: 0; width: 100%; height: 100%; }
        .oh-sky-media > .oh-hero-film::after,
        .oh-intro-overlay::after {
          content: ''; position: absolute; inset: 0; pointer-events: none;
          background: linear-gradient(180deg, rgba(3,4,13,.08), rgba(3,4,13,.18));
        }
        .oh-has-shared-sky .oh-dreams::before {
          display: none;
        }

.oh-intro-retry { margin: 1rem auto 0; display: flex; }

/* Word-by-word entrance: preserves the text's layout and reading order. */
.oh-word-reveal .oh-dream-heading-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(18%);
  transition: opacity 300ms var(--oh-ease-out), transform 300ms var(--oh-ease-out);
  transition-delay: var(--word-delay);
}
.oh-word-reveal.is-reading .oh-dream-heading-word {
  opacity: 1;
  transform: translateY(0);
}
html.exp-static .oh-dream-heading-word {
  opacity: 1;
  transform: none;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .oh-word-reveal .oh-dream-heading-word {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (min-width: 1100px) {
  .oh-dreams-heading-end .oh-dream-heading-word {
    transition-delay: calc(var(--word-delay) + var(--heading-follow-delay, 0ms));
  }
}

/* One continuous scroll scene, centered cards fading into the symbol map. */
.oh-journey-source { display: none !important; }
html.exp-journey .oh-dreams { padding-top: 1rem; }
html.exp-journey .oh-dream-list { top: 45%; }
html.exp-journey.exp-3d .oh-dreamspace { height: 700svh; }
html.exp-journey .oh-dreamspace-pin { height: 100svh; position: sticky; top: 0; }
html.exp-journey.exp-3d .oh-dreamspace-pin > .oh-dreamspace-stage {
  position: absolute; inset: 0; height: 100%; min-height: 0;
}
.oh-dreamspace-pin { --oh-journey-title-top: 5rem; --oh-analysis-gap: 1.5rem; }
.oh-journey-title {
  position: absolute; z-index: 3; top: var(--oh-journey-title-top); left: 0; right: 0;
  display: grid; margin: 0 auto; max-width: 1200px;
  pointer-events: none; text-align: center; font-size: clamp(1.7rem, 4vw, 3.25rem);
}
.oh-journey-progress {
  position: absolute; z-index: 5; right: -0.2rem; top: 35%;
  width: 10px; height: clamp(100px, 16svh, 150px);
  pointer-events: none; color: var(--oh-champagne);
}
.oh-journey-progress-track, .oh-journey-progress-fill {
  position: absolute; inset: 0; width: 1px; margin: 0 auto;
  background: rgba(234, 212, 180, 0.28);
}
.oh-journey-progress-fill {
  background: var(--oh-champagne); transform-origin: top;
}
.oh-journey-progress-dot {
  position: absolute; left: -17px; width: 44px; height: 44px;
  transform: translateY(-50%); padding: 0; border: 0; background: transparent;
  pointer-events: auto; cursor: pointer; touch-action: manipulation;
}
.oh-journey-progress-dot::after {
  content: ''; position: absolute; left: 19px; top: 19px; width: 6px; height: 6px;
  border: 1px solid rgba(234, 212, 180, 0.7); border-radius: 50%; background: #201d30;
}
.oh-journey-progress-dot.is-past::after { background: var(--oh-champagne); }
.oh-journey-progress-dot.is-current::after {
  background: #fff5df; box-shadow: 0 0 0 3px #ead4b422, 0 0 9px #ead4b477;
}
.oh-journey-progress-dot:focus-visible { outline: 1px solid var(--oh-champagne); border-radius: 50%; }
.oh-journey-progress::after {
  content: ''; position: absolute; bottom: 0; left: 2px;
  width: 6px; height: 6px; border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor; transform: rotate(45deg);
}

/* The account opens inside the pinned scene, leaving native page scrolling free.
 * It starts under the heading's measured height, which varies with language and wrapping. */
.oh-analysis-demo {
  position: absolute; z-index: 4; left: 0; right: 0;
  top: calc(var(--oh-journey-title-top) + var(--oh-journey-title-height, 4.25rem) + var(--oh-analysis-gap));
  width: min(100%, 700px); margin: auto; border: 1px solid #ead4b433;
  border-radius: 24px; background: rgba(14, 13, 25, 0.96); color: var(--oh-ivory, #f7f2e8);
  box-shadow: 0 24px 80px #03040d55; transform-origin: center;
  pointer-events: none; will-change: transform, opacity;
}
.oh-analysis-account { display: grid; grid-template-columns: 100px 1fr; gap: 1.2rem; padding: 1.4rem; }
.oh-analysis-account img { width: 100%; height: 140px; object-fit: cover; border-radius: 14px; }
.oh-analysis-account h3 { margin: 0 0 .65rem; font: 1.6rem/1.15 Georgia, serif; }
.oh-analysis-excerpt { margin: 0; font-size: .92rem; line-height: 1.6; color: #c8c0d6; }
.oh-analysis-body { position: relative; padding: 1.2rem 1.4rem 1.4rem; border-top: 1px solid #ead4b422; }
.oh-analysis-label { margin: 0 0 1rem; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--oh-champagne-on); }
.oh-analysis-status { position: absolute; top: 3.5rem; margin: 0; color: #c8c0d6; font-size: .85rem; }
.oh-analysis-demo h4 { margin: 0 0 .4rem; font-size: .84rem; color: var(--oh-champagne-on); font-weight: 500; }
.oh-analysis-insight p, .oh-analysis-question p { margin: 0; font-size: .94rem; line-height: 1.6; }
.oh-analysis-insight span { transition: opacity 150ms var(--oh-ease-out); }
.oh-analysis-question { margin-top: 1.1rem; }
@media(max-width: 699px) {
  .oh-analysis-demo { border-radius: 20px; }
  .oh-analysis-account { padding: 1rem; grid-template-columns: 64px 1fr; gap: .8rem; }
  .oh-analysis-account img { height: 92px; }
  .oh-analysis-account h3 { font-size: 1.16rem; }
  .oh-analysis-excerpt { font-size: .78rem; line-height: 1.45; }
  .oh-analysis-body { padding: 1rem; }
  .oh-analysis-insight p, .oh-analysis-question p { font-size: .84rem; line-height: 1.5; }
  .oh-analysis-label { margin-bottom: .65rem; }
}
@media(prefers-reduced-motion: reduce) {
  .oh-analysis-demo { transform: none !important; }
  .oh-analysis-insight span { transition: none; }
}
.oh-journey-phrase {
  grid-area: 1 / 1; opacity: 0; visibility: hidden;
  transition: opacity 200ms var(--oh-ease-out), visibility 200ms;
}
.oh-journey-phrase.is-current { opacity: 1; visibility: visible; }
html.exp-journey.exp-starmap .oh-dreamspace-pin > .oh-starmap {
  position: absolute; inset: 0; height: 100%; margin: 0;
}
html.exp-journey.exp-starmap .oh-starmap-stage {
  position: relative; height: 100%; padding: 10rem 0 1rem;
}
@media (max-width: 699px) {
  .oh-dreamspace-pin { --oh-journey-title-top: 6rem; --oh-analysis-gap: 1rem; }
  html.exp-journey .oh-dream-list { top: 37%; }
  html.exp-journey.exp-starmap .oh-starmap-stage {
    padding-top: 10rem; gap: 0.65rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  html.exp-journey.exp-starmap .oh-starmap-map {
    width: min(100%, calc((100svh - 24rem) / 1.08));
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    align-self: center;
  }
}

/* Short, wide viewports need a readable map beside the account. */
@media (min-width: 600px) and (max-height: 600px) {
  .oh-dreamspace-pin { --oh-journey-title-top: 5.25rem; }
  .oh-journey-title { font-size: 1.45rem; }
  html.exp-journey.exp-starmap .oh-starmap-stage {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 1rem;
    padding: 7.5rem 0 1rem;
  }
  html.exp-journey.exp-starmap .oh-starmap-map {
    width: 100%; height: 100%; min-height: 0; max-height: 100%;
    aspect-ratio: auto;
  }
  html.exp-journey .oh-starmap-story { min-width: 0; }
  html.exp-journey .oh-starmap-dream { --oh-ticket-cut: 3.1rem; padding: .65rem .8rem; }
  html.exp-journey .oh-starmap-text { font-size: .78rem; line-height: 1.4; }
}

/* Precise account navigation shares the existing counter row. */
.oh-starmap-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; margin-bottom: 0.65rem;
}
.oh-starmap-controls .oh-starmap-progress { margin: 0; }
.oh-starmap-nav {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%;
  border: 1px solid #ead4b455; color: #ead4b4; background: #11101d80;
  font-size: 1.35rem; cursor: pointer; touch-action: manipulation;
  transition: opacity 160ms ease, background-color 160ms ease;
}
.oh-starmap-nav:disabled { opacity: 0.3; cursor: default; }
.oh-starmap-nav:focus-visible { outline: 2px solid #ead4b4; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .oh-starmap-nav:not(:disabled):hover { background-color: #ead4b426; }
}