/* ==========================================================================
   RidgeRoofer — Editorial system (The Ridge Report)
   --------------------------------------------------------------------------
   Loaded only on blog index / category / tag / author / date views.

   Design rules this file follows:
     · No shadows, no card chrome, no heavy radii. Structure comes from
       hairline rules, whitespace and type scale — the way a printed
       publication builds hierarchy.
     · Ember is used as an accent only: the lead flag, rules under section
       heads, hover states. Never as a fill behind large areas.
     · Metadata is set in IBM Plex Mono. That single choice does most of the
       work of making the page read as edited rather than marketed.
     · Every layout degrades to a legible single column without stacking a
       desktop grid — mobile gets its own proportions, not a squeeze.

   Colour comes exclusively from tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared section furniture
   -------------------------------------------------------------------------- */

.rr-sechead {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--rr-charcoal);
}

.rr-sechead__title {
  font-family: var(--font-display, "Archivo", system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  letter-spacing: -0.01em;
  color: var(--rr-charcoal);
  margin: 0;
}

.rr-sechead__eyebrow {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--rr-ember);
  margin-bottom: var(--sp-2);
}

/* --------------------------------------------------------------------------
   1. Masthead
   -------------------------------------------------------------------------- */

.rr-masthead {
  background: var(--rr-charcoal);
  color: var(--rr-on-dark);
  padding: clamp(2.75rem, 6vw, 5rem) 0 clamp(2.25rem, 5vw, 4rem);
  border-bottom: 3px solid var(--rr-ember);
}

.rr-masthead__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
}

.rr-masthead__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rr-ember);
  margin: 0 0 var(--sp-3);
}

.rr-masthead__title {
  font-family: var(--font-display, "Archivo", system-ui, sans-serif);
  font-weight: 800;
  /* Deliberately restrained. Publication mastheads are confident, not loud. */
  font-size: clamp(1.9rem, 4.2vw, 3.15rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--rr-white);
  margin: 0 0 var(--sp-3);
  max-width: 18ch;
}

.rr-masthead__standfirst {
  font-size: clamp(0.98rem, 1.15vw, 1.1rem);
  line-height: 1.6;
  color: var(--rr-on-dark);
  margin: 0;
  max-width: 58ch;
}

.rr-masthead__utility {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  justify-content: flex-end;
}

.rr-masthead__count {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--rr-on-dark-muted);
  margin: 0;
}

/* Search — a rule, not a box. */
.rr-search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  border-bottom: 1px solid var(--rr-on-dark-muted);
  padding-bottom: var(--sp-1);
  transition: border-color 0.18s ease;
}

.rr-search:focus-within { border-bottom-color: var(--rr-ember); }

.rr-search__input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--rr-white);
  font-size: 1rem;
  padding: var(--sp-1) 0;
}

.rr-search__input::placeholder { color: var(--rr-on-dark-muted); }
.rr-search__input:focus { outline: none; }

.rr-search__go {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  color: var(--rr-on-dark-muted);
  cursor: pointer;
  padding: var(--sp-1);
  line-height: 0;
  transition: color 0.18s ease;
}

.rr-search__go:hover,
.rr-search__go:focus-visible { color: var(--rr-ember); }

@media (min-width: 880px) {
  .rr-masthead__inner {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr);
    gap: var(--sp-8);
    align-items: end;
  }
}

/* --------------------------------------------------------------------------
   2. Lead story
   -------------------------------------------------------------------------- */

.rr-lead {
  padding: clamp(2.25rem, 5vw, 4rem) 0;
  border-bottom: 1px solid var(--rr-hairline);
}

.rr-lead__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
}

.rr-lead__media {
  display: block;
  overflow: hidden;
  background: var(--rr-paper);
}

/* Square art throughout. A 1:1 crop in a wide column gets very tall, so every
   square is capped by a max-width on its container rather than by squashing
   the ratio — the image stays a true square and simply stops growing. */
/* Square enforced on the container — see note on .post-header__figure. */
.rr-lead__media {
  width: min(400px, 100%);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.rr-lead__media img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.rr-lead__media:hover img { transform: scale(1.02); }

.rr-lead__body { display: flex; flex-direction: column; }

.rr-lead__kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin: 0 0 var(--sp-3);
}

.rr-lead__flag {
  background: var(--rr-ember);
  color: var(--rr-white);
  padding: 0.28em 0.6em;
  font-weight: 600;
}

.rr-lead__kicker a { color: var(--rr-muted); text-decoration: none; }
.rr-lead__kicker a:hover { color: var(--rr-ember); }

.rr-lead__title {
  font-family: var(--font-display, "Archivo", system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  margin: 0 0 var(--sp-3);
  max-width: 20ch;
}

.rr-lead__title a {
  color: var(--rr-charcoal);
  text-decoration: none;
  background-image: linear-gradient(var(--rr-ember), var(--rr-ember));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.rr-lead__title a:hover,
.rr-lead__title a:focus-visible { background-size: 100% 2px; }

.rr-lead__standfirst {
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.62;
  color: var(--rr-charcoal-alt);
  margin: 0 0 var(--sp-3);
  max-width: 54ch;
}

/* Shared metadata rail — mono, dot-separated, quiet. */
.rr-lead__meta,
.rr-idx__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--rr-muted);
  margin: 0;
}

.rr-lead__meta > * + *::before,
.rr-idx__meta > * + *::before {
  content: "·";
  margin-right: 0.85rem;
  color: var(--rr-hairline);
}

.rr-lead__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--sp-4);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--rr-charcoal);
  text-decoration: none;
  border-bottom: 2px solid var(--rr-ember);
  padding-bottom: 0.15rem;
  align-self: flex-start;
  transition: gap 0.2s ease, color 0.2s ease;
}

.rr-lead__cta:hover { gap: 0.7rem; color: var(--rr-ember); }

@media (min-width: 900px) {
  .rr-lead--media .rr-lead__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: center;
  }
  /* Without an image the lead becomes a typographic statement rather than a
     half-empty two-column grid. This is a deliberate editorial form. */
  .rr-lead--type .rr-lead__title { font-size: clamp(2rem, 4.4vw, 3.1rem); max-width: 24ch; }
  .rr-lead--type .rr-lead__standfirst { font-size: 1.18rem; max-width: 62ch; }
}

/* --------------------------------------------------------------------------
   3. Topic index
   -------------------------------------------------------------------------- */

.rr-topics { padding: clamp(2rem, 4vw, 3.25rem) 0 0; }

.rr-topics__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.rr-topic {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--rr-hairline);
  color: var(--rr-charcoal);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.rr-topic:hover,
.rr-topic:focus-visible {
  border-color: var(--rr-charcoal);
  color: var(--rr-ember);
}

.rr-topic__count { font-size: 0.72rem; color: var(--rr-muted); }

/* --------------------------------------------------------------------------
   4. Archive index
   -------------------------------------------------------------------------- */

.rr-archive { padding: clamp(2.25rem, 5vw, 3.75rem) 0 clamp(2.5rem, 6vw, 4.5rem); }

.rr-index { list-style: none; margin: 0; padding: 0; }

.rr-idx {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--rr-hairline);
}

.rr-idx:first-child { border-top: 0; padding-top: 0; }

.rr-idx__num {
  font-size: 0.78rem;
  color: var(--rr-ember);
  padding-top: 0.35rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.rr-idx__body { min-width: 0; }

.rr-idx__cat {
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin: 0 0 var(--sp-1);
}

.rr-idx__cat a { color: var(--rr-muted); text-decoration: none; }
.rr-idx__cat a:hover { color: var(--rr-ember); }

.rr-idx__title {
  font-family: var(--font-display, "Archivo", system-ui, sans-serif);
  font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
  margin: 0 0 var(--sp-2);
  max-width: 30ch;
}

.rr-idx__title a {
  color: var(--rr-charcoal);
  text-decoration: none;
  background-image: linear-gradient(var(--rr-ember), var(--rr-ember));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.rr-idx__title a:hover,
.rr-idx__title a:focus-visible { background-size: 100% 1px; }

.rr-idx__standfirst {
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--rr-charcoal-alt);
  margin: 0 0 var(--sp-2);
  max-width: 62ch;
}

.rr-idx__media {
  grid-column: 2;
  display: block;
  overflow: hidden;
  background: var(--rr-paper);
  order: 3;
  margin-top: var(--sp-2);
  /* Square box; the image is forced to fill it. */
  width: min(220px, 100%);
  aspect-ratio: 1 / 1;
}

.rr-idx__media img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.rr-idx__media:hover img { transform: scale(1.03); }

@media (min-width: 760px) {
  /* Entries with art get a fixed-width plate on the right; entries without
     simply run full measure. Neither looks like the other is missing. */
  .rr-idx--media {
    grid-template-columns: auto minmax(0, 1fr) 232px;
    align-items: start;
  }
  .rr-idx--media .rr-idx__media { grid-column: 3; order: 0; margin-top: 0; width: 232px; }
}

/* Pagination */
.rr-pagination { margin-top: var(--sp-6); }
.rr-pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.rr-pagination .page-numbers {
  min-width: 2.4rem;
  padding: 0.5rem 0.7rem;
  text-align: center;
  border: 1px solid var(--rr-hairline);
  color: var(--rr-charcoal);
  text-decoration: none;
  font-size: 0.9rem;
}
.rr-pagination .page-numbers:hover { border-color: var(--rr-charcoal); }
.rr-pagination .page-numbers.current { background: var(--rr-charcoal); color: var(--rr-white); border-color: var(--rr-charcoal); }

.rr-empty { color: var(--rr-muted); padding: var(--sp-6) 0; }

/* --------------------------------------------------------------------------
   5. Colophon
   -------------------------------------------------------------------------- */

.rr-colophon {
  background: var(--rr-paper);
  border-top: 1px solid var(--rr-hairline);
  border-bottom: 1px solid var(--rr-hairline);
  padding: clamp(2.5rem, 5.5vw, 4.25rem) 0;
}

.rr-colophon__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
}

.rr-colophon__title {
  font-family: var(--font-display, "Archivo", system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--rr-charcoal);
  margin: 0;
  max-width: 20ch;
}

.rr-colophon__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
}

.rr-colophon__item h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--rr-charcoal);
  margin: 0 0 var(--sp-1);
  padding-top: var(--sp-2);
  border-top: 2px solid var(--rr-ember);
}

.rr-colophon__item p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--rr-charcoal-alt);
  margin: 0;
}

@media (min-width: 900px) {
  .rr-colophon__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr); gap: var(--sp-8); }
  .rr-colophon__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
}

/* --------------------------------------------------------------------------
   6. Resources
   -------------------------------------------------------------------------- */

.rr-resources { padding: clamp(2.5rem, 5vw, 4rem) 0; }

.rr-res-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--rr-hairline);
}

.rr-res {
  display: block;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--rr-hairline);
  text-decoration: none;
  transition: background 0.18s ease;
}

.rr-res__icon { display: block; color: var(--rr-ember); margin-bottom: var(--sp-2); line-height: 0; }

.rr-res__name {
  display: block;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--rr-charcoal);
  margin-bottom: 0.3rem;
}

.rr-res__desc {
  display: block;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--rr-muted);
  max-width: 46ch;
}

.rr-res:hover .rr-res__name { color: var(--rr-ember); }

@media (min-width: 760px) {
  .rr-res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-6); }
}

@media (min-width: 1080px) {
  .rr-res-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--sp-5); }
}

/* --------------------------------------------------------------------------
   7. CTA — quiet by design
   -------------------------------------------------------------------------- */

.rr-cta {
  background: var(--rr-charcoal);
  color: var(--rr-on-dark);
  padding: clamp(2.25rem, 5vw, 3.5rem) 0;
}

.rr-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: center;
}

.rr-cta__title {
  font-family: var(--font-display, "Archivo", system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--rr-white);
  margin: 0 0 var(--sp-2);
  max-width: 24ch;
}

.rr-cta__sub {
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--rr-on-dark);
  margin: 0;
  max-width: 58ch;
}

@media (min-width: 860px) {
  .rr-cta__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-8); }
}

/* ==========================================================================
   8. Single post — above the fold
   --------------------------------------------------------------------------
   Fixes four defects visible on the live article header:

   a) The H1 was colliding with the sticky 68px site header. .post-header only
      carried --sp-6 of top padding, and a logged-in editor also has the 32px
      WP admin bar above that, so a three-line headline ran straight into the
      nav. Padding is now explicit and clears both.

   b) The headline was set enormous — three lines of display type before the
      reader reaches anything else. Scaled down and given a measure so it
      breaks to two lines at typical article-title length.

   c) The dark header band met the featured image with an awkward seam.
      The image now overlaps the band deliberately, which reads as an
      intentional editorial device rather than two sections bumping.

   d) Byline suppression (see single.php) needs the meta row to still sit
      correctly when the avatar is gone.
   ========================================================================== */

.single-post .post-header {
  /* Clears the 68px sticky header without turning the band into a full screen. */
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.75rem, 3.5vw, 2.75rem);
}

/* Logged-in editors get the 32px admin bar on top of the sticky header. */
.admin-bar.single-post .post-header {
  padding-top: clamp(2.25rem, 4vw, 3.25rem);
}

.single-post .post-header__title {
  font-family: var(--font-display);
  font-weight: 800;
  /* Was running to ~4rem+. This tops out well below that and holds a
     comfortable measure so long titles break to two lines, not three. */
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  max-width: 20ch;
  margin-bottom: var(--sp-3);
}

.single-post .post-header__cat { margin-bottom: var(--sp-3); }

.single-post .post-header__meta {
  align-items: center;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  max-width: 20ch;
}

/* No avatar to align against — the date rail reads as a caption instead. */
.single-post .post-header__meta--dateonly .post-header__byline { flex-direction: row; }

.single-post .post-header__dates {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--rr-on-dark-muted);
}

.single-post .post-header__author { color: var(--rr-white); }

/* --- Split header: type left, art right --------------------------------
   The featured image sits inside the dark band as a second column instead of
   as a full-width plate underneath it. Mobile stacks type first, then art. */

.single-post .post-header__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: center;
}

/* FULL IMAGE — never cropped.
   Earlier versions forced a square box and filled it with object-fit: cover,
   which sliced the edges off any image whose content ran to them (a poster
   with a headline at the top and an icon row at the bottom lost both).
   There is no forced aspect ratio here: the box takes the image's own shape,
   so whatever is uploaded is shown complete. Width is capped so a tall image
   cannot run away with the header height. */
.single-post .post-header__figure {
  margin: 0;
  width: min(420px, 100%);
  overflow: visible;
}

.single-post .post-header__figure img {
  display: block;
  width: 100%;
  height: auto;          /* natural ratio — nothing is cropped */
  max-width: 100%;
  max-height: 460px;     /* ceiling for portrait sources */
  object-fit: contain;
  margin-inline: auto;
}

.single-post .post-header__caption {
  margin-top: var(--sp-1);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--rr-on-dark-muted);
}

@media (min-width: 900px) {
  .single-post .post-header--split .post-header__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--sp-8);
  }
  /* The inner column already caps its own measure, so let the grid track
     do the work rather than fighting it with a second max-width. */
  .single-post .post-header--split .post-header__inner { max-width: none; }
  .single-post .post-header--split .post-header__title { max-width: 15ch; }
  /* Square sits flush to the right edge of its track. */
  .single-post .post-header--split .post-header__figure { margin-left: auto; }
}

@media (max-width: 640px) {
  .single-post .post-header__title { max-width: none; }
  .single-post .post-header__meta { max-width: none; }
  /* Smaller square on phones so it does not eat the fold. */
  .single-post .post-header__figure { width: min(300px, 100%); }
}

/* --- Article measure -----------------------------------------------------
   .article-main carries max-width: var(--max-prose) (68ch). That is the right
   cap when the article is the only column, but once the 320px sidebar appears
   at 1024px the grid already constrains the track — so the 68ch cap applied a
   SECOND constraint on top and left ~130px of dead space between the text and
   the CTA rail.

   Below 1024px there is no sidebar, so the 68ch cap is kept: without it the
   text would run the full 1200px container and become unreadable.
   ------------------------------------------------------------------------ */

@media (min-width: 1024px) {
  /* The grid track is the constraint; let the prose fill it. */
  .single-post .article-main { max-width: none; }

  /* Slightly tighter gutter, so the recovered width goes to the text
     rather than to the gap. */
  .single-post .article-grid { gap: var(--sp-6); }
}

@media (min-width: 1400px) {
  /* On very wide viewports the track keeps growing, so re-introduce a cap —
     but a generous one, well above the original 68ch. */
  .single-post .article-main { max-width: 82ch; }
}

/* ==========================================================================
   9. Universal image treatment
   --------------------------------------------------------------------------
   One set of rules for every editorial image, so a photograph and a poster
   graphic both land well in the same slot.

   The failure this fixes: square containers were being fed the 'city-hero'
   (1200x630) and 'blog-thumb' (800x450) sizes — both HARD CROPS to landscape.
   A square source therefore had a landscape band sliced out of its middle by
   WordPress, then got cropped a second time by object-fit in a 1:1 box. Any
   image with content near its top or bottom edge lost it twice over.

   Templates now request 'rrf-square' (900x900) so WordPress crops once and
   CSS crops not at all.

   Two content types share these slots and need different behaviour:
     · Photographs  — fill the frame; edge cropping is harmless.
     · Poster/infographic art — carries text and icons at the edges; cropping
       destroys meaning. These must be shown whole.
   `object-fit: contain` on a light ground handles both: a correctly-cropped
   square photo fills the box exactly (nothing to letterbox), while an
   off-ratio graphic is shown complete against the paper tone instead of
   being sliced.
   ========================================================================== */

/* Index and lead thumbnails keep square boxes (layout stability in a grid),
   but contain rather than cover so nothing is sliced. The article header is
   NOT included here — it has no forced ratio at all, see section 8. */
.rr-lead__media,
.rr-idx__media {
  background: var(--rr-paper);
}

.rr-lead__media img,
.rr-idx__media img {
  object-fit: contain;
  object-position: center;
}

/* --- In-body images ------------------------------------------------------
   Images placed inside the article (including Gutenberg featured-image
   blocks) were rendering at full source height — a 1200x630 source in a
   ~650px column is fine, but portrait sources ran to the height of the
   viewport. Cap them so no single image dominates the read. */

.single-post .post-content img,
.single-post .article-main img {
  max-height: 460px;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.single-post .post-content figure,
.single-post .article-main figure {
  margin-inline: 0;
}

/* --------------------------------------------------------------------------
   Motion / accessibility
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .rr-lead__media img,
  .rr-idx__media img,
  .rr-lead__title a,
  .rr-idx__title a,
  .rr-lead__cta { transition: none; }
  .rr-lead__media:hover img,
  .rr-idx__media:hover img { transform: none; }
}

:where(.rr-masthead, .rr-lead, .rr-topics, .rr-archive, .rr-colophon, .rr-resources, .rr-cta) a:focus-visible {
  outline: 3px solid var(--rr-ember);
  outline-offset: 3px;
}