/* ============================================================
   1) THE OPENING — lead paragraph in an editorial frame
   ============================================================ */

body.pz-clean-post .pz-clean-post__lead,
body.pz-clean-post .entry-content > p:first-of-type {
  padding: 2.4rem 0 2.4rem;
  margin: 0 auto 3rem;
  border-top: 1px solid var(--pz-line, rgba(28, 25, 23, 0.08));
  border-bottom: 1px solid var(--pz-line, rgba(28, 25, 23, 0.08));
  position: relative;
}

/* A subtle "FROM THE OPENING" kicker positioned absolutely above */
body.pz-clean-post .pz-clean-post__lead::before,
body.pz-clean-post .entry-content > p:first-of-type:not(.pz-clean-post__lead):first-of-type::before {
  content: "The lede";
  position: absolute;
  top: -0.55em;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pz-paper, #fafaf9);
  padding: 0 0.85em;
  font-family: "Inter", sans-serif;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pz-orange, #c2410c);
}


/* ============================================================
   2) THE STANDFIRST — italic Fraunces sub beneath title
   Injected by JS only if not already present.
   ============================================================ */

body.pz-clean-post .pz-standfirst {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.18rem, 1rem + 0.7vw, 1.4rem);
  line-height: 1.4;
  color: var(--pz-mute, #78716c);
  max-width: 52ch;
  margin: 0.6em auto 1.8em;
  text-align: center;
  text-wrap: balance;
  letter-spacing: -0.005em;
}


/* ============================================================
   3) THE PHOTO DATELINE — small archive credit beneath caption
   ============================================================ */

body.pz-clean-post .entry-content figure.pz-figure figcaption .pz-figure__dateline,
.pz-figure__dateline {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pz-mute-2, #a8a29e);
  margin-top: 0.6em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}


/* ============================================================
   4) THE FULL-BLEED MOMENT — first figure breathes wider
   ============================================================ */

body.pz-clean-post .entry-content figure.pz-figure:first-of-type,
body.pz-clean-post .entry-content figure.pz-figure.pz-figure--bleed {
  max-width: min(1100px, 96vw);
  margin: 3.4rem auto 3.2rem;
}

body.pz-clean-post .entry-content figure.pz-figure:first-of-type img {
  /* Slightly stronger filter for the cinematic opening image */
  filter: saturate(0.96) contrast(1.06);
}


/* ============================================================
   5) THE CODA — final paragraph as closing serif italic
   Applies to the LAST p inside .entry-content (before the
   ◆◆◆ end ornament and colophon).
   ============================================================ */

body.pz-clean-post .pz-coda {
  font-family: "Fraunces", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(1.18rem, 1rem + 0.8vw, 1.42rem) !important;
  line-height: 1.4 !important;
  color: var(--pz-ink, #1c1917) !important;
  text-align: center !important;
  max-width: 38ch !important;
  margin: 3.4rem auto 1.6rem !important;
  text-wrap: balance;
  letter-spacing: -0.008em;
}

body.pz-clean-post .pz-coda::first-letter {
  /* preserve standard letter — no drop cap on coda */
  font-size: inherit !important;
  float: none !important;
  font-style: italic !important;
  color: inherit !important;
  margin: 0 !important;
}


/* ============================================================
   6) RUNNING HEADER — small publication signature
   Pinned to the viewport edge after scroll, on long-form only.
   ============================================================ */

@media (min-width: 1200px) {
  body.pz-clean-post .pz-running-header {
    position: fixed;
    top: 50%;
    right: 1.6rem;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: right center;
    font-family: "Inter", sans-serif;
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--pz-mute-2, #a8a29e);
    z-index: 50;
    pointer-events: none;
    opacity: 0;
    transition: opacity 600ms var(--pz-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  }

  body.pz-clean-post.pz-header-elevated .pz-running-header {
    opacity: 1;
  }
}

@media (max-width: 1199px) {
  .pz-running-header { display: none !important; }
}


/* ============================================================
   7) READING END — quiet next-prompt beneath colophon
   ============================================================ */

body.pz-clean-post .pz-next-read {
  max-width: 52ch;
  margin: 1.6rem auto 4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--pz-line, rgba(28, 25, 23, 0.08));
  text-align: center;
}

body.pz-clean-post .pz-next-read__kicker {
  font-family: "Inter", sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pz-mute, #78716c);
  margin: 0 0 0.5em;
}

body.pz-clean-post .pz-next-read__link {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.32rem);
  line-height: 1.3;
  color: var(--pz-ink, #1c1917);
  text-decoration: none;
  border-bottom: 1px solid rgba(28, 25, 23, 0.18);
  padding-bottom: 2px;
  transition: color var(--pz-t-micro, 180ms) var(--pz-ease-std, cubic-bezier(0.4, 0, 0.2, 1)),
              border-bottom-color var(--pz-t-micro, 180ms) var(--pz-ease-std, cubic-bezier(0.4, 0, 0.2, 1));
  text-wrap: balance;
}

body.pz-clean-post .pz-next-read__link:hover {
  color: var(--pz-orange, #c2410c);
  border-bottom-color: var(--pz-orange, #c2410c);
}


/* ============================================================
   REDUCED MOTION respect
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  body.pz-clean-post .pz-running-header {
    transition: none !important;
  }
}