/* ============================================================================
   ce-artwin.css — THE art window: show the WHOLE picture, letterboxed onto a
   blurred, darkened copy of ITSELF.
   ----------------------------------------------------------------------------
   WHY IT EXISTS AS ITS OWN FILE (extracted 2026-08-29). This treatment was
   already shipped twice — the trading card's art window (.ce-tcard__art in
   ce-card.css) and the PhotoWalk photo reveal — and a third caller arrived:
   the EVENT CARD, whose art is 43% portrait flyers that a fixed-height `cover`
   crop was beheading. The two existing homes could not simply be shared:
     - ce-card.css is linked by only 3 pages, and the member portal CANNOT link
       coastal.css (its :root collides with the admin palette),
     - coastal.css is linked by every public page but not by the portal.
   So the shared 20 lines live HERE, on their own, and each side pulls them in:
     ce-card.css        @import at the top  → photowalk, _card-preview, portal
     www/events.html    <link>              → the event list + Happening Now
   If a fourth surface needs a letterboxed art window, link/import this file —
   do NOT paste the ::before again. The renderer half is CE.artWindow() in
   js/coastal.js: it sets --ce-artwin-src and publishes the shape class.

   MARKUP CONTRACT
     <div class="ce-artwin">            (position:relative comes from here)
       <img src="…">                    exactly one, the picture itself
     </div>
   The element also carries is-portrait / is-landscape / is-square once the
   image has loaded, so a caller can tune per shape without re-measuring.

   STACKING CONTRACT — the <img> below is positioned at z-index 1, so ANY badge,
   pill or chip a caller absolutely-positions inside this box MUST declare
   `z-index: 2` (or higher). Left on the default `auto` it paints beneath the
   picture whatever its DOM order, and a portrait flyer — which fills the middle
   of a `contain` box — cuts straight through it. This bit the event card's
   category pill on 2026-08-31.
   ========================================================================== */

.ce-artwin { position: relative; overflow: hidden; }

/* The fill behind the letterbox is the SAME FILE the <img> already fetched —
   same URL, so it costs no second request — blurred and darkened so it reads as
   the picture's own shadow rather than as grey bars. CE.artWindow() sets
   --ce-artwin-src only AFTER the <img> load event: a CSS background-image is not
   lazy, so setting it up front would defeat loading="lazy" on the <img> and pull
   every below-the-fold image in one burst. */
.ce-artwin::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: var(--ce-artwin-src); background-size: cover; background-position: center;
  filter: blur(9px) saturate(.85) brightness(.78); transform: scale(1.25);
}

/* `contain`, never `cover`, at any size and in EVERY shape. The whole point is
   that nothing is cropped: a portrait flyer's small print survives, a wide logo
   keeps its ends. The shape classes are published for LAYOUT, never to switch
   the fit back to a crop. */
.ce-artwin > img { position: relative; z-index: 1; width: 100%; height: 100%;
  object-fit: contain; display: block; }

/* No picture at all → no blurred fill either (the caller owns what fills it). */
.ce-artwin--none::before { display: none; }