/* Lotus harmony — an atmospheric layer over the approved compact design.
   Warm focal words and cool supporting words form two separate palettes.
   Motion is owned by backgrounds.js; these rules never transform a panel. */
:root {
  --harmony-rose: #e2b8ca;
  --harmony-lilac: #c8b7df;
  --harmony-champagne: #dec9a6;
  --harmony-sage: #accbb8;
  --harmony-ice: #b0c9db;
  --harmony-teal: #a4c9c5;
  --harmony-focus: var(--harmony-rose);
  --harmony-support: var(--harmony-sage);
}

/* Proportional cover and ample overscan keep every viewport filled as the
   shared image plane changes perspective. No supplied foreground photo is cut. */
html body.nocturne .site-backdrop {
  overflow: hidden;
  background: #060509;
}

html body.nocturne .site-backdrop .background-plane {
  inset: min(-40px, -5vmax);
  transform-origin: 50% 50%;
}

html body.nocturne .site-backdrop .background-photo {
  object-fit: cover;
  object-position: 64% 50%;
  filter: saturate(.68) brightness(.74) contrast(1.04);
}

html body.nocturne .site-backdrop .background-photo.is-active {
  opacity: 1;
}

html body.nocturne .site-backdrop::after {
  background:
    linear-gradient(90deg, #060509df 0%, #060509b8 38.2%, #0605097c 72%, #06050999 100%),
    linear-gradient(0deg, #06050952, transparent 61.8%, #06050938);
}

/* The hero's quiet circle construction sits behind the composition. Its
   focus lies at the upper-right third; content always stays above it. */
html body.nocturne .hero {
  overflow: hidden;
}

html body.nocturne .hero .hero-inner {
  position: relative;
  z-index: 1;
}

html body.nocturne .hero::before {
  display: block;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 66.667% 33.333%, #b898ce12, transparent 61.8%),
    radial-gradient(ellipse at 33.333% 66.667%, #78a69909, transparent 38.2%);
}

html body.nocturne .hero::after {
  content: "";
  position: absolute;
  inset-block-start: -9%;
  inset-inline-start: 48%;
  width: min(66vw, 920px);
  aspect-ratio: 1;
  border: 1px solid #c6aed112;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 23.4%, #c6aed113 23.5% 23.6%, transparent 23.7%),
    radial-gradient(circle at 50% 33.333%, transparent 0 23.4%, #c6aed10e 23.5% 23.6%, transparent 23.7%),
    radial-gradient(circle at 64.434% 41.667%, transparent 0 23.4%, #a9c9c30e 23.5% 23.6%, transparent 23.7%),
    radial-gradient(circle at 64.434% 58.333%, transparent 0 23.4%, #a9c9c30e 23.5% 23.6%, transparent 23.7%),
    radial-gradient(circle at 50% 66.667%, transparent 0 23.4%, #dec9a60e 23.5% 23.6%, transparent 23.7%),
    radial-gradient(circle at 35.566% 58.333%, transparent 0 23.4%, #dec9a60e 23.5% 23.6%, transparent 23.7%),
    radial-gradient(circle at 35.566% 41.667%, transparent 0 23.4%, #c6aed10e 23.5% 23.6%, transparent 23.7%);
}

html body.nocturne .lotus-artwork {
  border-color: #c7afd44d;
  box-shadow: 0 24px 60px #0009, 0 0 0 1px #dfcad50a, 0 0 46px #ba86cb0b;
}

html body.nocturne .lotus-caption {
  color: var(--harmony-ice);
  border-top-color: #b0c9db2b;
}

/* Specific sections receive a meaningfully different, restrained pair.
   No selectors below touch instrument choices, the wordmark or player states. */
html body.nocturne #work {
  --harmony-focus: var(--harmony-lilac);
  --harmony-support: var(--harmony-ice);
}

html body.nocturne #practice {
  --harmony-focus: var(--harmony-champagne);
  --harmony-support: var(--harmony-sage);
}

html body.nocturne #about {
  --harmony-focus: var(--harmony-rose);
  --harmony-support: var(--harmony-teal);
}

html body.nocturne #legacy {
  --harmony-focus: var(--harmony-champagne);
  --harmony-support: var(--harmony-ice);
}

html body.nocturne #channels {
  --harmony-focus: var(--harmony-lilac);
  --harmony-support: var(--harmony-teal);
}

html body.nocturne .closing {
  --harmony-focus: var(--harmony-rose);
  --harmony-support: var(--harmony-sage);
}

html body.nocturne .section-title {
  color: #e8ded6;
  text-wrap: balance;
}

html body.nocturne .section-title :is(strong, em),
html body.nocturne .process h3 :is(strong, em),
html body.nocturne .legacy-card h3 strong {
  color: var(--harmony-focus);
}

html body.nocturne .section-title em strong,
html body.nocturne .process h3 em strong {
  color: inherit;
}

html body.nocturne :is(.hero-copy, .section-head, .story-text, .process, .closing-inner) .heading-copy,
html body.nocturne .legacy-card .chapter-label,
html body.nocturne .practice-row h3 {
  color: var(--harmony-support);
}

html body.nocturne .heading-copy strong,
html body.nocturne .chapter-label strong,
html body.nocturne .practice-row h3 strong {
  color: inherit;
}

html body.nocturne :is(.hero-copy, .section-head, .story-text, .process, .closing-inner) .context-mark {
  color: var(--harmony-support);
  border-color: color-mix(in srgb, var(--harmony-support) 30%, #211825);
  background: #110d16ed;
}

html body.nocturne .practice-row .talent-icon {
  color: var(--harmony-support);
  border-color: #accbb836;
}

html body.nocturne .legacy-present h3,
html body.nocturne .music-primary h3,
html body.nocturne .music-mini h3 {
  color: var(--harmony-focus);
}

/* Quiet transparent edges connect the page to its setting, with solid
   reading surfaces maintained behind the copy and all controls. */
html body.nocturne :is(.section-head, .listening-intro) > p {
  border-inline-start-color: color-mix(in srgb, var(--harmony-support) 42%, #241e2b);
  box-shadow: inset 1px 0 0 #ffffff03, 0 8px 24px #0002;
}

html body.nocturne .story-text .geometry {
  opacity: .28;
}

html body.nocturne .story-text .geometry i {
  border-color: var(--harmony-support);
}

/* Compact modular rhythm: wider image on entry, a heading on the first
   third, then the eye crosses into the supporting note. No forced heights. */
@media (min-width: 1101px) {
  html body.nocturne .hero .hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
    gap: clamp(24px, 3.3vw, 64px);
    padding-block: clamp(34px, 4vw, 62px) clamp(34px, 3vw, 48px);
  }

  html body.nocturne .hero-copy {
    justify-self: start;
    align-self: center;
  }

  html body.nocturne .hero-portrait.lotus-scene {
    align-self: center;
  }

  html body.nocturne :is(.section-head, .listening-intro) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
    column-gap: clamp(24px, 3.3vw, 64px);
    align-items: center;
  }

  html body.nocturne :is(.section-head, .listening-intro) > p {
    justify-self: start;
    width: 100%;
    max-width: 61ch;
  }

  html body.nocturne .closing-inner {
    grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
    column-gap: clamp(24px, 3.3vw, 64px);
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html body.nocturne :is(.music-primary, .music-mini, .legacy-card, .practice-row) {
    transition: border-color 240ms ease, box-shadow 240ms ease;
  }

  html body.nocturne :is(.music-primary, .music-mini, .legacy-card, .practice-row):hover {
    border-color: color-mix(in srgb, var(--harmony-focus) 48%, #32263b);
    box-shadow: inset 0 1px #ffffff07, 0 8px 24px #0003;
  }
}

@media (max-width: 760px) {
  html body.nocturne .hero::after {
    width: 110vw;
    inset-inline-start: 18%;
    inset-block-start: 20%;
    opacity: .55;
  }

  html body.nocturne .site-backdrop::after {
    background: linear-gradient(110deg, #060509c9, #060509a3 61.8%, #060509b8);
  }

  html body.nocturne .lotus-caption {
    letter-spacing: .07em;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.nocturne .site-backdrop .background-plane,
  html body.nocturne .hero-depth {
    will-change: auto;
  }

  html body.nocturne :is(.music-primary, .music-mini, .legacy-card, .practice-row) {
    transition: none;
  }
}

@media (forced-colors: active) {
  html body.nocturne .hero::before,
  html body.nocturne .hero::after,
  html body.nocturne .story-text .geometry {
    display: none;
  }

  html body.nocturne :is(.section-title, .process h3, .legacy-card h3, .music-primary h3, .music-mini h3, .practice-row h3, .heading-copy, .chapter-label),
  html body.nocturne :is(.section-title, .process h3, .legacy-card h3) :is(strong, em) {
    color: CanvasText;
  }

  html body.nocturne :is(.context-mark, .talent-icon) {
    color: CanvasText;
    background: Canvas;
    border-color: CanvasText;
  }
}

/* A silent optional film shares the same depth plane as the photographs.
   Its decoded poster remains underneath until playback is actually running. */
html body.nocturne .site-backdrop .background-film {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  filter: saturate(.78) brightness(.84);
  transition: none;
}
html body.nocturne .site-backdrop .background-film.is-playing { opacity: 1; transition: opacity 1.6s ease; }
@media (prefers-reduced-motion: reduce) {
  html body.nocturne .site-backdrop .background-film { display: none; transition: none; }
}
@media (forced-colors: active) {
  html body.nocturne .site-backdrop .background-film { display: none; }
}

html body.nocturne .background-motion .motion-play-icon { display: none; }
html body.nocturne .background-motion[aria-pressed="true"] .motion-play-icon { display: block; }
html body.nocturne .background-motion[aria-pressed="true"] .motion-pause-icon { display: none; }
html body.nocturne .background-motion[aria-pressed="true"] { color: var(--harmony-ice); }
html body.nocturne .site-backdrop[data-paused="true"] .background-plane { will-change: auto; }

/* A separate, light foreground plane follows the camera in counter-motion.
   The nested construction echoes a record, a lotus and a sound wave. */
html body.nocturne .atmosphere-orbits {
  position: absolute;
  inset: -5%;
  width: 110%;
  height: 110%;
  max-width: none;
  z-index: 1;
  pointer-events: none;
  opacity: .36;
  stroke-width: .65;
  transform-origin: 66.667% 33.333%;
}
.atmosphere-orbits .orbit-rose { stroke: #c0a3c2; opacity: .19; }
.atmosphere-orbits .orbit-ice { stroke: #94b7c4; opacity: .28; }
.atmosphere-orbits .orbit-echo { stroke: #d2bd96; opacity: .17; }
@media (max-width: 760px) { html body.nocturne .atmosphere-orbits { opacity: .24; } }
@media (prefers-reduced-motion: reduce) { html body.nocturne .atmosphere-orbits { transform: none !important; } }
@media (forced-colors: active) { html body.nocturne .atmosphere-orbits { display: none; } }