/*
Theme Name:   EduBlock PRO Child — rpbush
Theme URI:    https://rpbush.com
Template:     edublock-pro
Description:  rpbush.com child theme. Implements the Warm German Dark direction defined in DESIGN.md at the project root.
Author:       Ryan Bush
Author URI:   https://rpbush.com
Version:      1.6.49
*/

/* ============================================================================
   Custom property mirror — gives us short, semantic names that work both in
   theme.json output and in this stylesheet. The theme.json palette generates
   --wp--preset--color--<slug> automatically; we expose --rp-* aliases so
   future seasonal-accent swaps are a one-line change here.
   ============================================================================ */
:root {
  /* ---- Semantic aliases into theme.json palette presets ---- */
  --rp-canvas:          var(--wp--preset--color--canvas);
  --rp-surface:         var(--wp--preset--color--surface);
  --rp-surface-deep:    var(--wp--preset--color--surface-deep);
  --rp-hairline:        var(--wp--preset--color--hairline);
  --rp-hairline-strong: var(--wp--preset--color--hairline-strong);
  --rp-text:            var(--wp--preset--color--text-primary);
  --rp-text-secondary:  var(--wp--preset--color--text-secondary);
  --rp-text-muted:      var(--wp--preset--color--text-muted);
  --rp-accent:          var(--wp--preset--color--accent);
  --rp-accent-active:   var(--wp--preset--color--accent-active);

  /* ---- Formalized design tokens (v1.6.0) ---- */
  /* Primary palette — for use in blocks, custom HTML, and any JS-generated markup */
  --rp-sand:            #c8b88a;  /* primary accent: links, buttons, sandstone borders */
  --rp-sand-2:          #d8c89a;  /* lighter sandstone: hover states, very subtle washes */
  --rp-teal:            #6b9b9e;  /* .rp-note border + accent */
  --rp-amber:           #d4a574;  /* .rp-warning border + accent, sun in monogram */
  --rp-canvas-val:      #1a2129;  /* base background (raw value — use --rp-canvas for WP compat) */
  --rp-canvas-2:        #222b35;  /* surface 2 / card bg */
  --rp-canvas-3:        #2a3340;  /* slightly lighter surface, hairline contexts */
  --rp-ink:             #e8e6e1;  /* body text */
  --rp-ink-2:           #b8b4ab;  /* muted text, nav, taglines */

  /* ---- Font family tokens ---- */
  --rp-font:            var(--wp--preset--font-family--inter);
  --rp-font-serif:      var(--wp--preset--font-family--serif);
  --rp-font-mono:       var(--wp--preset--font-family--mono);

  /* ---- Layout ---- */
  /* Header height estimate for anchor-offset compensation (v1.6.0: taller 3-band header). */
  --rp-header-height:   160px;

  /* Site frame cap */
  --rp-frame-max:       1200px;

  /* Prose reading column cap (65ch in px @ 20px body = ~840px; use px for consistency) */
  --rp-prose-max:       840px;
}

/* ============================================================================
   Site frame — mirrors mathehilfe-online.de's pattern.

   We do NOT cap .wp-site-blocks itself; the parent theme's default behavior
   gives .wp-site-blocks an outer gutter via --wp--custom--spacing--outer,
   and core's alignfull rule applies negative-margin breakout so alignfull
   blocks reach the viewport edge. That gives us full-bleed bars (header,
   footer, hero, category section backgrounds) for free.

   The 1200px cap then applies on the INNER content of each section
   (.rp-header > .wp-block-group, .rp-footer > div, .rp-hero--overlay,
   .rp-hero, .rp-category-section, etc.) so content stays in a comfortable
   reading-width column while the canvas color bleeds to viewport edges.

   This is the pattern we converged on after iterating with mathehilfe in
   2025 — capping .wp-site-blocks broke alignfull, broke sticky headers,
   and forced calc-based escape hacks on every full-bleed element. Keep
   this pattern. See feedback memory `feedback_rpbush_full_bleed_bars`.
   ============================================================================ */

/* ============================================================================
   Globals — theme.json sets the body bg / text / font-family. We layer on the
   things theme.json can't express cleanly: focus rings, link underline shape,
   selection color, scrollbar, smooth long-form reading.
   ============================================================================ */
html {
  color-scheme: dark;
  /* `<html>` is the page-level scroll container — clipping body alone leaves
     html free to scroll horizontally when alignfull bands negative-margin
     past the viewport edge. Set on both elements for belt-and-suspenders.
     `clip` not `hidden` because hidden creates a new BFC and breaks
     position:sticky on .site-header. */
  overflow-x: clip;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

::selection {
  background: var(--rp-accent);
  color: var(--rp-canvas);
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--rp-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* === In-content link affordance — always-on underline (WCAG 1.4.1) === */
.entry-content a,
.wp-block-post-content a,
.rp-page-body-band a {
  color: var(--rp-accent);
  text-decoration: underline;
  text-decoration-color: rgba(200, 184, 138, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 160ms ease, color 120ms ease;
}
.entry-content a:hover,
.entry-content a:focus,
.wp-block-post-content a:hover,
.wp-block-post-content a:focus,
.rp-page-body-band a:hover,
.rp-page-body-band a:focus {
  text-decoration-color: rgba(200, 184, 138, 1);
  color: var(--rp-sand-2, #d8c89a);
}

/* Footnote references — slightly tighter offset to play well with superscript */
.entry-content sup a,
.entry-content a[href^="#fn"],
.entry-content a[href^="#ref"] {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Carve-outs — keep these without always-on underline */
.rp-mast a,
.rp-band-nav a,
.rp-compact-nav a,
.rp-compact-menu-panel a,
.rp-mag-footer-list a,
.rp-mag-footer-legal-links a,
.entry-content a.rp-archive-link,
.wp-block-post-content a.rp-archive-link,
.entry-content .wp-block-button__link,
.wp-block-post-content .wp-block-button__link,
.rp-page-body-band .wp-block-button__link {
  text-decoration: none;
}

/* ============================================================================
   Header — v1.6.6 magazine band header, NYT-style two-element pattern.

   Three vertical bands inside .site-header (normal-flow FSE wrapper):
     .rp-dateline  — top strip: date + location
     .rp-mast      — centered: SVG monogram + wordmark + tagline
     .rp-band-nav  — nav row: 6 horizontal links

   v1.6.6: .site-header is NON-STICKY — lives in normal document flow and
   scrolls away with the page. When the user scrolls past the sentinel div
   (#rp-header-sentinel, placed just below the magazine header), an
   IntersectionObserver adds body.rp-utility-bar-visible, which causes the
   SEPARATE .rp-compact-bar fixed element to slide down from above the viewport.

   No morph. No body.rp-header-compact. No in-place animation on the mast.
   ============================================================================ */
.site-header {
  position: relative;
  z-index: 1;
  background: var(--rp-canvas);
}

/* Header breakpoints (mobile-first): mobile default / tablet 600+ / desktop 768+ */

/* --- Band A: Dateline ---- */
.rp-dateline {
  background: #0f1419;
  border-bottom: 1px solid var(--rp-hairline);
  /* Hidden on very narrow screens; shown at 600+ below */
  display: none;
}
.rp-dateline-inner {
  max-width: var(--rp-frame-max);
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rp-dateline-text {
  font-family: var(--rp-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rp-ink-2);
}
.rp-dateline-right {
  /* v1.6.2: constant "KAISERSLAUTERN, DE" — same mono style as date text */
  font-family: var(--rp-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rp-ink-2);
}

/* --- Band B: Mast ---- */
/* Mobile baseline: horizontal layout (monogram left, wordmark+tagline right) */
.rp-mast {
  padding: 12px 24px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid var(--rp-hairline);
  position: relative;
  overflow: hidden;
  /* Layer A: radial dawn-glow behind the monogram — warm amber at ~8% opacity */
  background: radial-gradient(
    ellipse 600px 300px at 50% 40%,
    rgba(212, 165, 116, 0.08) 0%,
    transparent 100%
  );
  /* v1.6.5: removed padding transition (causes layout reflow on every frame).
     Height reduction achieved by setting explicit height:46px in compact state
     without a height transition (instant). Border-color and background transition
     are opacity-safe (no layout reflow). */
  transition: border-color 320ms cubic-bezier(0.4, 0, 0.2, 1), background 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Layer B: faint ridge silhouette at the bottom of the mast band.
   Uses an inline SVG data-URI — a simplified horizon wave at ~4% opacity.
   Deliberately barely-visible: the user should feel depth, not see art. */
.rp-mast::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 32px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 32' preserveAspectRatio='none'%3E%3Cpath d='M0 28 C120 18 200 24 300 20 C400 16 480 26 600 22 C720 18 800 28 900 24 C1000 20 1080 26 1200 22 L1200 32 L0 32 Z' fill='%23c8b88a' fill-opacity='0.05'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 1;
  transition: opacity 280ms ease-out;
}
/* Mobile baseline: row layout — monogram left, text right */
.rp-mast-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.rp-mast-mark {
  display: block;
  height: 48px;
  width: auto;
  margin-bottom: 0;
  flex-shrink: 0;
}
.rp-mast-wordmark {
  display: block;
  font-family: var(--rp-font-serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--rp-text);
  line-height: 1;
  text-align: left;
}
.rp-mast-tagline {
  display: block;
  font-family: var(--rp-font);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rp-ink-2);
  margin-top: 6px;
  text-align: left;
  /* Hidden at narrowest screens; shown at 600+ below */
}

/* --- Band C: Nav row ---- */
/* Mobile baseline (≤599px): horizontal scroll strip */
.rp-band-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rp-hairline);
  mask-image: linear-gradient(to right, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
}
.rp-band-nav::-webkit-scrollbar {
  display: none;
}
.rp-band-nav a {
  font-family: var(--rp-font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rp-ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color 120ms ease;
}
.rp-band-nav a:hover,
.rp-band-nav a:focus-visible {
  color: var(--rp-sand);
}

/* Tablet 600+: show dateline, show tagline, restore centered nav */
@media (min-width: 600px) {
  .rp-dateline {
    display: block;
  }
  .rp-mast-tagline {
    display: block;
  }
  .rp-band-nav {
    justify-content: center;
    gap: 32px;
    overflow-x: visible;
    padding: 7px 24px 14px;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .rp-band-nav::-webkit-scrollbar {
    display: unset;
  }
}

/* Desktop 768+: tall mast with centered vertical stack */
@media (min-width: 768px) {
  .rp-mast {
    padding: 16px 24px 24px;
  }
  .rp-mast-link {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .rp-mast-mark {
    height: 84px;
    margin-bottom: 14px;
    flex-shrink: unset;
  }
  .rp-mast-wordmark {
    font-size: 32px;
    text-align: center;
  }
  .rp-mast-tagline {
    text-align: center;
  }
}

/* ============================================================================
   v1.6.6 NYT-style compact utility bar — SEPARATE fixed element.

   .rp-compact-bar is a visually distinct utility bar that sits ABOVE the
   magazine masthead in z-order but lives in a different DOM element. It slides
   in from above the viewport when the user scrolls past the #rp-header-sentinel
   (placed ~40px below the magazine header bottom edge). It slides back out when
   the user scrolls near the top.

   The bar is visually distinct from the magazine header: shorter (52px),
   denser typography, no radial glow, no dateline. It reads as utility chrome,
   not a compressed version of the masthead. That distinction is the entire
   point of the NYT pattern.
   ============================================================================ */

/* Sentinel: invisible 1px div right below the magazine header + 40px buffer.
   Placed in parts/header.html via wp:html block. No visual presence. */
#rp-header-sentinel {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Base state: off-screen above viewport (translateY(-100%) removes bar + shadow). */
.rp-compact-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000; /* v1.6.7: raised well above any in-page stacking context (cookie consent ~9999, WP admin 99999) */
  height: 60px;  /* v1.6.7: grown from 52px to accommodate stacked wordmark+tagline */
  background: var(--rp-canvas);
  border-bottom: 1px solid rgba(200, 184, 138, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  /* Hidden off-screen: bar + its shadow are both off viewport */
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  transition:
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 280ms ease-out;
}

/* Visible state: IntersectionObserver adds .rp-utility-bar-visible to body */
body.rp-utility-bar-visible .rp-compact-bar {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Admin bar: WP admin bar is 46px mobile (≤782px) / 32px desktop (783+).
   Mobile-first: default = 46px; 783+ overrides to 32px. */
body.admin-bar.rp-utility-bar-visible .rp-compact-bar {
  transform: translateY(46px);
}
@media (min-width: 783px) {
  body.admin-bar.rp-utility-bar-visible .rp-compact-bar {
    transform: translateY(32px);
  }
}

/* Compact bar breakpoints (mobile-first): mobile default (≤599) / nav+mid 600+ / desktop 768+ */

/* Inner layout: brand on left, nav on right, both centered on the 60px bar axis */
/* Mobile baseline (≤599px): no nav (brand only), reduced padding/gap/mark size, no tagline */
.rp-compact-bar-inner {
  max-width: var(--rp-frame-max);
  margin: 0 auto;
  padding: 0 16px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Brand cluster: monogram on left + vertical text stack (wordmark above tagline) on right.
   v1.6.7: stacked layout — monogram scales to match the two-line text stack (~40px tall),
   centered on the 60px bar axis. Gap between mark and stack is 12px. */
.rp-compact-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 16px;   /* clear separation from nav */
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}
.rp-compact-mark {
  /* Scales proportionally to match the two-line text stack (~40px tall).
     object-fit: contain avoids distortion on non-square SVG marks. */
  display: block;
  height: 32px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
}
/* Vertical text stack: wordmark on top, tagline below */
.rp-compact-text-stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rp-compact-wordmark {
  font-family: var(--rp-font-serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--rp-text);
  white-space: nowrap;
  line-height: 1.1;
}
/* Tagline hidden by default (mobile baseline); shown at 768+ below */
.rp-compact-tagline {
  font-family: var(--rp-font);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.13em;
  font-variant-caps: small-caps;
  text-transform: uppercase;
  color: var(--rp-ink-2);
  white-space: nowrap;
  line-height: 1.1;
  display: none;
}

/* Nav: hidden at ≤599px (brand alone; 5 links = 359px + brand 204px > 599px container);
   restored at 600+ where the combined ~595px fits without overflow */
.rp-compact-nav {
  display: none;
  align-items: center;
  gap: 16px;
}
.rp-compact-nav a {
  font-family: var(--rp-font);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rp-ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color 120ms ease;
}
.rp-compact-nav a:hover,
.rp-compact-nav a:focus-visible {
  color: var(--rp-sand);
}

/* 600+: restore nav (brand=204px + nav=359px + padding = ~595px; fits cleanly at 600px+) */
@media (min-width: 600px) {
  .rp-compact-nav {
    display: flex;
  }
}

/* 768+: desktop sizing — full padding, larger mark, standard nav gap, show tagline */
@media (min-width: 768px) {
  .rp-compact-bar-inner {
    padding: 0 24px;
  }
  .rp-compact-brand {
    gap: 12px;
    margin-right: 24px;
  }
  .rp-compact-mark {
    height: 40px;
  }
  .rp-compact-tagline {
    display: block;
  }
  .rp-compact-nav {
    gap: 24px;
  }
}

/* === Mobile hamburger (≤599px only) — CSS-only <details>/<summary> pattern === */

/* Hidden by default; mobile breakpoint reveals */
.rp-compact-menu {
  display: none;
  position: relative;
}

.rp-compact-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  list-style: none;
  background: transparent;
  border: 0;
  padding: 0;
}
.rp-compact-burger::-webkit-details-marker { display: none; }
.rp-compact-burger::marker { content: ""; }

.rp-burger-icon {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--rp-ink);
  border-radius: 1px;
  transition: transform 220ms ease-out, opacity 180ms ease-out;
}

/* Hamburger to X animation when open */
.rp-compact-menu[open] .rp-burger-icon:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.rp-compact-menu[open] .rp-burger-icon:nth-child(2) {
  opacity: 0;
}
.rp-compact-menu[open] .rp-burger-icon:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.rp-compact-menu-panel {
  position: absolute;
  top: calc(100% + 1px);
  right: 0;
  min-width: 200px;
  background: var(--rp-canvas);
  border: 1px solid rgba(200, 184, 138, 0.2);
  border-top: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  z-index: 9001;
  animation: rp-menu-slide-down 240ms cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: top right;
}

@keyframes rp-menu-slide-down {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.rp-compact-menu-panel a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  color: var(--rp-ink);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid rgba(200, 184, 138, 0.08);
}
.rp-compact-menu-panel a:last-child {
  border-bottom: 0;
}
.rp-compact-menu-panel a:hover,
.rp-compact-menu-panel a:focus {
  background: rgba(200, 184, 138, 0.08);
  color: var(--rp-sand);
}

/* Mobile-only: show hamburger at ≤599px, hide at 600+ where .rp-compact-nav takes over */
@media (max-width: 599px) {
  .rp-compact-menu { display: block; }
}
@media (min-width: 600px) {
  .rp-compact-menu { display: none; }
}

/* ============================================================================
   v1.6.28 — Mobile-primary compact bar (<768px).

   On mobile the magazine masthead (.rp-mast + .rp-band-nav) is too wide to
   comfortably fit in a single viewport column: .rp-band-nav overflows
   horizontally, and the tagline wraps awkwardly at narrow widths.

   Fix: below 768px the compact bar becomes the PRIMARY header — visible
   immediately on page load without waiting for scroll. The IntersectionObserver
   still adds/removes body.rp-utility-bar-visible on scroll, but the CSS below
   ensures the bar is always visible on mobile regardless of that class.

   At the same time:
     - .rp-band-nav is hidden on mobile (no horizontal-scroll nav band).
     - .rp-mast is condensed (already mobile-sized; we just suppress the tagline
       and reduce padding slightly for visual balance since the compact bar
       is now the primary nav chrome).

   Desktop (≥768px): no change — magazine header on load, compact bar on scroll.
   ============================================================================ */
@media (max-width: 767px) {
  /* Always show the compact bar on mobile — override the off-screen base state */
  .rp-compact-bar {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    /* Disable the slide-in transition on mobile (bar is permanent, not triggered) */
    transition: none !important;
  }

  /* Admin bar on mobile is 46px — shift compact bar down accordingly */
  body.admin-bar .rp-compact-bar {
    transform: translateY(46px) !important;
  }

  /* Hide the magazine nav band on mobile — it causes horizontal scroll */
  .rp-band-nav {
    display: none;
  }

  /* Hide the dateline strip on mobile — already done at <600px above,
     but explicit here to keep the mobile-primary intent readable */
  .rp-dateline {
    display: none;
  }

  /* v1.6.43: Hide the full masthead on mobile — compact bar is the sole header.
     The compact bar carries monogram + wordmark + hamburger; showing .rp-mast
     alongside it produced a double-brand on the homepage (BUG: double logo).
     The tagline suppression below is now moot but kept for belt-and-suspenders
     should .rp-mast ever be re-enabled on a breakpoint. */
  .rp-mast {
    display: none;
  }

  .rp-mast-tagline {
    display: none;
  }

  /* Add top padding to the magazine header wrapper equal to the compact bar
     height (60px) so page content doesn't sit under the fixed compact bar. */
  .site-header {
    padding-top: 60px;
  }
}

/* Legacy brand classes kept for backward compat with any hardcoded HTML in posts */
.rp-brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.rp-brand-mark { display: block; height: 37px; width: auto; flex: 0 0 auto; }
.rp-brand-name { font-family: var(--rp-font-serif); font-size: 22px; font-weight: 700; color: var(--rp-text); }

/* ----------------------------------------------------------------------------
   Header / footer inner content — cap at 1200px and center.

   Both .rp-header and .rp-footer span the full viewport width (alignfull
   negative-margin breakout from the parent theme's default rule). Their
   direct children carry the 1200px content cap so logo/nav and footer cols
   sit in the same 1200px column as the body sections (.rp-hero--overlay,
   .rp-category-section, etc.) — every section's content shares identical
   left/right edges, while their backgrounds bleed to viewport.
   ---------------------------------------------------------------------------- */
.rp-header > .wp-block-group,
.rp-footer > div {
  max-width: var(--rp-frame-max);
  margin-left: auto;
  margin-right: auto;
}

/* Navigation block in the header */
.rp-header .wp-block-navigation {
  --wp--style--block-gap: 32px;
}
.rp-header .wp-block-navigation .wp-block-navigation-item__content {
  color: var(--rp-text);
  font-size: 15px;
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease, color 120ms ease;
}
.rp-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.rp-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
  color: var(--rp-accent);
  border-bottom-color: var(--rp-accent);
}

/* ----------------------------------------------------------------------------
   Dropdown submenu panel — mobile-first
   Mobile baseline: static (stacks inside hamburger overlay).
   768+: absolute dropdown for desktop hover menus (restored in min-width block below).
   ---------------------------------------------------------------------------- */

/* Submenu link items hover state (applies at all widths) */
.rp-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  color: var(--rp-accent);
  background: rgba(200, 184, 138, 0.07);
  border-bottom: none;
}

/* Chevron / submenu toggle button — inherit color from parent */
.rp-header .wp-block-navigation-submenu__toggle {
  color: inherit;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* "Topics ▾" label — make the whole item feel like a single button */
.rp-header .has-child > .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: default; /* top-level label is not a real link */
}

/* Mobile baseline: WP renders navigation as a hamburger overlay on narrow screens.
   Submenu items stack vertically inside the overlay; no absolute positioning needed. */
.rp-header .wp-block-navigation__submenu-container {
  position: static;
  box-shadow: none;
  border: none;
  border-top: 1px solid var(--rp-hairline);
  padding: 0 0 0 16px;
  background: transparent;
}
.rp-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 8px 0;
}

/* 768+: restore absolute dropdown positioning for desktop hover menus */
@media (min-width: 768px) {
  .rp-header .wp-block-navigation__submenu-container {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    min-width: 220px;
    background: var(--rp-surface);
    border: 1px solid var(--rp-hairline-strong);
    border-top: 2px solid var(--rp-accent);
    padding: 8px 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.40);
    border-radius: 0;
  }
  .rp-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    display: block;
    padding: 10px 20px;
    border-bottom: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--rp-text-secondary);
    white-space: nowrap;
    transition: background 80ms ease, color 80ms ease;
  }
}

/* Mobile nav overlay panel — the parent theme sets background-color to
   var(--wp--preset--color--primary), but the child palette has no `primary`
   slug, so the variable resolves to nothing and the overlay opens fully
   transparent over the hero. Pin to canvas + text color explicitly. */
.wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--rp-canvas) !important;
  color: var(--rp-text) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: var(--rp-text);
}

/* ============================================================================
   Footer — magazine footer (.rp-mag-footer)
   Rendered by the edublock-pro-child/magazine-footer dynamic block.
   v1.6.0: initial four-column layout.
   v1.6.21: 25/50/25 rebalance — Categories column removed, Recent Notes
            spans middle two cells (rp-mag-footer-recent-col, grid-column:span 2).
   ============================================================================ */
.rp-footer,
.site-footer {
  background: #0f1419;
  color: var(--rp-ink-2);
  font-size: 14px;
}

/* Outer shell rendered by the PHP block */
.rp-mag-footer {
  max-width: var(--rp-frame-max);
  margin: 0 auto;
  padding: 48px 32px 24px;
  box-sizing: border-box;
}

/* Four equal columns; Recent Notes spans middle two (25/50/25 layout).
   v1.6.21: switched from 1.4fr 1fr 1fr 1fr to equal 1fr columns so the
   span-2 center block is a true 50% rather than a biased 2/4.4 fraction. */
.rp-mag-footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-bottom: 40px;
}

/* v1.6.19: Defensive min-width fix — grid children default to min-width:auto
   which lets a long post title blow out its 1fr column. min-width:0 releases
   that constraint so fr fractions are always respected. overflow-wrap:anywhere
   ensures long titles wrap at any point rather than overflowing. */
.rp-mag-footer-grid > * {
  min-width: 0;
  overflow-wrap: anywhere;
}
.rp-mag-footer-list a {
  display: block;
  overflow-wrap: anywhere;
}

/* v1.6.21: Recent Notes spans middle two grid cells (25/50/25 layout).
   Scoped to >=600px so the mobile single-column stack is unaffected.
   v1.6.23: per-column font-size override removed; all upper-footer content
   uses a single unified size (inherited 14px). */
@media (min-width: 600px) {
  .rp-mag-footer-recent-col {
    grid-column: span 2;
  }
}

/* Brand column extras */
.rp-mag-footer-wordmark {
  font-family: var(--rp-font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--rp-text);
  margin: 0 0 12px 0;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
/* v1.6.23/v1.6.24: body text in the upper footer (blurb + link lists)
   standardized to a single size (14px, inherited from .rp-footer base) and a
   single color (var(--rp-ink-2)). Column headings KEEP their 12px + sand
   accent treatment (restored in v1.6.24 — they sit above the standardized
   body text as visual rank). Wordmark stays distinct (brand mark, not body
   content). Legal bottom row keeps its own mono treatment per user
   instruction. */
.rp-mag-footer-blurb {
  font-family: var(--rp-font);
  font-size: 14px;
  line-height: 1.65;
  color: var(--rp-ink-2);
  margin: 0;
  max-width: 36ch;
}

/* Column headings — kept at their original 12px + sand accent (v1.6.24
   restored after v1.6.23 over-standardized them; user only wanted the body
   text BELOW the headings unified, not the headings themselves). */
.rp-mag-footer-heading {
  font-family: var(--rp-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rp-sand);
  margin: 0 0 16px 0;
}

/* Link lists */
.rp-mag-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rp-mag-footer-list a {
  font-family: var(--rp-font);
  font-size: 14px;
  font-weight: 400;
  color: var(--rp-ink-2);
  text-decoration: none;
  transition: color 120ms ease;
  line-height: 1.4;
}
.rp-mag-footer-list a:hover {
  color: var(--rp-sand);
}

/* Legal row */
.rp-mag-footer-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--rp-hairline);
}
.rp-mag-footer-copy {
  font-family: var(--rp-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--rp-text-muted);
}
.rp-mag-footer-legal-links {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--rp-font-mono);
  font-size: 12px;
  color: var(--rp-text-muted);
}
.rp-mag-footer-legal-links a {
  color: var(--rp-text-muted);
  text-decoration: none;
  transition: color 120ms ease;
}
.rp-mag-footer-legal-links a:hover {
  color: var(--rp-sand);
}
.rp-mag-footer-legal-sep {
  opacity: 0.45;
}

/* Tablet: 2-col (cols 3+4 wrap) */
@media (min-width: 600px) and (max-width: 1023px) {
  .rp-mag-footer-grid {
    grid-template-columns: 1.2fr 1fr;
    gap: 28px;
  }
}

/* Mobile: single-column stack */
@media (max-width: 599px) {
  .rp-mag-footer {
    padding: 32px 20px 20px;
  }
  .rp-mag-footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .rp-mag-footer-legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* ---- Legacy footer classes (keep for backward compat) ---- */
.rp-footer-copy {
  font-family: var(--rp-font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--rp-text-muted);
}
.rp-footer-link {
  font-family: var(--rp-font-mono);
  font-size: 13px;
  color: var(--rp-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--rp-hairline-strong);
  padding-bottom: 1px;
}
.rp-footer-link:hover { border-bottom-color: var(--rp-accent); }

/* ============================================================================
   Card / tile — shared by post-list, query-loop, gallery tiles
   Square corners (radius 0–4px) per DESIGN.md "photography is a deliberate frame"
   ============================================================================ */
.wp-block-post-template .wp-block-post,
.wp-block-query .wp-block-post {
  background: var(--rp-surface);
  border: 1px solid var(--rp-hairline);
  border-radius: 4px;
  padding: 24px;
  transition: border-color 120ms ease;
}
.wp-block-post-template .wp-block-post:hover,
.wp-block-query .wp-block-post:hover {
  border-color: var(--rp-accent);
}
.wp-block-post-featured-image img,
.wp-block-image img {
  border-radius: 0;
}

/* ============================================================================
   Buttons — default filled sandstone CTA; secondary outlined variant carve-out
   ============================================================================ */

/* === Default Gutenberg button — filled sandstone CTA === */
.wp-block-button__link {
  background-color: var(--rp-sand);
  color: var(--rp-canvas);
  font-family: var(--rp-font);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  border-radius: 3px;
  padding: 14px 24px;     /* 14px vertical -> button height ~46px including 18px text */
  text-decoration: none;
  transition: background-color 160ms ease, transform 120ms ease;
}
/* Specificity boost: .wp-block-post-content a overrides .wp-block-button__link;
   beat it with a two-class selector so the canvas text color always wins. */
.wp-block-button .wp-block-button__link,
.entry-content .wp-block-button__link,
.wp-block-post-content .wp-block-button__link {
  color: var(--rp-canvas);
  text-decoration: none;
  text-decoration-color: transparent;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus,
.entry-content .wp-block-button__link:hover,
.entry-content .wp-block-button__link:focus,
.wp-block-post-content .wp-block-button__link:hover,
.wp-block-post-content .wp-block-button__link:focus {
  background-color: var(--rp-sand-2, #d8c89a);
  transform: translateY(-1px);
  color: var(--rp-canvas);
  text-decoration-color: transparent;
}
.wp-block-button__link:focus-visible {
  outline: 2px solid var(--rp-sand);
  outline-offset: 3px;
}

/* === Outline button variant — secondary actions stay ghost === */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--rp-sand);
  border: 1px solid var(--rp-sand);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
  background-color: rgba(200, 184, 138, 0.12);
  color: var(--rp-sand);
  transform: translateY(-1px);
}

/* ============================================================================
   Inline code / mono — for §-citations and ISO dates per DESIGN.md
   ============================================================================ */
:not(pre) > code {
  font-family: var(--rp-font-mono);
  font-size: 0.9em;
  color: var(--rp-accent);
  background: var(--rp-surface-deep);
  border: 1px solid var(--rp-hairline);
  border-radius: 4px;
  padding: 2px 8px;
}

/* ============================================================================
   Tables — used in bureaucratic-explainer posts (regulation comparison etc.)
   ============================================================================ */
.wp-block-table table,
table {
  border-collapse: collapse;
  width: 100%;
}
.wp-block-table th,
table th {
  text-align: left;
  font-family: var(--rp-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--rp-text-secondary);
  padding: 12px 0;
  border-bottom: 1px solid var(--rp-hairline-strong);
}
.wp-block-table td,
table td {
  padding: 12px 0;
  border-bottom: 1px solid var(--rp-hairline);
  vertical-align: top;
}

/* ============================================================================
   Legacy header — mobile-first (mobile baseline = compact; 481+ = default)
   .rp-brand-tag and .rp-header (legacy classes) are set for the mobile baseline.
   .rp-footer-meta is out of header scope; kept in its own untouched block below.
   ============================================================================ */
/* Legacy header: compact by default on mobile */
.rp-brand-tag { display: none; }
.rp-header { padding: 16px 20px !important; }

/* 481+: restore default header spacing (legacy classes) */
@media (min-width: 481px) {
  .rp-brand-tag { display: inline; }
  .rp-header { padding: revert !important; }
}

/* Footer meta alignment (out of header scope — untouched max-width block) */
@media (max-width: 480px) {
  .rp-footer-meta { align-items: flex-start; }
}

/* ============================================================================
   Reduced motion — respect user preference
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================================
   Homepage — Hero section (.rp-hero--overlay)
   Magazine-style: cinematic 21:9 image fills the 1200px frame, text anchored
   bottom-left via position:absolute over a gradient scrim.
   No border-radius on photo (DESIGN.md square-frame rule).
   No backdrop-filter (DESIGN.md ban — containing-block trap).
   ============================================================================ */

/* Outer wrapper: escape the FSE constrained-layout content column so the hero
   bleeds to the full 1200px frame width. The alignfull <section> is full width
   but its wp:html child is constrained to contentSize (68ch). We use a
   calc-based negative margin trick, mirroring how .rp-category-section handles
   the same problem via max-width: var(--rp-frame-max).
   The site's root padding (var(--wp--preset--spacing--70) = 24px) is removed
   via margin overrides; the hero image itself carries no gutter. */
.rp-hero--overlay {
  padding: 0;
  /* Cap at 1200px and center within the alignfull section. The section
     itself bleeds to 100vw via parent alignfull breakout, providing the
     canvas-color edge-to-edge on wide viewports. */
  max-width: var(--rp-frame-max);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

/* The figure acts as the positioning context for the caption overlay */
.rp-hero-frame {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: hidden;
  /* Cinematic 21:9 — preserves drama while fitting within 1200px frame */
  aspect-ratio: 21 / 9;
  isolation: isolate; /* v1.6.8: contain stacking context so .rp-hero-caption z-index stays local, below .rp-compact-bar */
}

/* Gradient scrim: dark at the bottom-left, transparent at the top-right.
   Uses a solid-stop gradient so we get full control without blur.
   Diagonal sweep ensures the image reads well in the upper-right quadrant. */
.rp-hero-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgba(15, 20, 25, 0.88) 0%,
      rgba(15, 20, 25, 0.55) 35%,
      rgba(15, 20, 25, 0.15) 60%,
      rgba(15, 20, 25, 0.00) 100%
    ),
    linear-gradient(
      to right,
      rgba(15, 20, 25, 0.35) 0%,
      rgba(15, 20, 25, 0.00) 55%
    );
  pointer-events: none;
}

/* Hero photograph: fills the frame, object-fit cover for consistent crop */
.rp-hero-photograph {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  border-radius: 0;
  margin: 0;
}

/* Caption block: anchored bottom-left, z-index above the scrim */
.rp-hero-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: 0 48px 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 700px;
}

.rp-hero-kicker {
  font-family: var(--rp-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--rp-accent);
  /* Vertical rule accent on the left — magazine convention */
  padding-left: 14px;
  border-left: 2px solid var(--rp-accent);
  line-height: 1.4;
}

.rp-hero-headline {
  font-family: var(--rp-font);
  font-size: 72px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -2.5px;
  color: var(--wp--preset--color--text-primary);
  margin: 0;
  max-width: 16ch;
  /* Warm near-white on a dark scrim — contrast is well above 4.5:1 */
}

.rp-hero-subhead {
  font-family: var(--rp-font);
  font-size: 16px;
  line-height: 1.55;
  color: rgba(245, 243, 240, 0.80);
  max-width: 52ch;
  margin: 0;
}

/* ---- Mobile: collapse to stacked layout below 767px ---- */
@media (max-width: 767px) {
  /* Frame: switch to natural image aspect ratio rather than 21:9 crop,
     which is too short on a portrait screen. */
  .rp-hero-frame {
    aspect-ratio: 4 / 3;
  }

  /* Tighten the gradient so it covers the narrower image bottom */
  .rp-hero-frame::after {
    background:
      linear-gradient(
        to top,
        rgba(15, 20, 25, 0.92) 0%,
        rgba(15, 20, 25, 0.60) 40%,
        rgba(15, 20, 25, 0.20) 70%,
        rgba(15, 20, 25, 0.00) 100%
      );
  }

  .rp-hero-caption {
    padding: 0 20px 28px;
    gap: 12px;
    max-width: 100%;
  }

  .rp-hero-headline {
    font-size: 36px;
    letter-spacing: -1.5px;
    max-width: 20ch;
  }

  .rp-hero-subhead {
    font-size: 14px;
    line-height: 1.50;
  }
}

/* ---- Mobile: edition + category heroes fill the viewport (immersive full-bleed) ----
   v1.6.43: Full-viewport treatment for .rp-hero--edition.
   v1.6.44: Extended to .rp-hero--category — category archive heroes match the
   homepage edition hero on mobile (user request 2026-05-29).
   v1.6.45: True full-bleed. The hero fills the ENTIRE viewport (100svh) starting
   at the very top; the fixed 60px compact bar overlays its top edge (the bar's
   solid canvas background reads as a band over the photo — immersive identity
   hero). To get there we collapse the in-flow header chrome (.site-header
   padding + legacy .rp-header padding) and the two stray block-gap margins
   (on the fixed bar and on the hero section) that were pushing the hero ~122px
   down and leaving a dark gap below the bar. Scoped to home + category only;
   every other template keeps the 60px .site-header spacer so its content clears
   the fixed bar. 100vh fallback precedes 100svh for older Android WebView. */
@media (max-width: 767px) {
  .rp-hero--edition .rp-hero-frame,
  .rp-hero--category .rp-hero-frame,
  .rp-hero--page .rp-hero-frame {   /* v1.6.49: page heroes (e.g. About) match home + category */
    aspect-ratio: auto;
    min-height: 100vh;
    min-height: 100svh;
    height: 100svh;
  }

  /* Larger headline on edition + category + page heroes — there is now far more
     vertical room. 48px sits between the prior 36px (too small for a full-viewport
     identity statement) and the 56px desktop scale. Confirmed readable at 375px. */
  .rp-hero--edition .rp-hero-headline,
  .rp-hero--category .rp-hero-headline,
  .rp-hero--page .rp-hero-headline {   /* v1.6.49 */
    font-size: 48px;
    letter-spacing: -2px;
    max-width: 18ch;
  }

  /* Collapse the in-flow header chrome + block-gap margins so the hero is flush
     at the top of the page and the fixed bar overlays it (home + category only). */
  body.home .site-header,
  body.category .site-header { padding-top: 0; }

  body.home .rp-header,
  body.category .rp-header { padding: 0 !important; }

  body.home .rp-compact-bar,
  body.category .rp-compact-bar { margin-top: 0; }

  body.home .rp-hero--edition,
  body.home section:has(.rp-hero--edition),
  body.category .rp-category-hero-section,
  body.category section:has(.rp-hero--category) { margin-top: 0; }
}

/* ============================================================================
   Category archive hero (.rp-cat-hero-band / .rp-hero--category)
   Magazine-style cinematic hero applied to all four category archive pages.
   Reuses the shared .rp-hero--overlay, .rp-hero-frame, .rp-hero-photograph,
   .rp-hero-caption, .rp-hero-kicker, .rp-hero-headline, .rp-hero-subhead
   rules defined above; only the wrapper band needs extra specificity here.

   The .rp-cat-hero-band wraps the hero inside a <section> that's already
   inside the FSE main.site-content constrained block. The section is
   alignfull so the hero bleeds to 100vw; inner .rp-hero--overlay caps at
   1200px via max-width: var(--rp-frame-max) (same as homepage).
   ============================================================================ */

/* Outer band: no padding, let the hero control its own spacing */
.rp-cat-hero-band {
  padding: 0;
  margin: 0;
  width: 100%;
}

/* The .rp-category-hero-section alignfull section sits inside
   main.site-content which has already applied the breakout. Add it to the
   margin-override list so it aligns with other bands (same rule as
   .rp-archive-header below). */

/* ============================================================================
   Homepage — Category tile grid (.rp-category-grid)
   ============================================================================ */
.rp-category-section {
  padding: 64px 30px;
  max-width: var(--rp-frame-max);
  margin: 0 auto;
  box-sizing: border-box;
  width: 100%;
}

.rp-section-heading {
  font-family: var(--rp-font);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.20;
  letter-spacing: -0.5px;
  color: var(--rp-text);
  margin: 0 0 32px 0;
}

.rp-category-grid {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.rp-category-tile {
  flex: 1 1 calc(25% - 18px);
  min-width: 240px;
  background: var(--rp-surface);
  border: 1px solid var(--rp-hairline);
  border-radius: 4px;
  padding: 32px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 120ms ease;
  text-decoration: none;
}

.rp-category-tile:hover {
  border-color: var(--rp-accent);
}

.rp-category-tile-title {
  font-family: var(--rp-font);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.30;
  letter-spacing: -0.25px;
  color: var(--rp-text);
  margin: 0;
}

.rp-category-tile-body {
  font-family: var(--rp-font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--rp-text-secondary);
  margin: 0;
  flex: 1;
}

.rp-category-tile-link {
  font-family: var(--rp-font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--rp-accent);
  text-decoration: none;
  letter-spacing: 0;
  margin-top: auto;
}

.rp-category-tile-link:hover {
  color: var(--rp-accent-active);
}

/* Tile image — sits before any padding, edge-to-edge of the card.
   Portrait 4:5 aspect preserved via object-fit cover.
   Radius 0–4px per DESIGN.md square-frame rule; 4px at top to match card
   border-radius, 0 at bottom (content abuts image). */
.rp-category-tile .rp-tile-image {
  margin: 0 !important;
  line-height: 0;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
}

.rp-category-tile .rp-tile-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center top;
  border-radius: 0;
}

/* Tile now uses no-padding on the card itself; inner content gets its own
   32px padding. The card's existing padding:32px is overridden here. */
.rp-category-tile:has(.rp-tile-image) {
  padding: 0;
}

.rp-tile-content {
  padding: 24px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.rp-tile-content-noimage {
  padding: 32px;
  position: relative;
}

.rp-tile-content-noimage::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 4/5;
  margin: -32px -32px 16px;
  width: calc(100% + 64px);
  border-radius: 4px 4px 0 0;
  background:
    radial-gradient(at 30% 20%, rgba(200, 184, 138, 0.18), transparent 55%),
    radial-gradient(at 70% 80%, rgba(200, 184, 138, 0.10), transparent 50%),
    linear-gradient(135deg, rgba(26, 33, 41, 0.4), rgba(26, 33, 41, 0.85));
  background-color: var(--rp-surface-deep);
}

@media (max-width: 767px) {
  .rp-category-grid {
    flex-direction: column;
  }
  .rp-category-tile {
    flex: 1 1 100%;
    min-width: 0;
  }
  .rp-category-section {
    padding: 48px 20px;
  }
}

/* ============================================================================
   Homepage — Latest from the journal (post grid section heading)
   ============================================================================ */
.rp-journal-section {
  padding: 64px 30px;
  max-width: var(--rp-frame-max);
  margin: 0 auto;
  box-sizing: border-box;
  width: 100%;
}

.rp-journal-section .rp-section-heading {
  margin-bottom: 32px;
}

/* Post tiles inside the query loop — featured image butts to top edge */
.rp-post-grid .wp-block-post {
  background: var(--rp-surface);
  border: 1px solid var(--rp-hairline);
  border-radius: 4px;
  overflow: hidden;
  padding: 0;
  transition: border-color 120ms ease;
}

.rp-post-grid .wp-block-post:hover {
  border-color: var(--rp-accent);
}

.rp-post-grid .wp-block-post-featured-image {
  margin: 0;
}

.rp-post-grid .wp-block-post-featured-image img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.rp-post-grid-meta {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rp-post-grid .wp-block-post-title {
  font-family: var(--rp-font);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--rp-text);
  margin: 0;
}

.rp-post-grid .wp-block-post-title a {
  color: var(--rp-text);
  text-decoration: none;
}

.rp-post-grid .wp-block-post-title a:hover {
  color: var(--rp-accent);
}

.rp-post-grid .wp-block-post-date {
  font-family: var(--rp-font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--rp-text-muted);
}

/* No-results state */
.rp-query-no-results {
  font-family: var(--rp-font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--rp-text-secondary);
}

.rp-query-no-results a {
  color: var(--rp-accent);
}

@media (max-width: 767px) {
  .rp-journal-section {
    padding: 48px 20px;
  }
}

/* ============================================================================
   Homepage — Voice & register strip (.rp-voice-strip)
   ============================================================================ */
.rp-voice-strip {
  padding: 32px 30px;
  text-align: center;
  border-top: 1px solid var(--rp-hairline);
  border-bottom: 1px solid var(--rp-hairline);
  background: var(--rp-canvas);
}

.rp-voice-strip-text {
  font-family: var(--rp-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--rp-text-muted);
  margin: 0;
}

/* ============================================================================
   Homepage — Connect callout (.rp-connect)
   ============================================================================ */
.rp-connect {
  padding: 64px 30px 96px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  background: var(--rp-canvas);
}

.rp-connect-heading {
  font-family: var(--rp-font);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.20;
  letter-spacing: -0.5px;
  color: var(--rp-text);
  margin: 0;
}

.rp-connect-body {
  font-family: var(--rp-font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--rp-text-secondary);
  max-width: 60ch;
  margin: 0;
}

.rp-connect-cta {
  display: inline-block;
  background: transparent;
  color: var(--rp-text);
  border: 1px solid var(--rp-hairline-strong);
  font-family: var(--rp-font);
  font-size: 15px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 9999px;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.rp-connect-cta:hover {
  background: rgba(200, 184, 138, 0.08);
  border-color: var(--rp-accent);
  color: var(--rp-accent);
}

@media (max-width: 767px) {
  .rp-connect {
    padding: 48px 20px 64px;
  }
}

/* ============================================================================
   Homepage — Seasonal edition sections (.rp-edition-note / .rp-featured /
   (Renamed from .rp-dispatch in v1.6.26 — the section reads as the editor's
   note from this seasonal edition, not a press dispatch.)
                                          .rp-photo-essay / .rp-nav-strip /
                                          .rp-recent-grid)
   Edition 01 — Spring 2026 · Heimat in the KMC.
   See memory: project_rpbush_homepage_ia_seasonal_long_scroll
   ============================================================================ */

/* Shared edition label — small-caps mono kicker used by all section headers */
.rp-edition-note-label,
.rp-featured-label,
.rp-photo-essay-label,
.rp-nav-strip-label,
.rp-recent-label {
  display: block;
  font-family: var(--rp-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--rp-accent);
  margin-bottom: 16px;
}

/* ---------- Edition note (one-line note from this edition) --------------- */
.rp-edition-note {
  max-width: var(--rp-frame-max);
  margin: 0 auto;
  padding: 64px 30px 32px;
  box-sizing: border-box;
  width: 100%;
}

.rp-edition-note-body {
  font-family: var(--rp-font-serif, Georgia, "Times New Roman", serif);
  font-size: 22px;
  line-height: 1.55;
  font-style: italic;
  color: var(--rp-text);
  margin: 0 0 16px 0;
  max-width: 64ch;
}

.rp-edition-note-signature {
  display: block;
  font-family: var(--rp-font-mono);
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--rp-text-muted);
}

@media (max-width: 767px) {
  .rp-edition-note {
    padding: 48px 20px 24px;
  }
  .rp-edition-note-body {
    font-size: 19px;
  }
}

/* ---------- Featured this edition (single large card) -------------------- */
.rp-featured {
  max-width: var(--rp-frame-max);
  margin: 0 auto;
  padding: 32px 30px 64px;
  box-sizing: border-box;
  width: 100%;
}

.rp-featured-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  background: var(--rp-surface);
  border: 0;
  box-shadow: 0 0 0 1px rgba(200, 184, 138, 0.5); /* v1.6.17: 50%-opacity sandstone outline via box-shadow; painted outside box, no layout shift */
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow 160ms ease, transform 160ms ease;
  isolation: isolate; /* v1.6.8: contain stacking context so image children stay below .rp-compact-bar */
}

.rp-featured-card:hover {
  box-shadow: 0 0 0 1px rgba(200, 184, 138, 0.85), 0 4px 16px rgba(0, 0, 0, 0.3);
}

.rp-featured-image {
  position: relative;
  overflow: hidden;
  background: var(--rp-surface-deep);
  aspect-ratio: 3 / 2;
  box-shadow: inset 0 0 0 1px rgba(200, 184, 138, 0.15); /* v1.6.17: subtle inset photo-edge line */
  isolation: isolate; /* v1.6.8: inner positioning context for image scaling, kept local */
}

.rp-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 320ms ease;
}

.rp-featured-card:hover .rp-featured-image img {
  transform: scale(1.02);
}

.rp-featured-body {
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}

.rp-featured-kicker {
  font-family: var(--rp-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--rp-text-muted);
}

.rp-featured-title {
  font-family: var(--rp-font);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.20;
  letter-spacing: -0.5px;
  color: var(--rp-text);
  margin: 0;
}

.rp-featured-dek {
  font-family: var(--rp-font);
  font-size: 16px;
  line-height: 1.60;
  color: var(--rp-text-secondary);
  margin: 0;
  max-width: 48ch;
}

.rp-featured-cta {
  font-family: var(--rp-font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--rp-accent);
  margin-top: 8px;
}

@media (max-width: 900px) {
  .rp-featured-card {
    grid-template-columns: 1fr;
  }
  .rp-featured-body {
    padding: 32px 24px;
  }
  .rp-featured-title {
    font-size: 26px;
  }
}

@media (max-width: 767px) {
  .rp-featured {
    padding: 24px 20px 48px;
  }
}

/* ---------- Photo essay (3-image strip + caption) ------------------------ */
.rp-photo-essay {
  max-width: var(--rp-frame-max);
  margin: 0 auto;
  padding: 64px 30px;
  box-sizing: border-box;
  width: 100%;
}

.rp-photo-essay-header {
  margin-bottom: 32px;
}

.rp-photo-essay-title {
  font-family: var(--rp-font);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.20;
  letter-spacing: -0.5px;
  color: var(--rp-text);
  margin: 0;
}

.rp-photo-essay-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.rp-photo-essay-frame {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--rp-surface-deep);
  border-radius: 2px;
}

.rp-photo-essay-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* v1.5.67 — caption + credit footer aligns to the 3-col image grid
   (2fr caption under cols 1+2, 1fr credit under col 3). Symmetric on
   desktop; stacks on mobile. Closes the "orphan column" under col 3. */
.rp-photo-essay-footer {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  align-items: start;
}

.rp-photo-essay-caption {
  font-family: var(--rp-font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--rp-text-secondary);
  margin: 0;
  max-width: 64ch;
}

.rp-photo-essay-credit {
  font-family: var(--rp-font);
  padding-left: 4px;
}

.rp-photo-essay-credit-label {
  display: block;
  font-family: var(--rp-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--rp-accent);
  margin-bottom: 8px;
}

.rp-photo-essay-credit-name {
  display: block;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  font-style: italic;
  color: var(--rp-text);
  margin-bottom: 10px;
}

.rp-photo-essay-credit-meta {
  display: block;
  font-family: var(--rp-font-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.3px;
  color: var(--rp-text-secondary);
}

@media (max-width: 767px) {
  .rp-photo-essay {
    padding: 48px 20px;
  }
  .rp-photo-essay-strip {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .rp-photo-essay-frame {
    aspect-ratio: 3 / 2;
  }
  .rp-photo-essay-footer {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .rp-photo-essay-credit { padding-left: 0; }
}

/* ---------- Quiet category nav strip ------------------------------------- */
.rp-nav-strip {
  max-width: var(--rp-frame-max);
  margin: 0 auto;
  padding: 48px 30px;
  box-sizing: border-box;
  width: 100%;
  border-top: 1px solid var(--rp-hairline);
  border-bottom: 1px solid var(--rp-hairline);
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.rp-nav-strip-label {
  font-family: var(--rp-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--rp-text-muted);
  margin-bottom: 0;
}

.rp-nav-strip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.rp-nav-strip-list a {
  font-family: var(--rp-font);
  font-size: 17px;
  font-weight: 500;
  color: var(--rp-text);
  text-decoration: none;
  transition: color 120ms ease;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

.rp-nav-strip-list a:hover {
  color: var(--rp-accent);
  border-bottom-color: var(--rp-accent);
}

@media (max-width: 767px) {
  .rp-nav-strip {
    padding: 32px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .rp-nav-strip-list {
    gap: 16px 20px;
  }
}

/* ---------- Recent (3 post grid, smaller than journal-section) ----------- */
.rp-recent-section {
  max-width: var(--rp-frame-max);
  margin: 64px auto 0;
  padding: 0 30px;
  box-sizing: border-box;
  width: 100%;
}

.rp-recent-grid {
  max-width: var(--rp-frame-max);
  margin: 24px auto 64px;
  padding: 0 30px;
  box-sizing: border-box;
  width: 100%;
}

/* v1.5.67 — recent grid magazine cards.
   Each card is a 4:3 hero image with a bottom-gradient overlay carrying
   the category kicker + post title. Replaces the prior small icon-card
   layout. Also forces the inner post-template ul to span full frame
   width (WP's per-block container hash otherwise left-clusters it). */

/* Span full frame width — override WP's is-layout-constrained on the
   post-template ul that was pinning width to the content-size token. */
.rp-recent-grid .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The <li class="wp-block-post"> is no longer the visual card — the inner
   .rp-recent-card group is. Strip the old chrome. */
.rp-recent-grid .wp-block-post {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  display: block;
  overflow: visible;
}

/* Magazine card — image fills, overlay on bottom edge.
   v1.6.7: isolation:isolate scopes the card's own stacking context so the
   transform-triggered stacking context on :hover cannot bleed above fixed
   elements like .rp-compact-bar. The overlay's z-index:2 is purely local. */
.rp-recent-grid .rp-recent-card {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
  background: var(--rp-surface-deep);
  box-shadow: inset 0 0 0 1px rgba(200, 184, 138, 0.15); /* v1.6.17: subtle inset photo-edge line; card is full-bleed photo, no outer border */
  display: block;
  transition: transform 200ms ease;
  isolation: isolate; /* v1.6.7: contain stacking context; z-index descendants stay local */
}

.rp-recent-grid .rp-recent-card:hover {
  transform: translateY(-2px);
}

/* Featured image absolutely fills the card */
.rp-recent-grid .wp-block-post-featured-image {
  position: absolute;
  inset: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  background: var(--rp-surface-deep);
}

.rp-recent-grid .wp-block-post-featured-image a,
.rp-recent-grid .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Overlay sits on bottom edge with dark gradient fade */
.rp-recent-grid .rp-recent-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 56px 22px 22px;
  background: linear-gradient(
    to top,
    rgba(15, 18, 24, 0.92) 0%,
    rgba(15, 18, 24, 0.70) 40%,
    rgba(15, 18, 24, 0.00) 100%
  );
  z-index: 2;
  pointer-events: none;  /* let clicks pass to the underlying image link */
}
.rp-recent-grid .rp-recent-overlay a {
  pointer-events: auto;  /* but the title link itself stays clickable */
}

.rp-recent-grid .rp-recent-kicker {
  font-family: var(--rp-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 6px 0;
}
.rp-recent-grid .rp-recent-kicker a {
  color: inherit;
  text-decoration: none;
}
.rp-recent-grid .rp-recent-kicker a:hover {
  color: var(--rp-accent);
}

.rp-recent-grid .wp-block-post-title {
  font-family: var(--rp-font);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.25px;
  margin: 0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
.rp-recent-grid .wp-block-post-title a {
  color: #ffffff;
  text-decoration: none;
}
.rp-recent-grid .wp-block-post-title a:hover {
  color: var(--rp-accent);
}

@media (max-width: 767px) {
  .rp-recent-section {
    margin: 48px auto 0;
    padding: 0 20px;
  }
  .rp-recent-grid {
    margin: 16px auto 48px;
    padding: 0 20px;
  }
  .rp-recent-grid .wp-block-post-template {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .rp-recent-grid .rp-recent-card {
    aspect-ratio: 16 / 10;
  }
  .rp-recent-grid .wp-block-post-title {
    font-size: 22px;
  }
}

/* ============================================================================
   Homepage + Category — Mobile full-bleed images, 16px text gutter (v1.6.46)

   REPLACES the stacking-padding approach from v1.6.43 which incorrectly added
   16px on top of the section's existing 20–30px horizontal padding, putting
   text and images at x≈46 instead of the intended x=16/x=0.

   Root cause: WP core's is-layout-constrained rule applies
   padding: var(--wp--style--root--padding-left) (= 30px) to every
   .alignfull.has-global-padding section so content starts at x=30.
   Adding more padding on top of that stacks further right.

   Fix: zero the WP-applied horizontal padding on the alignfull section
   wrappers for home + category on mobile. Content inside then starts at x=0.
   Images (which fill 100% of their container) bleed edge-to-edge naturally.
   Text wrappers get an explicit 16px left/right to match the compact bar brand.

   The hero sits inside an alignfull wrapper too — its full-bleed behavior is
   already handled by the v1.6.45 block above; we just override its caption
   padding to 16px here to align headline/kicker/subhead with the brand.

   Scope: body.home + body.category at ≤767px only.
   Does NOT touch: single-post, pages, or the day-trip-guide inbody
   image/float/caption system (scoped to body.single-post elsewhere).
   ============================================================================ */
@media (max-width: 767px) {

  /* Step 1: Zero the WP-core re-padding on alignfull section wrappers so
     images inside them can fill the full viewport width (0→375px).

     WP core applies padding-left/right = root-spacing to alignfull sections
     in two ways:
     a) .has-global-padding.is-layout-constrained: padding via
        var(--wp--style--root--padding-left) (= 30px on this theme).
     b) .is-layout-flow alignfull sections: WP also injects the root padding.
     c) .rp-category-hero-section: has an explicit rule at line ~3758
        that sets padding: 30px !important (20px !important at ≤480px).
     We override all three cases for home + category on mobile. */
  body.home .wp-block-group.alignfull.has-global-padding,
  body.home .wp-block-group.alignfull.is-layout-flow,
  body.category .wp-block-group.alignfull.has-global-padding,
  body.category .wp-block-group.alignfull.is-layout-flow {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Category hero section has its own !important rule at ≤480px → override */
  body.category .wp-site-blocks .rp-category-hero-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Step 2: Re-apply 16px horizontal padding to TEXT wrappers only, so
     every text block left-edge lands at x=16, matching the compact bar
     brand left edge (.rp-compact-bar-inner: padding 0 16px at ≤767px). */

  /* Edition note text */
  body.home .rp-edition-note-label,
  body.home .rp-edition-note-body,
  body.home .rp-edition-note-signature,
  body.category .rp-edition-note-label,
  body.category .rp-edition-note-body,
  body.category .rp-edition-note-signature {
    padding-left: 16px;
    padding-right: 16px;
  }
  /* Edition note section itself still needs its own outer padding zeroed
     (it carries 48px 0 24px via the mobile rule above, but horizontal
     was already zeroed by the section-wrapper rule; just zero again to
     be explicit and avoid cascade surprises from specificity). */
  body.home .rp-edition-note,
  body.category .rp-edition-note {
    padding-left: 0;
    padding-right: 0;
  }

  /* Featured card: section wrapper 0px (image fills), body text 16px */
  body.home .rp-featured,
  body.category .rp-featured {
    padding-left: 0;
    padding-right: 0;
  }
  body.home .rp-featured-label,
  body.home .rp-featured-body,
  body.category .rp-featured-label,
  body.category .rp-featured-body {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Photo essay: section 0px (images bleed), header + footer text 16px */
  body.home .rp-photo-essay,
  body.category .rp-photo-essay {
    padding-left: 0;
    padding-right: 0;
  }
  body.home .rp-photo-essay-label,
  body.home .rp-photo-essay-header,
  body.home .rp-photo-essay-footer,
  body.category .rp-photo-essay-label,
  body.category .rp-photo-essay-header,
  body.category .rp-photo-essay-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Voice strip (text-only): 16px */
  body.home .rp-voice-strip,
  body.category .rp-voice-strip {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Connect callout (text-only): 16px */
  body.home .rp-connect,
  body.category .rp-connect {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Nav strip (text-only): 16px */
  body.home .rp-nav-strip,
  body.category .rp-nav-strip {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Category section: outer 0px (tile cards touch edges), heading 16px */
  body.home .rp-category-section,
  body.category .rp-category-section {
    padding-left: 0;
    padding-right: 0;
  }
  body.home .rp-category-section .rp-section-heading,
  body.category .rp-category-section .rp-section-heading {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Recent section label 16px; section + grid wrapper 0px so image cards bleed */
  body.home .rp-recent-section,
  body.category .rp-recent-section {
    padding-left: 0;
    padding-right: 0;
  }
  body.home .rp-recent-label,
  body.category .rp-recent-label {
    padding-left: 16px;
    padding-right: 16px;
  }
  body.home .rp-recent-grid,
  body.category .rp-recent-grid {
    padding-left: 0;
    padding-right: 0;
  }

  /* Recent card overlay: tighten left/right padding from 22px → 16px so the
     kicker/title text aligns with the compact bar brand at x=16.
     Top padding (56px gradient fade) is unchanged. */
  body.home .rp-recent-grid .rp-recent-overlay,
  body.category .rp-recent-grid .rp-recent-overlay {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Hero caption 16px (was 20px) — headline/kicker/subhead align with
     the compact bar brand left edge at x=16. */
  body.home .rp-hero-caption,
  body.category .rp-hero-caption {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Category archive cards: zero the wp-block-query's is-layout-constrained
     re-padding so images bleed edge-to-edge; add 16px to text inside each card.
     The query block uses WP's has-global-padding on a div (not a section), so
     it isn't caught by the wp-block-group rule above. */
  body.category .rp-archive-query.has-global-padding,
  body.category .rp-archive-query.is-layout-constrained {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* WP core applies padding-left AND a 1px border to li.wp-block-post inside
     the query loop (is-layout-grid layout). Zero both so the card div fills
     x=0→375 with no 1px inset. */
  body.category .rp-archive-query .wp-block-post-template .wp-block-post {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  /* Archive card images fill the card already (width:100%); card text gets 16px */
  body.category .rp-archive-card-eyebrow,
  body.category .rp-archive-card .wp-block-post-terms,
  body.category .rp-archive-card .wp-block-post-title,
  body.category .rp-archive-card-title,
  body.category .rp-archive-card-excerpt,
  body.category .rp-archive-card .wp-block-post-excerpt,
  body.category .rp-archive-card-date,
  body.category .rp-archive-card .wp-block-post-date {
    padding-left: 16px;
    padding-right: 16px;
  }
  /* Remove the rounded corners on archive card images when full-bleed:
     an image that spans 0→375 should butt cleanly against the screen edges. */
  body.category .rp-archive-card .wp-block-post-featured-image,
  body.category .rp-archive-card-image {
    border-radius: 0;
  }
  body.category .rp-archive-card .wp-block-post-featured-image img,
  body.category .rp-archive-card-image img {
    border-radius: 0;
  }
}

/* ============================================================================
   3-column footer (.rp-footer — legacy layout, superseded by v1.6.0 4-col)
   CSS kept as dead code; the .rp-footer-grid selector is overridden to
   display:none in the v1.6.0 block at the bottom of this file. The PHP
   block now renders .rp-mag-footer instead.
   ============================================================================ */
.rp-footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-bottom: 32px;
}

.rp-footer-col-heading {
  font-family: var(--rp-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--rp-text-muted);
  margin: 0 0 16px 0;
}

.rp-footer-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rp-footer-link-list a {
  font-family: var(--rp-font);
  font-size: 14px;
  font-weight: 500;
  color: var(--rp-text-secondary);
  text-decoration: none;
  transition: color 120ms ease;
}

.rp-footer-link-list a:hover {
  color: var(--rp-accent);
}

.rp-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid var(--rp-hairline-strong);
}

.rp-footer-bottom a {
  color: var(--rp-text-secondary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 120ms ease, border-bottom-color 120ms ease;
}
.rp-footer-bottom a:hover {
  color: var(--rp-accent);
  border-bottom-color: var(--rp-accent);
}

/* Tablet: 2-col (col 3 wraps) */
@media (min-width: 768px) and (max-width: 1023px) {
  .rp-footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

/* Mobile: 1-col, 32px gap */
@media (max-width: 767px) {
  .rp-footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .rp-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ============================================================================
   Anchor offset — sticky header compensation.
   v1.6.0: header is taller (three bands = ~160px). --rp-header-height updated.
   This rule applies to every H2/H3 that the ToC auto-generates an id on, as
   well as manually authored anchor targets.
   ============================================================================ */
/* (rule deduplication: the scroll-margin-top rule lives in the v1.6.0 block
   at the end of this file — kept here as a comment anchor) */

/* ============================================================================
   Auto Table of Contents — .rp-toc
   Disclosure (<details>/<summary>) design: collapsed by default, full list on
   click. Styled to match the Warm German Dark direction: surface-level card,
   sandstone accent on the toggle and item hover, mono labels, hairline border.

   Design decisions:
   - No gutter / sidebar: rpbush has no multi-column single-post template;
     gutter ToC would require major template surgery. Inline disclosure is
     equally useful and retroactively works on every existing post.
   - Collapsed by default: bureaucratic posts can be 2 000+ words; opening the
     ToC by default would push the lede text out of the initial viewport.
     sessionStorage (functions.php) remembers the open state within the session.
   - border-left accent line on each item — magazine convention, echoes the
     .rp-hero-kicker vertical rule. Active/hover shifts line to accent color.
   - Max-width 640px so the ToC doesn't awkwardly span the full content column
     on wide screens; it reads as a contained widget.
   ============================================================================ */
.rp-toc {
  background: var(--rp-surface);
  border: 1px solid var(--rp-hairline-strong);
  border-left: 3px solid var(--rp-accent);
  border-radius: 4px;
  margin: 28px 0 36px 0;
  max-width: 640px;
  /* Prevent the details element from inheriting body font-size changes */
  font-family: var(--rp-font);
  font-size: 15px;
}

/* Toggle bar ---------------------------------------------------------------- */
.rp-toc-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  cursor: pointer;
  list-style: none; /* Remove default disclosure triangle in some browsers */
  user-select: none;
  gap: 8px;
}

/* Remove native <summary> marker across browsers */
.rp-toc-toggle::-webkit-details-marker { display: none; }
.rp-toc-toggle::marker { display: none; }

.rp-toc-label {
  font-family: var(--rp-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--rp-accent);
}

.rp-toc-count {
  font-family: var(--rp-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--rp-text-muted);
  margin-right: auto;
  padding-left: 10px;
}

/* Chevron indicator — CSS-only, rotates 90° when open */
.rp-toc-toggle::after {
  content: '›';
  font-size: 18px;
  line-height: 1;
  color: var(--rp-text-muted);
  transition: transform 160ms ease, color 160ms ease;
  display: inline-block;
  transform: rotate(0deg);
}

.rp-toc[open] > .rp-toc-toggle::after {
  transform: rotate(90deg);
  color: var(--rp-accent);
}

/* Nav container ------------------------------------------------------------ */
.rp-toc-nav {
  padding: 0 20px 16px 20px;
  border-top: 1px solid var(--rp-hairline);
}

/* Top-level list ----------------------------------------------------------- */
.rp-toc-list {
  list-style: none;
  margin: 12px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  counter-reset: rp-toc-counter;
}

/* Each item — border-left treatment, accent on hover ----------------------- */
.rp-toc-item {
  position: relative;
}

.rp-toc-item a {
  display: block;
  padding: 6px 10px 6px 14px;
  color: var(--rp-text-secondary);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
  border-left: 2px solid var(--rp-hairline-strong);
  transition: color 100ms ease, border-left-color 100ms ease, background 100ms ease;
  border-radius: 0 2px 2px 0;
}

.rp-toc-item a:hover {
  color: var(--rp-accent);
  border-left-color: var(--rp-accent);
  background: rgba(200, 184, 138, 0.06);
  text-decoration: none;
}

/* H3 sub-items — indented, slightly smaller -------------------------------- */
.rp-toc-sublist {
  list-style: none;
  margin: 2px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rp-toc-h3 a {
  padding-left: 28px;
  font-size: 13px;
  font-weight: 400;
  color: var(--rp-text-muted);
  border-left-color: var(--rp-hairline);
}

.rp-toc-h3 a:hover {
  color: var(--rp-accent);
  border-left-color: var(--rp-accent);
}

/* Mobile: full width, slightly tighter padding ----------------------------- */
@media (max-width: 767px) {
  .rp-toc {
    max-width: 100%;
    margin: 20px 0 28px 0;
  }
  .rp-toc-toggle {
    padding: 12px 16px;
  }
  .rp-toc-nav {
    padding: 0 16px 14px 16px;
  }
  .rp-toc-item a {
    font-size: 14px;
    padding: 7px 10px 7px 14px;
  }
}

/* ============================================================================
   v1.6.32 — Sticky-sidebar TOC at desktop (≥1760px)
   ----------------------------------------------------------------------------
   Borrowed pattern from mathehilfe-online.de v6.45 (`.mc-sticky-toc`).

   Layout math (matches mathehilfe because both sites share --rp-frame-max:
   1200px on the article wrapper):
   - Article column constrained to 1200px, centered.
   - At viewport 1760+, free margin per side = (1760-1200)/2 = 280px.
   - A 250px-wide TOC at left:-280px sits in the left gutter without
     overlapping the prose column.

   At smaller viewports the wrapper is inert (display: contents) so the
   inline disclosure card defined above renders unchanged. No JS, pure CSS.

   The auto-injected `<aside class="rp-sticky-toc">` (functions.php) is the
   absolute-positioned outer frame. Inside it the `<details class="rp-toc">`
   becomes `position: sticky; top: 100px` so it travels with the reader as
   they scroll the body.
   ============================================================================ */

/* Default: wrapper has no layout effect; the inline .rp-toc card is what
   the reader sees. Matches the pre-1.6.32 behavior exactly. */
.rp-sticky-toc {
  display: contents;
}

@media (min-width: 1760px) {
  /* The article container needs a positioning context so the absolute-
     positioned .rp-sticky-toc anchors to it (and not to <body>). */
  .single-post .entry-content.rp-single-content,
  .single-post .wp-block-post-content.rp-single-content {
    position: relative;
  }

  /* Hoist the wrapper into the left gutter. height:100% so the sticky child
     has a tall scroll container — the TOC tracks the article all the way
     down to the Sources H2 then releases. */
  .single-post .rp-sticky-toc {
    display: block;
    position: absolute;
    left: -280px;
    top: 0;
    width: 250px;
    height: 100%;
    margin: 0;
    pointer-events: auto;
  }

  /* Inside the gutter, drop the card framing — the TOC reads as a quiet
     index, not a callout. Sticky so it follows the scroll. */
  .single-post .rp-sticky-toc > .rp-toc {
    position: sticky;
    top: 100px;
    margin: 0;
    max-width: 100%;
    background: transparent;
    border: none;
    border-left: none;
    padding: 0;
  }

  /* At sidebar width the disclosure affordance is unnecessary — there is
     always room to show the list. Hide the toggle regardless of [open]
     state, and force-show the nav. */
  .single-post .rp-sticky-toc > .rp-toc > .rp-toc-toggle {
    display: none;
  }
  .single-post .rp-sticky-toc > .rp-toc:not([open]) > .rp-toc-nav,
  .single-post .rp-sticky-toc > .rp-toc[open] > .rp-toc-nav {
    display: block;
    padding: 0;
    border-top: none;
  }

  /* A small lead-in label so the gutter sidebar reads as a TOC, not an
     orphaned list. */
  .single-post .rp-sticky-toc > .rp-toc::before {
    content: "Contents";
    display: block;
    font-family: var(--rp-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--rp-accent);
    margin-bottom: 12px;
  }

  /* Item rows: slightly tighter in the gutter context. */
  .single-post .rp-sticky-toc .rp-toc-list {
    gap: 6px;
  }
  .single-post .rp-sticky-toc .rp-toc-item a {
    font-size: 13px;
    line-height: 1.4;
    padding: 4px 8px 4px 12px;
  }
}

/* ============================================================================
   Mobile-collapsible disclosure (wp:html details with data-collapse-mobile)
   Used by long verbatim regulation blockquotes (BMF / TrZollV / IRS pubs)
   to render expanded on desktop and collapsed on mobile.
   The `open` attribute is set in markup so desktop shows everything by default;
   this rule overrides the open behavior on mobile via CSS-only display:none.
   ============================================================================ */
@media (max-width: 767px) {
  details[data-collapse-mobile="true"][open] > :not(summary) {
    display: none;
  }
  details[data-collapse-mobile="true"] > summary {
    cursor: pointer;
  }
  details[data-collapse-mobile="true"][open] > summary::after {
    content: " (tap to expand)";
    font-size: 0.875em;
    color: var(--rp-text-secondary, #6b7280);
    font-weight: normal;
  }
}

/* ============================================================================
   Category-hero — rendered above the term description on category archives
   ============================================================================
   Wired by `rpbush_render_category_hero` in functions.php which prepends a
   <figure class="rp-category-hero"> to the term description when the term
   has `rpbush_category_hero` meta set to a valid attachment ID.

   Layout: full-width-bleed within the constrained content column, hero
   aspect, no caption (description follows in normal flow).
*/
.rp-category-hero {
  margin: 0 0 2rem 0;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  background: #1a2129;
}

.rp-category-hero__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 767px) {
  .rp-category-hero {
    margin-bottom: 1.25rem;
    border-radius: 4px;
  }
  .rp-category-hero__img {
    aspect-ratio: 16 / 10;
  }
}

/* ============================================================================
   Single post — split-hero layout (v1.5.14)

   Replaces the parent edublock-pro single.html (which used a 33/66 sidebar
   pattern with no hero treatment, producing a narrow content column and a
   double-title rendering when the block-writer emitted a wp:cover with an H2
   inside post_content). Pattern ported from mathehilfe-online.de single.html,
   brand-adapted for the warm German dark palette.

   Three bands stacked, all alignfull:
     .rp-single-hero       — surface-deep band, columns: text 58% | image 42%
     .rp-single-body-band  — canvas band, 68ch reading column, 1100px wide
     .rp-single-related    — surface band, 3-up post grid
   ============================================================================ */
.rp-single-hero {
  /* Bottom hairline for visual separation from body band, matches header. */
  border-bottom: 1px solid var(--rp-hairline);
}

.rp-single-hero-grid {
  margin: 0 auto;
  max-width: 1200px;
  gap: clamp(24px, 4vw, 56px);
}

.rp-single-hero-text .rp-single-eyebrow,
.rp-single-hero-text .rp-single-eyebrow a {
  color: var(--rp-accent);
  text-decoration: none;
}

.rp-single-hero-text .rp-single-eyebrow a:hover {
  color: var(--rp-accent-active);
}

.rp-single-title {
  /* Tight letter-spacing on the larger display size for editorial weight. */
  letter-spacing: -0.01em;
  /* Fluid font-size: 32px on narrow viewports → 56px (display preset) at
     ≥ 1280px. The clamp keeps short titles big and long titles readable
     without a hard breakpoint. Line-height 1.2 reads better than 1.15 at
     the smaller end of the range where the title wraps to more lines. */
  font-size: clamp(32px, 2.5vw + 1.25rem, 56px) !important;
  line-height: 1.2 !important;
}

.rp-single-meta {
  gap: 12px;
  align-items: baseline;
  margin-top: 8px;
}

.rp-single-meta p,
.rp-single-meta .wp-block-post-author-name,
.rp-single-meta .wp-block-post-date {
  margin: 0;
  line-height: 1.4;
}

.rp-single-meta-sep {
  opacity: 0.6;
}

/* Top-byline author link — dotted underline */
.rp-single-author a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(200, 184, 138, 0.5);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.rp-single-author a:hover,
.rp-single-author a:focus {
  color: var(--rp-accent, #c8b88a);
  border-bottom-color: var(--rp-accent, #c8b88a);
}

/* ============================================================================
   About-the-Author card — bottom of body band, trust-signal block
   ============================================================================ */
.rp-author-card {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

.rp-author-card-grid {
  gap: 24px;
  margin: 0;
}

.rp-author-card-avatar {
  flex-grow: 0 !important;
}

.rp-author-card-avatar .wp-block-avatar img,
.rp-author-card-avatar .wp-block-avatar .avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: block;
  border: 2px solid rgba(200, 184, 138, 0.4);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.rp-author-card-name a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.rp-author-card-name a:hover,
.rp-author-card-name a:focus {
  color: var(--rp-accent, #c8b88a);
  border-bottom-color: var(--rp-accent, #c8b88a);
}

.rp-author-card-bio {
  max-width: 60ch;
}

/* Mobile: stack vertically, avatar above text */
@media (max-width: 600px) {
  .rp-author-card {
    padding: 24px !important;
  }
  .rp-author-card-grid {
    flex-direction: column;
    gap: 16px;
  }
  .rp-author-card-avatar {
    flex-basis: auto !important;
  }
  .rp-author-card-avatar .wp-block-avatar img,
  .rp-author-card-avatar .wp-block-avatar .avatar {
    width: 80px;
    height: 80px;
  }
}

.rp-single-thumbnail img,
.rp-single-thumbnail .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* Mobile: stack columns; image below title. */
@media (max-width: 767px) {
  .rp-single-hero-grid {
    gap: 24px;
  }
  .rp-single-hero-text,
  .rp-single-hero-image {
    flex-basis: 100% !important;
    width: 100%;
  }
  .rp-single-thumbnail img {
    aspect-ratio: 16 / 10;
  }
}

/* ============================================================================
   Single post — body band typography

   The post content lives inside .rp-single-body-band. The contentSize is 68ch
   (~640px @ 17px), which is a comfortable reading width. wideSize is 1100px
   for alignwide images, tables, and figures that legitimately want to break
   out wider than the reading column.
   ============================================================================ */
.rp-single-body-band {
  color: var(--rp-text);
}

.rp-single-content {
  /* Inherit from theme.json layout config; explicit max-width as a fallback. */
  margin-left: auto;
  margin-right: auto;
  counter-reset: h2-section;   /* v1.5.52 — restarts H2 numbering at 01 per post */
}

/* ============================================================================
   Issue 2 fix — suppress duplicate hero cover in post body.
   The blog pipeline (block-writer) emits a wp:cover.alignwide as the first
   block in post_content using the same image already shown in the hero band.
   This rule hides that specific pattern: an alignwide wp-block-cover that is
   the FIRST direct child of the post content area.
   Scope is deliberately tight:
     - Only the FIRST child (":first-child" + adjacent sibling check)
     - Only ".alignwide" — intentional in-body section breaks use no-align or
       "aligncenter", so they are NOT suppressed.
   If a future post intentionally starts with a full-width cover as a design
   choice (not a duplicate), remove the alignwide class from that block in
   post_content to opt out of this suppression. */
.rp-single-content > .wp-block-cover.alignwide:first-child {
  display: none;
}
   /* ========================================================================== */

/* Reading-rhythm overrides — the parent theme's spacing is too tight for
   a long-form reading column. Pull paragraphs apart, give H2 sections a
   clear breathing margin above.
   v1.6.0: body 20px / 1.6 / 65ch cap (840px px value). */
.rp-single-content p {
  margin: 0 0 1.1em 0;
  line-height: 1.6;
  font-size: 20px;
  max-width: 65ch;
}

/* Page content prose: same 20px / 65ch */
.rp-page-content p {
  font-size: 20px;
  line-height: 1.6;
  max-width: 65ch;
}

.rp-single-content > .wp-block-heading,
.rp-single-content .wp-block-heading {
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--rp-text);
}

.rp-single-content h2.wp-block-heading {
  margin-top: 3.6em;
  margin-bottom: 0.6em;
  line-height: 1.25;
  /* v1.5.52 — style-23 H2: sandstone-tinted block with 3px left accent bar
     and an auto-numbered mono prefix in sandstone. Picked from page 529
     H2 Style Picker. */
  background: rgba(200, 184, 138, 0.10);
  padding: 0.55em 0.85em;
  border-left: 3px solid var(--rp-accent);
  /* Long German compound nouns (Zulassungsbescheinigung,
     Truppenzollverordnung, Anhängerführerschein) must be allowed to break
     mid-word at mobile widths or they overflow the viewport. */
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.rp-single-content h2.wp-block-heading::before {
  counter-increment: h2-section;
  content: counter(h2-section, decimal-leading-zero) "  ";
  font-family: var(--rp-font-mono);
  font-weight: 400;
  color: var(--rp-accent);
  font-size: 0.6em;
  letter-spacing: 0.05em;
  vertical-align: 0.25em;
}

.rp-single-content h3.wp-block-heading {
  margin-top: 1.8em;
  margin-bottom: 0.5em;
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.rp-single-content h2.wp-block-heading:first-child,
.rp-single-content h3.wp-block-heading:first-child {
  margin-top: 0;
}

/* Lists: more vertical breathing room, sandstone bullets. */
.rp-single-content ul,
.rp-single-content ol {
  margin: 0 0 1.4em 0;
  padding-left: 1.6em;
}

.rp-single-content ul li,
.rp-single-content ol li {
  margin-bottom: 0.5em;
  line-height: 1.65;
}

.rp-single-content ul li::marker {
  color: var(--rp-accent);
}

.rp-single-content ol li::marker {
  color: var(--rp-accent);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Links inside body content. */
.rp-single-content a {
  color: var(--rp-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(200, 184, 138, 0.4);
  transition: color 120ms, text-decoration-color 120ms;
}

.rp-single-content a:hover {
  color: var(--rp-accent-active);
  text-decoration-color: var(--rp-accent-active);
}

/* Inline code and pre. */
.rp-single-content code {
  font-family: var(--rp-font-mono);
  font-size: 0.92em;
  background: rgba(200, 184, 138, 0.10);
  color: var(--rp-text);
  padding: 0.12em 0.38em;
  border-radius: 4px;
  border: 1px solid rgba(200, 184, 138, 0.18);
}

.rp-single-content pre {
  background: var(--rp-surface-deep);
  border: 1px solid var(--rp-hairline);
  border-radius: 6px;
  padding: 16px 20px;
  overflow-x: auto;
  margin: 1.4em 0;
}

.rp-single-content pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--rp-text);
  font-size: 14px;
  line-height: 1.55;
}

/* Blockquotes — sparingly used now (Stage 2.5 rewriter caps to ≤1 per H2).
   When present, treat them as evidentiary inserts: thin sandstone left rule,
   slightly recessed surface, mono cite. */
.rp-single-content blockquote.wp-block-quote {
  margin: 1.6em 0;
  padding: 16px 20px 16px 22px;
  border-left: 3px solid var(--rp-accent);
  background: rgba(38, 46, 56, 0.5);
  border-radius: 0 6px 6px 0;
  font-style: normal;
}

.rp-single-content blockquote.wp-block-quote p {
  margin: 0 0 0.6em 0;
  line-height: 1.6;
  color: var(--rp-text);
}

.rp-single-content blockquote.wp-block-quote p:last-child {
  margin-bottom: 0;
}

.rp-single-content blockquote.wp-block-quote cite {
  display: block;
  margin-top: 8px;
  font-family: var(--rp-font-mono);
  font-size: 13px;
  font-style: normal;
  color: var(--rp-text-muted);
  letter-spacing: 0.02em;
}

/* Pull-quote — kept for occasional editorial emphasis. */
.rp-single-content .wp-block-pullquote {
  margin: 2em -10px;
  padding: 28px 24px;
  border-top: 2px solid var(--rp-accent);
  border-bottom: 2px solid var(--rp-accent);
  background: transparent;
  text-align: center;
}

.rp-single-content .wp-block-pullquote blockquote {
  margin: 0 auto;             /* v1.6.33: center the inner blockquote inside */
  max-width: 38ch;            /*          the 1200px column so each wrapped */
  padding: 0;                 /*          line is visibly shorter than the */
  border: none;               /*          containing box (readable centered- */
  background: none;           /*          text effect). 38ch is editorially */
  font-style: italic;         /*          tight for italic pull-quotes. */
  font-size: 22px;
  line-height: 1.45;
  color: var(--rp-text);
  text-align: center;
}

.rp-single-content .wp-block-pullquote cite {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-size: 13px;
}

/* Tables — clean dark theme treatment. */
.rp-single-content figure.wp-block-table,
.rp-single-content .wp-block-table {
  margin: 1.6em 0;
  overflow-x: auto;
}

.rp-single-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
  background: var(--rp-surface);
  border: 1px solid var(--rp-hairline);
  border-radius: 6px;
  overflow: hidden;
}

.rp-single-content table th,
.rp-single-content table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--rp-hairline);
  line-height: 1.5;
  vertical-align: top;
}

.rp-single-content table thead th {
  background: var(--rp-surface-deep);
  color: var(--rp-text);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rp-hairline-strong);
}

.rp-single-content table tbody tr:last-child td {
  border-bottom: none;
}

.rp-single-content figure.wp-block-table figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--rp-text-muted);
  font-style: italic;
}

/* Images — rounded, breakout sizing. */
.rp-single-content figure.wp-block-image img,
.rp-single-content .wp-block-image img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.rp-single-content figure.wp-block-image,
.rp-single-content .wp-block-image {
  margin: 1.8em 0;
}

.rp-single-content figure.wp-block-image figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--rp-text-muted);
  font-style: italic;
  text-align: center;
}

/* Inline-styled callout groups (existing pattern: cream bg, sandstone left
   border) keep their inline colors; add minor adjustments only. */
.rp-single-content .wp-block-group[style*="#f5efe2"],
.rp-single-content .wp-block-group[style*="#fff3cd"] {
  border-radius: 6px;
  margin: 1.6em 0;
}

/* Tags strip below content. */
.rp-single-tags {
  margin-top: 3em;
  padding-top: 1.5em;
  border-top: 1px solid var(--rp-hairline);
  gap: 8px;
  font-size: 14px;
}

.rp-single-tags .wp-block-post-terms a {
  color: var(--rp-text-muted);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--rp-hairline);
  border-radius: 999px;
  margin-right: 6px;
  font-size: 13px;
  transition: color 120ms, border-color 120ms;
}

.rp-single-tags .wp-block-post-terms a:hover {
  color: var(--rp-accent);
  border-color: var(--rp-accent);
}

/* ============================================================================
   Related-posts band — mirrors archive grid card pattern.
   ============================================================================ */
.rp-single-related {
  /* Surface bg gives a subtle vertical step from canvas body. */
}

.rp-related-heading {
  letter-spacing: -0.005em;
}

.rp-related-grid {
  gap: 32px;
}

.rp-related-card {
  display: flex;
  flex-direction: column;
  background: transparent;
}

.rp-related-card .wp-block-post-featured-image,
.rp-related-card .rp-related-card-image {
  margin-bottom: 0;
  border-radius: 8px;
  overflow: hidden;
}

.rp-related-card .wp-block-post-featured-image img,
.rp-related-card .rp-related-card-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 240ms ease;
}

.rp-related-card:hover .wp-block-post-featured-image img,
.rp-related-card:hover .rp-related-card-image img {
  transform: scale(1.02);
}

.rp-related-card .wp-block-post-title a,
.rp-related-card-title a {
  color: var(--rp-text);
  text-decoration: none;
}

.rp-related-card:hover .wp-block-post-title a,
.rp-related-card:hover .rp-related-card-title a {
  color: var(--rp-accent);
}

.rp-related-card-eyebrow,
.rp-related-card-eyebrow a {
  color: var(--rp-accent);
  text-decoration: none;
}

@media (max-width: 767px) {
  .rp-related-grid {
    grid-template-columns: 1fr !important;
    gap: 28px;
  }
}

/* ============================================================================
   Archive (category / tag / date) and search and index — shared card pattern
   ============================================================================ */
.rp-archive-header,
.rp-search-header,
.rp-index-header {
  border-bottom: 1px solid var(--rp-hairline);
}

.rp-archive-title,
.rp-search-title {
  letter-spacing: -0.01em;
}

.rp-archive-description,
.rp-archive-description p {
  color: var(--rp-text-secondary);
  font-size: 17px;
  line-height: 1.65;
  max-width: 70ch;
}

.rp-archive-grid,
.rp-search-grid,
.rp-index-body .wp-block-query .wp-block-post-template {
  gap: 36px;
}

.rp-archive-card {
  display: flex;
  flex-direction: column;
  background: transparent;
}

.rp-archive-card .wp-block-post-featured-image,
.rp-archive-card-image {
  margin-bottom: 0;
  border-radius: 8px;
  overflow: hidden;
}

.rp-archive-card .wp-block-post-featured-image img,
.rp-archive-card-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 240ms ease;
}

.rp-archive-card:hover .wp-block-post-featured-image img,
.rp-archive-card:hover .rp-archive-card-image img {
  transform: scale(1.02);
}

.rp-archive-card .wp-block-post-title a,
.rp-archive-card-title a {
  color: var(--rp-text);
  text-decoration: none;
}

.rp-archive-card:hover .wp-block-post-title a,
.rp-archive-card:hover .rp-archive-card-title a {
  color: var(--rp-accent);
}

.rp-archive-card-excerpt,
.rp-archive-card-excerpt p {
  color: var(--rp-text-secondary);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 0.6em 0;
}

.rp-archive-card-eyebrow,
.rp-archive-card-eyebrow a {
  color: var(--rp-accent);
  text-decoration: none;
}

.rp-archive-card-date {
  color: var(--rp-text-muted);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}

/* Pagination row. */
.rp-archive-pagination,
.rp-search-body .wp-block-query-pagination,
.rp-index-body .wp-block-query-pagination {
  gap: 8px;
  margin-top: 48px;
  font-family: var(--rp-font-mono);
  font-size: 14px;
}

.rp-archive-pagination a,
.rp-archive-pagination .wp-block-query-pagination-numbers .page-numbers,
.rp-search-body .wp-block-query-pagination a,
.rp-search-body .wp-block-query-pagination .page-numbers,
.rp-index-body .wp-block-query-pagination a,
.rp-index-body .wp-block-query-pagination .page-numbers {
  color: var(--rp-text-secondary);
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--rp-hairline);
  border-radius: 4px;
  transition: color 120ms, border-color 120ms, background 120ms;
}

.rp-archive-pagination a:hover,
.rp-search-body .wp-block-query-pagination a:hover,
.rp-index-body .wp-block-query-pagination a:hover {
  color: var(--rp-accent);
  border-color: var(--rp-accent);
}

.rp-archive-pagination .page-numbers.current,
.rp-search-body .wp-block-query-pagination .page-numbers.current,
.rp-index-body .wp-block-query-pagination .page-numbers.current {
  color: var(--rp-canvas);
  background: var(--rp-accent);
  border-color: var(--rp-accent);
  font-weight: 600;
}

@media (max-width: 767px) {
  .rp-archive-grid,
  .rp-search-grid,
  .rp-index-body .wp-block-query .wp-block-post-template {
    grid-template-columns: 1fr !important;
    gap: 28px;
  }
}

/* ============================================================================
   404 — minimal not-found
   ============================================================================ */
.rp-not-found {
  text-align: center;
}

.rp-not-found .wp-block-search {
  max-width: 480px;
  margin: 0 auto;
}

/* Dark-mode search input across all search surfaces (search-header band,
   404 page, and any other rp-* container with a search block). The block
   library defaults to light input chrome, which reads as a foreign element
   on the dark canvas. */
.rp-search-header .wp-block-search__input,
.rp-search-form .wp-block-search__input,
.rp-not-found .wp-block-search__input,
.rp-not-found-search .wp-block-search__input {
  background: var(--rp-surface);
  border: 1px solid var(--rp-hairline);
  color: var(--rp-text);
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 16px;
}

.rp-search-header .wp-block-search__input::placeholder,
.rp-search-form .wp-block-search__input::placeholder,
.rp-not-found .wp-block-search__input::placeholder,
.rp-not-found-search .wp-block-search__input::placeholder {
  color: var(--rp-text-muted);
}

.rp-search-header .wp-block-search__input:focus,
.rp-search-form .wp-block-search__input:focus,
.rp-not-found .wp-block-search__input:focus,
.rp-not-found-search .wp-block-search__input:focus {
  border-color: var(--rp-accent);
  outline: 2px solid rgba(200, 184, 138, 0.3);
  outline-offset: 0;
}

.rp-search-header .wp-block-search__button,
.rp-search-form .wp-block-search__button,
.rp-not-found .wp-block-search__button,
.rp-not-found-search .wp-block-search__button {
  background: var(--rp-accent);
  color: var(--rp-canvas);
  border: none;
  border-radius: 4px;
  font-weight: 600;
}

.rp-search-header .wp-block-search__button:hover,
.rp-search-form .wp-block-search__button:hover,
.rp-not-found .wp-block-search__button:hover,
.rp-not-found-search .wp-block-search__button:hover {
  background: var(--rp-accent-active);
}

/* The button-inside variant wraps input + button in a flex container; the
   wrapper itself needs the same dark surface so a thin light strip doesn't
   show between the input and the rounded form border. */
.rp-search-header .wp-block-search__inside-wrapper,
.rp-search-form .wp-block-search__inside-wrapper,
.rp-not-found .wp-block-search__inside-wrapper,
.rp-not-found-search .wp-block-search__inside-wrapper {
  background: var(--rp-surface);
  border-radius: 6px;
}

/* ============================================================================
   Page (static) — minimal title band + content
   ============================================================================ */
.rp-page-header {
  border-bottom: 1px solid var(--rp-hairline);
}

.rp-page-title {
  letter-spacing: -0.01em;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

.rp-page-content {
  /* Inherit body-band rules; same paragraph rhythm as single posts. */
}

.rp-page-content > p {
  margin: 0 0 1.1em 0;
}

.rp-page-content h2.wp-block-heading {
  margin-top: 2em;
  margin-bottom: 0.5em;
  font-weight: 600;
}

.rp-page-content h3.wp-block-heading {
  margin-top: 1.6em;
  margin-bottom: 0.4em;
  font-weight: 600;
}

.rp-page-content a {
  color: var(--rp-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(200, 184, 138, 0.4);
}

.rp-page-content a:hover {
  color: var(--rp-accent-active);
  text-decoration-color: var(--rp-accent-active);
}

/* ============================================================================
   v1.5.15 — alignment fix.

   Body band content now uses contentSize:"1200px" (was 68ch) so the band's
   inner-content frame aligns left+right with header / footer at 1200px on
   desktop, and uses the parent theme's outer padding on tablet/mobile. Within
   that 1200px frame, prose elements (p, ul, ol, h2, h3, callout groups,
   blockquote) cap at ~72ch so reading line-length stays comfortable. Wide
   blocks (alignwide, alignfull, tables, images, the Sources list) break out
   to the full 1200px frame.

   This is the rule the site's theme guidance now codifies (see
   memory: feedback_rpbush_alignment_1200_frame.md): header, body, and
   footer left+right edges align at 1200px on desktop; on tablet/mobile they
   share the same horizontal padding via the parent theme's outer rule.
   Inline horizontal padding on alignfull bands is prohibited because it
   double-pads relative to the header.
   ============================================================================ */

/* Prose elements: cap reading column width and center within the 1200px frame.
   Block selectors are listed explicitly so we don't accidentally constrain
   alignwide / alignfull / table / image figure / the Sources list, all of which
   legitimately fill the frame.

   IMPORTANT: must use px, not ch, for the max-width value.
   The `ch` unit is relative to the advance width of the "0" glyph of the
   *current element's* font. Paragraphs use 17px/400-weight Inter; headings use
   28px/600-weight Inter. The same "72ch" declaration resolves to ~792px on a <p>
   but ~1109-1152px on an <h2> — making headings nearly full-width while body
   text sits at ~800px. This is exactly the "disconnected" feeling Ryan reported:
   text column at 800px, headings at ~1150px, wide images at 1200px.

   Using 1000px for all prose ensures headings and body text agree on the same
   reading column (~95 effective chars at 17px body, high-end comfortable width),
   while alignwide images "break out" cleanly to the full 1200px frame.
   At 1920px viewport the prose sits with ~100px gutter each side between text
   edge and the 1200px image edge; alignwide images have ~360px gutter each side.

   WP's constrained-layout system generates `.wp-container-*` rules that set
   max-width:1200px on all non-aligned children. Our explicit `!important` with
   higher specificity overrides those for prose. The margin auto pair centers the
   1000px column within the 1200px band (100px gutter each side at desktop). */
.wp-block-post-content.rp-single-content > p,
.wp-block-post-content.rp-single-content > ul:not(.rp-sources-list):not(.alignwide):not(.alignfull),
.wp-block-post-content.rp-single-content > ol:not(.rp-sources-list):not(.alignwide):not(.alignfull),
.wp-block-post-content.rp-single-content > h3.wp-block-heading:not(.alignwide):not(.alignfull),
.wp-block-post-content.rp-single-content > h4.wp-block-heading:not(.alignwide):not(.alignfull),
.wp-block-post-content.rp-single-content > .wp-block-group:not(.alignwide):not(.alignfull),
.wp-block-post-content.rp-single-content > blockquote.wp-block-quote:not(.alignwide):not(.alignfull) {
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* v1.5.53 — H2 section labels widen to alignwide (1200px) so they frame
   their section images flush left+right. H2 is pulled out of the 1000px
   prose rule above and given the full-frame treatment: max-width 1200px,
   flush margins (same as alignwide images). The sandstone-block visual
   treatment from v1.5.52 (background, border-left, padding, ::before
   counter) is unchanged — only the width is affected.
   On mobile (<768px) let it collapse to single-column like everything else. */
.wp-block-post-content.rp-single-content > h2.wp-block-heading:not(.alignwide):not(.alignfull) {
  max-width: 1200px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (max-width: 767px) {
  .wp-block-post-content.rp-single-content > h2.wp-block-heading:not(.alignwide):not(.alignfull) {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Wide blocks fill the 1200px frame, also flush-left. */
.rp-single-content > .alignwide,
.rp-single-content > figure.wp-block-table,
.rp-single-content > figure.wp-block-image,
.rp-single-content > figure.wp-block-image.alignwide,
.rp-single-content > .wp-block-pullquote,
.rp-single-content > ol.rp-sources-list {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Outer padding on alignfull bands — matches the header / footer outer
   padding so left+right edges align at every viewport.

   The math: an alignfull block uses negative-margin breakout that pulls the
   block 30px past the wp-site-blocks padding edge (i.e., to the viewport
   edge). To bring the inner content back to the same column as the header
   (which sits inside wp-site-blocks's padding), we need to add the same
   padding the parent uses PLUS the breakout offset (30px). The result is
   inner content that aligns with the header at every viewport.

   At desktop ≥ 1200px, the layout's max-width:1200px on inner content
   auto-centers within the (now padded) band, which still anchors at the
   header column.

   The 30px breakout constant comes from the parent edublock-pro theme's
   alignfull rule. If the parent theme is upgraded and that constant
   changes, this calc needs to be revisited. */
.wp-site-blocks .rp-single-hero,
.wp-site-blocks .rp-single-body-band,
.wp-site-blocks .rp-single-related,
.wp-site-blocks .rp-archive-header,
.wp-site-blocks .rp-archive-body,
.wp-site-blocks .rp-category-hero-section,
.wp-site-blocks .rp-search-header,
.wp-site-blocks .rp-search-body,
.wp-site-blocks .rp-page-header,
.wp-site-blocks .rp-page-body-band,
.wp-site-blocks .rp-index-header,
.wp-site-blocks .rp-index-body,
.wp-site-blocks .rp-not-found {
  /* These bands sit inside main.site-content which is itself alignfull and
     has already consumed the .wp-site-blocks negative-margin breakout.
     Selector is prefixed with .wp-site-blocks to match parent theme's
     .wp-site-blocks .alignfull rule specificity 0,2,0 — child stylesheet
     loads later so it wins on equal-specificity cascade order. */
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
}

@media (max-width: 480px) {
  .wp-site-blocks .rp-single-hero,
  .wp-site-blocks .rp-single-body-band,
  .wp-site-blocks .rp-single-related,
  .wp-site-blocks .rp-archive-header,
  .wp-site-blocks .rp-archive-body,
  .wp-site-blocks .rp-category-hero-section,
  .wp-site-blocks .rp-search-header,
  .wp-site-blocks .rp-search-body,
  .wp-site-blocks .rp-page-header,
  .wp-site-blocks .rp-page-body-band,
  .wp-site-blocks .rp-index-header,
  .wp-site-blocks .rp-index-body,
  .wp-site-blocks .rp-not-found {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* The Sources list (footnote references) is a structural element, not a
   reading paragraph — let it span the full 1200px frame so the URLs don't
   wrap awkwardly. */
.rp-sources-list,
ol.rp-sources-list,
.rp-single-content ol.rp-sources-list {
  max-width: 100%;
  font-size: 14.5px;
  line-height: 1.6;
  padding-left: 1.4em;
}

.rp-sources-list li,
ol.rp-sources-list li {
  margin-bottom: 0.55em;
  color: var(--rp-text-secondary);
}

.rp-sources-list li a,
ol.rp-sources-list li a {
  color: var(--rp-accent);
  word-break: break-word;
}

.rp-sources-list li::marker,
ol.rp-sources-list li::marker {
  color: var(--rp-accent);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Footnote ref superscripts in body — make them clearly clickable. */
.rp-single-content sup a[href^="#fn-"] {
  color: var(--rp-accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.78em;
  padding: 0 2px;
}

.rp-single-content sup a[href^="#fn-"]:hover {
  color: var(--rp-accent-active);
  text-decoration: underline;
}

/* Blockquote contrast — bump to a clearly elevated surface so the load-
   bearing quote stands out from canvas. The previous half-opacity surface
   was too subtle; this is the version that stays readable on lower-contrast
   monitors. Border thicker, type slightly larger, italic OFF (legal text
   shouldn't be italic). */
.rp-single-content blockquote.wp-block-quote {
  margin: 1.8em 0;
  padding: 20px 24px 20px 26px;
  border-left: 4px solid var(--rp-accent);
  background: var(--rp-surface);
  border-radius: 0 8px 8px 0;
  font-style: normal;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.rp-single-content blockquote.wp-block-quote p {
  margin: 0 0 0.7em 0;
  line-height: 1.65;
  font-size: 18px;
  font-weight: 400;
  color: var(--rp-text);
}

.rp-single-content blockquote.wp-block-quote p:last-child {
  margin-bottom: 0;
}

.rp-single-content blockquote.wp-block-quote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--rp-font-mono);
  font-size: 13px;
  font-style: normal;
  color: var(--rp-text-secondary);
  letter-spacing: 0.02em;
}

/* "As of <Month YYYY>:" callout groups inside body. Drafters emit these with
   inline mathehilfe-legacy cream backgrounds (#fff3cd / #f5efe2). For the
   rpbush dark theme we override the inline background to a sandstone-tinted
   elevated surface and add a sandstone left rule, so the callout signal
   reads on dark canvas without flipping text color. Constrained to 72ch
   so the band aligns with the prose column above and below. */
.rp-single-content > .wp-block-group.has-background:not(.alignwide):not(.alignfull),
.rp-single-content > .wp-block-group[style*="#fff3cd"],
.rp-single-content > .wp-block-group[style*="#f5efe2"],
.rp-single-content > .wp-block-group.rp-disclaimer {
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
  padding: 16px 20px;
  border-radius: 0 6px 6px 0;
  border-left: 3px solid var(--rp-accent);
  background-color: rgba(200, 184, 138, 0.10) !important;
  color: var(--rp-text);
}

.rp-single-content > .wp-block-group[style*="#fff3cd"] p,
.rp-single-content > .wp-block-group[style*="#f5efe2"] p,
.rp-single-content > .wp-block-group.rp-disclaimer p,
.rp-single-content > .wp-block-group.has-background:not(.alignwide):not(.alignfull) p {
  color: var(--rp-text);
}

/* Mild informational note — teal palette from --rp-teal design token.
   Wins over the sandstone override above because both properties are declared
   !important and this rule is defined later in the cascade (equal specificity,
   last-wins). */
.rp-single-content > .wp-block-group.rp-note {
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
  padding: 16px 20px;
  border-radius: 0 6px 6px 0;
  border-left: 3px solid var(--rp-teal) !important;
  background-color: rgba(107, 155, 158, 0.12) !important;
  color: var(--rp-text);
}

.rp-single-content > .wp-block-group.rp-note p {
  color: var(--rp-text);
}

/* Strong warning — amber palette from --rp-amber design token. */
.rp-single-content > .wp-block-group.rp-warning {
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
  padding: 16px 20px;
  border-radius: 0 6px 6px 0;
  border-left: 3px solid var(--rp-amber) !important;
  background-color: rgba(212, 165, 116, 0.12) !important;
  color: var(--rp-text);
}

.rp-single-content > .wp-block-group.rp-warning p {
  color: var(--rp-text);
}

/* Misconception/correction comparison block — used in the "Common
   misconceptions" section. Side-by-side error vs correct, on canvas. */
.rp-misconception-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 1.4em 0;
  max-width: 100%;
  list-style: none;
  padding-left: 0;
}

.rp-misconception-list li.rp-misconception-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--rp-surface);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--rp-hairline);
}

.rp-misconception-list .rp-misconception-wrong,
.rp-misconception-list .rp-misconception-right {
  padding: 18px 22px;
  font-size: 15.5px;
  line-height: 1.55;
}

.rp-misconception-list .rp-misconception-wrong {
  background: rgba(196, 120, 99, 0.10);
  border-right: 1px solid var(--rp-hairline);
  color: var(--rp-text-secondary);
}

.rp-misconception-list .rp-misconception-wrong::before {
  content: "Commonly said:";
  display: block;
  font-family: var(--rp-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rp-danger, #c47863);
  margin-bottom: 6px;
}

.rp-misconception-list .rp-misconception-right {
  background: rgba(125, 167, 116, 0.10);
  color: var(--rp-text);
}

.rp-misconception-list .rp-misconception-right::before {
  content: "Actually:";
  display: block;
  font-family: var(--rp-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rp-success, #7da774);
  margin-bottom: 6px;
}

@media (max-width: 767px) {
  .rp-misconception-list li.rp-misconception-item {
    grid-template-columns: 1fr;
  }
  .rp-misconception-list .rp-misconception-wrong {
    border-right: none;
    border-bottom: 1px solid var(--rp-hairline);
  }
}

/* ============================================================================
   Misconceptions accordion — JS-enhanced state (details/summary).

   After rp-misconceptions.js runs, the <ul>/<li> structure is replaced with
   a <div.rp-misconception-list> containing <details.rp-misconception-details>
   elements. These rules style the accordion state.

   The original <ul><li> rules above remain intact as the no-JS fallback —
   if JS is blocked the side-by-side grid renders all items fully expanded.

   Also supports content authored directly as <details> (future pipeline
   output) via the "details.rp-misconception-details" selectors.
   ============================================================================ */

/* Container: switch from list to stack when JS-enhanced */
div.rp-misconception-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 1.4em 0;
  max-width: 100%;
  list-style: none;
  padding-left: 0;
}

/* Each accordion item */
.rp-misconception-details {
  background: var(--rp-surface);
  border: 1px solid var(--rp-hairline);
  border-radius: 8px;
  overflow: hidden;
  /* No transition on the details element itself; we animate the body below */
}

/* Summary = the myth/wrong-belief row — always visible */
.rp-misconception-details > summary.rp-misconception-wrong {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none; /* Firefox */
  -webkit-appearance: none; /* Safari */
  user-select: none;
  background: rgba(196, 120, 99, 0.10);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--rp-text-secondary);
  border-bottom: none; /* collapsed: no bottom border — open state adds one */
  transition: background 120ms ease;
  /* Prevent the ::before label from the original no-JS rule from doubling */
}

/* Remove the ::marker default disclosure triangle across browsers */
.rp-misconception-details > summary.rp-misconception-wrong::-webkit-details-marker {
  display: none;
}
.rp-misconception-details > summary.rp-misconception-wrong::marker {
  content: '';
}

/* Toggle chevron indicator via the injected .rp-misconception-toggle span */
.rp-misconception-details > summary.rp-misconception-wrong .rp-misconception-toggle {
  flex-shrink: 0;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-top: 2px; /* optical alignment with first text line */
  border: 1px solid rgba(196, 120, 99, 0.4);
  border-radius: 4px;
  text-align: center;
  line-height: 16px;
  font-size: 11px;
  color: var(--rp-danger, #c47863);
  transition: transform 150ms ease, background 120ms ease;
}
.rp-misconception-details > summary.rp-misconception-wrong .rp-misconception-toggle::before {
  content: "▸";
}

/* Open state: rotate chevron, show border-bottom separator */
.rp-misconception-details[open] > summary.rp-misconception-wrong {
  border-bottom: 1px solid var(--rp-hairline);
  background: rgba(196, 120, 99, 0.14);
}
.rp-misconception-details[open] > summary.rp-misconception-wrong .rp-misconception-toggle {
  transform: rotate(90deg);
  background: rgba(196, 120, 99, 0.12);
}

/* Hover state on summary */
.rp-misconception-details > summary.rp-misconception-wrong:hover {
  background: rgba(196, 120, 99, 0.16);
}

/* Focus ring for keyboard navigation */
.rp-misconception-details > summary.rp-misconception-wrong:focus-visible {
  outline: 2px solid var(--rp-accent);
  outline-offset: -2px;
  border-radius: 0;
}

/* "Commonly said:" label — re-inject it in the JS-enhanced summary via ::before
   only when the toggle span is present (i.e. JS ran). We scope this tightly. */
.rp-misconception-details > summary.rp-misconception-wrong .rp-misconception-toggle ~ *:first-of-type::before,
.rp-misconception-details > summary.rp-misconception-wrong > :not(.rp-misconception-toggle):first-child::before {
  /* intentionally empty — the original .rp-misconception-wrong::before rule
     in the no-JS block fires correctly; we don't need to duplicate it here.
     But we do need to prevent it firing INSIDE the summary since the toggle
     span precedes the text, which changes the first-child calculation.
     Override via display:none on the summary's ::before. */
}

/* Correct: suppress the ::before "Commonly said:" from the no-JS rule
   when inside a <summary> (the label is implied by the accordion pattern). */
.rp-misconception-details > summary.rp-misconception-wrong::before {
  display: none;
}

/* Correction body — hidden when collapsed, visible when [open] */
.rp-misconception-details > .rp-misconception-right {
  padding: 18px 20px;
  font-size: 15.5px;
  line-height: 1.55;
  background: rgba(125, 167, 116, 0.10);
  color: var(--rp-text);
  /* Smooth reveal via max-height transition. The max-height value is generous
     (1000px) to handle long corrections; the animation still looks smooth
     because we also transition opacity. */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 250ms ease, opacity 200ms ease, padding 200ms ease;
  padding-top: 0;
  padding-bottom: 0;
}

.rp-misconception-details[open] > .rp-misconception-right {
  max-height: 1000px;
  opacity: 1;
  padding-top: 18px;
  padding-bottom: 18px;
}

/* "Actually:" label inside correction body */
.rp-misconception-details > .rp-misconception-right::before {
  content: "Actually:";
  display: block;
  font-family: var(--rp-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rp-success, #7da774);
  margin-bottom: 6px;
}

/* Mobile */
@media (max-width: 767px) {
  .rp-misconception-details > summary.rp-misconception-wrong {
    padding: 14px 16px;
  }
  .rp-misconception-details > .rp-misconception-right {
    padding-left: 16px;
    padding-right: 16px;
  }
  .rp-misconception-details[open] > .rp-misconception-right {
    padding: 14px 16px;
  }
}

/* Pricing comparison table — used in the tax-comparison section. Three
   columns: item / commissary (USD + EUR conversion) / Globus (EUR). Keeps
   the existing wp:table styling but sized for richer content. */
.rp-single-content figure.wp-block-table.rp-price-compare table {
  font-size: 14.5px;
}

.rp-single-content figure.wp-block-table.rp-price-compare th,
.rp-single-content figure.wp-block-table.rp-price-compare td {
  padding: 10px 12px;
}

.rp-single-content figure.wp-block-table.rp-price-compare td.rp-price-num {
  font-family: var(--rp-font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ============================================================================
   Day-trip-guide register — series-nav strip
   Block-writer emits <nav class="rp-series-nav"> as the first element of
   post_content for any post with _blog_pipeline_series_slug post-meta.
   ============================================================================ */

.rp-series-nav {
  margin: 0 0 2rem 0;
  padding: 1rem 1.25rem;
  background: rgba(200, 184, 138, 0.06);
  border-left: 3px solid var(--rp-accent, #c8b88a);
  border-radius: 4px;
}

.rp-series-nav-kicker {
  margin: 0 0 0.75rem 0;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rp-accent, #c8b88a);
  line-height: 1.2;
}

.rp-series-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.rp-series-nav-item {
  flex: 1 1 auto;
  min-width: 0;
}

.rp-series-nav-item a,
.rp-series-nav-item.is-current,
.rp-series-nav-item.is-coming-soon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1.3;
  transition: background 0.15s ease, color 0.15s ease;
}

.rp-series-nav-item a {
  background: rgba(255, 255, 255, 0.04);
  color: var(--rp-text, #d7dbe0);
  border: 1px solid rgba(200, 184, 138, 0.18);
}

.rp-series-nav-item a:hover,
.rp-series-nav-item a:focus-visible {
  background: rgba(200, 184, 138, 0.12);
  color: #ffffff;
  border-color: rgba(200, 184, 138, 0.4);
}

.rp-series-nav-item.is-current {
  background: var(--rp-accent, #c8b88a);
  color: var(--rp-canvas, #1a2129);
  font-weight: 600;
  border: 1px solid var(--rp-accent, #c8b88a);
}

.rp-series-nav-item.is-coming-soon {
  background: transparent;
  color: rgba(215, 219, 224, 0.45);
  border: 1px dashed rgba(200, 184, 138, 0.25);
  font-style: italic;
}

.rp-series-nav-position {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  opacity: 0.7;
  font-size: 0.8125rem;
}

.rp-series-nav-item.is-current .rp-series-nav-position {
  opacity: 1;
}

.rp-series-nav-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 24ch;
}

@media (max-width: 600px) {
  .rp-series-nav-list {
    flex-direction: column;
    gap: 0.375rem;
  }
  .rp-series-nav-item {
    width: 100%;
  }
  .rp-series-nav-item a,
  .rp-series-nav-item.is-current,
  .rp-series-nav-item.is-coming-soon {
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
  }
  .rp-series-nav-title {
    max-width: none;
    white-space: normal;
  }
}

/* ============================================================================
   Day-trip-guide register — visit-at-a-glance card
   Block-writer wraps the visit table in <div class="wp-block-group rp-visit-card">.
   ============================================================================ */

.rp-visit-card {
  margin: 1.25rem 0 2rem 0;
  padding: 0.875rem 1.125rem;
  background: rgba(200, 184, 138, 0.04);
  border: 0;
  box-shadow: 0 0 0 1px rgba(200, 184, 138, 0.5); /* v1.6.17: 50%-opacity sandstone outline via box-shadow; was 22% border */
  border-radius: 8px;
}

.rp-visit-card .wp-block-table {
  margin: 0;
}

.rp-visit-card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;            /* v1.6.35: 15px → 13px — "at-a-glance" not novel-length */
  line-height: 1.4;                /* tighter than body 1.65 — this is a reference card */
}

.rp-visit-card tbody tr {
  border-bottom: 1px solid rgba(200, 184, 138, 0.1);
}

.rp-visit-card tbody tr:last-child {
  border-bottom: none;
}

.rp-visit-card th,
.rp-visit-card td {
  padding: 0.375rem 0.625rem 0.375rem 0;  /* tightened from 0.5rem 0.75rem */
  text-align: left;
  vertical-align: top;
  border: none;
}

.rp-visit-card th {
  width: 28%;
  color: var(--rp-accent, #c8b88a);
  font-weight: 600;
  font-size: 0.6875rem;            /* v1.6.35: 13px → 11px caps — tighter label */
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;             /* labels shouldn't wrap; they're keys not values */
}

.rp-visit-card td {
  color: var(--rp-text, #e7eaee);
}

/* --- list-shape visit cards (block-writer sometimes emits a <ul> instead of
   a <table>). Apply the same tightening so the at-a-glance feel is consistent
   regardless of which shape the drafter chose. v1.6.35. */
.rp-visit-card .wp-block-list,
.rp-visit-card ul.wp-block-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.rp-visit-card .wp-block-list li {
  padding: 0.375rem 0;
  border-bottom: 1px solid rgba(200, 184, 138, 0.1);
  margin: 0;
}

.rp-visit-card .wp-block-list li:last-child {
  border-bottom: none;
}

.rp-visit-card .wp-block-list li strong:first-child {
  display: inline-block;
  min-width: 8em;
  color: var(--rp-accent, #c8b88a);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-right: 0.5em;
  vertical-align: baseline;
}

@media (max-width: 600px) {
  .rp-visit-card {
    padding: 0.75rem 0.875rem;
  }
  .rp-visit-card th,
  .rp-visit-card td {
    display: block;
    width: 100%;
    padding: 0.125rem 0;
  }
  .rp-visit-card th {
    padding-top: 0.375rem;
    white-space: normal;
  }
  .rp-visit-card tbody tr {
    padding: 0.25rem 0;
  }
  .rp-visit-card .wp-block-list li strong:first-child {
    display: block;
    margin-right: 0;
    margin-bottom: 0.125rem;
  }
}

/* ============================================================================
   Day-trip-guide register — Komoot tour embed (deferred, ships ready)
   Pattern at /opt/homelab-agents/rpbush/specs/embeds/komoot.md
   ============================================================================ */

.rp-komoot-embed {
  margin: 1.5rem 0;
}

.rp-komoot-embed iframe {
  display: block;
  width: 100%;
  border: 1px solid rgba(200, 184, 138, 0.18);
  border-radius: 6px;
}

.rp-komoot-embed figcaption {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: rgba(215, 219, 224, 0.7);
  font-style: italic;
}

.rp-komoot-embed figcaption a {
  color: var(--rp-accent, #c8b88a);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* AI-reference image marker (day-trip-guide pre-visit lifecycle) */
.rp-photo-reference {
  position: relative;
  isolation: isolate; /* v1.6.8: ::after badge z-index stays local */
}

.rp-photo-reference::after {
  content: "AI reference — pending site visit";
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem 0.5rem;
  background: rgba(26, 33, 41, 0.85);
  color: #c8b88a;
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 2px;
  pointer-events: none;
  z-index: 2;
}

/* ============================================================================
   v1.5.39 — Day-trip-guide travel disclaimer card (.rp-travel-disclaimer).

   Block-writer emits:
     <div class="wp-block-group rp-travel-disclaimer">
       <p class="rp-travel-disclaimer-label"><strong>Before you go</strong></p>
       <p class="rp-soft-disclaimer" style="font-style:italic;font-weight:400">…</p>
     </div>

   WP renders wp-block-group with is-layout-constrained which injects max-width
   and margin:auto on every direct child via .wp-container-* rules. This causes
   the label and body paragraph to appear at different horizontal positions inside
   the card (label falls at left edge of the 1000px prose column; body paragraph
   gets re-centered inside the card's narrower width). Override all constrained-
   layout auto-margins on inner elements so both paragraphs share the same left
   edge — flush against the card's left padding.

   Design intent: a left-accent "heads up" note — clearly bounded from the
   gallery above, but lighter and more sidebar-y than the structured
   .rp-visit-card table treatment. Subtle sandstone wash gives it object feel
   without competing with .rp-visit-card's stronger tint. Card is constrained to
   800px so it reads as an aside rather than a full-width content band.
   ============================================================================ */

/* Card shell — constrained aside, sandstone wash + left-accent border. */
.rp-travel-disclaimer {
  max-width: 800px;
  margin-top: 2.5rem;     /* visual break from gallery above */
  margin-bottom: 1.5rem;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem 1.25rem 1rem 1.375rem;
  border-left: 3px solid var(--rp-accent, #c8b88a);
  border-top: 1px solid rgba(200, 184, 138, 0.22);
  border-bottom: 1px solid rgba(200, 184, 138, 0.22);
  border-right: 1px solid rgba(200, 184, 138, 0.08);
  border-radius: 0 3px 3px 0;
  background: rgba(200, 184, 138, 0.045);   /* very subtle sandstone wash */
}

/* Override WP is-layout-constrained auto-centering on every inner element.
   Without this, .wp-container-* sets max-width + margin:auto on each <p>,
   causing the label and body to appear at different left offsets. */
.rp-travel-disclaimer p,
.rp-travel-disclaimer .rp-travel-disclaimer-label,
.rp-travel-disclaimer .rp-soft-disclaimer {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

/* Eyebrow: "ⓘ BEFORE YOU GO" — info character via ::before for visual anchor. */
.rp-travel-disclaimer-label {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin: 0 0 0.5rem 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rp-accent, #c8b88a);
  line-height: 1.3;
  opacity: 0.9;
}

.rp-travel-disclaimer-label::before {
  content: "ⓘ";
  font-size: 0.95rem;        /* slightly larger than the caps text */
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.8;
  flex-shrink: 0;
  line-height: 1;
}

/* Body copy: slightly smaller than prose, muted, italic (set inline by block-writer). */
.rp-travel-disclaimer .rp-soft-disclaimer {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--rp-text-muted, rgba(215, 219, 224, 0.65));
}

@media (max-width: 600px) {
  .rp-travel-disclaimer {
    max-width: none;          /* full width on mobile — card already has l-r padding */
    margin-top: 2rem;
    padding: 0.875rem 1rem 0.875rem 1.125rem;
  }
}

/* ============================================================================
   v1.5.35 — Portrait image height cap (desktop).

   After the v1.5.34 prose-column fix capped content at 780px wide, portrait
   images (taller than wide) render at 780px × up to ~1690px on desktop —
   nearly filling 1.5 viewports. This rule caps rendered height to 75vh on
   desktop. Landscape images already cap at ~780px wide (≤585px tall at 4:3,
   ≤438px at 16:9), so this constraint rarely fires on them.

   Gallery images are explicitly excluded — wp-block-gallery (has-nested-images)
   manages its own multi-column sizing via flexbox/grid and must not be
   constrained by a per-image height cap.

   The featured-image in the hero band (.rp-single-thumbnail img) is NOT
   affected — it lives outside .wp-block-post-content entirely.

   The one-off .rp-portrait-inline escape hatch on post 402 is not removed;
   its inline style="width:480px" takes precedence over width:auto here, and
   a 480px-wide portrait never reaches 75vh in height, so the two rules
   coexist without conflict. The class can be deprecated in a future cleanup.
   ============================================================================ */
@media (min-width: 768px) {
  .wp-block-post-content .wp-block-image:not(.wp-block-gallery .wp-block-image) img {
    max-height: 75vh;
    width: auto;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================================
   v1.5.41 — .rp-visit-gallery justified-rows layout (replaces masonry).

   WP Core Gallery block renders .wp-block-gallery.has-nested-images with
   display:flex by default and equal-height cropping. The v1.5.40 CSS-columns
   masonry approach fixed portrait cropping but produced extreme height variance
   (portraits ~5× taller than landscapes in the same column).

   Justified-rows (Flickr/Google Photos pattern): every row gets a uniform
   target height (~260px via JS), image widths vary by each image's natural
   aspect ratio. JS (rp-justified-gallery.js) performs greedy row-packing and
   sets explicit width/height on each figure and img. CSS here provides:
     - The flex-wrap container the JS populates
     - Fallback flex layout if JS fails (figures flow at natural sizes)
     - Single-column stack on mobile (JS does not run at < 600px)

   Specificity notes:
   - Gutenberg injects inline <style> rules for figure.wp-block-image:
       display:flex; width:calc(50% - gap/2)
     Both are inline stylesheet origin, so !important wins.
   - JS sets fig.style.* (inline style), which is highest specificity; the CSS
     here provides the flex container and per-figure defaults the JS builds on.
   - WP Core lightbox attaches click listeners to the <a>/<img> inside each
     figure; neither JS nor CSS alters the DOM hierarchy, so lightbox targets
     remain intact.
   - The 75vh max-height rule (v1.5.35) already excludes .wp-block-gallery
     .wp-block-image images, so no conflict.
   ============================================================================ */

/* --- Desktop + Tablet: 2-column responsive grid (>= 600px) ----------------
   v1.5.45 — replaces v1.5.41 justified-rows.

   Justified-rows (Flickr/Google Photos) packs mixed-aspect images at uniform
   row height with varying widths per image — magazine-feel grid that works
   beautifully for photo LIBRARIES where you scan many shots without captions.
   For photo ESSAYS with narrative captions it's wrong: portraits squeeze to
   ~120-250px wide, captions wrap to 4-6 unreadable lines underneath.

   2-column responsive is the industry-standard photo-essay layout (NYT Lens,
   The Atlantic In Focus, Substack photo essays). Every image gets the same
   ~50% column width, every caption gets the same readable width. Portraits
   render TALLER than landscapes (proportional to aspect ratio at 50% column
   width) but become prominent rather than squeezed. The rp-justified-gallery
   JS is no longer enqueued (functions.php v1.5.45). The override !important
   flags on figure / img defeat any leftover inline-style residue. */
@media (min-width: 600px) {
  .rp-visit-gallery.wp-block-gallery.has-nested-images {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 16px;              /* row-gap larger than column-gap for caption breathing */
    column-count: auto;          /* kill any masonry leftover */
    align-items: start;          /* short captions don't stretch their figure */
  }

  .rp-visit-gallery.wp-block-gallery figure.wp-block-image {
    display: flex !important;
    flex-direction: column;
    margin: 0 !important;
    width: 100% !important;      /* override any JS-set inline width */
    break-inside: auto;
  }

  /* v1.5.46 — uniform 4:3 aspect crop on all gallery images. Portraits get
     cropped top + bottom (more than 20% in practice — landscape-orientation
     slots can't fit portrait natural aspect without aggressive crop), but
     row heights become uniform across the entire gallery. object-position
     30% from top biases the visible window upward so subject heads stay
     in frame on portraits with a clear subject. */
  .rp-visit-gallery.wp-block-gallery figure.wp-block-image img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    object-position: center 30% !important;
    display: block;
    margin: 0;
  }
}

/* v1.5.47 — visit-gallery captions: caption-overlay pattern (revert from v1.5.44).

   Now that v1.5.46 standardizes every gallery image to a uniform 4:3 crop, the
   bottom-overlay caption pattern works cleanly — captions sit on the bottom
   edge of the cropped landscape-orientation image with a dark gradient fade
   behind for legibility. This is the editorial photo-essay overlay pattern.

   WP Core's default gradient (0deg, rgba(0,0,0,0.4), rgba(0,0,0,0)) is too
   light over photos with varied bottom-edge content (bright skies, dappled
   stone, mannequin uniforms). Strengthen it: deeper opacity floor (0.85), and
   ramp from transparent at the top of the caption area through a soft 40%-mid
   stop down to opaque-ish at the bottom. Re-anchor the text to left-align and
   slightly larger size (0.9em vs WP Core's 13px) for prose-style captions.

   The position:absolute bottom:0 left:0 right:0 + WP Core ::before backdrop
   scrim remain in effect via WP Core defaults — we no longer override them. */
.rp-visit-gallery.wp-block-gallery figure.wp-block-image figcaption {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.45) 45%,
    rgba(0, 0, 0, 0.85) 100%
  ) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85) !important;
  padding: 2.2em 1em 0.9em !important;   /* tall top padding so the gradient ramp is visible */
  text-align: left !important;
  font-size: 0.9em !important;
  line-height: 1.4 !important;
}

/* v1.5.42 — lightbox caption bar (injected by rp-lightbox-captions.js).
   backdrop-filter is banned site-wide (DESIGN.md §227) — solid rgba background
   provides sufficient legibility without creating a fixed-position containing block.
   v1.6.27 — desktop-only (@min 768px). JS bails early on mobile too, but belt-and-
   suspenders: even if JS fires on mobile, CSS hides the injected element. */
@media (min-width: 768px) {
  .wp-lightbox-overlay .rp-lightbox-caption {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    max-width: min(800px, 90vw);
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 15px;
    line-height: 1.5;
    border-radius: 4px;
    text-align: center;
    z-index: 100000010; /* above .wp-lightbox-overlay's scrim + image */
    pointer-events: none;
  }
}

/* --- Mobile: single column stack, full width (< 600px) -------------------- */
@media (max-width: 599px) {
  .rp-visit-gallery.wp-block-gallery.has-nested-images {
    display: flex !important;
    flex-direction: column;
    gap: 1rem;
  }

  .rp-visit-gallery.wp-block-gallery figure.wp-block-image {
    width: 100% !important;
    margin: 0 !important;
  }

  .rp-visit-gallery.wp-block-gallery figure.wp-block-image img {
    width: 100% !important;
    height: auto !important;
  }
}

/* v1.6.27 — Mobile gallery captions: convert from absolute overlay to static block
   under each image at < 768px (standard tablet-down breakpoint).

   Root cause of the scroll-stuck bug: `position: absolute` captions capture touch
   events even when the user intends to scroll — the gradient overlay straddles the
   edge of the image container, creating a touch-event trap. Making captions
   `position: static` moves them into normal flow, restoring scroll continuity.

   The 4:3 aspect crop and object-fit:cover on the image are preserved — only the
   caption treatment changes. Desktop (≥ 768px) keeps the existing overlay treatment
   via the rules at ~line 4290 above which are NOT wrapped in a media query. */
@media (max-width: 767px) {
  .rp-visit-gallery.wp-block-gallery figure.wp-block-image figcaption {
    /* Convert from absolute overlay to normal-flow block under the image */
    position: static !important;
    /* Remove the dark gradient overlay */
    background: none !important;
    /* Remove text shadow (only needed over-image) */
    text-shadow: none !important;
    /* Remove tall top-padding that was for the gradient ramp */
    padding: 0 !important;
    /* Standard top margin to separate caption from image edge */
    margin-top: 6px !important;
    /* Compact italic style consistent with other figcaptions in the theme */
    font-size: 0.85em !important;
    font-style: italic;
    line-height: 1.4 !important;
    text-align: left !important;
    /* Use the same secondary text color as other body captions */
    color: var(--rp-ink-2, var(--rp-text-secondary, #a39e98)) !important;
  }
}

/* ============================================================================
   v1.5.48 — Float-L / Float-R inbody images on day-trip-guide post bodies.
   Targets wp:image blocks that are NOT inside .rp-visit-gallery (those use
   their own grid + overlay-caption pattern). Editorial magazine feel,
   generous margin opposite the float side, paragraph text wraps naturally.
   Mobile <768px collapses every float to full width.

   v1.5.64 — orientation-aware widths via CSS classes set by block-writer:
     .is-landscape-float  -- width >= height: 2/3 of body width (66.67%)
     .is-portrait-float   -- height > width:  1/3 of body width (33.33%)
   Default when neither class is present: landscape (66.67%). Legacy posts
   without classes automatically widen from the old 45% to 67%.

   Pure CSS cannot compare an image's intrinsic width vs. height at render
   time, so orientation detection is class-based. The block-writer reads
   wp_get_attachment_metadata dimensions and adds the appropriate class.

   Scope: .entry-content only -- header logos, archive thumbnails, related-posts
   strips, and comment-author avatars are untouched.
   ============================================================================ */

/* v1.5.49 -- beef up !important on float margins so they actually win against
   WP Core's layout-flex inline styles + parent theme's !important. Cancel the
   alignleft/alignright negative escape margin that WP applies for breaking out
   of the constrained content column -- we WANT floats to stay INSIDE the prose
   column so they visually align with the paragraph text on the un-floated side. */
/* v1.5.50 -- push float-L into the prose column gutter (margin-left was 0 in
   v1.5.49; figure sat at wrapper outer edge while paragraph was 23px inset
   because .has-global-padding applies on the wrapper, and WP's alignleft
   escape pattern overrides it). Use the same root padding variable so floats
   land at the same x as paragraph text on their non-wrapped side. */
/* v1.5.62 -- increased margin-bottom from 1rem to 6.5rem on both float
   directions. Root cause: when a float (image + caption) extends below the
   last wrapping paragraph in a section, the following H2 has clear:both
   applied, which uses the float bottom as the clearance boundary. The H2's
   margin-top is computed from the paragraph bottom (which may be 60-100px
   ABOVE the float bottom), so the H2 lands only marginally below the float
   tip. Previously only 23px gap was observed (Bacharach post, Wernerkapelle
   float) vs. the 101px text-to-H2 baseline.

   The correct margin-bottom must be >= the H2's margin-top (3.6em, ~101px at
   body font size 28px) so that even in the worst case -- paragraph text ends
   far above the float -- the clearance-adjusted H2 still lands at least
   101px below the float edge. 6.5rem (~104px) achieves this.

   Text-ends-section case is unaffected: when the paragraph extends below the
   float, no clearance fires, and the normal H2 margin-top of 101px applies.
   Prose-wraps-around-float case is also unaffected: the extra margin-bottom
   only creates empty space below the float if no text runs past it. */

/* Landscape default: 2/3 body width (66.67%). Applies to all floats WITHOUT
   .is-portrait-float, including legacy posts that have no orientation class.
   v1.6.40 — exclude .rp-byline-portrait so the About-page byline rules
   (220px max-width float) aren't blown up to 66.67%. */
.entry-content figure.wp-block-image.alignleft:not(.rp-visit-gallery figure):not(.rp-photo-reference):not(.rp-byline-portrait),
.rp-single-content figure.wp-block-image.alignleft:not(.rp-visit-gallery figure):not(.rp-photo-reference):not(.rp-byline-portrait) {
  float: left !important;
  width: 66.67% !important;
  max-width: 66.67% !important;
  margin-left: var(--wp--style--root--padding-left, 24px) !important;  /* align with paragraph left edge */
  margin-right: 1.5rem !important;
  margin-top: 0.4rem !important;
  margin-bottom: 6.5rem !important;  /* v1.5.62: was 1rem; see comment above */
}

.entry-content figure.wp-block-image.alignright:not(.rp-visit-gallery figure):not(.rp-photo-reference):not(.rp-byline-portrait),
.rp-single-content figure.wp-block-image.alignright:not(.rp-visit-gallery figure):not(.rp-photo-reference):not(.rp-byline-portrait) {
  float: right !important;
  width: 66.67% !important;
  max-width: 66.67% !important;
  margin-right: var(--wp--style--root--padding-right, 24px) !important;  /* align with paragraph right edge */
  margin-left: 1.5rem !important;
  margin-top: 0.4rem !important;
  margin-bottom: 6.5rem !important;  /* v1.5.62: was 1rem; see comment above */
}

/* Portrait override: 1/3 body width (33.33%). Specificity (0,6,2) beats the
   landscape default at (0,5,2) because .is-portrait-float adds one class. */
.entry-content figure.wp-block-image.alignleft.is-portrait-float:not(.rp-visit-gallery figure):not(.rp-photo-reference):not(.rp-byline-portrait),
.entry-content figure.wp-block-image.alignright.is-portrait-float:not(.rp-visit-gallery figure):not(.rp-photo-reference):not(.rp-byline-portrait),
.rp-single-content figure.wp-block-image.alignleft.is-portrait-float:not(.rp-visit-gallery figure):not(.rp-photo-reference):not(.rp-byline-portrait),
.rp-single-content figure.wp-block-image.alignright.is-portrait-float:not(.rp-visit-gallery figure):not(.rp-photo-reference):not(.rp-byline-portrait) {
  width: 33.33% !important;
  max-width: 33.33% !important;
}

/* Clearfix the H2 / H3 / blockquote / hr that follow a floated image. Without
   this, a short paragraph after a float lets the float bleed into the next
   section. */
.entry-content h2,
.entry-content h3,
.entry-content blockquote,
.entry-content hr,
.entry-content .wp-block-separator {
  clear: both;
}

/* Mobile: floats collapse to full-width. WP Core's default already gives
   alignleft / alignright a center treatment on narrow screens but we want
   true full-width to keep the prose flow predictable.
   v1.5.61 — specificity fix: the desktop float rules carry :not() pseudo-classes
   that give them specificity (0,5,2). A plain `.entry-content figure.wp-block-image.alignleft`
   only reaches (0,3,1), so the !important in the mobile rule lost to the !important
   in the higher-specificity desktop rule. Mirror the :not() exclusions here so this
   rule reaches the same specificity and wins inside the media query.
   v1.5.64 — these base selectors already capture .is-portrait-float and
   .is-landscape-float figures (those classes are not in the :not() chain),
   so both orientation variants collapse to 100% on mobile without additional
   selectors. The portrait override block at (0,6,2) is desktop-only; inside
   this media query the base selectors at (0,5,2) are sufficient because no
   desktop portrait rule competes here. */
@media (max-width: 767px) {
  /* Base selectors at (0,5,2) -- covers landscape floats + legacy floats without orientation class. */
  .entry-content figure.wp-block-image.alignleft:not(.rp-visit-gallery figure):not(.rp-photo-reference):not(.rp-byline-portrait),
  .entry-content figure.wp-block-image.alignright:not(.rp-visit-gallery figure):not(.rp-photo-reference):not(.rp-byline-portrait),
  .rp-single-content figure.wp-block-image.alignleft:not(.rp-visit-gallery figure):not(.rp-photo-reference):not(.rp-byline-portrait),
  .rp-single-content figure.wp-block-image.alignright:not(.rp-visit-gallery figure):not(.rp-photo-reference):not(.rp-byline-portrait),
  /* Portrait selectors at (0,6,2) -- must also appear here to beat the desktop portrait override
     at (0,6,2) that lives outside the media query. Inside a media query, same-specificity rules
     written later in the cascade win. These four selectors mirror the desktop portrait block. */
  .entry-content figure.wp-block-image.alignleft.is-portrait-float:not(.rp-visit-gallery figure):not(.rp-photo-reference):not(.rp-byline-portrait),
  .entry-content figure.wp-block-image.alignright.is-portrait-float:not(.rp-visit-gallery figure):not(.rp-photo-reference):not(.rp-byline-portrait),
  .rp-single-content figure.wp-block-image.alignleft.is-portrait-float:not(.rp-visit-gallery figure):not(.rp-photo-reference):not(.rp-byline-portrait),
  .rp-single-content figure.wp-block-image.alignright.is-portrait-float:not(.rp-visit-gallery figure):not(.rp-photo-reference):not(.rp-byline-portrait) {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 1.5rem 0 !important;
  }
}

/* ============================================================================
   v1.5.48 — Inbody wp:image captions render as italic below the image.
   Scope: figure.wp-block-image figcaption OUTSIDE .rp-visit-gallery. The
   gallery has its own overlay caption pattern (v1.5.47).

   The .rp-photo-reference class (AI-reference image during pre-visit period)
   also gets the italic caption treatment — same shape as a real inbody photo,
   just with the reference-image alt suffix already in the alt text.
   ============================================================================ */

.entry-content figure.wp-block-image:not(.rp-visit-gallery figure) figcaption,
.entry-content figure.wp-block-image:not(.rp-visit-gallery figure) .wp-element-caption,
.rp-single-content figure.wp-block-image:not(.rp-visit-gallery figure) figcaption,
.rp-single-content figure.wp-block-image:not(.rp-visit-gallery figure) .wp-element-caption {
  display: block !important;
  position: static !important;       /* belt + suspenders against WP Core's overlay default */
  background: none !important;
  color: var(--rp-text-secondary, var(--rp-text)) !important;  /* v1.5.50 — text-muted (#615D59) is 3.5:1 vs canvas, fails AA. Use text-secondary for ≥4.5:1. */
  text-shadow: none !important;
  text-align: center !important;
  padding: 0 !important;
  margin: 0.6rem 0 0 0 !important;
  font-size: 0.85em !important;
  font-style: italic !important;
  line-height: 1.45 !important;
  opacity: 1 !important;             /* v1.5.49 — was 0.85; combined with dark color = invisible */
}

/* ============================================================================
   v1.5.54 — cap inbody image natural height at 75% viewport height.
   Prevents portrait-orientation source images from rendering at ~2600px tall
   at alignwide width and dominating the page. Landscape images unaffected.
   .rp-visit-gallery handled separately via its own 4:3 aspect-ratio rule. */
.entry-content figure.wp-block-image:not(.rp-visit-gallery figure) img,
.rp-single-content figure.wp-block-image:not(.rp-visit-gallery figure) img {
  max-height: 75vh !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

/* ============================================================================
   v1.5.55 — column-nested images escape the v1.5.54 75vh cap.
   When a wp:image lives inside a wp:column / wp:columns layout, it's
   intentionally constrained by the column width and meant to fill its slot;
   the viewport cap fights the layout. Restore natural sizing inside columns. */
.entry-content .wp-block-columns figure.wp-block-image img,
.rp-single-content .wp-block-columns figure.wp-block-image img {
  max-height: none !important;
  width: 100% !important;
  height: auto !important;
}

/* ============================================================================
   v1.5.56 — .rp-pastry-grid: 3-card asymmetric CSS Grid (NOT wp:columns).
   Wp:columns can't solve this layout because the LEFT image's natural height
   pushes its column to grow, defeating the "match the right column" goal.
   Native CSS Grid with row sizing solves it: the matcha grid item spans
   both rows on the left; pastries fill the 2 cells on the right. Row heights
   are intrinsic to the pastry cells, so the matcha auto-crops via
   object-fit:cover to fill the combined height.

   Markup is wp:html (not wp:columns) so we control the structure precisely.

   Used first for 365 Rebert pastries (matcha left, Mont-Blanc + raspberry
   tartlet stacked right). */
.rp-pastry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;  /* rows sized by pastry natural aspect */
  gap: 16px;
  margin: 1.6em 0;
}

/* v1.5.59 — matcha (left, spanning 2 rows) absolute-positions its image so it
   contributes ZERO intrinsic height to row sizing. The 2 landscape pastry cells
   on the right size each row to their natural aspect; matcha then fills the
   spanning cell via object-fit:cover (vertical crop on the portrait source).
   v1.5.58 aspect-ratio:16/9 on pastry cells back-pressured the grid columns
   and broke the 1fr 1fr split — abandoned. */
.rp-pastry-grid > .rp-pastry-matcha {
  position: relative;
  overflow: hidden;
  display: block;  /* override v1.5.57 flex-column on matcha */
  isolation: isolate; /* v1.6.8: absolutely-positioned img + figcaption overlay stay local */
}

.rp-pastry-grid > .rp-pastry-matcha > img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 30% !important;
  min-height: 0;
}

.rp-pastry-grid > .rp-pastry-matcha > figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.78) 100%);
  color: #fff;
  padding: 1.8em 0.9em 0.7em;
  font-style: italic;
  font-size: 0.85em;
  line-height: 1.4;
  margin: 0;
  text-align: left;
}

.rp-pastry-grid > .rp-pastry-matcha {
  grid-column: 1;
  grid-row: 1 / 3;  /* span both rows on the left */
  margin: 0;
  display: flex;
  flex-direction: column;
}

.rp-pastry-grid > .rp-pastry-1 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.rp-pastry-grid > .rp-pastry-2 {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.rp-pastry-grid > figure > img {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  min-height: 0;
  display: block;
  margin: 0;
}

.rp-pastry-grid > figure > figcaption {
  display: block;
  color: var(--rp-text-secondary, var(--rp-text));
  font-size: 0.85em;
  font-style: italic;
  line-height: 1.45;
  margin-top: 0.5rem;
  text-align: center;
  opacity: 1;
}

@media (max-width: 767px) {
  /* Mobile: collapse to single-column stack */
  .rp-pastry-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .rp-pastry-grid > .rp-pastry-matcha {
    grid-column: 1; grid-row: 1;
  }
  .rp-pastry-grid > .rp-pastry-1 {
    grid-column: 1; grid-row: 2;
  }
  .rp-pastry-grid > .rp-pastry-2 {
    grid-column: 1; grid-row: 3;
  }
}

/* ============================================================
   v1.5.60 — .rp-byline-portrait: float-left author headshot on the About page.
   First introduced with real Ryan-at-Kaiserpfalz photo (att 595) replacing
   the earlier AI portrait. Sized 240px on desktop so the bio paragraph wraps;
   collapses to centered 200px stack on mobile (<600px).
   ============================================================ */
.entry-content figure.wp-block-image.rp-byline-portrait,
.rp-single-content figure.wp-block-image.rp-byline-portrait {
  max-width: 240px;
  margin: 0.25rem 1.5rem 1rem 0;
}
.entry-content figure.wp-block-image.rp-byline-portrait img,
.rp-single-content figure.wp-block-image.rp-byline-portrait img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  max-height: none !important;  /* override v1.5.54 75vh cap; portrait sized by container */
}
@media (max-width: 600px) {
  .entry-content figure.wp-block-image.rp-byline-portrait,
  .rp-single-content figure.wp-block-image.rp-byline-portrait {
    float: none;
    margin: 0 auto 1.25rem auto;
    max-width: 200px;
  }
}

/* ============================================================
   v1.5.68 — .rp-byline-columns: 2-up author-card masthead on About
   page. Replaces the legacy single-column float-left layout for
   "Who is writing." Each card stacks a portrait, a name, a mono
   role kicker, and the bio paragraph. Mobile collapses to single
   column via the wp:columns block's own breakpoint (<782px).
   ============================================================ */
.rp-byline-columns {
  gap: 3rem;
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
}
.rp-byline-columns .wp-block-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.entry-content figure.wp-block-image.rp-byline-card-portrait,
.rp-single-content figure.wp-block-image.rp-byline-card-portrait {
  margin: 0 0 1.25rem 0;
  max-width: 240px;
  width: 100%;
}
.entry-content figure.wp-block-image.rp-byline-card-portrait img,
.rp-single-content figure.wp-block-image.rp-byline-card-portrait img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  max-height: none !important;
}
.rp-byline-card-name {
  margin: 0 0 0.35rem 0 !important;
  font-size: 1.15rem; /* v1.6.20 #66: reduced from 1.55rem — name sits close to portrait, not a headline */
  line-height: 1.2;
}
.rp-byline-card-role {
  font-family: var(--rp-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--rp-text-muted);
  margin: 0 0 1rem 0 !important;
}
@media (max-width: 781px) {
  .rp-byline-columns {
    gap: 2.5rem;
  }
}

/* ============================================================
   v1.6.36 — .rp-byline-stack: alternating-side editorial byline
   pattern that replaces the side-by-side `.rp-byline-columns`
   layout on the About page. Each bio is its own full-width row:
   portrait floats left for Ryan and right for Samira, with the
   name + role kicker rendered as a figcaption locked under the
   portrait, and bio paragraphs wrapping around the float.

   Layout rationale: at the ~840px prose column we use elsewhere,
   side-by-side gives each bio ~250px of text width — too narrow
   for the 20px body. Alternating floats give every bio the full
   prose width AND keep both portraits a usable 280px on desktop.
   Mobile (<700px) collapses to photo-stacked-above-text per bio.
   ============================================================ */
.rp-byline-stack {
  margin-top: 0.5rem;
}
.rp-byline-stack + .rp-byline-stack {
  margin-top: 3rem;
  border-top: 1px solid rgba(200, 184, 138, 0.18);
  padding-top: 2.25rem;
}
.entry-content figure.wp-block-image.rp-byline-portrait.alignright,
.rp-single-content figure.wp-block-image.rp-byline-portrait.alignright {
  float: right;
  max-width: 220px;
  margin: 0.25rem 0 1rem 1.5rem;
}
.entry-content figure.wp-block-image.rp-byline-portrait.alignleft,
.rp-single-content figure.wp-block-image.rp-byline-portrait.alignleft {
  float: left;
  max-width: 220px;
  margin: 0.25rem 1.5rem 1rem 0;
}
.entry-content figure.wp-block-image.rp-byline-portrait figcaption,
.rp-single-content figure.wp-block-image.rp-byline-portrait figcaption {
  font-family: var(--rp-font);
  font-size: 13px;
  font-style: normal;
  color: var(--rp-text-muted);
  text-align: left;
  margin: 0.6rem 0 0 0;
  padding: 0;
  line-height: 1.35;
}
.entry-content figure.wp-block-image.rp-byline-portrait figcaption strong,
.rp-single-content figure.wp-block-image.rp-byline-portrait figcaption strong {
  display: block;
  font-family: var(--rp-font-serif);
  font-weight: 600;
  font-style: normal;     /* override wp-element-caption italic */
  font-size: 1.05rem;
  color: var(--rp-text);
  letter-spacing: 0;
  margin-bottom: 2px;
}
.entry-content figure.wp-block-image.rp-byline-portrait figcaption .rp-byline-role,
.rp-single-content figure.wp-block-image.rp-byline-portrait figcaption .rp-byline-role {
  font-family: var(--rp-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--rp-text-muted);
  display: block;
}
/* Mobile: collapse both floats, center the portrait above the bio. */
@media (max-width: 700px) {
  .entry-content figure.wp-block-image.rp-byline-portrait.alignleft,
  .entry-content figure.wp-block-image.rp-byline-portrait.alignright,
  .rp-single-content figure.wp-block-image.rp-byline-portrait.alignleft,
  .rp-single-content figure.wp-block-image.rp-byline-portrait.alignright {
    float: none;
    margin: 0 auto 1.25rem auto;
    max-width: 240px;
  }
  .entry-content figure.wp-block-image.rp-byline-portrait figcaption,
  .rp-single-content figure.wp-block-image.rp-byline-portrait figcaption {
    text-align: center;
  }
  .rp-byline-stack + .rp-byline-stack {
    margin-top: 2.5rem;
    padding-top: 2rem;
  }
}

/* ============================================================
   v1.6.36 — .rp-about-cta: centered, breathing-room treatment
   for the Get-in-touch email button on /about/. Default
   `wp-block-buttons` align flush-left at editorial body width,
   which made the sandstone CTA read like a cramped admin save.
   This rule centers the button row and pads above so it floats
   visibly between the surrounding paragraphs.
   ============================================================ */
.wp-block-buttons.rp-about-cta {
  justify-content: center;
  display: flex;
  margin: 1.75rem 0 2rem 0;
}
.wp-block-buttons.rp-about-cta .wp-block-button__link {
  padding: 16px 32px;
  font-size: 16px;
  letter-spacing: 0.05em;
  min-width: 280px;
  text-align: center;
}
@media (max-width: 600px) {
  .wp-block-buttons.rp-about-cta .wp-block-button__link {
    min-width: 0;
    width: 100%;
  }
}

/* ============================================================================
   v1.6.0 — Source Serif 4 headline font + prose 20px overrides.

   theme.json applies Source Serif 4 to h1/h2/h3/h4 via elements.hN.typography.
   The rules below provide belt-and-suspenders overrides for specific named
   component classes that override font-family themselves.

   Body prose is 20px / 1.6 (theme.json body fontSize + lineHeight tokens).
   The 65ch max-width lands at ~840px for 20px Inter — enforced via --rp-prose-max
   on prose elements inside single posts and pages. Outside prose (headers,
   footers, callouts) keep their own sizing.
   ============================================================================ */

/* --- Heading font: Source Serif 4 site-wide --- */
h1, h2, h3, h4,
.wp-block-heading,
.rp-section-heading,
.rp-featured-title,
.rp-hero-headline,
.rp-single-title,
.rp-archive-title,
.rp-search-title,
.rp-page-title,
.rp-related-heading,
.rp-not-found h1,
.rp-not-found h2,
.rp-category-tile-title,
.rp-photo-essay-title,
.rp-connect-heading {
  font-family: var(--rp-font-serif) !important;
}

/* Post-title in query loops (archive cards, home grid) */
.wp-block-post-title,
.wp-block-post-title a {
  font-family: var(--rp-font-serif);
}

/* --- Edition-note italic serif body (was fallback Georgia, now Source Serif 4) --- */
.rp-edition-note-body {
  font-family: var(--rp-font-serif);
}

/* --- Prose max-width 65ch (840px equivalent) inside content bands --- */
/* Single post prose elements inside the 1000px prose-column rule */
.wp-block-post-content.rp-single-content > p {
  max-width: 65ch;
}
.wp-block-post-content.rp-single-content > ul:not(.rp-sources-list):not(.alignwide):not(.alignfull),
.wp-block-post-content.rp-single-content > ol:not(.rp-sources-list):not(.alignwide):not(.alignfull) {
  max-width: 65ch;
}

/* Page content prose */
.rp-page-content > p,
.rp-page-content > ul,
.rp-page-content > ol {
  max-width: 65ch;
}

/* --- Sticky header compensation: bump scroll-margin-top for taller header --- */
body.single-post .entry-content h2[id],
body.single-post .wp-block-post-content h2[id],
body.single-post .entry-content h3[id],
body.single-post .wp-block-post-content h3[id] {
  scroll-margin-top: calc(var(--rp-header-height) + 24px);
}

/* --- Header inner content (old .rp-header > .wp-block-group selector) --- */
/* The new .rp-dateline-inner / .rp-band-nav already cap at var(--rp-frame-max).
   Keep the old selector harmless. */
.rp-header > .wp-block-group {
  max-width: var(--rp-frame-max);
  margin-left: auto;
  margin-right: auto;
}

/* --- Old 3-col footer CSS retained as no-op shells for the removed markup --- */
/* The old .rp-footer-grid was 3 columns; new is .rp-mag-footer-grid 4 columns.
   Old selector is orphaned. Keep empty rule for clean cascade without errors. */
.rp-footer-grid { display: none; }

/* --- Navigation inside the old .rp-header pattern (kept for any stale markup) --- */
.rp-header .wp-block-navigation {
  --wp--style--block-gap: 32px;
}
.rp-header .wp-block-navigation .wp-block-navigation-item__content {
  color: var(--rp-text);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease, color 120ms ease;
}
.rp-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.rp-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
  color: var(--rp-accent);
  border-bottom-color: var(--rp-accent);
}

/* ============================================================================
   Archive page — year-grouped chronological index (v1.6.9)
   Block: edublock-pro-child/archive-list
   Template scope: body.page (PID 804, slug: archive)
   ============================================================================ */

.rp-archive {
  max-width: 760px;
  margin: 32px auto 0;
  padding: 0 24px;
}

.rp-archive-year {
  font-family: var(--rp-font-serif);
  font-size: 28px;
  font-weight: 600;
  color: var(--rp-sand);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 48px 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(200, 184, 138, 0.15);
  line-height: 1.2;
}

.rp-archive-year:first-child {
  margin-top: 0;
}

.rp-archive-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rp-archive-item {
  padding: 12px 0;
  border-bottom: 1px solid rgba(42, 51, 64, 0.8);
}

.rp-archive-item:last-child {
  border-bottom: none;
}

.rp-archive-link {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 16px;
  align-items: baseline;
  color: inherit;
  text-decoration: none;
}

.rp-archive-link:hover .rp-archive-title {
  color: var(--rp-sand);
}

.rp-archive-date {
  font-family: var(--rp-font);
  font-size: 13px;
  color: var(--rp-ink-2);
  letter-spacing: 0.05em;
  white-space: nowrap;
  flex-shrink: 0;
}

.rp-archive-title {
  font-family: var(--rp-font-serif);
  font-size: 18px;
  color: var(--rp-ink);
  line-height: 1.3;
  transition: color 120ms ease;
}

.rp-archive-cat {
  font-family: var(--rp-font);
  font-size: 10px;
  font-variant: small-caps;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rp-sand);
  white-space: nowrap;
  flex-shrink: 0;
}

.rp-archive-dek {
  font-family: var(--rp-font);
  font-size: 16px;
  color: var(--rp-ink-2);
  line-height: 1.6;
  max-width: 760px;
  margin: 0 auto 24px;
  padding: 0 24px;
}

@media (max-width: 600px) {
  .rp-archive-link {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
  }

  .rp-archive-date {
    order: 1;
    font-size: 12px;
  }

  .rp-archive-cat {
    order: 2;
    font-size: 10px;
  }

  .rp-archive-title {
    order: 3;
    flex-basis: 100%;
    font-size: 16px;
  }
}

/* ==========================================================================
   About page — inline people photo (v1.6.15)
   Placed after the pullquote; constrained width + centered + italic caption.
   ========================================================================== */
.rp-about-inline-photo {
  max-width: 800px;
  margin: 48px auto;
}

.rp-about-inline-photo img {
  border-radius: 4px;
}

.rp-about-inline-photo figcaption {
  text-align: center;
  font-style: italic;
  font-size: 14px;
  color: var(--rp-ink-2, var(--rp-text-secondary));
  margin-top: 12px;
}

/* ==========================================================================
   v1.6.20 — LOW polish bundle (#67, #69)
   ========================================================================== */

/* #67 — Dek paragraph italic (applies site-wide wherever .rp-dek is used) */
.rp-dek {
  font-style: italic;
}

/* #69 — Sandstone bullet markers on the About page "How we write" list.
   Scoped to .page-id-174 to avoid touching every UL site-wide.
   Uses ::marker (supported in all modern browsers) for the cleanest
   approach — no list-style:none + ::before gymnastics needed. */
.page-id-174 .entry-content ul > li::marker {
  color: var(--rp-sand);
}

/* ============================================================================
   v1.6.27 — Day-trip-guide register — bottom-of-post series navigation
   (.rp-series-nav-footer)

   Block-writer emits this AFTER Sources and before the disclaimer on any
   day-trip-guide post with _blog_pipeline_series_slug set. Either prev or
   next may be absent (start or end of series) — the <li> for the missing
   direction is simply omitted.

   HTML structure:
     <nav class="rp-series-nav-footer" aria-label="Continue reading the series">
       <p class="rp-series-nav-footer__kicker">Continue the series</p>
       <ul class="rp-series-nav-footer__list">
         <li class="rp-series-nav-footer__item rp-series-nav-footer__prev">
           <a href="{prev-permalink}">
             <span class="rp-series-nav-footer__label">← Previous stop</span>
             <span class="rp-series-nav-footer__title">{prev-short-label}</span>
           </a>
         </li>
         <li class="rp-series-nav-footer__item rp-series-nav-footer__next">
           <a href="{next-permalink}">
             <span class="rp-series-nav-footer__label">Next stop →</span>
             <span class="rp-series-nav-footer__title">{next-short-label}</span>
           </a>
         </li>
       </ul>
     </nav>

   Design intent: magazine "Up next:" — visually attention-grabbing (sandstone
   border + accent wash per Warm German Dark palette), not a tiny inline link.
   Desktop: 2-column card pair. Mobile: single-column, next-card stacks above
   prev (next is the more important affordance for readers continuing forward).
   ============================================================================ */

.rp-series-nav-footer {
  margin: 3rem 0 2rem;
  padding: 0;
}

.rp-series-nav-footer__kicker {
  margin: 0 0 1rem 0;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rp-accent, #c8b88a);
  line-height: 1.2;
}

.rp-series-nav-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* When only one card exists (start or end of series), span full width */
.rp-series-nav-footer__list:has(.rp-series-nav-footer__item:only-child) {
  grid-template-columns: 1fr;
  max-width: 480px;
}

.rp-series-nav-footer__item {
  min-width: 0; /* prevent grid blowout from long titles */
}

.rp-series-nav-footer__item a {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.125rem 1.25rem;
  background: rgba(200, 184, 138, 0.07);
  border: 1px solid rgba(200, 184, 138, 0.35);
  border-radius: 4px;
  text-decoration: none;
  color: var(--rp-text, #f5f3f0);
  min-height: 80px; /* ensures ≥ 44px touch target with internal flex */
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.rp-series-nav-footer__item a:hover,
.rp-series-nav-footer__item a:focus-visible {
  background: rgba(200, 184, 138, 0.14);
  border-color: rgba(200, 184, 138, 0.65);
  box-shadow: 0 0 0 2px rgba(200, 184, 138, 0.18);
  color: #fff;
  outline: none;
}

/* Directional label ("← Previous stop" / "Next stop →") */
.rp-series-nav-footer__label {
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--rp-accent, #c8b88a);
  font-weight: 600;
  line-height: 1.2;
}

/* Post title / short label */
.rp-series-nav-footer__title {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  color: inherit;
  /* Clamp to 3 lines — long series titles don't break the card grid */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Next card gets a subtle right-aligned accent border to draw the eye */
.rp-series-nav-footer__next a {
  border-left: 3px solid var(--rp-accent, #c8b88a);
}

.rp-series-nav-footer__next a:hover,
.rp-series-nav-footer__next a:focus-visible {
  border-left-color: var(--rp-accent, #c8b88a); /* keep border on hover */
}

/* Mobile: single-column stack, next above prev ----------------------------- */
@media (max-width: 767px) {
  .rp-series-nav-footer__list {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  /* On mobile, reorder: next-card first (top), prev-card second (bottom).
     Using order rather than flex-direction reverse so next is always item 1. */
  .rp-series-nav-footer__next {
    order: -1;
  }

  .rp-series-nav-footer__item a {
    min-height: 64px; /* compact but still meets 44px touch target */
  }
}

/* ============================================================================
   v1.6.48 — Single-post mobile: full-bleed images + 16px text gutter

   Brings single blog posts in line with the home/category mobile rule
   (v1.6.46/47): on mobile, images run screen edge-to-edge while text is padded
   to 16px — matching the compact header brand (.rp-compact-bar-inner: padding
   0 16px) so images and text read as designed together.

   METHOD — viewport-relative breakout, chosen over negative-margin-by-gutter
   (which is fragile because it hard-codes the gutter px). Images use:
       width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
   For ANY container padding p, margin resolves to -p, so the left edge lands at
   p + (-p) = 0 and the element spans 0..100vw. It is GUTTER-INDEPENDENT — change
   the text gutter and images still hit the viewport edges, nothing to re-tune.

   The 16px text gutter lives on .rp-single-body-band (it owns the 20px default;
   .rp-single-content has 0 padding and sits inside it). Setting the band to 16px
   moves every text block (p / headings / lists / quotes / tables / callouts /
   visit-card / series-nav / tags / author card) to x=16; images break back out
   below regardless.

   Scope: body.single-post, ≤767px ONLY. Desktop (1100px reading column, 66.67%
   floats, 2-col visit gallery) is untouched.

   PIPELINE CONTRACT (blog-block-writer): standalone in-body images SHOULD carry
   align:full (or alignwide) for desktop full-width intent; floats keep
   alignleft / alignright; the post-visit gallery keeps .rp-visit-gallery. On
   mobile ALL of these bleed via the rules below regardless of align class, so
   the block-writer must NOT add inline horizontal margin/padding to figures (it
   would fight the breakout). See memory
   feedback_single_post_mobile_full_bleed_method.
   ============================================================================ */
@media (max-width: 767px) {

  /* Text gutter → 16px (band owns it; content has 0). */
  body.single-post .rp-single-body-band {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Standalone images (alignfull / alignwide / default) — NOT floats, NOT the
     visit gallery, NOT the About byline portrait — break out edge-to-edge. */
  body.single-post .rp-single-content figure.wp-block-image:not(.alignleft):not(.alignright):not(.rp-byline-portrait):not(.rp-visit-gallery figure),
  body.single-post .rp-single-content .wp-block-image:not(.alignleft):not(.alignright):not(.rp-byline-portrait):not(.rp-visit-gallery figure) {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0 !important;
  }
  body.single-post .rp-single-content figure.wp-block-image:not(.alignleft):not(.alignright):not(.rp-byline-portrait):not(.rp-visit-gallery figure) img,
  body.single-post .rp-single-content .wp-block-image:not(.alignleft):not(.alignright):not(.rp-byline-portrait):not(.rp-visit-gallery figure) img {
    width: 100% !important;
    border-radius: 0 !important;
  }
  /* Re-pad standalone captions back to the 16px text gutter. */
  body.single-post .rp-single-content figure.wp-block-image:not(.alignleft):not(.alignright):not(.rp-byline-portrait):not(.rp-visit-gallery figure) figcaption {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Collapsed floats: the existing mobile rule already sets float:none +
     width:100%; extend them to full-bleed via the same viewport breakout. */
  body.single-post .rp-single-content figure.wp-block-image.alignleft:not(.rp-visit-gallery figure):not(.rp-photo-reference):not(.rp-byline-portrait),
  body.single-post .rp-single-content figure.wp-block-image.alignright:not(.rp-visit-gallery figure):not(.rp-photo-reference):not(.rp-byline-portrait) {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0 !important;
  }
  body.single-post .rp-single-content figure.wp-block-image.alignleft:not(.rp-visit-gallery figure):not(.rp-photo-reference):not(.rp-byline-portrait) img,
  body.single-post .rp-single-content figure.wp-block-image.alignright:not(.rp-visit-gallery figure):not(.rp-photo-reference):not(.rp-byline-portrait) img {
    border-radius: 0 !important;
  }
  body.single-post .rp-single-content figure.wp-block-image.alignleft:not(.rp-visit-gallery figure):not(.rp-photo-reference):not(.rp-byline-portrait) figcaption,
  body.single-post .rp-single-content figure.wp-block-image.alignright:not(.rp-visit-gallery figure):not(.rp-photo-reference):not(.rp-byline-portrait) figcaption {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Post-visit gallery: break the whole gallery out to viewport edges (its
     mobile layout is already a 1-col 100%-width stack). */
  body.single-post .rp-single-content .rp-visit-gallery.wp-block-gallery {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
  body.single-post .rp-single-content .rp-visit-gallery.wp-block-gallery figure.wp-block-image img {
    border-radius: 0 !important;
  }
  body.single-post .rp-single-content .rp-visit-gallery.wp-block-gallery figure.wp-block-image figcaption {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ============================================================================
   v1.6.48 — Floating share bar (social-icons-widget-pro) mobile fix

   The plugin's floating-buttons.css converts the floating share buttons into a
   full-width bottom bar on mobile (.wpzoom-floating-mobile-mode) with
   background: rgba(255,255,255,.95) and a tall ~88px height (the container keeps
   flex-direction:column from .wpzoom-floating-vertical), while the icons are
   configured color:#fff — so it renders as a tall white slab with white-on-white
   (invisible) icons. Restore the intended look: transparent background, neutral
   (#a39e98 = Text Secondary) icons, single compact centered row.

   Overriding the inline color:#fff (anchor) and fill:#fff (svg) requires
   !important — a stylesheet !important beats an inline style without !important.
   Like-icon outline paths use fill="none" + stroke="currentColor", so setting
   the anchor `color` recolors their stroke; the explicit fill="none" presentation
   attribute keeps their interior open. Scoped to .wpzoom-floating-mobile-mode
   (mobile only) — desktop vertical floating bar is untouched.
   ============================================================================ */
.wpzoom-floating-buttons.wpzoom-floating-mobile-mode {
  background: transparent !important;
  box-shadow: none !important;
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px)) !important;
}
.wpzoom-floating-buttons.wpzoom-floating-mobile-mode .wpzoom-floating-container {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  gap: 6px !important;
}
.wpzoom-floating-buttons.wpzoom-floating-mobile-mode .social-sharing-icon {
  color: #a39e98 !important;
  font-size: 16px !important;
  padding: 4px !important;
  margin: 0 !important;
}
.wpzoom-floating-buttons.wpzoom-floating-mobile-mode .social-sharing-icon svg {
  fill: #a39e98 !important;
  width: 22px !important;
  height: 22px !important;
}

/* ============================================================================
   v1.6.49 — About / Page mobile parity with home + category + single

   Pages (body.page) missed the mobile treatment: text sat at a ~40px gutter
   (main.has-global-padding ~20px + .rp-page-body-band ~20px stacked) and the
   .rp-hero--page hero band + in-content images were boxed instead of bleeding.
   This brings pages in line with home/category (v1.6.45/46/47) + single
   (v1.6.48): full-screen .rp-hero--page hero, 16px text gutter, edge-to-edge
   images — all via the same gutter-independent viewport breakout
   (width:100vw; margin-inline:calc(50% - 50vw)).

   The hero full-screen treatment lives in the v1.6.45 block above (selectors
   extended to .rp-hero--page). The chrome-collapse below is scoped to pages
   that ACTUALLY have a hero band — body.page:has(.rp-page-hero-band) — so a
   heroless page keeps its 60px fixed-bar spacer and never slides content under
   the fixed compact bar.

   Byline portraits (.rp-byline-portrait, the Ryan/Samira avatars) are exempt —
   same exclusion the single-post + float rules use.
   ============================================================================ */
@media (max-width: 767px) {

  /* --- Full-screen hero: collapse header chrome (only on pages with a hero) --- */
  body.page:has(.rp-page-hero-band) .site-header { padding-top: 0; }
  body.page:has(.rp-page-hero-band) .rp-header { padding: 0 !important; }
  body.page:has(.rp-page-hero-band) .rp-compact-bar { margin-top: 0; }

  /* Break the hero band out of main's padding to the viewport edges. */
  body.page .rp-page-hero-band {
    margin-top: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  /* --- Text gutter → 16px: zero main's global padding, set the bands to 16px
     (overrides the 30px / ≤480px-20px .rp-page-* band rules at ~line 3826). --- */
  body.page main.rp-page.has-global-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.page .wp-site-blocks .rp-page-header,
  body.page .wp-site-blocks .rp-page-body-band {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* --- In-content images edge-to-edge (NOT floats, NOT byline portraits) --- */
  body.page .rp-page-content figure.wp-block-image:not(.alignleft):not(.alignright):not(.rp-byline-portrait),
  body.page .rp-page-content .wp-block-image:not(.alignleft):not(.alignright):not(.rp-byline-portrait) {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0 !important;
  }
  body.page .rp-page-content figure.wp-block-image:not(.alignleft):not(.alignright):not(.rp-byline-portrait) img,
  body.page .rp-page-content .wp-block-image:not(.alignleft):not(.alignright):not(.rp-byline-portrait) img {
    width: 100% !important;
    border-radius: 0 !important;
  }
  body.page .rp-page-content figure.wp-block-image:not(.alignleft):not(.alignright):not(.rp-byline-portrait) figcaption {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}