/* ===========================================================
   ASSET PLACEHOLDER
   Honest, clearly-labelled stand-in. Never disguised as a
   finished image. Styled to sit correctly inside every
   presentation mode.
=========================================================== */

.ph{
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  aspect-ratio: var(--ph-ratio, 4/5);
  background:
    repeating-linear-gradient(135deg, rgba(20,18,14,.045) 0 1px, transparent 1px 11px),
    var(--paper-2);
  border: 1px solid var(--line-2);
  overflow: hidden;
}
.cs .ph, .ph--dark{
  background:
    repeating-linear-gradient(135deg, rgba(239,234,224,.045) 0 1px, transparent 1px 11px),
    var(--fang-bg-2);
  border-color: var(--fang-line);
}

.ph__label{
  width: 100%;
  padding: 16px 18px;
  background: linear-gradient(0deg, rgba(10,9,8,.9), rgba(10,9,8,0));
  color: #EFEAE0;
  font-size: var(--t-xs);
  line-height: 1.4;
}
.ph__label b{
  display: block;
  font-weight: 600;
  margin-bottom: 3px;
}
.ph__label span{ opacity: .7; }

/* small crimson corner tick so placeholders read as intentional
   dev markers rather than broken images */
.ph::before{
  content: '';
  position: absolute; top: 12px; left: 12px;
  width: 6px; height: 6px;
  border-left: 1px solid var(--line-2);
  border-top: 1px solid var(--line-2);
}
.cs .ph::before{ border-color: var(--crimson); }

/* -----------------------------------------------------------
   FIGURE — wraps a real <img> with a graceful placeholder
   fallback. Ships showing the placeholder; the moment a real
   file exists at the referenced path it loads, and the figure's
   aspect-ratio is reset to the image's own natural proportions
   (JS-driven, see js/asset-fig.js) rather than staying locked
   to the placeholder's assumed crop.
----------------------------------------------------------- */
.fig{
  position: relative;
  width: 100%;
  aspect-ratio: var(--ph-ratio, 4/5);
  overflow: hidden;
  background: var(--paper-2);
}
.cs .fig{ background: var(--fang-bg-2); }
.fig img{
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
}
.fig.has-img img{ opacity: 1; }
.fig.has-img .ph{ display: none; }
.fig .ph{ position: absolute; inset: 0; border: none; }

.ph--wide{ --ph-ratio: 16/9; }
.ph--square{ --ph-ratio: 1/1; }
.ph--tall{ --ph-ratio: 3/4; }
.ph--portrait{ --ph-ratio: 4/5; }
.ph--story{ --ph-ratio: 9/16; }
.ph--banner{ --ph-ratio: 21/9; }