/*
 * victory-system.css — shared editorial primitives for the Victory case study.
 *
 * Single source of truth for the publication's typographic system, extracted from
 * the Identity System page (victory-journey-system.html). Link this on every
 * Victory page and migrate page markup toward these classes so the whole case
 * study reads as one edited design monograph.
 *
 * Canonical caption system: figmeta > fm-title (+ optional fm-note).
 *   <figure class="ph-fig">
 *     <img … />
 *     <figcaption class="figmeta">
 *       <p class="fm-title">Figure NN — Title</p>
 *       <p class="fm-note">Optional one-line editorial description.</p>  <!-- only when it adds interpretive value -->
 *     </figcaption>
 *   </figure>
 * Never put file names, purpose labels, briefs, metadata or implementation notes
 * in a caption.
 */

/* ---- Section kicker / heading / body ---------------------------------- */
.sys-kicker{font-family:var(--font-system);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;text-wrap:balance}
.sys-h{font-family:var(--font-system);font-weight:700;font-size:clamp(19px,2.2vw,25px);letter-spacing:-.014em;line-height:1.14;margin:0 0 10px;text-wrap:balance}
.sys-intent{font-size:16px;line-height:1.6;color:var(--ink-2,#4a4d68);max-width:var(--vic-measure,64ch);margin:0 0 24px;text-wrap:pretty}

/* ---- Figure + caption ------------------------------------------------- */
.ph-fig{margin:0}
.ph-fig img{display:block;width:100%;height:auto}
.figmeta{margin-top:var(--vic-cap-gap,12px);max-width:66ch}
.figmeta .fm-title{font-family:var(--font-system);font-weight:700;font-size:13px;letter-spacing:-.005em;color:var(--ink);margin:0}
.figmeta .fm-note{margin-top:7px;font-family:var(--font-system);font-weight:400;font-size:14px;line-height:1.5;color:var(--ink-2,#4a4d68);max-width:60ch;font-style:italic}

/* ---- Pull quote ------------------------------------------------------- */
.pullquote{margin:var(--vic-quote-gap,52px) 0;padding:4px 0 4px 30px;border-left:3px solid var(--accent);font-family:var(--font-meaning);font-style:italic;font-size:clamp(22px,2.5vw,30px);line-height:1.4;color:var(--ink);max-width:34ch;text-wrap:pretty}
@media (max-width:700px){.pullquote{padding-left:20px;margin:30px 0}}

/* ---- PDF artifact (book-exhibit) spacing ------------------------------ */
.book-exhibit{margin:var(--vic-exhibit-gap,34px) 0 0}

/* ============================================================
   Artifact placeholder — ONE shared NAVY plate for a media position
   still in progress. Dark blueprint field with a faint dot-grid, a
   hairline frame, a registration crosshair and one controlled oxide
   tick (all decorative, hidden from assistive tech). It shows ONE
   witty message plus the shared status line — no rotation, no JS. It
   holds the position at a known ratio; replacing the whole
   [data-artifact-placeholder] block with an <img>, <picture>, <video>
   or a shared media component preserves the position and surrounding
   layout. Content-driven height on narrow widths so copy never clips.
   No gradient, icon, skeleton, dashed box, progress bar or new card
   styling. White message, blue emphasis, oxide accent.
   ============================================================ */
.artifact-placeholder{position:relative;display:flex;flex-direction:column;justify-content:center;
  aspect-ratio:16/9;padding:clamp(22px,3.4vw,44px);
  background-color:var(--blueprint-deep,#13153F);
  background-image:radial-gradient(rgba(214,224,255,.09) 1px,transparent 1.4px);
  background-size:24px 24px;background-position:8px 8px;
  border:1px solid rgba(214,224,255,.16);border-radius:8px;overflow:hidden;isolation:isolate}
/* one controlled oxide tick — lower-left corner */
.artifact-placeholder::before{content:'';position:absolute;left:0;bottom:0;width:clamp(28px,3vw,44px);height:3px;
  background:var(--oxide-red,#b54f43);z-index:2}
/* registration mark — decorative crosshair-in-ring, top-right, pale blue-white */
.artifact-placeholder__reg{position:absolute;top:clamp(14px,1.8vw,20px);right:clamp(14px,1.8vw,20px);
  width:26px;height:26px;border:1.5px solid rgba(214,224,255,.36);border-radius:50%;pointer-events:none;z-index:2}
.artifact-placeholder__reg::before,.artifact-placeholder__reg::after{content:'';position:absolute;background:rgba(214,224,255,.5)}
.artifact-placeholder__reg::before{left:50%;top:-7px;bottom:-7px;width:1.5px;transform:translateX(-.75px)}
.artifact-placeholder__reg::after{top:50%;left:-7px;right:-7px;height:1.5px;transform:translateY(-.75px)}
.artifact-placeholder__message{position:relative;z-index:1;font-family:var(--font-system);font-weight:700;
  font-size:clamp(18px,1.9vw,26px);line-height:1.22;letter-spacing:-.012em;color:#eef1ff;
  margin:0;max-width:26ch;text-wrap:balance}
.artifact-placeholder__message b,.artifact-placeholder__message em{color:var(--blueprint-light,#d3d5e4);font-weight:700;font-style:normal}
.artifact-placeholder__status{position:relative;z-index:1;font-family:var(--font-system);font-weight:600;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:#a9b1d6;margin:clamp(16px,2.2vw,22px) 0 0}
/* ratio variants — match the media each position will receive */
.artifact-placeholder--film{aspect-ratio:16/9}
.artifact-placeholder--still{aspect-ratio:4/3}
.artifact-placeholder--wide{aspect-ratio:21/9}
.artifact-placeholder--portrait{aspect-ratio:3/4}
.artifact-placeholder--fourfive{aspect-ratio:4/5}
.artifact-placeholder--square{aspect-ratio:1/1}
/* Narrow widths: release the ratio so the copy is never clipped, without letting
   the plate grow excessively tall. Keeps the message readable in mobile margins. */
@media (max-width:600px){
  .artifact-placeholder,
  .artifact-placeholder--film,.artifact-placeholder--still,.artifact-placeholder--wide,
  .artifact-placeholder--portrait,.artifact-placeholder--fourfive,.artifact-placeholder--square{aspect-ratio:auto;min-height:clamp(188px,52vw,236px)}
}