/* ══════════════════════════════════════════════════════════════════
   photo-linear.css — the blogpost-style layout.

   Sizing is Sandy's verbal rule (2026-08-11), which supersedes the
   pixel widths in Figma 1:113/4:436 — those predate the rule and were
   never updated to match it:

     landscape → width = W, height follows its own ratio
     portrait  → height = W (the landscape's own width), width follows
     square    → height = width = 0.72 × W
                 (108% of a NOMINAL 3:2 landscape's height — 1.08 × W/1.5
                  — so it doesn't resize when the actual mix of images
                  in a collection changes, and still works with none)

   container-type on .photo-list makes `cqw` mean "% of this element's
   OWN width" for everything inside it — which is W. That sidesteps
   two dead ends: percentage HEIGHT can't express "= my own width" at
   all, and a flex column's height is content-sized, so a child's
   height:100% has no basis to resolve against in the first place.
══════════════════════════════════════════════════════════════════ */

/* No box of its own — see js/photo-layouts.js for why the <img>
   inside has to be the thing that carries every sizing/print class. */
.photo-link{ display:contents; }

.photo-list{
  container-type: inline-size;
  display:flex; flex-direction:column; align-items:center;
  gap:22px; width:100%;
}

/* Targets the <img> itself — js/photo-layouts.js puts the kind class
   directly on the element, not on a wrapper. (`.photo-landscape img`
   would be a descendant selector expecting a NESTED img and silently
   match nothing — hit exactly that bug once already.) */
.photo-list img{ display:block; }
/* --fx-panel-img (theme-terminal.css) is the actual filter — a damped
   derivative of the panel's own --b2, applied via the shared theme
   hooks in base.css alongside every other themed effect. Nothing
   photo-specific lives here; this file stays sizing-only. */

/* No object-fit on landscape or portrait: the rule only pins ONE
   dimension and lets the image's own ratio set the other, so cropping
   would fight the rule instead of expressing it. */
img.photo-landscape{ width:100%; height:auto; }
img.photo-portrait{ height:100cqw; width:auto; }

/* Square is the one case that pins BOTH dimensions regardless of the
   source image's actual ratio, so it's the one case that needs
   object-fit:cover to guarantee the box rather than distort into it. */
img.photo-square{ width:72cqw; height:72cqw; object-fit:cover; }