/* =========================================================
   STORY BODY — shared by the published article and the editor

   Loaded by both the live theme and the admin dashboard, and it is the only
   place story copy is styled. The two surfaces used to be styled separately
   and had drifted badly: the editor wrote at 16px/1.65 with 16px between
   paragraphs while the published page rendered 18px/1.7 with 24px, so every
   paragraph break opened wider once published and a blank line opened much
   wider still. Anything a writer sees here must be what a reader gets, so
   keep both selectors on every rule — never style one without the other.
   ========================================================= */

/* The published column, measured at desktop. The editor matches it so lines
   break in the same places. */
:root { --story-measure: 848px; }

.article__body,
.rte__body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
}

.article__body > *,
.rte__body > * { max-width: var(--story-measure); }

/* Browser default margins on p/ul/ol are set in em, so they change with font
   size and collapse against the rule below in ways that differ between the
   two surfaces. Zero them and let one rule own the vertical rhythm.

   :where() so this contributes no specificity. Written plainly as
   `.article__body p` it would score higher than `.article__body > * + *`
   below and win the margin-top, which silently flattened the gap after every
   heading, quote and list to zero. */
.article__body :where(p, ul, ol, blockquote),
.rte__body :where(p, ul, ol, blockquote) { margin: 0; }

.article__body > * + *,
.rte__body > * + * { margin-top: 24px; }

/* Imported WordPress bodies wrap paragraphs in <div>, which puts them out of
   reach of the direct-child rule above and left them at browser defaults. */
.article__body p + p,
.rte__body p + p { margin-top: 24px; }

.article__body h2, .rte__body h2 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 40px 0 0;
}

.article__body blockquote, .rte__body blockquote {
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--red);
  font-style: italic;
  color: var(--gray-700);
}

.article__body ul, .rte__body ul,
.article__body ol, .rte__body ol { padding-left: 22px; }
.article__body li + li, .rte__body li + li { margin-top: 10px; }

.article__body a, .rte__body a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Media ---------- */

/* Imported images arrived at whatever size WordPress happened to serve, so
   some sat tiny in the middle of the column. They now span the text width. */
.article__body img, .rte__body img {
  display: block;
  width: 100%;
  height: auto;
  margin: 22px 0;
}
/* An image that is genuinely small stays centred rather than being blown up
   into a blurry full-width band. */
.article__body img[data-small], .rte__body img[data-small] {
  width: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.article__body figure, .rte__body figure {
  margin: 24px 0;
  max-width: none;
  width: 100%;
}
.article__body figure img, .rte__body figure img { margin: 0; }
.article__body figcaption, .rte__body figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--gray-500);
}

/* Imported embeds carry hardcoded pixel widths (e.g. a 854px YouTube iframe)
   that overflow the column and force horizontal scroll on phones. Constrain
   every embedded media element to the text width. Video embeds default to
   16:9, which reads far better than a fixed-height letterbox. */
.article__body iframe, .rte__body iframe,
.article__body video, .rte__body video,
.article__body embed, .rte__body embed,
.article__body object, .rte__body object {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 22px 0;
  border: 0;
}
.article__body iframe, .rte__body iframe,
.article__body video, .rte__body video {
  aspect-ratio: 16 / 9;
  height: auto;
}
/* No max-width override here on purpose. `.article__body .embed` would score
   higher than `.embed--portrait` and cancel the caps below, which is what
   stretched a reel to the full column and over 1500px tall. The column cap on
   `> *` is all an embed needs. */

/* Wide tables scroll inside their own box rather than stretching the page. */
.article__body table, .rte__body table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

/* Any stray inline-width element from the old markup still can't overrun. */
.article__body *, .rte__body * { max-width: 100%; }

/* =========================================================
   MEDIA EMBEDS

   Also shared, and for the same reason: .embed--portrait existed only on the
   live site, so a reel looked square in the editor and 9:16 once published.
   The wrapper owns the shape; the iframe just fills it.
   ========================================================= */

.embed {
  position: relative;
  width: 100%;
  /* --gray-100 is only defined in the dashboard, so it silently resolved to
     nothing on the live site. The fallback covers both. */
  background: var(--gray-100, #f2f2f2);
  overflow: hidden;
}
.embed::before { content: ""; display: block; padding-top: 56.25%; }   /* 16:9 */

/* Wins over the generic iframe rule above — the wrapper sets the ratio, and a
   definite width and height make aspect-ratio inapplicable anyway. */
.embed > iframe,
.embed > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  margin: 0;
}

/* Audio players are short and fixed-height, not 16:9 */
.embed--audio::before { padding-top: 0; }
.embed--audio { height: 152px; }
.embed--audio.embed--audio-tall { height: 352px; }

.embed--square::before { padding-top: 100%; }

/* Phone-shaped video: reels, shorts, TikTok. Capped, because a 9:16 player
   across the full column runs well over a screen tall. */
.embed--portrait::before { padding-top: 177.78%; }                     /* 9:16 */
.embed--portrait { max-width: 400px; margin-left: auto; margin-right: auto; }

/* A social post card — picture plus caption — rather than a bare video. */
.embed--card::before { padding-top: 125%; }                            /* 4:5 */
.embed--card { max-width: 540px; margin-left: auto; margin-right: auto; }

@media (max-width: 560px) {
  .article__body, .rte__body { font-size: 16px; }
  .article__body h2, .rte__body h2 { font-size: 22px; margin-top: 32px; }
}