/* ============ COMPONENT: hero-photo + exhibit =====================
   Real firm photos, doctored to the Verdict grade in pure CSS:
   --photo-grade filter + crimson→ink multiply wash + amber lab-glow.
   Two shapes:
   · .hero-photo — diamond in the page-hero (where the ghost diamond
     lives); ghost diamond stays beneath as frame + failure fallback.
     ≤820px it becomes a full-width notched band under the hero copy.
   · .exhibit — in-body figure on paper, notched corners ("cut file"),
     brass hairline, mono docket caption. Lighter wash (no text on it).
   Concepts: 127 real-photo mandate · C1 portrait-led hero · G1/G17
   story & office imagery · D19 behind-the-scenes humanity · 93.
   Uses: --diamond-clip, --photo-grade, --photo-wash-strength,
         --color-*-rgb, --color-accent, --glow-strength, --sp-*,
         --hairline, --radius-1, --font-mono, --text-xs, --text-sm,
         --motion-dur, --ease-out
   States: .is-failed (img error → hidden, layout reflows), .is-swapping
   ================================================================= */
.page-hero .hero-photo {
  position: absolute; right: -5vw; top: 50%;
  width: 34vw; aspect-ratio: 1;
  transform: translateY(-50%);
  z-index: 0; pointer-events: none;
}
.hero-photo figure {
  position: absolute; inset: 0; margin: 0;
  clip-path: var(--diamond-clip); overflow: hidden;
  background: rgba(var(--color-paper-rgb), 0.05);
}
.hero-photo__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: var(--photo-grade);
}
/* crimson→ink wash: the "one strike" doctoring pass */
.hero-photo figure::after {
  content: ""; position: absolute; inset: 0;
  mix-blend-mode: multiply; opacity: var(--photo-wash-strength);
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.42) 0%, rgba(var(--color-ink-rgb), 0.66) 74%);
}
/* amber lab-glow lift, bottom vertex */
.hero-photo figure::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  mix-blend-mode: screen;
  background: radial-gradient(ellipse at 30% 84%, rgba(var(--color-glow-rgb), calc(0.3 * var(--glow-strength))), transparent 56%);
}
/* brass hairline echo — rotated square aligned to the diamond edge */
.hero-photo::after {
  content: ""; position: absolute; inset: 13%;
  transform: rotate(45deg);
  border: var(--hairline) solid color-mix(in srgb, var(--color-accent) 45%, transparent);
}
.hero-photo.is-failed { display: none; }

/* grand modifier — oversized wide-cut diamond (Law Review promo: 2:1 graphic,
   so the diamond stretches to fit the whole team + all four vertices on screen) */
.page-hero .hero-photo--grand { width: 66vw; aspect-ratio: 1.62; right: -8vw; }
.hero-photo--grand figure::after { opacity: calc(var(--photo-wash-strength) * 0.55); }
.page-hero .hero-photo--grand::after { display: none; } /* square hairline can't align to a wide cut */
.page-hero:has(.hero-photo--grand) { min-height: clamp(520px, 44vw, 800px); }

/* ---------- exhibit — in-body graded figure (practice pages) ---------- */
.exhibit { position: relative; margin: var(--sp-6) 0; }
.exhibit .exhibit__frame {
  position: relative; overflow: hidden; margin: 0;
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
  border: var(--hairline) solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  background: var(--color-ink);
}
.exhibit__img {
  display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover;
  filter: var(--photo-grade);
}
.exhibit .exhibit__frame::after {
  content: ""; position: absolute; inset: 0;
  mix-blend-mode: multiply; opacity: calc(var(--photo-wash-strength) * 0.6);
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.34) 0%, rgba(var(--color-ink-rgb), 0.5) 78%);
}
.exhibit .exhibit__frame::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  mix-blend-mode: screen;
  background: radial-gradient(ellipse at 24% 88%, rgba(var(--color-glow-rgb), calc(0.26 * var(--glow-strength))), transparent 52%);
}
.exhibit figcaption {
  display: flex; align-items: center; gap: 10px; padding: 10px 2px 0;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted);
}
.exhibit figcaption i { font-style: normal; color: var(--color-primary); }
.exhibit.is-failed { display: none; }

/* ---------- swap control (curation; prototype tooling) ---------- */
.hero-photo-swap {
  position: absolute; right: var(--sp-5); bottom: var(--sp-4); z-index: 2;
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em;
  color: rgba(var(--color-paper-rgb), 0.78);
  opacity: 0;
}
.page-hero:hover .hero-photo-swap,
.page-hero:focus-within .hero-photo-swap { opacity: 1; }
.hero-photo-swap button {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: rgba(var(--color-ink-rgb), 0.5);
  border: var(--hairline) solid rgba(var(--color-paper-rgb), 0.25);
  border-radius: var(--radius-1);
  color: rgba(var(--color-paper-rgb), 0.85);
  font: inherit; font-size: var(--text-sm); cursor: pointer;
}
.hero-photo-swap button:hover { border-color: var(--color-accent); color: var(--color-white-pop); }
.hero-photo-swap .hps-count i { color: var(--color-accent); font-style: normal; }
.hero-photo-swap .hps-count b { font-weight: 500; }
/* exhibit-hosted control sits over the photo, top-right */
.exhibit > .hero-photo-swap {
  top: 12px; right: 12px; bottom: auto; pointer-events: auto;
}
.exhibit:hover > .hero-photo-swap,
.exhibit:focus-within > .hero-photo-swap { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .hero-photo__img, .exhibit__img { transition: opacity calc(var(--motion-dur) * 0.6) var(--ease-out); }
  .hero-photo-swap { transition: opacity var(--motion-dur) var(--ease-out); }
}
html.motion-off .hero-photo__img,
html.motion-off .exhibit__img,
html.motion-off .hero-photo-swap { transition: none; }
.hero-photo__img.is-swapping, .exhibit__img.is-swapping { opacity: 0; }

/* ---------- responsive: diamond → notched band, fits the format ---------- */
@media (max-width: 980px) {
  .page-hero .hero-photo { width: 46vw; right: -14vw; }
  .page-hero .hero-photo--grand { width: 64vw; right: -18vw; }
}
@media (max-width: 820px) {
  .page-hero { display: flex; flex-direction: column; }
  .page-hero > .container { order: 0; }
  .page-hero .hero-photo {
    order: 1; position: relative; right: auto; top: auto; transform: none;
    width: auto; height: 200px; aspect-ratio: auto;
    margin: var(--sp-5) var(--sp-4) 0; pointer-events: auto;
  }
  .hero-photo figure {
    clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  }
  .hero-photo::after { inset: 7px; transform: none; }
  .hero-photo-swap { opacity: 1; right: var(--sp-4); bottom: var(--sp-3); }
  .exhibit__img { aspect-ratio: 16 / 10; }
  .exhibit > .hero-photo-swap { opacity: 1; }
}

/* template box inside exhibit frame */
.exhibit__frame image-slot { display: block; width: 100%; aspect-ratio: 21 / 9; }
@media (max-width: 760px) { .exhibit__frame image-slot { aspect-ratio: 16 / 10; } }