/* Small WordPress-runtime-only additions not present in the copied
 * static stylesheet (site-style.css / site-rtl.css remain the design
 * authority and are unmodified copies of the approved static files). */

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.gro-fig-zoom {
  font: inherit;
}

/* Keyboard focus visibility (accessibility requirement, not present as a
 * generic rule in the copied stylesheet). */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid #D4AF37;
  outline-offset: 2px;
}

/* The static site's site-style.css carries a `.nav-menu { display: none }`
 * rule at <=768px, but the static markup's own <ul> never actually carries
 * the `nav-menu` class (bare inline `style="display:flex"` instead), so
 * that rule never fires there today -- the nav links stay visible/wrapped
 * on the current static mobile pages. header.php here correctly uses the
 * semantic `nav-menu` class, which means the copied CSS rule (dead on the
 * static site) would otherwise hide the nav on WordPress alone. This
 * override restores the actual current static rendering (visible, wrapped
 * links) so mobile visual fidelity matches the real static site, not the
 * copied stylesheet's unused intent. */
@media (max-width: 768px) {
  .nav-menu {
    display: flex !important;
    flex-wrap: wrap;
  }
}

/* Language selector: an episode-page translation that has no published
 * post yet (task 014) is shown, not hidden, but is not a link. */
.lang-option.lang-unavailable {
  opacity: 0.55;
  cursor: default;
}
.lang-option.lang-unavailable em {
  font-style: normal;
  font-size: 0.78em;
}

/* Task 016: responsive fixed-geometry 16:9 embed (documentary player).
 * aspect-ratio (supported by every evergreen browser this site targets)
 * keeps the frame from ever exceeding its container width -- no
 * horizontal overflow at any viewport. */
.gro-video-embed-16x9 {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.gro-video-embed-16x9 iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Task 018: the unified Media chooser -- native <details>+<summary> so
 * keyboard operation, visible focus, and a truthful open/closed state
 * come from the browser itself rather than hand-rolled JS. Used both
 * inside the article's short/full version panel and (rendered by
 * filters.js) on homepage/archive cards. Deliberately secondary in
 * weight to the gold Short/Full switch button next to it. */
.gro-media-chooser {
  position: relative;
  display: inline-block;
}
.gro-media-chooser > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.6rem 1rem;
  background: #21262d;
  color: #c9d1d9;
  border: 1px solid #30363d;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  user-select: none;
}
.gro-media-chooser > summary::-webkit-details-marker { display: none; }
.gro-media-chooser > summary::after { content: " \25BE"; }
.gro-media-chooser > summary:hover,
.gro-media-chooser[open] > summary {
  border-color: var(--gold, #D4AF37);
  color: #f0f6fc;
}
.gro-media-chooser > summary:focus-visible {
  outline: 2px solid var(--gold, #D4AF37);
  outline-offset: 2px;
}
.gro-media-chooser > ul {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 190px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  z-index: 60;
}
[dir="rtl"] .gro-media-chooser > ul {
  right: auto;
  left: 0;
}
.gro-media-chooser > ul > li + li { margin-top: 2px; }
.gro-media-chooser > ul > li > a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  color: #c9d1d9;
  text-decoration: none;
  font-size: 0.85rem;
  white-space: normal;
  overflow-wrap: anywhere;
}
.gro-media-chooser > ul > li > a:hover,
.gro-media-chooser > ul > li > a:focus-visible {
  background: #21262d;
  color: #f0f6fc;
  outline: none;
}

/* Card grids: keep the chooser from being clipped by the card's own
 * rounded/overflow-hidden edge, and z-index it above sibling cards. */
.gro-media-chooser-card-wrap {
  position: relative;
  z-index: 1;
}
.gro-media-chooser-card-wrap .gro-media-chooser > summary {
  padding: 0.45rem 0.7rem;
  font-size: 0.78rem;
}
.gro-media-chooser-card-wrap:has(details[open]) {
  z-index: 40;
}

/* Homepage article cards: editorial image on the left; title, reading
 * choices and article details on the right. The action row belongs directly
 * below the title so its purpose is immediately clear. */
.gro-home-article-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 32%);
  gap: 1.4rem;
  align-items: stretch;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: border-color 0.2s ease;
}
.gro-home-card-image-link {
  display: block;
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  aspect-ratio: 16 / 9;
  align-self: start;
  border-radius: 7px;
  overflow: hidden;
  background: #0d1117;
  border: 1px solid #30363d;
}
.gro-home-card-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}
.gro-home-card-content {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
.gro-home-card-title {
  margin: 0 0 0.75rem;
  font-size: 1.35rem;
}
.gro-home-card-title a {
  color: #f0f6fc;
  text-decoration: none;
}
.gro-home-card-title a:hover,
.gro-home-card-title a:focus-visible {
  color: var(--gold, #D4AF37);
}
.gro-home-card-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .gro-home-article-card {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .gro-home-card-image-link {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  .gro-home-card-content {
    grid-column: 1;
    grid-row: 2;
  }
  .gro-home-card-image {
    min-height: 0;
  }
}

/* Task 032: responsive header correction. .site-header has a fixed
 * height (var(--header-height)) and .header-inner is a single
 * non-wrapping flex row; once .nav-menu is forced visible on mobile
 * (the override above), brand lockup + nav + language/search all
 * compete for one fixed-height row at narrow widths, producing the
 * reported overlap/clipping. This lets the header grow to two rows on
 * mobile only -- brand lockup alone on row 1, nav + language/search on
 * row 2 -- without touching desktop (untouched above 768px) or the
 * header markup itself. */
@media (max-width: 768px) {
  .site-header {
    height: auto;
    min-height: var(--header-height);
    padding: 10px 0;
  }
  .header-inner {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .site-brand-lockup {
    flex: 1 1 100%;
    order: 1;
  }
  .site-header nav[aria-label] {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
  }
  .header-actions {
    order: 2;
  }
  .nav-menu {
    row-gap: 8px;
  }
  /* Minimum 40px touch targets for every header control at this width. */
  .nav-link,
  .media-nav-btn,
  .lang-btn,
  .header-actions > a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 430px) {
  /* Category descriptor hidden at the narrowest breakpoint per task 032
   * (cannot remain reliably readable at this width without crowding the
   * two-row layout above). */
  .site-brand-tagline {
    display: none !important;
  }
}

/* Task 032: fixed mobile H1 size for the episode article title, selected
 * by visual testing rather than viewport-scaled typography. The title's
 * font-size is set inline by single-episode.php (2.6rem, shared with
 * desktop), so only an !important rule in an author stylesheet can
 * override it without touching the template. Desktop (>768px) and
 * tablet (>600px) keep the existing 2.6rem hierarchy unchanged. */
@media (max-width: 600px) {
  main.reading-container h1 {
    font-size: 38px !important;
    line-height: 1.12 !important;
    letter-spacing: normal !important;
  }
}

/* 2026-10-17: global Subscribe and explicit light/dark controls. */
.gro-subscribe-btn,
.theme-toggle-btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.gro-subscribe-btn {
  padding: 0.58rem 0.82rem;
  background: var(--gold);
  border: 1px solid var(--gold);
  color: #0a0d12;
  box-shadow: 0 0 16px var(--gold-glow);
}
.gro-subscribe-btn:hover,
.gro-subscribe-btn:focus-visible {
  background: var(--gold-light);
  color: #0a0d12;
}
.theme-toggle-btn {
  width: auto;
  padding: 0.5rem 0.72rem;
  background: var(--surface);
  color: var(--text-bright);
}
.gro-subscribe-btn:focus-visible,
.theme-toggle-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Numbered, visually quieter references. Inline citation markers and the
 * body copy retain their original size and wording. */
.ro-sources-archive {
  margin: 2.5rem 0 !important;
  padding: 1.2rem !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  background: var(--surface) !important;
  color: var(--text-muted) !important;
}
.ro-sources-archive > summary {
  color: var(--gold) !important;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.95rem !important;
  font-weight: 700;
  outline: none;
}
.ro-sources-content,
.ro-sources-archive > div,
.ro-inline-reference-content {
  font-size: 0.82rem !important;
  line-height: 1.55 !important;
  color: var(--text-muted) !important;
}
.ro-sources-content,
.ro-sources-archive > div {
  margin-top: 1.1rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid var(--border) !important;
}
.ro-reference-entry {
  position: relative;
  padding-inline-start: 2.15rem !important;
  margin: 0.62rem 0 !important;
  overflow-wrap: anywhere;
}
.ro-reference-number {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  min-width: 1.75rem;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
}

@media (min-width: 769px) and (max-width: 1120px) {
  .header-actions { gap: 8px; }
  .theme-toggle-label { display: none; }
  .theme-toggle-btn { width: 38px; padding: 0; }
}
@media (max-width: 700px) {
  .header-actions { gap: 8px; }
  .header-actions .lang-btn { padding: 8px 9px; }
  .header-actions > a:last-child { display: none; }
}

/* Task 032: compact inline Figure 0.1 -- restrained preview, no
 * competing chrome, click/keyboard-activated same-page lightbox. */
.gro-inline-figure {
  margin: 2rem 0;
}
.gro-inline-figure .gro-figure-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 0.6rem;
}
.gro-inline-figure .figure-badge {
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gold, #D4AF37);
  letter-spacing: 0.05em;
}
.gro-inline-figure .figure-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #f0f6fc;
}
.gro-figure-trigger {
  display: block;
  width: 68%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  border: 1px solid #30363d;
  border-radius: 8px;
  background: #0d1117;
  cursor: zoom-in;
  overflow: hidden;
}
.gro-figure-trigger:focus-visible {
  outline: 2px solid var(--gold, #D4AF37);
  outline-offset: 2px;
}
.gro-figure-trigger img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 768px) {
  .gro-figure-trigger {
    width: 100%;
    max-width: 100%;
  }
}
.gro-inline-figure figcaption {
  font-size: 0.88rem;
  color: #c9d1d9;
  line-height: 1.5;
  margin-top: 0.7rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.gro-inline-figure .figure-source-line {
  font-size: 0.78rem;
  color: #8b949e;
  margin-top: 0.4rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Shared accessible modal/lightbox: chart enlargement (task 032 §11) and
 * platform "Play here" embeds (task 032 §12) both reuse this one
 * component, so there is a single focus-trap/Escape/backdrop
 * implementation rather than two divergent ones. */
.gro-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(1, 4, 9, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 2000;
}
.gro-modal-backdrop[hidden] {
  display: none;
}
.gro-modal {
  position: relative;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 10px;
  max-width: min(94vw, 1100px);
  max-height: 90vh;
  overflow: auto;
  padding: 44px 16px 16px;
}
.gro-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #161b22;
  color: #f0f6fc;
  border: 1px solid #30363d;
  border-radius: 6px;
  font-size: 1.1rem;
  cursor: pointer;
}
.gro-modal-close:focus-visible {
  outline: 2px solid var(--gold, #D4AF37);
  outline-offset: 2px;
}
.gro-modal-chart img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  margin: 0 auto;
  height: auto;
}
.gro-modal-media {
  width: min(90vw, 900px);
}
.gro-modal-platform-label {
  font-size: 0.8rem;
  color: #8b949e;
  margin: 0 0 10px;
  text-align: center;
}
.gro-modal-media .gro-video-embed-16x9 {
  width: 100%;
}
.gro-modal-media .gro-podcast-embed {
  width: 100%;
  min-height: 152px;
  border: 0;
  border-radius: 8px;
}

/* Play-here / Open-on action pair, and the Media chooser's restrained
 * empty state (task 032 §12: control stays visible, never a fake
 * clickable placeholder). */
.gro-play-here {
  padding: 0.5rem 1rem;
  background: #21262d;
  color: #f0f6fc;
  border: 1px solid #30363d;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
}
.gro-play-here:focus-visible {
  outline: 2px solid var(--gold, #D4AF37);
  outline-offset: 2px;
}
.gro-media-chooser-empty {
  padding: 10px 14px;
  color: #8b949e;
  font-size: 0.85rem;
  font-style: italic;
}

/* Task 033: compact three-item reader-format control group (Short
 * Article / Full Monograph / Media). Active format is a filled,
 * non-interactive state; the other format is a plain outlined link. */
.gro-format-active {
  padding: 0.5rem 1rem;
  background: #D4AF37;
  color: #0d1117;
  font-weight: 700;
  border-radius: 6px;
  font-size: 0.85rem;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}
.gro-format-link {
  padding: 0.5rem 1rem;
  background: transparent;
  color: #c9d1d9;
  border: 1px solid #30363d;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}
.gro-format-link:hover,
.gro-format-link:focus-visible {
  border-color: var(--gold, #D4AF37);
  color: #f0f6fc;
}

/* Task 033 item 5: reduce the mobile vertical footprint above the fold
 * (title block + format controls) so article content starts sooner,
 * without changing desktop spacing. */
@media (max-width: 600px) {
  main.reading-container h1 {
    margin-bottom: 10px !important;
  }
  main.reading-container > div:has(> .ep-tag) {
    margin-bottom: 10px !important;
  }
  .gro-format-controls {
    margin-bottom: 1rem !important;
  }
  main.reading-container > div[style*="padding-bottom: 24px"] {
    padding-bottom: 12px !important;
  }
}

/* 2026-10-18: keep each primary-menu label on one line (e.g. "Latest Articles"),
   and leave breathing room before the header action buttons. */
.nav-menu .nav-link { white-space: nowrap; }
.header-actions { margin-left: 1.25rem; }

/* 2026-10-18: the companion book will be written when the series is finished.
   Hide the "America's Wealth Drain: The Complete Investigation / Order on Amazon" bar
   embedded in EP01 bodies (all languages) until the book exists. Remove this rule to show it again. */
.ro-book-conversion-bar { display: none !important; }

/* 2026-10-18: cookie-consent banner + labelled ad slots (Norway compliance). */
#gro-consent { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 9999; max-width: 760px; margin: 0 auto;
  background: #161b22; color: #e6edf3; border: 1px solid #D4AF37; border-radius: 8px; padding: 1rem 1.2rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.45); font-size: .92rem; line-height: 1.5; }
#gro-consent[hidden] { display: none; }
#gro-consent p { margin: 0 0 .8rem; }
#gro-consent a { color: #D4AF37; }
.gro-consent-actions { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }
.gro-consent-actions button { font: inherit; padding: .45rem 1rem; border-radius: 5px; cursor: pointer;
  background: transparent; color: #e6edf3; border: 1px solid #30363d; }
.gro-consent-actions .gro-consent-accept { background: #D4AF37; color: #0d1117; border-color: #D4AF37; font-weight: 700; }
.gro-ad-slot { margin: 2rem 0; padding: .6rem; border: 1px dashed #30363d; border-radius: 6px; text-align: center; }
.gro-ad-label { display: block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #8b949e; margin-bottom: .4rem; }

/* 2026-10-18: light mode — no white/near-white text on light backgrounds.
   Inline-styled template/JS/article markup hard-codes dark-mode colours; in light mode
   map them to the light palette (dark text, light panels). */
body.light-theme [style*="color: #f0f6fc"],
body.light-theme [style*="color:#f0f6fc"],
body.light-theme [style*="color: #e6edf3"],
body.light-theme [style*="color:#e6edf3"],
body.light-theme [style*="color: #f1f5f9"],
body.light-theme [style*="color:#f1f5f9"],
body.light-theme [style*="color: #ffffff"],
body.light-theme [style*="color:#ffffff"],
body.light-theme [style*="color: #fff;"],
body.light-theme [style*="color:#fff;"],
body.light-theme [style*="color: white"],
body.light-theme [style*="color:white"] { color: var(--text-bright) !important; }
body.light-theme [style*="color: #c9d1d9"],
body.light-theme [style*="color:#c9d1d9"],
body.light-theme [style*="color: #cbd5e1"],
body.light-theme [style*="color:#cbd5e1"] { color: var(--text) !important; }
body.light-theme [style*="color: #8b949e"],
body.light-theme [style*="color:#8b949e"],
body.light-theme [style*="color: #6e7681"],
body.light-theme [style*="color:#6e7681"],
body.light-theme [style*="color: #8092a8"],
body.light-theme [style*="color:#8092a8"] { color: var(--text-muted) !important; }
body.light-theme [style*="background: #161b22"],
body.light-theme [style*="background:#161b22"],
body.light-theme [style*="background: #0d1117"],
body.light-theme [style*="background:#0d1117"],
body.light-theme [style*="background: #21262d"],
body.light-theme [style*="background:#21262d"],
body.light-theme [style*="background: #12171f"],
body.light-theme [style*="background:#12171f"],
body.light-theme [style*="background: #161e2a"],
body.light-theme [style*="background:#161e2a"],
body.light-theme [style*="background: #0a0d12"],
body.light-theme [style*="background:#0a0d12"],
body.light-theme [style*="background: rgba(0,0,0,0.35)"],
body.light-theme [style*="background:rgba(0,0,0,0.35)"],
body.light-theme [style*="background: rgba(0, 0, 0, 0.35)"],
body.light-theme [style*="background:rgba(0, 0, 0, 0.35)"],
body.light-theme [style*="background: rgba(5,7,10,0.92)"],
body.light-theme [style*="background:rgba(5,7,10,0.92)"],
body.light-theme [style*="background: rgba(5, 7, 10, 0.92)"],
body.light-theme [style*="background:rgba(5, 7, 10, 0.92)"],
body.light-theme [style*="background-color: #161b22"],
body.light-theme [style*="background-color:#161b22"],
body.light-theme [style*="background-color: #0d1117"],
body.light-theme [style*="background-color:#0d1117"],
body.light-theme [style*="background-color: #21262d"],
body.light-theme [style*="background-color:#21262d"],
body.light-theme [style*="background-color: #12171f"],
body.light-theme [style*="background-color:#12171f"],
body.light-theme [style*="background-color: #161e2a"],
body.light-theme [style*="background-color:#161e2a"],
body.light-theme [style*="background-color: #0a0d12"],
body.light-theme [style*="background-color:#0a0d12"],
body.light-theme [style*="background-color: rgba(0,0,0,0.35)"],
body.light-theme [style*="background-color:rgba(0,0,0,0.35)"],
body.light-theme [style*="background-color: rgba(0, 0, 0, 0.35)"],
body.light-theme [style*="background-color:rgba(0, 0, 0, 0.35)"],
body.light-theme [style*="background-color: rgba(5,7,10,0.92)"],
body.light-theme [style*="background-color:rgba(5,7,10,0.92)"],
body.light-theme [style*="background-color: rgba(5, 7, 10, 0.92)"],
body.light-theme [style*="background-color:rgba(5, 7, 10, 0.92)"],
body.light-theme [style*="linear-gradient(135deg, #161b22"] { background: var(--card) !important; }
body.light-theme [style*="border: 1px solid #30363d"],
body.light-theme [style*="border:1px solid #30363d"],
body.light-theme [style*="border: 1px solid #21262d"],
body.light-theme [style*="border:1px solid #21262d"],
body.light-theme [style*="border-top: 1px solid #30363d"],
body.light-theme [style*="border-top:1px solid #30363d"] { border-color: var(--border) !important; }
/* light mode: class-based components that hard-code dark-mode colours (chart lightbox stays dark on purpose). */
body.light-theme .gro-home-article-card { background: var(--surface) !important; border-color: var(--border) !important; }
body.light-theme .gro-home-card-image-link,
body.light-theme .gro-figure-trigger { background: var(--card) !important; }
body.light-theme .gro-home-card-title a,
body.light-theme .gro-inline-figure .figure-title { color: var(--text-bright) !important; }
body.light-theme .gro-inline-figure figcaption { color: var(--text) !important; }
body.light-theme .gro-media-chooser > summary,
body.light-theme .gro-media-chooser > ul,
body.light-theme .gro-play-here { background: var(--card) !important; color: var(--text-bright) !important; border-color: var(--border) !important; }
body.light-theme .gro-media-chooser > ul > li > a,
body.light-theme .gro-format-link { color: var(--text) !important; }
body.light-theme .gro-media-chooser[open] > summary,
body.light-theme .gro-media-chooser > ul > li > a:focus-visible,
body.light-theme .gro-format-link:focus-visible { color: var(--text-bright) !important; background: var(--card-hover) !important; }

/* Merged back from the live theme on 2026-10-20 (tasks 045/046 and the
 * "Follow and discuss" section), which the local copy did not have yet. */
.gro-inline-figure .gro-figure-head {
  align-items: center;
  justify-content: space-between;
}
.gro-figure-trigger {
  position: relative;
}
.figure-image-wrapper {
  width: 68%;
  max-width: 720px;
  margin: 0 auto;
}
.figure-image-wrapper img {
  cursor: zoom-in;
}
@media (max-width: 768px) {
  .figure-image-wrapper {
    width: 100%;
    max-width: 100%;
  }
}
#episode-follow-discuss a {
  transition: border-color 0.15s, color 0.15s;
}
#episode-follow-discuss a:hover {
  border-color: var(--gold, #D4AF37);
  color: #f0f6fc;
}
#episode-follow-discuss a:focus-visible {
  outline: 2px solid var(--gold, #D4AF37);
  outline-offset: 2px;
}
#episode-follow-discuss svg {
  flex-shrink: 0;
}
@media (max-width: 480px) {
  #episode-follow-discuss .gro-follow-group > div {
    gap: 0.5rem;
  }
}

/* Brand account icons in a slim strip above the menu bar (2026-10-23). */
.gro-topbar { background: #070a0e; border-bottom: 1px solid var(--border, #30363d); }
body.light-theme .gro-topbar { background: #eef1f5; }
.gro-topbar-inner { display: flex; justify-content: flex-end; align-items: center; height: 40px; }
.gro-header-follow { display: inline-flex; align-items: center; gap: 0.55rem; }
.gro-header-follow-label { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em; color: #D4AF37; margin-inline-end: 0.2rem; }
.gro-header-follow a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #30363d; background: #161b22; color: #e6edf3; text-decoration: none; transition: color 0.15s, border-color 0.15s; }
body.light-theme .gro-header-follow a { background: #fff; border-color: #c9d1d9; color: #24292f; }
.gro-header-follow a:hover, .gro-header-follow a:focus-visible { color: #D4AF37; border-color: #D4AF37; }
.gro-header-follow svg { width: 16px; height: 16px; }