/* Watermarks: Romee's motifs (assets/watermarks/*.png, taupe on transparency), set into the page like a watermark in paper:
   large, about 10% opacity, behind everything and running off the page edge. Decorative only (aria-hidden). */
main:has(.wm) { position: relative; isolation: isolate; overflow-x: clip; }
.wm { position: absolute; z-index: -1; pointer-events: none; background: center / contain no-repeat; opacity: 0.1; width: clamp(320px, 52vw, 780px); }
.wm-r { right: -14vw; } .wm-l { left: -14vw; }
.wm-stairs  { background-image: url(/assets/watermarks/stairs.png);  aspect-ratio: 742 / 919; }
.wm-ribbon  { background-image: url(/assets/watermarks/ribbon.png);  aspect-ratio: 950 / 915; }
.wm-circles { background-image: url(/assets/watermarks/circles.png); aspect-ratio: 908 / 876; }
.wm-palm    { background-image: url(/assets/watermarks/palm.png);    aspect-ratio: 951 / 781; }
.wm-waves   { background-image: url(/assets/watermarks/waves.png);   aspect-ratio: 967 / 795; }
.wm-arc     { background-image: url(/assets/watermarks/arc.png);     aspect-ratio: 847 / 828; }
@media (max-width: 600px) { .wm { width: 92vw; opacity: 0.08; } .wm-r { right: -40vw; } .wm-l { left: -40vw; } }

/* Romee's own watermarks (2026-10-18): full images on a light ground. Multiply lets the cream ground disappear into the page,
   a soft oval mask removes the image edge, and low opacity keeps only a trace of the shapes. One per page. */
.wm-img { position: absolute; z-index: -1; pointer-events: none; aspect-ratio: 1136 / 1408; width: clamp(280px, 34vw, 520px); background: center / cover no-repeat;
  mix-blend-mode: multiply; opacity: 0.5; -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); }
.wm-ribbon-loop { background-image: url(/assets/watermarks/ribbon-loop.jpg); }
.wm-discs { background-image: url(/assets/watermarks/discs.jpg); }
.wm-paper-waves { background-image: url(/assets/watermarks/paper-waves.jpg); }
.wm-arches { background-image: url(/assets/watermarks/arches.png); aspect-ratio: 1846 / 2288; }
@media (max-width: 600px) { .wm-img { width: 80vw; opacity: 0.35; } }
.wm-discs { opacity: 0.3; }

/* Blind emboss watermarks: the image turned into soft highlights (lighter than the section) and soft shadows (barely darker),
   like a mark pressed into paper. Files in assets/watermarks/emboss/. */
.wme { position: absolute; z-index: -1; pointer-events: none; aspect-ratio: 900 / 1115; width: clamp(320px, 44vw, 680px); }
.wme::before, .wme::after { content: ""; position: absolute; inset: 0; background: center / contain no-repeat; }
.wme::after { opacity: 0.22; }
.wme::before { z-index: 1; opacity: 0.85; }
.wme-arches::before { background-image: url(/assets/watermarks/emboss/arches-light.png); }
.wme-arches::after { background-image: url(/assets/watermarks/emboss/arches-shade.png); }
.wme-waves::before { background-image: url(/assets/watermarks/emboss/paper-waves-light.png); }
.wme-waves::after { background-image: url(/assets/watermarks/emboss/paper-waves-shade.png); }
.wme-discs::before { background-image: url(/assets/watermarks/emboss/discs-light.png); }
.wme-discs::after { background-image: url(/assets/watermarks/emboss/discs-shade.png); }
.wme-ribbon::before { background-image: url(/assets/watermarks/emboss/ribbon-loop-light.png); }
.wme-ribbon::after { background-image: url(/assets/watermarks/emboss/ribbon-loop-shade.png); }
@media (max-width: 600px) { .wme { width: 86vw; } }
/* No visible image edge: an oval fade on the whole mark; highlights a little softer. */
.wme { -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 100%); mask-image: radial-gradient(closest-side, #000 45%, transparent 100%); }
.wme::before { opacity: 0.55; }