/* assets/dcr-photos.css · People at work in the Desert Camel Report (11 Nov 2026).
   Stock photos of revenue work (assets/photos/skills/, every file credited in assets/photos/CREDITS.md), each placed
   beside the thing it shows, never as a backdrop:
     Skills        #sk-work, six skills on the list, one photo each, captioned with the skill's domain and name;
     Compensation  the managers' step of the ladder ("the people who hire and coach the reps");
     Signals       the Founder row of the seat split ("the funding round is the founder signal").
   The frame is the report's own photo card (assets/dcr-light.css: .dcr-photo, the 12px card radius on a black ground,
   object-fit cover, and the Depth wash, black -> purple). The files are 3:2; --pp-pos (set per photo in the page
   module) keeps the face in a tighter crop. Captions sit on the scrim-strong hold, white on black, so they pass AA
   over any photo. No magenta, no border, nothing focusable but the phone rail. Loaded after the page's own sheet and
   before dcr-light.css, so every rule here is scoped one class deeper than the shell's .dcr-photo rules. */

/* ---------------------------------------------------------------- the frame, shared */
.dcr-pp.dcr-photo{ margin:0; aspect-ratio:3 / 2; }
.dcr-pp.dcr-photo > picture{ display:block; block-size:100%; }
.dcr-pp.dcr-photo > picture > img{ object-position:var(--pp-pos, 50% 50%); }
/* the caption's hold: a scrim from the bottom edge, so a title that runs the card's width stays on black
   (the shell's 45deg hold suits a corner number on a city, not a line of words) */
.dcr-pp.dcr-photo--depth::before{ opacity:1;
  background:linear-gradient(to top, var(--scrim-strong, rgba(0,0,0,.75)) 0 26%, rgba(0,0,0,.4) 50%, transparent 72%); }
/* a photo with no caption keeps only a light floor of black, so the face stays the brightest thing in the frame */
.dcr-pp.dcr-photo--depth:not(:has(.dcr-pp__t))::before{
  background:linear-gradient(to top, rgba(0,0,0,.35) 0, transparent 45%); }

/* the caption: the domain in Mono caps (on-duo-muted, allowed on the Depth duo), the skill in Plex Sans SemiBold */
.dcr-pp__t{ gap:4px; padding:14px 16px; }
.dcr-pp__k{ font:500 var(--fs-micro, 11px)/1.35 var(--font-mono); letter-spacing:var(--track-label, .08em); text-transform:uppercase;
  color:var(--on-duo-muted, #D1D1D9); }
.dcr-pp__n{ font:600 var(--fs-body, 16px)/1.3 var(--font-sans); letter-spacing:-.005em; color:#fff; text-wrap:balance; }
:lang(ar) .dcr-pp__k{ letter-spacing:0; text-transform:none; font-family:var(--font-arabic, "Almarai", sans-serif); font-size:var(--fs-meta, 12px); }
:lang(ar) .dcr-pp__n{ font-family:var(--font-arabic, "Almarai", sans-serif); }

/* ---------------------------------------------------------------- Skills: the grid (a sideways rail on phones) */
.dcr-pp-grid{ list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-template-columns:repeat(3, minmax(0, 1fr)); }
.dcr-pp-grid > li{ min-inline-size:0; }
.dcr-pp-rail{ min-inline-size:0; border-radius:var(--radius-card, 12px); }
.dcr-pp-rail:focus-visible{ outline:3px solid var(--purple, #3B06D4); outline-offset:2px; }
@media (min-width:720px) and (max-width:1023px){ .dcr-pp-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:719px){
  .dcr-pp-rail{ overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:thin;
    padding-block-end:8px; }
  .dcr-pp-grid{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:82%; gap:10px; }
  .dcr-pp-grid > li{ scroll-snap-align:start; }
  .dcr-pp__t{ padding:12px 14px; }
}

/* ---------------------------------------------------------------- Compensation: the managers' step */
.ld-step .dcr-pp--step{ margin-block-start:8px; }

/* ---------------------------------------------------------------- Signals: the Founder row */
.sg-seat .dcr-pp--wide{ grid-column:1 / -1; margin-block-start:6px; aspect-ratio:5 / 2; }
@media (max-width:1023px){ .sg-seat .dcr-pp--wide{ aspect-ratio:2 / 1; } }

/* ---------------------------------------------------------------- motion: a slow settle as the card reveals */
@media (prefers-reduced-motion:no-preference){
  html.js .dcr-pp.dcr-photo > picture > img{ transition:transform var(--dur-slow, 560ms) var(--ease-standard, ease); }
  html.js [data-reveal]:not(.is-in) .dcr-pp.dcr-photo > picture > img{ transform:scale(1.04); }
}