/* ═══════════════════════════════════════════════════════════════════════════
   REWire Media — Main Stylesheet
   Brand: Bebas Neue headlines · DM Sans body · DM Mono labels
   Colors: #E83A2F red · #0A0A0A black · #FFFFFF white · #C9A84C gold
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Inter 800 — direct from fonts.gstatic.com, overrides WP.com proxy bug ─────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuDyYAZ9hiA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ── CSS Variables ───────────────────────────────────────────────────────── */
:root {
  --red:      #E83A2F;
  --red-dark: #c42e25;
  --black:    #0A0A0A;
  --dark:     #1A1A1A;
  --card-bg:  #F8F8F8;
  --white:    #FFFFFF;
  --gold:     #C9A84C;
  --border:   #E2E2E2;
  --dim:      #888888;
  --text:     #1A1A1A;
  --text-dim: #666666;

  --font-display: 'Bebas Neue', sans-serif;
  --font-mono:    'DM Mono', monospace;
  --font-body:    'DM Sans', sans-serif;
  --font-headline: 'Inter', sans-serif;

  --nav-h:    30px;
  --top-bar-h: 32px;
  --max-w:    1280px;
  --content-w: 860px;
  --gap:      24px;
  --radius:   2px;

  --shadow-sm: 0 1px 4px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.16);
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  background: var(--white);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ── Top Bar ─────────────────────────────────────────────────────────────── */
.top-bar {
  height: var(--top-bar-h);
  background: var(--black);
  border-bottom: 1px solid #222;
}
.top-bar-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.top-bar-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #AAAAAA;
}
.top-bar-links { display: flex; gap: 20px; }
.top-bar-links a {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #AAAAAA;
  transition: color 0.2s;
}
.top-bar-links a:hover { color: var(--white); }

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--black);
  border-bottom: 3px solid var(--red);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 32px;
}

/* Site Logo */
.site-logo {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.06em;
  color: var(--white);
  flex-shrink: 0;
  line-height: 1;
}
.logo-re { color: var(--red); }
.site-logo img { height: 36px; width: auto; }

/* Primary Nav */
/* overflow: visible so the .overflow-dropdown ("Explore More" flyout) and
   the .nav-item::after active-link underline aren't clipped by the parent.
   Items use white-space: nowrap and the mobile menu takes over below the
   breakpoint, so visible overflow is safe on desktop. */
/* flex: 0 1 auto (was `flex: 1`, 2026-08-20). `flex: 1` made the nav absorb ALL
   the bar's free space, so the visual gap after the kebab was trailing slack
   INSIDE .primary-nav rather than real space between flex items — nothing could
   be positioned in it. Shrink-to-fit hands that space back to the bar, where the
   search button's auto margins can split it. Items were already left-packed, so
   the nav itself renders identically. */
.primary-nav { flex: 0 1 auto; overflow: visible; }
.primary-nav-list {
  display: flex;
  align-items: center;
  height: var(--nav-h);
  gap: 0;
}
.nav-item { height: 100%; position: relative; }
.nav-link {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 16px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  transition: color 0.2s;
  white-space: nowrap;
}
.nav-item::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 3px;
  background: var(--item-color, var(--red));
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.nav-item:hover .nav-link,
.nav-item.active .nav-link { color: var(--white); opacity: 0.85; }
.nav-item:hover::after,
.nav-item.active::after { transform: scaleX(1); }

/* Newsletter nav button */
.nav-item-newsletter { align-self: center; height: auto; margin-left: 8px; }
.nav-link-newsletter {
  background: var(--red);
  border-radius: var(--radius) var(--radius) 0 0;
  height: auto;
  padding: 6px 14px;
  font-size: 12px;
}
.nav-link-newsletter:hover { background: var(--red-dark); opacity: 1; }
.nav-item-newsletter::after { display: none; }

/* Overflow Menu — ··· kebab dropdown ("Explore More" flyout) */
.nav-overflow { position: relative; height: 100%; display: flex; align-items: center; }
.overflow-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--nav-h);
  padding: 0 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--white);
  transition: color 0.2s;
}
.overflow-btn span { display: inline-block; transform: translateY(-2px); }
.overflow-btn:hover,
.overflow-btn:focus-visible { color: var(--red); outline: none; }
.nav-overflow::after { display: none; }
.overflow-dropdown {
  /* Dark chrome — sibling treatment to .hero-secondary-header (LATEST NEWS bar)
     and .news-ticker: var(--black) bg, white text, red accent. Sharp corners. */
  position: absolute;
  top: 100%; right: 0;
  background: var(--black);
  border: 1px solid #1A1A1A;
  min-width: 240px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  /* z-index 1001 sits above .news-ticker (auto, body root context) even if
     a transformed/will-change descendant of the ticker creates its own
     stacking context. The header is sticky at z-index 1000, so 1001 inside
     also keeps us above any sibling header decoration. */
  z-index: 1001;
}
.nav-overflow:hover .overflow-dropdown,
.nav-overflow:focus-within .overflow-dropdown,
.nav-overflow.open .overflow-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.overflow-eyebrow {
  /* Matches .latest-news-label treatment (mono 12px / 0.2em / 700) but in red.
     border-bottom mirrors .site-header's 3px var(--red) underline so the
     dropdown reads as a mini-nav header echoing the main nav. */
  display: block;
  padding: 10px 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  border-bottom: 3px solid var(--red);
}
.overflow-list { padding: 4px 0 8px; list-style: none; margin: 0; }
.overflow-list li a {
  display: block;
  padding: 11px 18px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  text-decoration: none;
  transition: color 0.15s;
}
.overflow-list li a:hover,
.overflow-list li a:focus-visible {
  color: var(--red);
  background: transparent;
  outline: none;
}

/* Header Actions */
/* margin-left is 0 (was `auto`). The search button's auto margins now absorb the
   bar's free space; leaving an auto here too would have made the split 1:2 in
   favour of the right-hand side instead of even. */
.header-actions { display: flex; align-items: center; gap: 12px; margin-left: 0; flex-shrink: 0; }
/* Search is a flex item of .header-inner (see header.php). Two auto margins =
   flex distributes the bar's free space equally either side, so the icon stays
   optically centred in the kebab-to-buttons channel at EVERY width rather than
   at one design width. Overridden in the header-collapse block, where the nav is
   hidden and the icon should pack against the hamburger instead. */
.search-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--white); transition: color 0.2s; margin-left: auto; margin-right: auto; flex-shrink: 0; }
.search-btn:hover { color: var(--red); }

/* SUBSCRIBE + ADVERTISE share one typography rule ON PURPOSE.
   Both buttons must read as the same control at different weights, so
   font-family / size / letter-spacing / case are declared ONCE here rather than
   duplicated. Editing this rule moves both; that is the intent — do not split it
   back apart to restyle one of them.
   NOTE: font-weight is deliberately absent. Both are <a> elements inheriting
   body's `font-weight: 300` (main.css:54), which is what SUBSCRIBE has always
   computed to. Declaring it here would be retyping an inherited value. */
.subscribe-btn,
.advertise-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}
.subscribe-btn {
  background: var(--red);
  padding: 9px 18px;
  border-radius: var(--radius) var(--radius) 0 0;
  transition: background 0.2s;
}
.subscribe-btn:hover { background: var(--red-dark); }

/* ADVERTISE — DIMENSIONALLY IDENTICAL TO SUBSCRIBE. Only the fill differs.
   Same 36px height, same 109px rendered width, same -3px overhang top and bottom
   against the 30px bar, so it full-bleeds to the red rule exactly as SUBSCRIBE
   does, and the same `var(--radius) var(--radius) 0 0` rounding.

   >>> THE PADDING IS NOT A TYPO. 8px 17px against SUBSCRIBE's 9px 18px. <<<
   box-sizing is border-box (main.css:48), so the 1px border is INSIDE the box and
   eats from the same budget as the padding. Matching SUBSCRIBE's padding verbatim
   would produce a 38px x 111px button — 2px larger on both axes, which reads as a
   misalignment rather than a variant. One px comes off each side to pay for the
   border:
     height 1 + 8 + 18 (11px/1.6 content) + 8 + 1 = 36   == SUBSCRIBE
     width  1 + 17 + 73 (9 chars, DM Mono) + 17 + 1 = 109 == SUBSCRIBE
   The width equality holds because both labels are 9 characters and DM Mono is
   monospaced — it is a measured fact, not a coincidence to rely on blindly. If
   either label is ever re-worded to a different length, the widths WILL diverge
   and the horizontal padding is no longer the thing to adjust.
   All four borders are kept; there is no border-bottom:none variant. */
.advertise-btn {
  background: transparent;
  border: 1px solid var(--red);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 8px 17px;
  transition: background 0.2s;
}
.advertise-btn:hover { background: var(--red); color: var(--white); }
/* Focus-visible must NOT look like hover — hover fills red, so focus keeps the
   transparent field and adds an offset white ring instead. A keyboard user landing
   on the button sees something hover never produces. */
.advertise-btn:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
  background: transparent;
}
.mobile-menu-btn { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.mobile-menu-btn span { display: block; width: 22px; height: 2px; background: var(--white); transition: all 0.2s; }

/* Search Bar */
.header-search { display: none; border-top: 1px solid #333; background: #111; }
.header-search.open { display: block; }
.search-inner { max-width: var(--max-w); margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 12px; }
.search-inner .search-form { flex: 1; display: flex; }
.search-inner .search-field {
  flex: 1;
  padding: 10px 16px;
  border: 1.5px solid #444;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 15px;
  background: #222;
  color: var(--white);
  outline: none;
  transition: border-color 0.2s;
}
.search-inner .search-field:focus { border-color: var(--red); }
.search-inner .search-field::placeholder { color: #666; }
.search-inner .search-submit {
  padding: 10px 20px;
  background: var(--red);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  margin-left: 8px;
}
.search-close { color: var(--white); font-size: 18px; padding: 4px 8px; }

/* ── Mobile Menu ─────────────────────────────────────────────────────────── */
.mobile-menu {
  position: fixed;
  top: 0; right: -100%;
  width: min(360px, 90vw);
  height: 100vh;
  background: var(--black);
  z-index: 2000;
  transition: right 0.3s ease;
  overflow-y: auto;
}
.mobile-menu.open { right: 0; }
.mobile-menu-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1999; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.mobile-menu-overlay.open { opacity: 1; pointer-events: auto; }
.mobile-menu-inner { padding: 24px; }
.mobile-menu-close { color: var(--white); font-size: 20px; margin-bottom: 32px; display: block; }
.mobile-nav-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: #888888; margin-bottom: 12px; }
.mobile-nav-list li a {
  display: block;
  padding: 12px 0;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  border-bottom: 1px solid #1A1A1A;
  transition: color 0.2s;
}
.mobile-nav-list li a:hover { color: var(--red); }
/* Shared typography for the two mobile CTAs, same reasoning as the desktop pair. */
.mobile-subscribe-btn,
.mobile-advertise-btn {
  display: block;
  padding: 14px 24px;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}
.mobile-subscribe-btn {
  margin-top: 12px;
  background: var(--red);
  border-radius: var(--radius);
}
/* Secondary treatment mirrors the desktop ADVERTISE: red hairline, transparent
   field, squared corners. It carries the 32px top margin that used to sit on
   .mobile-subscribe-btn, so the gap below the nav list is unchanged and the two
   CTAs stack 12px apart.
   ADVERTISE is FIRST here to match the desktop tab order (search -> ADVERTISE ->
   SUBSCRIBE); the mobile menu has no search field, so it starts at ADVERTISE. */
/* Padding is 13px 23px against .mobile-subscribe-btn's 14px 24px, for exactly the
   reason the desktop pair carries 8px 17px vs 9px 18px: border-box puts the 1px
   border inside the box, so without the compensation this button would stack 2px
   taller than the filled one directly below it. These two are full-width blocks,
   so only the height mismatch would have been visible — but it would have been,
   and the fix costs nothing. This rule does NOT inherit from the desktop button;
   it is a separate declaration that happens to need the same correction. */
.mobile-advertise-btn {
  margin-top: 32px;
  padding: 13px 23px;
  background: transparent;
  border: 1px solid var(--red);
  border-radius: var(--radius);
  transition: background 0.2s;
}
.mobile-advertise-btn:hover { background: var(--red); color: var(--white); }
.mobile-advertise-btn:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
  background: transparent;
}

/* ── Category Tag ────────────────────────────────────────────────────────── */
.cat-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cat-color, var(--red));
  margin-bottom: 8px;
  transition: opacity 0.2s;
}
.cat-tag:hover { opacity: 0.75; }

/* ── News Ticker ─────────────────────────────────────────────────────────── */
.news-ticker {
  background: var(--black);
  overflow: hidden;
  display: flex;
  align-items: center;
  height: auto;
  padding: 8px 0;
  border-bottom: 1px solid #1A1A1A;
}
.ticker-label {
  flex-shrink: 0;
  padding: 0 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--red);
  align-self: stretch;
  display: flex;
  align-items: center;
  min-height: 28px;
}
.ticker-track { flex: 1; overflow: hidden; position: relative; }
.ticker-items {
  display: flex;
  gap: 0;
  animation: ticker-scroll 45s linear infinite;
  white-space: nowrap;
  will-change: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
}
@keyframes ticker-scroll {
  from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  to   { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
}
.ticker-item {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--white);
  transition: color 0.2s;
  white-space: nowrap;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.ticker-item:hover { color: var(--red); }
.ticker-type { color: var(--red); font-size: 11px; letter-spacing: 0.15em; }
.ticker-dot { color: #555; margin: 0 6px; }
.ticker-spacer { color: #333; padding: 0 20px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; }

/* ── Hero Section ────────────────────────────────────────────────────────── */
.hero-section {
  padding: 0;
  margin-top: 16px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 0;
  min-height: 520px;
}

/* Hero Main */
.hero-main { position: relative; overflow: hidden; border-right: 1px solid var(--border); }
.hero-main-img-wrap { display: block; width: 100%; height: 380px; overflow: hidden; position: relative; }
.hero-main-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.hero-main:hover .hero-main-img { transform: scale(1.02); }
.hero-main-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 160px; background: linear-gradient(to top, rgba(10,10,10,0.7), transparent); pointer-events: none; }
.hero-main-content { padding: 20px 24px 24px; }
.hero-main-title {
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: clamp(42px, 4.5vw, 56px);
  letter-spacing: 0.02em;
  color: var(--black);
  line-height: 1.05;
  margin-bottom: 12px;
}
.hero-main-title a { color: inherit; transition: color 0.2s; }
.hero-main-title a:hover { color: var(--red); }
.hero-main-excerpt { font-size: 16px; font-weight: 300; color: var(--text-dim); line-height: 1.65; margin-bottom: 14px; }
.hero-meta { display: flex; gap: 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--dim); }

/* Hero Secondary */
.hero-secondary { display: flex; flex-direction: column; }
.hero-secondary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--black);
  flex-shrink: 0;
}
.latest-news-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
  font-weight: 700;
}
.see-all-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  transition: opacity 0.2s;
}
.see-all-link:hover { opacity: 0.75; }
.hero-secondary-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.hero-secondary-item:last-child { border-bottom: none; }
.hero-secondary-item:hover { background: var(--card-bg); }
.hero-secondary-thumb {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: var(--radius);
  display: block;
}
.hero-secondary-thumb img,
.hero-secondary-thumb-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  transition: transform 0.3s;
}
.hero-secondary-item:hover .hero-secondary-thumb img,
.hero-secondary-item:hover .hero-secondary-thumb-img { transform: scale(1.05); }
.hero-secondary-content { flex: 1; min-width: 0; }
.hero-secondary-title {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-secondary-title a { color: var(--black); transition: color 0.2s; }
.hero-secondary-title a:hover { color: var(--red); }
.hero-secondary-date { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--dim); }

/* ── Story Type Sections ─────────────────────────────────────────────────── */
.story-type-section { padding: 32px 0; border-bottom: 1px solid var(--border); background: var(--white); }
.story-type-section:last-child { border-bottom: none; }
.story-type-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.story-type-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--black);
}
.story-type-title { font-family: var(--font-body); font-size: 20px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--black); }
.story-type-more { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); transition: opacity 0.2s; }
.story-type-more:hover { opacity: 0.75; }
.story-type-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.story-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s, transform 0.2s;
}
.story-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.story-card-img-wrap { display: block; aspect-ratio: 16/9; overflow: hidden; width: 100%; background: var(--card-bg); }
.story-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.story-card:hover .story-card-img { transform: scale(1.04); }
.story-card-content { padding: 12px; flex: 1; display: flex; flex-direction: column; }
.story-card-title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--black);
  margin-bottom: 8px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.story-card-title a { color: inherit; transition: color 0.2s; }
.story-card-title a:hover { color: var(--red); }
.story-card-meta { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.story-card-author { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--dim); }
.story-card-date { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--dim); }

/* ── Category Row (legacy) ───────────────────────────────────────────────── */
.category-row { padding: 40px 0; border-bottom: 1px solid var(--border); }
.category-row-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.category-row-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.category-row-left { display: flex; flex-direction: column; gap: 4px; }
.category-row-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 500; }
.category-row-title { font-family: var(--font-display); font-size: 28px; letter-spacing: 0.02em; color: var(--black); line-height: 1; }
.category-row-more { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; transition: opacity 0.2s; }
.category-row-more:hover { opacity: 0.7; }
.category-row-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--gap); }

/* ── Story Cards (legacy category rows) ─────────────────────────────────── */
.cat-card { display: flex; flex-direction: column; }
.cat-card-img-wrap { display: block; overflow: hidden; border-radius: var(--radius); margin-bottom: 12px; aspect-ratio: 16/9; background: var(--card-bg); }
.cat-card-lead .cat-card-img-wrap { aspect-ratio: 16/9; }
.cat-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.cat-card:hover .cat-card-img { transform: scale(1.04); }
.cat-card-content { flex: 1; }
.cat-card-title { font-family: var(--font-headline); font-weight: 800; font-size: 19px; letter-spacing: 0.02em; line-height: 1.1; margin-bottom: 8px; }
.cat-card-lead .cat-card-title { font-size: 24px; }
.cat-card-small .cat-card-title { font-size: 16px; }
.cat-card-title a { color: var(--black); transition: color 0.2s; }
.cat-card-title a:hover { color: var(--red); }
.cat-card-excerpt { font-size: 16px; font-weight: 300; color: var(--text-dim); line-height: 1.6; margin-bottom: 10px; }
.cat-card-meta, .cat-card-date { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--dim); display: flex; gap: 12px; }

/* ── Subscribe Form ──────────────────────────────────────────────────────── */
.sub-form { display: flex; flex-direction: column; gap: 10px; }
.sub-input { width: 100%; padding: 13px 16px; font-family: var(--font-body); font-size: 15px; font-weight: 300; border: 1.5px solid #333; border-radius: var(--radius); background: #111; color: var(--white); outline: none; transition: border-color 0.2s; }
.sub-input:focus { border-color: var(--red); }
.sub-input::placeholder { color: #555; }
.sub-btn { width: 100%; padding: 13px 24px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); background: var(--red); border: none; border-radius: var(--radius); cursor: pointer; transition: background 0.2s; }
.sub-btn:hover { background: var(--red-dark); }
.sub-btn:disabled { background: #555; cursor: default; }
.sub-msg { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; margin-top: 6px; min-height: 16px; }
.sub-msg.success { color: #3ECF8E; }
.sub-msg.error   { color: var(--red); }

.sidebar-newsletter .sub-input, .archive-sidebar .sub-input { background: var(--white); color: var(--black); border-color: var(--border); }
.sidebar-newsletter .sub-input::placeholder, .archive-sidebar .sub-input::placeholder { color: var(--dim); }

/* ── Newsletter Strip ────────────────────────────────────────────────────── */
.newsletter-strip { background: #FFFFFF; border: 2px solid var(--red); max-width: 680px; margin: 0 auto 48px; padding: 36px 40px; border-radius: 0; }
.newsletter-strip-inner { display: flex; flex-direction: column; align-items: center; width: 100%; }
.newsletter-strip-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
.newsletter-strip-title { font-family: var(--font-display); font-size: 32px; letter-spacing: 0.05em; color: #0A0A0A; text-align: center; margin-bottom: 8px; }
.newsletter-strip-desc { font-family: var(--font-body); font-size: 15px; font-weight: 300; color: #4A4A4A; line-height: 1.6; text-align: center; margin-bottom: 24px; }
.newsletter-strip .sub-form { width: 100%; display: flex; flex-direction: column; gap: 0; }
.newsletter-strip .sub-input { background: #FFFFFF; color: #0A0A0A; border: 1px solid #CCCCCC; padding: 12px 16px; font-family: var(--font-body); font-size: 14px; font-weight: 300; border-radius: 0; margin-bottom: 12px; }
.newsletter-strip .sub-input::placeholder { color: #AAAAAA; }
.newsletter-strip .sub-input:focus { border-color: var(--red); }
.newsletter-strip .sub-btn { border-radius: 0; padding: 14px; font-size: 12px; letter-spacing: 0.15em; }

/* ── Site Footer ─────────────────────────────────────────────────────────── */
.site-footer { background: var(--black); }
.footer-inner { max-width: var(--max-w); margin: 0 auto; padding: 48px 24px; display: grid; grid-template-columns: 280px 1fr; gap: 48px; border-bottom: 1px solid #1A1A1A; }
.footer-logo { font-family: var(--font-display); font-size: 22px; letter-spacing: 0.06em; color: var(--white); display: inline-block; margin-bottom: 12px; }
.footer-tagline { font-size: 14px; font-weight: 300; color: var(--white); line-height: 1.6; margin-bottom: 20px; }
.footer-socials { display: flex; gap: 12px; }
.footer-social { color: rgba(255,255,255,0.6); width: 32px; height: 32px; border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.footer-social:hover { color: var(--white); border-color: rgba(255,255,255,0.5); }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.footer-col-title { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white); margin-bottom: 16px; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.8); transition: color 0.2s; }
.footer-links a:hover { color: var(--white); }
.footer-bottom { background: var(--black); border-top: 1px solid #111; }
.footer-bottom-inner { max-width: var(--max-w); margin: 0 auto; padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; }
.footer-copy, .footer-legal { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; color: rgba(255,255,255,0.6); }
.footer-social-row { max-width: var(--max-w); margin: 0 auto; padding: 20px 24px; display: flex; align-items: center; gap: 20px; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-social-label { color: #ffffff; font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.footer-social-icons { display: flex; gap: 20px; align-items: center; }
.footer-social-icons a { color: #ffffff; transition: color 0.2s ease; display: flex; align-items: center; }
.footer-social-icons a:hover { color: #E83A2F; }
.footer-social-icons svg { width: 26px; height: 26px; }

/* ── Single Post ─────────────────────────────────────────────────────────── */
.single-post-page { max-width: var(--max-w); margin: 0 auto; padding: 40px 24px; display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start; }
.single-post-inner { min-width: 0; } /* grid items default to min-width:auto, which props the 1fr track open to the comparison table's min-content (~600px) and overflows the viewport on phones. min-width:0 lets the overflow-x:auto table wrapper contain it instead of the whole page scrolling. */
.article-body img, .article-body iframe, .article-body pre { max-width: 100%; } /* defense-in-depth for hand-written body content; table intentionally excluded (it scrolls within its overflow-x:auto wrapper). */
.article-header { margin-bottom: 28px; }
.article-header-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.article-header-meta .cat-tag { margin-bottom: 0; vertical-align: middle; }
.article-date, .article-read-time { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: #1A1A1A; }
.article-title { font-family: var(--font-headline); font-weight: 800; font-size: clamp(32px, 4vw, 56px); letter-spacing: 0.02em; color: var(--black); line-height: 1.0; margin-bottom: 16px; }
.article-dek { font-size: 18px; font-weight: 300; color: #0A0A0A; line-height: 1.6; margin-bottom: 16px; border-left: 3px solid var(--red); padding-left: 16px; }
.article-byline { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #0A0A0A; margin-top: 12px; margin-bottom: 2px; }
.article-pub-date { font-family: var(--font-mono); font-size: 13px; color: #000000; margin-top: 4px; margin-bottom: 24px; letter-spacing: 0.05em; }
.article-hero-img { margin-bottom: 32px; border-radius: var(--radius); overflow: hidden; }
.article-hero-img-el { width: 100%; height: auto; }
.article-img-caption { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: #1A1A1A; padding: 8px 0 0; font-style: italic; }
.article-body { font-size: 17px; font-weight: 300; line-height: 1.8; color: var(--text); }
.article-body p { margin-bottom: 24px; }
.article-body h2 { font-family: var(--font-display); font-size: 28px; letter-spacing: 0.02em; margin: 32px 0 16px; }
.article-body h3 { font-family: var(--font-display); font-size: 22px; letter-spacing: 0.02em; margin: 28px 0 12px; }
.article-body a { color: var(--red); border-bottom: 1px solid rgba(232,58,47,0.3); transition: border-color 0.2s; }
.article-body a:hover { border-color: var(--red); }
.article-body blockquote { border-left: 3px solid var(--red); padding-left: 24px; margin: 28px 0; font-size: 19px; font-style: italic; color: #1A1A1A; }
.article-body ul, .article-body ol { padding-left: 24px; margin-bottom: 24px; }
.article-body li { margin-bottom: 8px; }
.article-body ul li { list-style: disc; }
.article-body ol li { list-style: decimal; }
/* ── Key Takeaways box — native Gutenberg group (markup from build_takeaways_block() in rewire_publisher.py); reproduces the old inline-styled box look ── */
.article-body .rewire-takeaways { background: #f8f8f8; border-left: 4px solid #E83A2F; padding: 16px 20px; margin: 24px 0; font-size: 15px; line-height: 1.6; }
.article-body .rewire-takeaways h4 { font-family: var(--font-body); font-weight: 700; font-size: 15px; margin: 0 0 10px 0; letter-spacing: 0; }
.article-body .rewire-takeaways ul { margin: 0; padding-left: 18px; list-style: disc; }
.article-body .rewire-takeaways li { margin-bottom: 6px; list-style: disc; }
.article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }
.article-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #1A1A1A; border: 1px solid var(--border); padding: 4px 10px; border-radius: 2px; transition: all 0.2s; }
.article-tag:hover { color: var(--black); border-color: var(--black); }
.related-posts { margin-top: 48px; padding-top: 32px; border-top: 3px solid var(--border); }
.related-posts-header { margin-bottom: 24px; }
.related-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; display: block; margin-bottom: 4px; }
.related-title { font-family: var(--font-headline); font-weight: 800; font-size: 24px; letter-spacing: 0.02em; color: var(--black); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.single-sidebar { position: sticky; top: calc(var(--nav-h) + 20px); }
.sidebar-newsletter { background: var(--black); padding: 24px; margin-bottom: 32px; }
.sidebar-newsletter-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
.sidebar-newsletter-title { font-family: var(--font-display); font-size: 22px; letter-spacing: 0.04em; color: var(--white); margin-bottom: 8px; }
.sidebar-newsletter-desc { font-size: 13px; font-weight: 300; color: #CCCCCC; line-height: 1.6; margin-bottom: 16px; }
.sidebar-section { margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
.sidebar-section-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; margin-bottom: 14px; }
.sidebar-story { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.sidebar-story:last-of-type { border-bottom: none; }
.sidebar-story-title { font-family: var(--font-headline); font-weight: 800; font-size: 16px; letter-spacing: 0.02em; color: var(--black); line-height: 1.2; display: block; margin-bottom: 4px; transition: color 0.2s; }
.sidebar-story-title:hover { color: var(--red); }
.sidebar-story-date { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: #1A1A1A; }
.sidebar-more { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; display: inline-block; margin-top: 8px; transition: opacity 0.2s; }
.sidebar-more:hover { opacity: 0.7; }

/* ── Archive Page ────────────────────────────────────────────────────────── */
.archive-header { background: var(--black); padding: 48px 24px 40px; border-bottom: 3px solid var(--arch-color, var(--red)); }
.archive-header-inner { max-width: var(--max-w); margin: 0 auto; }
.archive-header-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 8px; color: var(--white); }
.archive-header-title { font-family: var(--font-display); font-size: clamp(48px, 7vw, 88px); letter-spacing: 0.02em; color: var(--white); line-height: 0.95; margin-bottom: 12px; }
.archive-header-desc { font-size: 16px; font-weight: 300; color: #CCCCCC; max-width: 520px; line-height: 1.6; }
.archive-body { max-width: var(--max-w); margin: 0 auto; padding: 32px 24px; display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start; }
.archive-lead { display: grid; grid-column: 1 / -1; margin-bottom: 32px; }
.archive-lead-img-wrap { width: 100%; aspect-ratio: 16/7; overflow: hidden; border-radius: var(--radius); margin-bottom: 16px; }
.archive-lead-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s; }
.archive-lead:hover .archive-lead-img { transform: scale(1.02); }
.archive-lead-title { font-family: var(--font-headline); font-weight: 800; font-size: 40px; letter-spacing: 0.02em; color: var(--black); line-height: 1.05; margin-bottom: 12px; }
.archive-lead-title a { color: inherit; transition: color 0.2s; }
.archive-lead-title a:hover { color: var(--red); }
.archive-lead-excerpt { font-size: 16px; font-weight: 300; color: var(--text-dim); margin-bottom: 12px; }
.archive-lead-meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--dim); display: flex; gap: 16px; }
.archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.archive-pagination { grid-column: 1 / -1; display: flex; justify-content: center; gap: 8px; padding-top: 32px; }
.archive-pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.archive-pagination a, .archive-pagination span { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; padding: 8px 14px; border: 1px solid var(--border); color: var(--text-dim); transition: all 0.2s; }
.archive-pagination a:hover { color: var(--white); background: var(--red); border-color: var(--red); }
.archive-pagination .current { color: var(--white); background: var(--black); border-color: var(--black); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-secondary { flex-direction: row; flex-wrap: wrap; border-top: 1px solid var(--border); }
  .hero-secondary-item { width: 50%; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .story-type-grid { grid-template-columns: repeat(3, 1fr); }
  .category-row-grid { grid-template-columns: 1fr 1fr; }
  .newsletter-strip-inner { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .single-post-page { grid-template-columns: 1fr; }
  .single-sidebar { position: static; }
  .archive-body { grid-template-columns: 1fr; }
  .archive-sidebar { display: none; }
  .archive-grid { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ── Header collapse ──────────────────────────────────────────────────────────
   These five rules USED TO LIVE IN THE 768px BLOCK BELOW, and that was a bug.
   The desktop bar has a hard min-content width — it cannot shrink, because
   .nav-link uses white-space:nowrap and .header-actions is flex-shrink:0 — so
   below that width it simply spilled past .header-inner and pushed real
   horizontal scroll onto the whole document.

   MEASURED ON THE LIVE SITE (2026-08-20, before this change): the bar needed
   1035px but only collapsed at 768px, so every width from 769px to 1035px was
   broken. At 1024px SUBSCRIBE was clipped by 11px; at 900px it was 135px off
   screen and the search icon was cut in half. That band covers the iPad
   landscape class of device. It was NOT introduced by the ADVERTISE button —
   it has been shipping — but ADVERTISE widens the requirement to ~1174px, which
   would have stretched the broken band to 769-1174px instead of fixing it.

   1200px is MEASURED, not guessed. With ADVERTISE in place the bar's min-content
   width is 1174px (verified in a real browser against the live stylesheets). A
   1180px breakpoint was tried first and left only 7px of clearance at 1181px —
   positive, but inside the range that font-loading and rounding variance can move,
   so it would have failed intermittently on some machines and not others. 1200px
   gives ~26px of cushion at the first desktop width.
   Re-measure and raise this if a nav item is ever added or a label lengthens; the
   failure is silent and reads as "the header looks a bit tight", not as an error. */
@media (max-width: 1200px) {
  .primary-nav { display: none; }
  .subscribe-btn { display: none; }
  .advertise-btn { display: none; }
  .mobile-menu-btn { display: flex; }
  /* Nav is hidden here, so there is no channel to centre in. Keep the left auto
     (pushes search across from the logo) and drop the right one so the icon packs
     against the hamburger. .header-inner's gap then supplies the separation —
     set to 12px to reproduce exactly what .header-actions' own gap gave when the
     button still lived inside it, so mobile spacing is unchanged by the move. */
  .search-btn { margin-left: auto; margin-right: 0; }
  .header-inner { gap: 12px; }
}
@media (max-width: 768px) {
  .top-bar { display: none; }
  .header-tagline-bar { display: none; }
  .news-ticker { display: none !important; }
  /* Article H2s use a fixed 28px (base rule) with no mobile override, so they
     inherit into phone widths and wrap to multiple lines. Scope a smaller size
     to article-body headings only -- nav/section/hero headings use other
     classes and are unaffected. Desktop rule is unchanged. */
  .article-body h2 { font-size: 23px; line-height: 1.3; }
  /* Lead hero: scale down the oversized image + headline on phones (purely
     sizing; no position/sticky changes). Title stays the largest text on
     the page (story-type titles are 20px) but no longer overwhelms. */
  .hero-main-img-wrap { height: 200px; }
  .hero-main-title { font-size: 30px; }
  .story-type-grid { grid-template-columns: repeat(2, 1fr); }
  /* Story-type sections query 5 posts; at 2-per-row that orphans a 5th card
     on a third row. Hide the 5th+ on mobile for a clean 2x2 (desktop keeps
     all 5 via the unchanged WP_Query). Cards are direct children of the grid. */
  .story-type-grid > .story-card:nth-child(n+5) { display: none; }
  .category-row-grid { grid-template-columns: 1fr; }
  .category-row-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hero-secondary { flex-direction: column; }
  .hero-secondary-item { width: 100%; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .archive-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  /* Homepage story-type grids: hold a 2-up layout on the smallest phones
     instead of collapsing to a single column of full-width image tiles
     (the old `grid-template-columns: 1fr`). Tighten the section gutters and
     card internals so two cards sit cleanly side-by-side without crowding. */
  .story-type-inner { padding: 0 16px; }
  .story-type-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .story-card-content { padding: 10px; }
  .story-card-title { font-size: 13px; line-height: 1.3; margin-bottom: 6px; }
  .story-card-meta { margin-top: 6px; }
  /* Trim the lead hero a touch further on the smallest phones. */
  .hero-main-img-wrap { height: 170px; }
  .hero-main-title { font-size: 26px; }
  /* Article H2s: one more step down on the smallest phones (line-height carries
     over from the 768px block above). */
  .article-body h2 { font-size: 21px; }
  .footer-cols { grid-template-columns: 1fr; }
  .footer-bottom-inner { flex-direction: column; gap: 8px; text-align: center; }
  .header-inner { gap: 16px; }
}

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .site-header, .news-ticker, .newsletter-strip, .site-footer { display: none; }
}

/* ── WordPress Core Overrides ────────────────────────────────────────────── */
.wp-block-image img { border-radius: var(--radius); }
.alignwide { margin-left: -24px; margin-right: -24px; }
.alignfull { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); max-width: 100vw; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ── Author Page ─────────────────────────────────────────────────────────── */
.author-header { background: var(--black); padding: 48px 24px 40px; border-bottom: 2px solid var(--red); }
.author-header-inner { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; gap: 32px; }
.author-header-text { flex: 1; min-width: 0; }
.author-avatar-img { width: 96px !important; height: 96px !important; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.15); display: block; }
.author-role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); margin-bottom: 12px; }
.author-name { font-family: var(--font-display); font-size: 48px; letter-spacing: 0.02em; color: var(--white); line-height: 1; margin-bottom: 16px; }
.author-bio { font-family: var(--font-body); font-size: 16px; font-weight: 300; color: #CCCCCC; max-width: 600px; line-height: 1.7; }
.author-posts { max-width: var(--max-w); margin: 0 auto; padding: 40px 24px; background: var(--white); }
.author-posts-header { font-family: var(--font-display); font-size: 22px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--black); border-left: 4px solid var(--red); padding-left: 16px; margin-bottom: 32px; line-height: 1; }
.author-post-item { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid #ebebeb; align-items: center; }
.author-post-item:last-child { border-bottom: none; }
.author-post-thumb { flex-shrink: 0; width: 120px; height: 80px; overflow: hidden; border-radius: var(--radius); display: block; }
.author-post-thumb img,
.author-post-thumb-img { width: 120px; height: 80px; object-fit: cover; transition: transform 0.3s; }
.author-post-item:hover .author-post-thumb img,
.author-post-item:hover .author-post-thumb-img { transform: scale(1.04); }
.author-post-content { flex: 1; min-width: 0; }
.author-post-title { font-family: var(--font-body); font-size: 17px; font-weight: 700; color: var(--black); line-height: 1.3; margin: 6px 0 8px; }
.author-post-title a { color: inherit; transition: color 0.2s; }
.author-post-title a:hover { color: var(--red); }
.author-post-date { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: #000000; }
.author-post-excerpt { font-size: 14px; font-weight: 400; font-style: normal; color: #000000; line-height: 1.5; margin: 0 0 4px; }
.author-no-posts { font-family: var(--font-body); font-size: 16px; color: var(--text-dim); padding: 24px 0; }
@media (max-width: 768px) {
  .author-name { font-size: 36px; }
  .author-post-thumb { width: 90px; height: 64px; }
  .author-post-thumb img, .author-post-thumb-img { width: 90px; height: 64px; }
}


/* Restore native bold for <strong> and <b> in post body content */
.article-body strong,
.article-body b {
  font-weight: 700;
}


/* STR Essentials story type */
.story-type-tag.story-type-str-essentials,
.story-type-badge.story-type-str-essentials,
[data-story-type="STR Essentials"] .story-type-tag,
.post-story-type-str-essentials .story-type-tag {
    background-color: #F97316;
    color: #ffffff;
}
.archive-story-type-str-essentials .archive-header-accent,
.story-type-str-essentials-accent {
    border-color: #F97316;
    color: #F97316;
}