/*
 * Gallery load polish.
 *
 * Measured CLS is 0 on both live and staging — nothing MOVES as images load.
 * The "flicker" is paint: each figure is a blank white box until its photo
 * decodes, and with 41 lazy-loaded images that reads as flashing.
 *
 * FIX: a warm placeholder tone behind each figure, from the same palette
 * llp.css uses for the rotator (#efe8e2). The box then reads as intentional
 * rather than empty, and the photo resolves onto a tone close to its own
 * background instead of onto white.
 *
 * !important is required: the page's own inline CSS sets a white background on
 * these figures with !important, a ProPhoto-era override. It goes away when the
 * content is cleaned up at rebuild time; until then we have to match it.
 *
 * ---------------------------------------------------------------------------
 * A FADE-IN WAS TRIED AND REVERTED — 16 Aug 2026. DO NOT RE-ADD CASUALLY.
 *
 * Fading images in via `opacity:0` + a `.llp-in` class added on load left ALL
 * 41 images at computed opacity 0 — a completely blank gallery — even though
 * every image had the class applied. The reveal rule lost to something in the
 * page's inline CSS. It was shipped and reverted within minutes.
 *
 * If a fade is wanted later: prove the reveal rule actually wins on a real
 * gallery page BEFORE relying on it, and never gate image visibility on
 * JavaScript or on a rule that has to out-specify unknown inline CSS.
 * A broken enhancement that hides photographs is far worse than a flicker.
 * ---------------------------------------------------------------------------
 *
 * @package llp2026
 */

/* ---------------------------------------------------------------------------
 * SPECIFICITY, measured 16 Aug 2026 — this rule was NOT winning.
 *
 * The portfolio pages carry inline CSS with an ID in the selector:
 *   #llp-portfolio .grid figure { background:#fff !important; ... }
 * specificity (1,1,1). A bare `.grid figure` is (0,1,1) and loses to it even
 * with !important, because !important settles a conflict between ORIGINS, not
 * between selectors of different specificity within the same origin.
 *
 * Result: from the day this shipped until it was measured, every figure on
 * every portfolio page was still white. Computed backgroundColor read
 * rgb(255,255,255). The flicker fix was doing nothing at all.
 *
 * Matching the ID once is NOT enough either: (1,1,1) against (1,1,1) is a tie,
 * and ties go to source order — the page's <style> sits in the body, after this
 * stylesheet in the head, so the page would still win. The ID is therefore
 * repeated, which is legal CSS and gives (2,1,1). Ugly, and deliberate: the
 * alternative is editing 5 pages of ProPhoto-era inline CSS, which is a
 * content-cleanup job for rebuild time, not a reason to leave this broken.
 *
 * The plain forms are kept for any page without that wrapper.
 * ------------------------------------------------------------------------- */

#llp-portfolio#llp-portfolio .grid figure,
#llp-portfolio#llp-portfolio .bestof-grid figure,
.grid figure,
.bestof-grid figure {
	background: #efe8e2 !important;
}

/*
 * <picture> wrapper, added in 0.9.0 for the WebP source.
 *
 * The page's own rule is `#llp-portfolio .grid img { width:100% !important;
 * display:block !important }`. A block-level img inside a default `inline`
 * <picture> does resolve its percentage width against the figure, but relying
 * on block-in-inline layout for a photographer's grid is not worth the risk —
 * so the wrapper is made a block explicitly.
 */
#llp-portfolio#llp-portfolio .grid picture,
#llp-portfolio#llp-portfolio .bestof-grid picture,
.grid picture,
.bestof-grid picture {
	display: block !important;
}