/* ============================================================
   Selene · header band · transparent on the opening frame,
   solid black after it (the Noerr pattern)
   On the first section of every page the bar floats over the art.
   Once the next section starts, the band fades to
   black; the bar keeps one height. Scrolling back up reverses it.
   The paintings of the later chapters start under the black band,
   so no moon or figure is cut by it.
   ============================================================ */
:root {
  /* the Noerr proportion: the space above and below the logo is about the logo's own height */
  --bar-pad-compact: 34px;
  --bar-h-compact: calc(env(safe-area-inset-top, 0px) + var(--bar-pad-compact) * 2 + 40px); /* padding + logo + padding */
}
/* one height in both states (30 Sep 2026): the logo and the menu never move; only the black ground fades in */
html .bar, html .bar.is-black { padding-top: calc(env(safe-area-inset-top, 0px) + var(--bar-pad-compact)); padding-bottom: var(--bar-pad-compact); }
.bar::before { transition: opacity 700ms cubic-bezier(0.65, 0, 0.35, 1); }
.bar::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: #000; opacity: 0; transition: opacity 700ms cubic-bezier(0.65, 0, 0.35, 1); } /* a slow ease-in-out fade, like Noerr */
/* (the tightening on black was removed: the height no longer changes) */
.bar.is-black::after { opacity: 1; }
.bar.is-black::before { opacity: 0; } /* the soft scrim is only for the transparent state */

/* inner pages drew a near-solid ground here; over the hero the bar now floats like on the homepage */
.bar::before { background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 55%, transparent) 0%, transparent 100%); }

/* chapters after the first: the painting starts under the black band */
main > section[data-sc-act]:not(:first-of-type) .plate { top: var(--bar-h-compact); height: calc(100% - var(--bar-h-compact)); }
#c6 .moonwrap { top: calc(50% + var(--bar-h-compact) / 2); }

@media (max-width: 860px) {
  :root { --bar-pad-compact: 22px; }
  #c6 .moonwrap { top: auto; }
}
@media (prefers-reduced-motion: reduce) { .bar, .bar::before, .bar::after { transition: none; } }
/* pages whose content scrolls under the band from the start (services, contact): the black arrives at once, not over 700ms */
.bar.bar--early::before, .bar.bar--early::after { transition-duration: 200ms; }