/* Roughley Mechanical — imagery.
   ──────────────────────────────────────────────────────────────────────────
   THE DUOTONE IS A BRAND EXTENSION, NOT A TRANSCRIPTION. The brand system has
   no photography section at all; this rule was invented for the site and is
   recorded in brand/NOTES.md.

   Why: every photograph is reduced to an Iron -> Paper ramp, so Copper is the
   only saturated colour left anywhere on the page. That gives calls to action
   the same "this is the button" contrast that an off-palette CTA colour would,
   without breaking the brand's single-accent rule — and it unifies stock
   photography that would otherwise obviously not match.

   How the sandwich works:
     background Iron   — the shadow tone
     img `lighten`     — result = max(backdrop, source), so shadows floor at Iron
     ::after `darken`  — result = min(backdrop, source), so highlights cap at Paper

   Verified in Chrome: a 0->255 ramp renders #18191B -> #F5F4F1 with neutral
   midtones and no colour cast.

   `isolation: isolate` is load-bearing. Without it the blend escapes the
   element and tints whatever is painted behind it. */

.duotone {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  background: var(--duotone-shadow);
  line-height: 0;
}

.duotone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  mix-blend-mode: lighten;
}

.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--duotone-highlight);
  mix-blend-mode: darken;
  pointer-events: none;
}

/* Where blend modes are unsupported the image still desaturates, which is
   on-brand — it simply loses the Iron/Paper clamp. */
@supports not (mix-blend-mode: lighten) {
  .duotone img { mix-blend-mode: normal; }
  .duotone::after { display: none; }
}

/* A softer variant for large background imagery sitting behind text, where a
   full-contrast duotone would fight the copy. */
.duotone--quiet img { filter: grayscale(1) contrast(0.92) brightness(0.96); }

/* ── Placeholder frames ──────────────────────────────────────────────────
   Mist fill naming the shot it is waiting for. Never a remote placeholder
   service (breaks file:// and offline) and never temporary stock in the
   slots reserved for real crew photography. */
.photo-placeholder {
  background: var(--mist);
  border: 1px dashed var(--steel);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-20);
  text-align: center;
}
.photo-placeholder span {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--meta-ink);
}

/* ── Inline icons ───────────────────────────────────────────────────────── */
.icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: currentColor;
  stroke: none;
}
.nav-drop__chev {
  width: 10px;
  height: 6px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: square;
}