/* ============================================================
   photos.css — frame treatment for the collage photos (index only).

   The Pencil export ships every photo frame with a hairline that is
   effectively invisible: `[outline:1px_solid_#E7E1D6]` is only ~4%
   darker than the #F1EDE7 page background, and `rounded-[2px]` reads
   as square at these sizes. This file gives the frames a visible
   edge, a soft warm lift, and a slightly softer corner — without
   touching the export markup or the layout math in index.css.

   Load order: index.html links tailwind.build.css, styles.css,
   index.css, then this file — so these rules win the cascade.

   Scope: ONLY the photo frames. The DOM is

     Photos (row)
     └── Card N            <- w-fit flex-col: photo + caption
         ├── Photo YYYY-N  <- the frame (this file's target)
         └── Caption       <- must NOT be framed

   so the frame is the `Photo …` element, NOT the Card. Targeting the
   Card would draw one box around photo + caption together. The hero
   photo is a CSS background on the section and is not touched here.
   ============================================================ */

body [data-pencil-name^="Photo "] {
  /* Override the export's near-invisible #E7E1D6 hairline. Kept as an
     inset outline (not a border) so it follows the radius and adds no
     layout box — the frames are sized by index.css's --fw formula. */
  outline: 1px solid #D8CFBE;
  outline-offset: -0.5px;
  border-radius: 6px;

  /* Two-layer warm shadow: a tight contact edge plus a soft ambient
     lift, so the frame reads as a print sitting on the paper. */
  box-shadow:
    0 1px 2px rgba(46, 42, 38, .06),
    0 8px 20px rgba(46, 42, 38, .07);
}

/* On hover the frame already lifts 8px (index.css). Deepen the shadow
   to match, reusing the same value the export uses on its buttons. */
@media (hover: hover) {
  body [data-pencil-name^="Photo "]:hover {
    box-shadow:
      0 1px 2px rgba(46, 42, 38, .06),
      0 14px 30px rgba(46, 42, 38, .12);
  }
}

/* The shadow is a static depth cue, not motion — keep it under
   reduced-motion too, but drop the transition-driven deepening. */
@media (prefers-reduced-motion: reduce) {
  body [data-pencil-name^="Photo "]:hover {
    box-shadow:
      0 1px 2px rgba(46, 42, 38, .06),
      0 8px 20px rgba(46, 42, 38, .07);
  }
}