/* ==========================================================================
   Dr. Sara Cheikh · Moodboard v2 · act-dossier.css
   Act II — The Dossier.
   Chapter heading, portrait figure, three-moves layout, pull-quote,
   wound paragraph, citation graph, evidence photos, transition line.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Act II outer — long-scroll, paper ground
   -------------------------------------------------------------------------- */

:where([data-act="II"] .act-dossier) {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-agency);
}

/* --------------------------------------------------------------------------
   Centred text column — max 42rem; 144px intro padding
   -------------------------------------------------------------------------- */

:where(.act-dossier > *) {
  max-inline-size: 42rem;
  margin-inline: auto;
  padding-inline: var(--space-5);
}

/* Full-bleed figures escape the column */
:where(.act-dossier__portrait,
       .act-dossier__podium) {
  max-inline-size: none;
  padding-inline: 0;
  margin-inline: 0;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Chapter heading block
   -------------------------------------------------------------------------- */

:where(.act-dossier__heading) {
  padding-block-start: var(--space-10);
  padding-block-end: var(--space-7);
  /* IO entry reveal: starts hidden */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-reveal),
              transform var(--dur-slow) var(--ease-reveal);
}

:where(.act-dossier__heading.is-revealed) {
  opacity: 1;
  transform: translateY(0);
}

:where(.act-dossier__eyebrow) {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-block-end: var(--space-3);
}

/* The h2 — italic Inter Tight, h1-chapter size */
:where(.act-dossier__heading h2) {
  display: none; /* Visually replaced by subheading below — heading is visually-hidden duplicate */
}

:where(.act-dossier__subheading) {
  font-family: var(--font-agency);
  font-size: var(--fs-h1);
  font-style: italic;
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h1);
  color: var(--ink);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Introductory paragraph
   -------------------------------------------------------------------------- */

:where(.act-dossier__intro) {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
  color: var(--ink);
  margin-block-end: var(--space-8);
  /* IO reveal */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-slow) var(--ease-reveal),
              transform var(--dur-slow) var(--ease-reveal);
}

:where(.act-dossier__intro.is-revealed) {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Portrait — full-bleed, 100vw × 70vh, warm-grey tonal treatment
   -------------------------------------------------------------------------- */

:where(.act-dossier__portrait) {
  margin-block: var(--space-8);
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 720ms var(--ease-settle),
              transform 720ms var(--ease-settle);
}

:where(.act-dossier__portrait.is-revealed) {
  opacity: 1;
  transform: scale(1);
}

:where(.act-dossier__portrait img) {
  width: 100%;
  block-size: clamp(20rem, 70vh, 50rem);
  object-fit: cover;
  object-position: center 30%;
  display: block;
  /* Warm-grey tonal treatment per art direction */
  filter: grayscale(0.35) contrast(1.05) brightness(0.98) sepia(0.08);
}

:where(.act-dossier__portrait figcaption) {
  font-size: var(--fs-caption);
  color: var(--ink-quiet);
  letter-spacing: 0.02em;
  padding-block-start: var(--space-3);
  padding-inline: var(--space-5);
  line-height: var(--lh-caption);
}

/* Desktop: caption hung in left margin gutter */
@media (min-width: 1024px) {
  :where(.act-dossier__portrait figcaption) {
    max-inline-size: 42rem;
    margin-inline: auto;
    text-align: start;
  }
}

/* --------------------------------------------------------------------------
   Three moves
   -------------------------------------------------------------------------- */

:where(.act-dossier__moves) {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding-block: var(--space-8);
}

:where(.act-dossier__move) {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-slow) var(--ease-reveal),
              transform var(--dur-slow) var(--ease-reveal);
}

:where(.act-dossier__move.is-revealed) {
  opacity: 1;
  transform: translateY(0);
}

/* Roman numeral + title — stacked column on mobile, marginalia on desktop */
:where(.act-dossier__move-title) {
  font-family: var(--font-agency);
  font-size: var(--fs-h2);
  font-style: italic;
  font-weight: 500;
  line-height: var(--lh-section);
  letter-spacing: var(--ls-h2);
  color: var(--ink);
  margin-block-end: var(--space-4);
}

/* Forensic paragraph */
:where(.act-dossier__move-body p) {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
  color: var(--ink);
  margin-block-end: var(--space-5);
}

/* --------------------------------------------------------------------------
   Pull-quote card — EB Garamond italic on --paper-recessed
   (one place route face appears in shell, per art direction rationale)
   -------------------------------------------------------------------------- */

:where(.act-dossier__pull) {
  background-color: var(--paper-recessed);
  border-block-start: 1px solid var(--hairline);
  padding-block: var(--space-6);
  padding-inline: var(--space-6);
  margin: 0;
  /* top hairline draw animation */
  position: relative;
}

:where(.act-dossier__pull p) {
  font-family: "EB Garamond", Georgia, serif;
  font-size: var(--fs-h3);
  font-style: italic;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
  margin-block-end: var(--space-4);
}

:where(.act-dossier__pull cite) {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-style: normal;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-quiet);
}

/* --------------------------------------------------------------------------
   Wound paragraph — italic, centered, max-width 32rem
   -------------------------------------------------------------------------- */

:where(.act-dossier__wound) {
  font-family: var(--font-agency);
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  font-style: italic;
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--ink);
  text-align: center;
  max-inline-size: 32rem;
  padding-block: var(--space-10);
  margin-inline: auto;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-reveal);
}

:where(.act-dossier__wound.is-revealed) {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Citation graph
   -------------------------------------------------------------------------- */

:where(.act-dossier__citation-graph) {
  padding-block: var(--space-7);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-reveal);
}

:where(.act-dossier__citation-graph.is-revealed) {
  opacity: 1;
}

:where(.act-dossier__citation-graph-label) {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-block-end: var(--space-4);
  display: block;
}

:where(.act-dossier__citation-graph svg) {
  width: 100%;
  height: auto;
  color: var(--ink);
}

/* Data path draw — pathLength="100" set on element; JS adds .is-drawn class */
:where(.act-dossier__citation-graph .js-animate-path) {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1800ms var(--ease-rule);
}

:where(.act-dossier__citation-graph .js-animate-path.is-drawn) {
  stroke-dashoffset: 0;
}

:where(.act-dossier__citation-graph figcaption:last-child) {
  font-size: var(--fs-body);
  color: var(--ink-muted);
  line-height: var(--lh-normal);
  margin-block-start: var(--space-4);
}

/* --------------------------------------------------------------------------
   Podium photo — 100vw × 60vh, same tonal treatment as portrait
   -------------------------------------------------------------------------- */

:where(.act-dossier__podium) {
  margin-block: var(--space-8);
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 720ms var(--ease-settle),
              transform 720ms var(--ease-settle);
}

:where(.act-dossier__podium.is-revealed) {
  opacity: 1;
  transform: scale(1);
}

:where(.act-dossier__podium img) {
  width: 100%;
  block-size: clamp(18rem, 60vh, 44rem);
  object-fit: cover;
  object-position: 55% 40%;
  display: block;
  filter: grayscale(0.35) contrast(1.05) brightness(0.98) sepia(0.08);
}

:where(.act-dossier__podium figcaption) {
  font-size: var(--fs-caption);
  color: var(--ink-quiet);
  letter-spacing: 0.02em;
  padding-block-start: var(--space-3);
  padding-inline: var(--space-5);
  line-height: var(--lh-caption);
}

@media (min-width: 1024px) {
  :where(.act-dossier__podium figcaption) {
    max-inline-size: 42rem;
    margin-inline: auto;
  }
}

/* --------------------------------------------------------------------------
   Al Jazeera archival card — NOT full-bleed; bordered citation card
   -------------------------------------------------------------------------- */

:where(.act-dossier__aljazeera) {
  border: 1.5px solid var(--hairline-strong);
  padding: var(--space-6);
  max-inline-size: 36rem;
  background-color: var(--paper-recessed);
  margin-block: var(--space-8);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-reveal);
}

:where(.act-dossier__aljazeera.is-revealed) {
  opacity: 1;
}

:where(.act-dossier__aljazeera img) {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* No tonal filter — screenshot must read as-is (Al Jazeera logo is evidence) */
}

:where(.act-dossier__aljazeera-dateline) {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-block: var(--space-3);
}

:where(.act-dossier__aljazeera figcaption) {
  font-size: var(--fs-body);
  color: var(--ink-muted);
  line-height: var(--lh-normal);
  margin-block-start: var(--space-3);
}

/* --------------------------------------------------------------------------
   Transition paragraph
   -------------------------------------------------------------------------- */

:where(.act-dossier__transition) {
  font-family: var(--font-agency);
  font-size: var(--fs-h2);
  font-style: italic;
  font-weight: 400;
  line-height: var(--lh-section);
  color: var(--ink);
  text-align: center;
  max-inline-size: 32rem;
  padding-block: var(--space-9);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-reveal);
}

:where(.act-dossier__transition.is-revealed) {
  opacity: 1;
}

:where(.act-dossier__transition-glyph) {
  font-family: var(--font-agency);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--ink);
  text-align: center;
  padding-block-end: var(--space-8);
}

/* --------------------------------------------------------------------------
   Reduced motion overrides
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :where(.act-dossier__heading,
         .act-dossier__intro,
         .act-dossier__move,
         .act-dossier__wound,
         .act-dossier__citation-graph,
         .act-dossier__portrait,
         .act-dossier__podium,
         .act-dossier__aljazeera,
         .act-dossier__transition) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  :where(.act-dossier__citation-graph .js-animate-path) {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}

:where(html.motion-reduced) {
  :where(.act-dossier__heading,
         .act-dossier__intro,
         .act-dossier__move,
         .act-dossier__wound,
         .act-dossier__citation-graph,
         .act-dossier__portrait,
         .act-dossier__podium,
         .act-dossier__aljazeera,
         .act-dossier__transition) {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   Responsive: tablet + mobile adjustments
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  :where(.act-dossier > *) {
    padding-inline: var(--space-4);
  }

  :where(.act-dossier__heading) {
    padding-block-start: var(--space-8);
  }

  :where(.act-dossier__subheading) {
    font-size: clamp(1.5rem, 7vw, var(--fs-h1));
  }

  :where(.act-dossier__portrait img) {
    block-size: clamp(16rem, 55vh, 28rem);
  }

  :where(.act-dossier__podium img) {
    block-size: clamp(14rem, 50vh, 24rem);
  }

  :where(.act-dossier__pull) {
    padding-inline: var(--space-4);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  :where(.act-dossier > *) {
    max-inline-size: 36rem;
  }
}