/* 1.9.11 · direction A, "the painted night" (founder, 21 Oct 2026: "Store artwork C (Nocturne painted) and website A
   (painted night)"). The app's own 1.9.11 paintings come onto the site's night chapters: the onboarding night garden
   (shipped onboard_welcome_night) behind the hero phone and behind each stage's title band, and the Profile's stage
   paintings (shipped ill_profile_*) in the stage arches. The hero's canvas dust and CSS glow are gone; the gold thread,
   the palette and the type stay. Loaded after the page's own stylesheets; adds rules, overrides nothing else. */

.painted-night {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 0; width: min(56vw, 900px); pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48%); mask-image: linear-gradient(90deg, transparent, #000 48%);
}
.painted-night picture, .painted-night img { display: block; width: 100%; height: 100%; }
.painted-night img { object-fit: cover; object-position: 50% 100%; }

.hero { position: relative; }
.hero .hero__grid { position: relative; z-index: 1; }

.band .painted-night { opacity: .85; }
.band .painted-night img { object-position: 50% 70%; }

@media (max-width: 899px) {
  .hero .painted-night {
    left: 0; width: auto; top: 52%;
    -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%);
  }
  /* below the words: the painting's gold thread must never run behind the body text */
  .band .painted-night {
    left: 0; width: auto; top: 52%; opacity: .7;
    -webkit-mask-image: linear-gradient(transparent, #000 40%); mask-image: linear-gradient(transparent, #000 40%);
  }
}

/* The painted motifs, in step with store C ("Nocturne, painted", shots-1911 FINAL_C_PATHS.md): one shipped 1.9.11
   cut-out per phone, at its lower-left corner, with the store's soft warm glow (255, 214, 190). Store C's motif where the
   store shows the room (Today posy, Mama Bloom AI moon, meditations water lily, privacy keepsake box, Sunday letter);
   the app's own room motif otherwise (Night Orchard shell, Name Garden spool, Moon Quilt pillow, Library nightstand).
   Decoration only: pseudo-elements, no markup, nothing reflows. */
.room .device::before, .letter__window::after, .privacy .promises li:first-child::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  background: var(--motif-webp) left bottom / contain no-repeat;
  filter: drop-shadow(0 0 16px rgba(255, 214, 190, .38));
}
/* AVIF only where image-set() with type() is understood: through var() an unsupported value would not fall back to the
   WebP above, it would leave no image at all. */
@supports (background-image: image-set(url("../assets/img/painted/motif/posy.avif") type("image/avif"))) {
  .room .device::before, .letter__window::after, .privacy .promises li:first-child::after { background-image: var(--motif); }
}
.room .device::before { left: -16%; bottom: 3%; width: 44%; aspect-ratio: 1; }
.room:nth-child(1) .device::before { --motif-webp: url("../assets/img/painted/motif/posy.webp"); --motif: image-set(url("../assets/img/painted/motif/posy.avif") type("image/avif"), url("../assets/img/painted/motif/posy.webp") type("image/webp")); }
.room:nth-child(2) .device::before { --motif-webp: url("../assets/img/painted/motif/moon.webp"); --motif: image-set(url("../assets/img/painted/motif/moon.avif") type("image/avif"), url("../assets/img/painted/motif/moon.webp") type("image/webp")); }
.room:nth-child(3) .device::before { --motif-webp: url("../assets/img/painted/motif/water-lily.webp"); --motif: image-set(url("../assets/img/painted/motif/water-lily.avif") type("image/avif"), url("../assets/img/painted/motif/water-lily.webp") type("image/webp")); }
.room:nth-child(4) .device::before { --motif-webp: url("../assets/img/painted/motif/shell.webp"); --motif: image-set(url("../assets/img/painted/motif/shell.avif") type("image/avif"), url("../assets/img/painted/motif/shell.webp") type("image/webp")); }
.room:nth-child(5) .device::before { --motif-webp: url("../assets/img/painted/motif/spool.webp"); --motif: image-set(url("../assets/img/painted/motif/spool.avif") type("image/avif"), url("../assets/img/painted/motif/spool.webp") type("image/webp")); }
.room:nth-child(6) .device::before { --motif-webp: url("../assets/img/painted/motif/pillow.webp"); --motif: image-set(url("../assets/img/painted/motif/pillow.avif") type("image/avif"), url("../assets/img/painted/motif/pillow.webp") type("image/webp")); }
.room:nth-child(7) .device::before { --motif-webp: url("../assets/img/painted/motif/nightstand.webp"); --motif: image-set(url("../assets/img/painted/motif/nightstand.avif") type("image/avif"), url("../assets/img/painted/motif/nightstand.webp") type("image/webp")); }
.letter__window::after { left: 5%; bottom: 4%; width: clamp(64px, 18%, 110px); aspect-ratio: 1;
  --motif-webp: url("../assets/img/painted/motif/letter.webp"); --motif: image-set(url("../assets/img/painted/motif/letter.avif") type("image/avif"), url("../assets/img/painted/motif/letter.webp") type("image/webp")); }
.privacy .promises li:first-child::after { right: 0; top: 12px; width: 64px; aspect-ratio: 300 / 262; background-position: right top;
  --motif-webp: url("../assets/img/painted/motif/keepsake-box.webp"); --motif: image-set(url("../assets/img/painted/motif/keepsake-box.avif") type("image/avif"), url("../assets/img/painted/motif/keepsake-box.webp") type("image/webp")); }
@media (min-width: 900px) {  /* the hero phone: Today's posy, as store C's Home frame (the phone is masked on small screens) */
  .hero__phone::before { display: block; inset: auto; left: -18%; bottom: 5%; width: 34%; aspect-ratio: 194 / 320; z-index: 2;
    background: url("../assets/img/painted/motif/posy.webp") left bottom / contain no-repeat;
    background-image: image-set(url("../assets/img/painted/motif/posy.avif") type("image/avif"), url("../assets/img/painted/motif/posy.webp") type("image/webp"));
    filter: drop-shadow(0 0 16px rgba(255, 214, 190, .38)); }
}
@media (max-width: 719.98px) {  /* two promise cards per row: the keepsake box keeps clear of the next card's number */
  .privacy .promises li:first-child::after { width: 44px; top: 8px; }
}