/* ======================================================================
   final/css/imagery.css — how a PHOTOGRAPH behaves in a frame that was
   designed for a drawn plate. Loaded last, so it wins on equal ground.

   Only elements the placement module stamped with [data-cc-photo] are
   touched: the drawn SVG plates (ANALYSIS-READOUT, CHAIN-LATTICE) keep
   every rule sf-refresh.css gives them, so a half-applied imagery pass
   still leaves a finished page.

   THE GRADE IS THE WHOLE POINT. The frames come back from the model on a
   deliberately neutral, untinted grade — the lane's guardrail block asks
   for that and it is not ours to relax. A neutral photograph dropped on a
   near-black navy page reads as a stock photo somebody pasted in. So the
   brand grade happens HERE, in CSS, where it is free, reversible, and
   identical on every frame: a slight desaturation, a contrast lift, and a
   navy-to-cyan duotone veil at low alpha over the top.
   ====================================================================== */

/* The frame becomes the positioning context for the veil. */
body .pg-plate-inner,
body .pg-coa-frame,
body .pg-panel-figure { position: relative; }

body img[data-cc-photo] {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  /* Photographic grade, not a filter stack for its own sake: pull the
     saturation back so the frame cannot fight the accent, lift contrast to
     hold the blacks against a near-black page, and take the brightness down
     a touch so a bright highlight does not become the loudest thing on the
     screen. */
  filter: saturate(0.72) contrast(1.08) brightness(0.94);
  background: var(--cc-navy-900, #071A33);
}

/* THE DUOTONE VEIL. A gradient in the brand's own two ends — deep navy at
   the bottom where captions sit, a breath of cyan at the top left where the
   instrument light usually falls — at an alpha low enough that the
   photograph stays a photograph. `screen` on the light end and `multiply`
   on the dark end would need two layers; one overlay layer at 0.22 gets
   almost all of it and cannot invert a mid-tone. */
body .pg-plate-inner:has(img[data-cc-photo])::after,
body .pg-coa-frame:has(img[data-cc-photo])::after,
body .pg-panel-figure:has(img[data-cc-photo])::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.22;
  background:
    linear-gradient(155deg,
      color-mix(in srgb, var(--cc-cyan-300, #57D6E4) 55%, transparent) 0%,
      transparent 46%),
    linear-gradient(to top,
      var(--cc-navy-900, #071A33) 0%,
      color-mix(in srgb, var(--cc-navy-900, #071A33) 40%, transparent) 38%,
      transparent 72%);
  mix-blend-mode: normal;
}

/* :has() is well supported now, but a browser without it must not lose the
   photograph — it simply loses the veil, which is decoration on decoration. */

/* The two readout slots were sized for a 2:3 drawn plate that had to be
   shown whole (`contain`), with a drop-shadow tracing its alpha. A
   photograph fills its frame instead: it takes the frame's own radius, a
   real edge, and a box shadow again, because now there IS a rectangle. */
body .pg-coa-frame img[data-cc-photo],
body .pg-plate-inner img[data-cc-photo].pg-coa {
  height: 100%;
  min-height: 320px;
  max-height: 560px;
  filter: saturate(0.72) contrast(1.08) brightness(0.94);
  box-shadow: 0 18px 44px rgb(2 7 21 / 0.55);
  border: 1px solid var(--cc-metal-line, color-mix(in srgb, var(--cc-silver-400, #9FB3C4) 22%, transparent));
}

body .pg-panel-figure img[data-cc-photo] {
  height: 220px;
  border: 1px solid var(--cc-metal-line, color-mix(in srgb, var(--cc-silver-400, #9FB3C4) 22%, transparent));
  box-shadow: 0 14px 30px rgb(2 7 21 / 0.5);
}

@media (max-width: 860px) {
  body .pg-coa-frame img[data-cc-photo],
  body .pg-plate-inner img[data-cc-photo].pg-coa { min-height: 220px; max-height: 340px; }
  body .pg-panel-figure img[data-cc-photo] { height: 170px; }
}

/* A reader who asked for more contrast is asking for the words to win. */
@media (prefers-contrast: more) {
  body img[data-cc-photo] { filter: saturate(0.45) contrast(1.02) brightness(0.8); }
}
@media print {
  body img[data-cc-photo] { filter: none; box-shadow: none; }
}

/* ── THE HOME RESEARCH BAND ────────────────────────────────────────────────
   The module stamps [data-cc-photo-band] and one custom property holding the
   URL; everything else is here.

   THE SCRIM IS ARITHMETIC. At 0.82 over #071A33 the brightest pixel any
   photograph can contain composites to #344458, which measures 9.2:1 against this page's ink (#F0F6FA) — so the AA floor holds for EVERY
   frame, sight unseen. That is the property that lets a photograph sit behind
   body text at all. Raise this alpha; never lower it. */
body [data-cc-photo-band] { position: relative; isolation: isolate; }
body [data-cc-photo-band]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(7 26 51 / 0.82), rgb(7 26 51 / 0.82)),
    var(--cc-band-photo);
  background-size: cover, cover;
  background-position: center, center;
  filter: saturate(0.6) contrast(1.05);
}
@media (prefers-contrast: more) {
  body [data-cc-photo-band]::before {
    background-image: linear-gradient(rgb(7 26 51 / 0.94), rgb(7 26 51 / 0.94)), var(--cc-band-photo);
  }
}
@media print { body [data-cc-photo-band]::before { display: none; } }

/* ── PHOTOGRAPHS INSIDE A WHITE PLATE ──────────────────────────────────────
   Added 2026-08-20, at the white-space session's request and on their
   measurement. standards.html's two `.pg-wash-soft` bands are now ice
   (#F2F7FB) carrying white cards, so the navy duotone veil above — written
   for a dark ground — would read as a dark rectangle floating in light.

   The veil is not removed, it is INVERTED. Its job on a dark ground is to
   pull a neutral photograph toward the brand and settle its bottom edge
   where a caption sits; on a light ground the same job wants the opposite
   polarity — a cool white wash from below, and a breath of the same cyan
   from the top left so the two grounds still read as one treatment.

   Keyed on `.pg-wash-soft` rather than on a token, deliberately: CSS cannot
   branch on the VALUE of a custom property, and that band IS the plate. If
   the plates ever move, this moves with the class rather than silently
   painting a light wash on a dark ground.

   The frame border needs nothing — `--cc-metal-line` resolves to
   rgb(4 16 31 / 0.14) inside a plate and follows the polarity by itself.

   NOTE FOR WHEN THE FRAMES LAND: these values are unmeasured. Every other
   contrast figure in this pass was solved against real sampled pixels, and
   a photograph is precisely the case where token arithmetic cannot tell you
   the answer — the white session has offered to re-run its plate audit over
   the real composite, and that is the number to trust over this comment. */
body .pg-wash-soft .pg-plate-inner:has(img[data-cc-photo])::after,
body .pg-wash-soft .pg-coa-frame:has(img[data-cc-photo])::after,
body .pg-wash-soft .pg-panel-figure:has(img[data-cc-photo])::after {
  opacity: 0.18;
  background:
    linear-gradient(155deg,
      color-mix(in srgb, var(--cc-cyan-400, #16BFD1) 30%, transparent) 0%,
      transparent 44%),
    linear-gradient(to top,
      rgb(255 255 255 / 0.92) 0%,
      rgb(255 255 255 / 0.35) 34%,
      transparent 70%);
}

/* On a light plate a photograph does not need to be held back from a
   near-black ground — it needs to stop looking washed out against white.
   Saturation comes back up, brightness stays where the eye expects it. */
body .pg-wash-soft img[data-cc-photo] {
  filter: saturate(0.88) contrast(1.04) brightness(1);
  background: var(--sf-surface, #FFFFFF);
  box-shadow: 0 14px 30px rgb(4 16 31 / 0.16);
}