/* =====================================================================
   Theme 04 · "Blush 300 · Image, Light"
   Loaded AFTER css/styles.css + theme-300.css.

   Everything else matches theme-300 exactly; the one difference is a
   15% white veil over all photography and video.

   Earlier version of this sheet (photo backdrop + frosted glass) is in
   git: `git show 173cf51:css/theme-300-image.css`
   ===================================================================== */

:root {
  /* Unused for now — kept for a future photographic backdrop. */
  --theme-photo: url("https://images.unsplash.com/photo-1601985705806-5b9a71f6004f?auto=format&fit=crop&w=1200&q=70");
}

/* =====================================================================
   15% white layer above every image and video

   A pseudo-element can't sit inside a replaced element, and wrapping all
   55 <img>/<video> tags in HTML would fork this file from theme-300.html.
   So the veil is applied as a filter on the media itself.

   invert → brightness(.85) → invert works out to  out = .85·in + .15,
   which is exactly what compositing rgba(255,255,255,.15) on top gives.
   CSS filter functions run in sRGB, so it matches an overlay pixel for
   pixel — with the bonus that transparent areas (the logo PNG) stay
   transparent instead of being filled white.

   To change the strength, move the brightness value: 1 − veil.
   .85 = 15%   ·   .80 = 20%   ·   .90 = 10%
   ===================================================================== */
img,
video {
  filter: invert(1) brightness(.85) invert(1);
}

/* Intro carousel keeps its photography at full strength */
.intro-screen img,
.intro-screen video {
  filter: none;
}