/* Base Layout */
.wsj-style {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.5rem;
  font-family: Georgia, serif;
  line-height: 1.6;
  color: #111;
}

/* Ticker Bar */
.wsj-ticker {
  background: #bd0f2b;
  color: white;
  padding: 0.75rem 1rem;
  font-weight: bold;
  font-family: Helvetica, sans-serif;
  font-size: 14px;
  margin-bottom: 1.5rem;
}


/* Two-Column Section */
.wsj-two-columns {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

/* Left Column A */
.wsj-col-a .wsj-block {
  margin-bottom: 2rem;
}

.wsj-col-a .wsj-block img {
  width: 100%;
  height: auto;
  margin-bottom: 0.5rem;
}

.wsj-col-a h2 {
  font-size: 1.25rem;
  margin: 0.5rem 0;
}

/* Right Column B */
.wsj-col-b {
  border-left: 1px solid #ccc;
  padding-left: 1rem;
}

.wsj-col-b h3 {
  font-family: Helvetica, sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 1rem 0 0.5rem;
  border-bottom: 1px solid #ddd;
  padding-bottom: 0.25rem;
}

.wsj-col-b ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1rem;
}

.wsj-col-b li {
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}

/* Feature Grid */
.wsj-feature-grid {
  margin-top: 2rem;
}

.wsj-feature-grid h3 {
  margin-bottom: 1rem;
  font-family: Helvetica, sans-serif;
  font-size: 1.2rem;
  border-bottom: 2px solid #000;
  padding-bottom: 0.25rem;
}

.wsj-feature-grid .wsj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.wsj-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  margin-bottom: 0.5rem;
}

.wsj-card h4 {
  font-size: 1rem;
  margin: 0;
  line-height: 1.3;
}

/* Responsive */
@media screen and (max-width: 960px) {
  .wsj-two-columns {
    grid-template-columns: 1fr;
  }
  .wsj-col-b {
    border-left: none;
    padding-left: 0;
  }
}

/* === HERO SECTION CLEAN === */

.wsj-hero {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 2rem auto;
}

.hero-featured-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}

.wsj-hero-content {
  padding-top: 1rem;
}

.wsj-hero-content h1 {
  font-size: 2rem;
  margin: 0.5rem 0;
  line-height: 1.2;
}

.wsj-opinion-thumb img {
  width: 80px;
  height: auto;
  margin-bottom: 0.5rem;
  float: left;
  margin-right: 1rem;
}

.wsj-interviews-thumb img {
  width: 80px;
  height: auto;
  margin-bottom: 0.5rem;
  float: left;
  margin-right: 1rem;
}

.post-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}


img.attachment-archive-thumb {
  height: auto !important;
  width: 100% !important;
  object-fit: cover !important;
  display: block !important;
  max-width: 100% !important;
  aspect-ratio: 3 / 2 !important;
}



img[sizes="auto"],
img[sizes^="auto"] {
    contain-intrinsic-size: auto !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    max-width: 100% !important;
    display: block;
}

img.custom-archive-thumb {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  max-width: 100%;
}



body.single-post .entry-content figure.wp-block-image,
body.single-post .entry-content figure.wp-block-image img {
  margin-bottom: 20px !important;
  display: block !important;
}



.frontpage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  grid-auto-rows: 1fr;
}

# Keep this frontpage-box styling
.frontpage-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
}

.frontpage-box ul li a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wsj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;

  /* 🔥 Fix the layout */
  align-items: start;
  grid-auto-rows: 1fr;
}


.wsj-box {
  background: rgba(255, 0, 0, 0.05);
}

.section-title {
  position: relative;
  margin: 0 0 0.7em 0;
  font-size: 1.3em;
  line-height: 1.2;
}

.section-title-link-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-indent: -9999px;
}

.featured-image-link {
  display: block;
}

.featured-image-link img {
  width: 100%;
  height: auto;
  display: block;
}

.post-navigation {
  display: none;
}

.single-post .entry-content p:first-of-type {
  font-size: 1.4em;
  line-height: 1.6;
  margin-bottom: 1em;
}

/* Newspaper-style headlines: no underline, no color shift */
.wsj-style h1 > a,
.wsj-style h2 > a,
.wsj-style h3 > a,
.wsj-style h4 > a,
.wsj-style a > h1,
.wsj-style a > h2,
.wsj-style a > h3,
.wsj-style a > h4,
.wsj-style .wsj-card-title > a,
.wsj-style .wsj-grid-section h1 > a,
.wsj-style .wsj-grid-section h2 > a,
.wsj-style .wsj-grid-section h3 > a,
.wsj-style .wsj-grid-section h4 > a,
.wsj-style .frontpage-box li.frontpage-post > a {
  text-decoration: none !important;
  color: inherit !important;
}

/* Keep the same on interaction states */
.wsj-style h1 > a:hover,
.wsj-style h2 > a:hover,
.wsj-style h3 > a:hover,
.wsj-style h4 > a:hover,
.wsj-style a:hover > h1,
.wsj-style a:hover > h2,
.wsj-style a:hover > h3,
.wsj-style a:hover > h4,
.wsj-style h1 > a:focus,
.wsj-style h2 > a:focus,
.wsj-style h3 > a:focus,
.wsj-style h4 > a:focus,
.wsj-style a:focus > h1,
.wsj-style a:focus > h2,
.wsj-style a:focus > h3,
.wsj-style a:focus > h4,
.wsj-style h1 > a:visited,
.wsj-style h2 > a:visited,
.wsj-style h3 > a:visited,
.wsj-style h4 > a:visited,
.wsj-style a:visited > h1,
.wsj-style a:visited > h2,
.wsj-style a:visited > h3,
.wsj-style a:visited > h4,
.wsj-style .wsj-card-title > a:hover,
.wsj-style .wsj-card-title > a:focus,
.wsj-style .wsj-card-title > a:visited {
  text-decoration: none !important;
  color: inherit !important;
}

/* In Brief: make list titles look like newspaper headlines */
.wsj-style .wsj-briefs li > a {
  text-decoration: none !important;
  color: inherit !important;
}
.wsj-style .wsj-briefs li > a:hover,
.wsj-style .wsj-briefs li > a:focus,
.wsj-style .wsj-briefs li > a:visited {
  text-decoration: none !important;
  color: inherit !important;
}

/* ===== WSJ-STYLE FRONT PAGE TUNE-UP ===== */
.wsj-style {
  --headline: #0a0a0a;          /* near-black */
  --text: #202124;               /* body text */
  --muted: #6b7280;              /* metadata */
  --rule: #e5e7eb;               /* section lines */
  --kicker: #374151;             /* small section label */
  --font-serif: Georgia, "Times New Roman", serif;
  --font-sans: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* 1) Typographic hierarchy (serious, compact) */
.wsj-style h1, .wsj-style h2, .wsj-style h3, .wsj-style h4 {
  font-family: var(--font-serif);
  color: var(--headline);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.15;
  margin: 0 0 .4rem;
}

/* Lead + secondary + grid */
.wsj-style h1 { font-size: clamp(26px, 3vw, 32px); }
.wsj-style h2 { font-size: clamp(20px, 2.2vw, 24px); }
.wsj-style h3 { font-size: clamp(18px, 2vw, 20px); }
.wsj-style h4 { font-size: 16px; }

.wsj-style p,
.wsj-style .excerpt,
.wsj-style .deck {
  font-family: var(--font-sans);
  color: var(--text);
  line-height: 1.45;
  margin: 0 0 .6rem;
}

/* Metadata (author, time) muted and compact */
.wsj-style .byline,
.wsj-style .meta,
.wsj-style time {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.2;
  margin-bottom: .4rem;
}

/* 2) Headlines as links (already mostly fixed) — keep neutral on interaction */
.wsj-style h1 a,
.wsj-style h2 a,
.wsj-style h3 a,
.wsj-style h4 a,
.wsj-style .wsj-card-title > a,
.wsj-style .wsj-briefs li > a {
  text-decoration: none !important;
  color: inherit !important;
}
.wsj-style h1 a:hover,
.wsj-style h2 a:hover,
.wsj-style h3 a:hover,
.wsj-style h4 a:hover,
.wsj-style .wsj-card-title > a:hover,
.wsj-style .wsj-briefs li > a:hover { opacity: .92; }

/* 3) Denser newspaper rhythm: trim bloggy gaps */
.wsj-style .wp-block-image,
.wsj-style .card,
.wsj-style .wsj-card,
.wsj-style article { margin-bottom: 1rem; }
.wsj-style .wsj-grid-section article { margin-bottom: .8rem; }
.wsj-style .wsj-briefs li { margin: .25rem 0; }

/* 4) Section labels & dividers (WSJ vibe) */
.wsj-style .section-title,
.wsj-style .kicker,
.wsj-style .wsj-section-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--kicker);
  margin: 0 0 .5rem;
}

.wsj-style .section-header,
.wsj-style .wsj-section {
  border-top: 1px solid var(--rule);
  padding-top: .75rem;
  margin-top: 1rem;
}

/* optional thin rules between cards in lists/grids */
.wsj-style .wsj-list .wsj-card + .wsj-card { border-top: 1px solid var(--rule); padding-top: .75rem; }


/* If a small thumb is intended (e.g., briefs), switch to 4:3 automatically */
.wsj-style .wsj-briefs img,
.wsj-style .thumb img { aspect-ratio: 4 / 3; }

/* 6) Layout polish: tidy gutters and right column feel */
@media (min-width: 1000px) {
  /* If your main/aside are siblings, give them clear proportions */
  .wsj-style .wsj-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
  }
  .wsj-style .wsj-grid { gap: 16px; }
}

/* 7) Grids look tight and consistent */
.wsj-style .wsj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap: 12px;
}

/* 8) “In Brief” clean list look */
.wsj-style .wsj-briefs ul { list-style: none; padding-left: 0; margin: 0; }
.wsj-style .wsj-briefs li { border-top: 1px solid var(--rule); padding-top: .5rem; }
.wsj-style .wsj-briefs li:first-child { border-top: 0; padding-top: 0; }

/* 9) Buttons/labels minimal (e.g., category pills) */
.wsj-style .pill,
.wsj-style .cat-badge {
  display: inline-block;
  font: 600 11px/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--kicker);
  background: #f3f4f6;
  padding: 3px 6px;
  border-radius: 4px;
}

/* 10) Kill leftover underline/color in any stray heading links */
.wsj-style :is(h1,h2,h3,h4) :is(a,a:visited,a:hover,a:focus) {
  text-decoration: none !important;
  color: inherit !important;
}

/* ===== WSJ-like single article polish ===== */

/* Scope: either via the wrapper or just target single posts */
.wsj-article,
body.single-post {
  --headline: #0a0a0a;
  --text: #202124;
  --muted: #6b7280;
  --rule: #e5e7eb;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-sans: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}


/* Title and meta — serious newspaper tone */
body.single-post .entry-title {
  font-family: var(--font-serif);
  color: var(--headline);
  font-weight: 700;
  line-height: 1.15;
  font-size: clamp(28px, 4vw, 38px);
  margin: 0 0 .6rem;
}

body.single-post .entry-meta,
body.single-post .posted-on,
body.single-post .byline,
body.single-post .cat-links,
body.single-post time {
  font-family: var(--font-sans);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.2;
  margin-bottom: .8rem;
}

/* Body text */
body.single-post .entry-content {
  font-family: var(--font-sans);
  color: var(--text);
  line-height: 1.55;
  font-size: 17px;
}

/* First paragraph is already enlarged in your CSS; keep that. */
/* body.single-post .entry-content p:first-of-type { ... } remains. */

/* Subheadings inside article */
body.single-post .entry-content h2,
body.single-post .entry-content h3 {
  font-family: var(--font-serif);
  color: var(--headline);
  font-weight: 700;
  line-height: 1.2;
  margin: 1.2rem 0 .4rem;
}
body.single-post .entry-content h2 { font-size: 22px; }
body.single-post .entry-content h3 { font-size: 19px; }

/* Links in article body: neutral color, no underlines until hover */
body.single-post .entry-content a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.15);
  transition: border-color .15s ease, opacity .15s ease;
}
body.single-post .entry-content a:hover,
body.single-post .entry-content a:focus {
  border-bottom-color: rgba(0,0,0,.35);
  opacity: .96;
}

/* Featured/inline images: consistent 16:9 hero if first image; others behave normally */
body.single-post .entry-content figure.wp-block-image:first-of-type img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}
body.single-post .entry-content figure.wp-block-image {
  margin: 1rem 0;
}

/* Captions */
body.single-post .wp-element-caption,
body.single-post figcaption {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.35;
  margin-top: .3rem;
}

/* Blockquotes: understated left rule, no giant italics */
body.single-post .entry-content blockquote {
  margin: 1rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--rule);
  color: #333;
  font-style: italic;
}

/* Dividers */
body.single-post hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 1.25rem 0;
}

/* Lists spacing */
body.single-post .entry-content li { margin: .35rem 0; }

/* Remove “bloggy” nav at bottom (you already hide post-navigation on site) */
body.single-post .post-navigation { display: none !important; }

/* Keep headlines as non-underlined links site-wide (matches your front page) */
.wsj-style :is(h1,h2,h3,h4) :is(a,a:visited,a:hover,a:focus),
body.single-post .entry-title a {
  text-decoration: none !important;
  color: inherit !important;
}


/* If your theme adds a "no-sidebar" body class, this keeps sidebars unaffected later */
body.single-post.no-sidebar .inside-article { max-width: 1080px; }

/* Optional: keep line length pleasant */
body.single-post .entry-content { max-width: 78ch; margin-inline: auto; }

/* === Author box – WSJ-style, right below headline === */
body.single-post .author-box,
body.single-post .post-author,
body.single-post .byline-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 14px;
  align-items: center;
  padding: 12px 0 16px;
  border-top: 1px solid var(--rule, #e5e7eb);
  border-bottom: 1px solid var(--rule, #e5e7eb);
  margin: .6rem 0 1rem;
  font-family: var(--font-sans, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif);
  color: var(--text, #202124);
}

body.single-post .author-box img,
body.single-post .post-author img,
body.single-post .byline-card img {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover; display: block;
  background: #f3f4f6;
}

body.single-post .author-name,
body.single-post .post-author .name,
body.single-post .byline-card .name {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  color: var(--headline, #0a0a0a);
}

body.single-post .author-role,
body.single-post .byline-card .role,
body.single-post .byline-card time {
  font-size: 12px;
  color: var(--muted, #6b7280);
}

body.single-post .author-bio {
  grid-column: 1 / -1;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text, #202124);
}

body.single-post .author-box a,
body.single-post .post-author a,
body.single-post .byline-card a {
  color: inherit; text-decoration: none; border-bottom: 1px solid rgba(0,0,0,.15);
}
body.single-post .author-box a:hover,
body.single-post .post-author a:hover,
body.single-post .byline-card a:hover { border-bottom-color: rgba(0,0,0,.35); }

/* Wider single article when no sidebar */
body.single-post.no-sidebar .inside-article { max-width: 1080px; margin: 0 auto; padding: 0 18px; }
body.single-post.no-sidebar .entry-content { max-width: 78ch; margin-inline: auto; }

/* Main navigation: tighter, bolder, anchored */
.main-navigation {
  padding-top: 4px;      /* was ~20px in many GP setups */
  padding-bottom: 4px;   /* reduced from ~20px */
  border-bottom: 1px solid #e5e7eb; /* subtle anchor line */
}

/* Menu items: slightly larger and more newspaper-like */
.main-navigation .main-nav ul li a {
  font-size: 15px;   /* was ~14px */
  font-weight: 600;  /* makes section names pop */
  padding-top: 6px;  /* slightly less vertical padding inside links */
  padding-bottom: 6px;
  text-transform: uppercase;  /* optional — more "section header" feel */
  letter-spacing: 0.02em;     /* subtle spacing */
}

/* Keep hover/active states clean */
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.sfHover > a,
.main-navigation .main-nav ul li.current-menu-item > a {
  color: #000; /* or your chosen headline color */
  background: none;
}

/* Subtle WSJ-like nav strip */
.main-navigation {
  background: #f8fafc;            /* faint tint */
  border-bottom: 1px solid #e5e7eb;
  padding-top: 2px;
  padding-bottom: 2px;
}
.main-navigation .main-nav ul li a {
  font-size: 14.5px;               /* slightly smaller to save space */
  font-weight: 600;
  padding: 6px 10px;               /* tighter left/right */
  text-transform: uppercase;
  letter-spacing: .01em;           /* reduce spacing to fit more */
}

/* Keep nav on one line; allow horizontal scroll if overflow */
.main-navigation .inside-navigation { overflow-x: auto; }
.main-navigation .main-nav ul {
  white-space: nowrap;
  display: flex;
  gap: 0;
}
.main-navigation .main-nav ul li { flex: 0 0 auto; }
.main-navigation::-webkit-scrollbar { height: 8px; }
.main-navigation::-webkit-scrollbar-thumb { background: #e5e7eb; }

@media (max-width:1200px){
  .main-navigation .main-nav{ display:none; }
  .menu-toggle[aria-expanded="true"] + .main-nav{ display:block !important; }
}

/* Keep desktop behavior above 1200px */
@media (min-width: 1201px){
  .menu-toggle { display: none !important; }
  .main-navigation .main-nav > ul { display: flex !important; }
}

/* Keep nav items and search in one line */
.main-navigation .inside-navigation {
  display: flex;
  align-items: center;
  flex-wrap: nowrap; /* prevent wrap */
}

/* Menu area flexes, search box stays compact at far right */
.main-navigation .main-nav {
  flex: 1 1 auto; /* menu items can shrink if needed */
  min-width: 0;   /* allows shrinking without overflow */
}
.main-navigation .navigation-search {
  flex: 0 0 auto; /* fixed size */
  margin-left: auto; /* push to far right */
}

/* Compact search box so it fits better */
.main-navigation .navigation-search input[type="search"] {
  max-width: 140px;
  font-size: 14px;
  padding: 4px 6px;
}


/* Stop the nav from showing a scrollbar */
.main-navigation .inside-navigation {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow: visible;            /* <- no scroll bar */
}

/* Menu compacts slightly so everything fits in one line */
.main-navigation .main-nav { flex: 1 1 auto; min-width: 0; }
.main-navigation .main-nav > ul { display: flex; gap: 0; white-space: nowrap; }
.main-navigation .main-nav > ul > li > a { padding: 6px 10px; font-size: 14.5px; }

/* Dropdowns: show on hover, no awkward scrolling */
.main-navigation .main-nav li { position: relative; }
.main-navigation .main-nav li.menu-item-has-children > a::after {
  content: "▾"; font-size: 10px; margin-left: 6px; opacity: .7;
}
.main-navigation .main-nav li .sub-menu {
  position: absolute; top: 100%; left: 0;
  background: #fff; border: 1px solid #e5e7eb;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  min-width: 220px; padding: 6px 0; z-index: 1000; display: none;
}
.main-navigation .main-nav li:hover > .sub-menu { display: block; }
.main-navigation .main-nav .sub-menu li a {
  white-space: normal; padding: 8px 12px; font-weight: 600;
}

/* Search: compact by default, expands on focus (saves width) */
.main-navigation .navigation-search { margin-left: auto; }
.main-navigation .navigation-search input[type="search"]{
  width: 36px; max-width: 180px;
  padding: 4px 6px; border: 1px solid #e5e7eb; border-radius: 3px;
  transition: width .2s ease;
}
.main-navigation .navigation-search input[type="search"]:focus{
  width: 150px; outline: none;
}

/* Wider archive/container */
body.archive .site-main,
body.blog .site-main,
.wsj-archive .site-main {
  max-width: min(92vw, 1280px);   /* was 1080px */
  margin: 0 auto;
  padding: 0 16px;
}

/* Category title: reduce extra space */
body.archive .page-title,
.wsj-archive .page-title {
  margin: .25rem 0 .6rem;         /* tighter */
  padding-bottom: .4rem;
  border-bottom: 1px solid #e5e7eb;
}

/* Remove any “mystery gap” before first row */
body.archive .site-main > *:first-child { margin-top: 0 !important; }
body.archive .content-area, body.archive .site-main { padding-top: 0 !important; }

/* Grid: make columns wider, fewer gaps */
@media (min-width: 1000px){
  body.archive .site-main,
  body.blog .site-main,
  .wsj-archive .site-main {
    display: grid;
    grid-template-columns: repeat(2, minmax(520px, 1fr)); /* wider cols */
    gap: 16px 20px;                                       /* tighter rows, comfy columns */
  }
}

/* Optional: go 3 columns on very large screens */
@media (min-width: 1400px){
  body.archive .site-main,
  .wsj-archive .site-main {
    grid-template-columns: repeat(3, minmax(420px, 1fr));
  }
}

/* Ensure cards don’t add extra margins inside the grid */
body.archive article,
body.blog article,
.wsj-archive article {
  margin: 0 !important;
  padding: 0 0 0.75rem;
  border-bottom: 1px solid #e5e7eb;
}
@media (min-width: 1000px){
  body.archive article,
  body.blog article,
  .wsj-archive article { border-bottom: 0; padding-bottom: 0; }
}

/* Image discipline in listings */
body.archive .inside-article .post-image img,
body.blog .inside-article .post-image img,
.wsj-archive .inside-article .post-image img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}

/* Kill the big gap under archive/category titles */
body.archive .page-header,
body.blog .page-header {
  margin: 0 0 .5rem !important;
  padding: 0 0 .5rem !important;
  border-bottom: 1px solid #e5e7eb;
}

/* Remove any top spacing before the first row/cards */
body.archive .site-main,
body.blog .site-main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.archive .site-main > *:first-child,
body.blog .site-main > *:first-child {
  margin-top: 0 !important;
}

/* If your layout uses “separate containers”, nuke their top margin on archives */
.separate-containers.archive .site-main,
.separate-containers.blog .site-main {
  margin-top: 0 !important;
}

/* First article/card shouldn’t add its own top margin */
body.archive article:first-of-type,
body.blog article:first-of-type {
  margin-top: 0 !important;
}
body.archive article:first-of-type .entry-title,
body.blog article:first-of-type .entry-title {
  margin-top: 0 !important;
}

/* (Optional) WordPress block gap safety — in case a block injects extra space */
body.archive :where(.wp-block-group, .wp-block-columns, .wp-block-stack) {
  --wp--style--block-gap: 0;
}

/* Make archive/category page header span across both grid columns */
.archive .wsj-archive .site-main > .page-header {
  grid-column: 1 / -1;
  margin-bottom: 0.75rem;   /* tighten spacing a bit */
  align-self: start;
}

/* (Optional) ensure article cards don't introduce extra top gaps */
.archive .wsj-archive .site-main > article {
  margin-top: 0;
}

/* Make archive pagination span full width and sit below the cards */
.wsj-archive .site-main > .paging-navigation,
.wsj-archive .site-main > nav.paging-navigation,
.wsj-archive .site-main > #nav-below.paging-navigation {
  grid-column: 1 / -1;       /* escape the card columns */
  display: block;            /* ensure block flow, not grid item styling */
  margin-top: 24px;
  padding: 16px 0;
  border-top: 1px solid #e5e5e5;
  text-align: center;
  background: transparent;   /* in case any “card” bg leaks in */
}

/* Optional: tidy the links */
.wsj-archive .paging-navigation .nav-links,
.wsj-archive .paging-navigation .nav-previous,
.wsj-archive .paging-navigation .nav-next {
  display: inline-block;
  gap: 8px;
}

.wsj-archive .paging-navigation a.page-numbers,
.wsj-archive .paging-navigation .page-numbers.current {
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 3px;
  text-decoration: none;
}

.wsj-archive .paging-navigation .page-numbers.current {
  background: #f7f7f7;
  border-color: #ccc;
  font-weight: 600;
}

/* Archive pages: remove duplicate search box inside the grid/content */
.wsj-archive .site-main .search-form,
.wsj-archive .site-main form.search-form {
  display: none !important;
}

/* Literary serif for Opinion & Interviews headlines */
.wsj-style .wsj-opinion .wsj-card-title a,
.wsj-style .wsj-interviews .wsj-card-title a {
  font-family: "Merriweather", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--headline, #0a0a0a);
  text-decoration: none;
}

.wsj-style .wsj-opinion .wsj-card-title a:hover,
.wsj-style .wsj-interviews .wsj-card-title a:hover {
  opacity: 0.9;
}

/* Optional: section labels (Opinion, Interviews) */
.wsj-style .wsj-opinion .section-title,
.wsj-style .wsj-interviews .section-title {
  font-family: var(--font-sans, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--kicker, #374151);
  margin-bottom: 0.5rem;
}

/* Opinion & Interviews “literary” titles */
.wsj-style .wsj-opinion .wsj-card-title,
.wsj-style .wsj-opinion .wsj-card-title a,
.wsj-style .wsj-interviews .wsj-card-title,
.wsj-style .wsj-interviews .wsj-card-title a {
  font-family: "Merriweather", Georgia, "Times New Roman", serif !important;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: 0;
  text-decoration: none;
  color: var(--headline, #0a0a0a);
}

/* If a global rule uppercases them, turn that off just for these titles */
.wsj-style .wsj-opinion .wsj-card-title,
.wsj-style .wsj-interviews .wsj-card-title { text-transform: none; }


/* WSJ-style support strip */
.wsj-support { background:#0f172a; color:#fff; border-bottom:1px solid #0b1223; }
.wsj-support-inner {
  max-width: min(92vw, 1280px); margin: 0 auto; padding: 10px 16px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.wsj-support-copy strong { font:700 16px/1.2 var(--font-sans, system-ui); }
.wsj-support-copy span { color:#cbd5e1; margin-left:10px; }
.wsj-support-btn {
  margin-left:auto; background:#f59e0b; color:#000; font-weight:700;
  padding:8px 14px; border-radius:6px; text-decoration:none;
}
.wsj-support-btn:hover { filter:brightness(0.95); }
@media (max-width:720px){
  .wsj-support-copy span{ display:block; margin:4px 0 0; }
  .wsj-support-btn{ margin-left:0; }
}

/* Lay out the top meta bar cleanly */
.top-meta-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:6px 16px;
}

/* Inline variant of the support strip for the top bar */
.wsj-support--inline{ background:transparent; color:inherit; border:0; }
.wsj-support--inline .wsj-support-inner{
  display:flex; align-items:center; gap:10px; padding:0; margin:0;
  max-width:none;
}
.wsj-support--inline strong{
  font:700 14px/1.2 var(--font-sans, system-ui);
  color:#0a0a0a;
}
.wsj-support--inline .wsj-support-btn{
  background:#f59e0b; color:#000; font-weight:700;
  padding:6px 12px; border-radius:6px; text-decoration:none;
}

/* Keep About/Contact tidy on the right */
.top-meta-bar > nav a{ margin-left:12px; text-decoration:none; color:#374151; }
.top-meta-bar > nav a:hover{ opacity:.9; }

/* Mobile: stack nicely */
@media (max-width:720px){
  .top-meta-bar{ flex-wrap:wrap; }
  .top-meta-bar .date{ order:1; width:auto; }
  .wsj-support--inline{ order:2; width:100%; }
  .top-meta-bar > nav{ order:3; width:100%; text-align:left; }
}

/* Larger first paragraph on PAGES (matches posts behavior) */
body.page .entry-content p:first-of-type {
  font-size: 1.125rem;   /* 18px; use your post value if different */
  line-height: 1.55;
  margin-bottom: 0.8rem;
}

/* Add extra space under featured images on pages */
body.page .post-thumbnail {
  margin-bottom: 20px; /* ~5mm */
}

/* Bigger button, no extra color spill below */
.wp-block-button.wsj-support-btn {
  text-align: center;                 /* center the button */
  margin-bottom: 28px;                /* WHITE space below the button */
}

.wp-block-button.wsj-support-btn .wp-block-button__link {
  /* keep the button big */
  font-weight: 700;
  font-size: 20px;
  padding: 16px 36px;                 /* size of the colored button */
  border-radius: 8px;
  margin: 0 !important;               /* prevent inside margin from being used */
  transition: background-color .2s ease;
}

/* optional hover tweak (keep your current color) */
.wp-block-button.wsj-support-btn .wp-block-button__link:hover {
  filter: brightness(.95);
}

/* -------------------------------------------
   Page Featured Image = align with text column
   Context: GeneratePress child theme
-------------------------------------------- */

/* 1) Stop GP’s “bleed” on page featured images */
.page .inside-article .post-image,
.page .inside-article .featured-image {
  /* GP often uses negative margins + width: calc(...) on these.
     Zero them so the image sits inside the padded content box. */
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
  max-width: 100%;
}

/* 2) Ensure the actual image respects the container */
.page .inside-article .post-image img,
.page .inside-article .featured-image img,
.page .inside-article .wp-post-image {
  display: block;
  width: 100%;
  height: auto;
}

/* 3) (Optional) If your text column is hard-capped (~720px),
      make the whole article (including featured image) follow it */
.page .inside-article {
  max-width: 720px;         /* match your article text width */
  margin-left: auto;
  margin-right: auto;
}

/* 4) (Optional) If your text padding creates the “shift”,
      keep the image inside the same padding as text */
.page .inside-article .post-image,
.page .inside-article .featured-image {
  padding-left: inherit;    /* uses the same horizontal padding as text */
  padding-right: inherit;
}

/* Archives/blog: hide inline images inside card content (keep featured image) */
body.archive .inside-article .entry-content :is(figure.wp-block-image, img),
body.blog    .inside-article .entry-content :is(figure.wp-block-image, img) {
  display: none !important;
}

/* --- Unify article width on posts & pages (GeneratePress child) --- */

/* 0) Your target reading width */
:root { --article-max: 720px; --article-pad: 20px; }

/* 1) Constrain every main section to the same width */
.single .entry-header,
.single .post-image,
.single .entry-content,
.single .entry-meta,
.single .entry-footer,
.single .comments-area,
.page .entry-header,
.page .post-image,
.page .entry-content,
.page .entry-meta,
.page .entry-footer,
.page .comments-area {
  max-width: var(--article-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--article-pad);
  padding-right: var(--article-pad);
}

/* 2) Keep the container neutral so the child sections control width */
.single .inside-article,
.page  .inside-article {
  padding-left: 0;
  padding-right: 0;
}

/* 3) Stop GP’s alignwide/alignfull from overflowing */
.entry-content .alignwide,
body:not(.no-sidebar) .entry-content .alignfull {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* 4) Responsive media sanity */
.entry-content img,
.post-image img,
.featured-image img {
  display: block;
  height: auto;
  max-width: 100%;
}

/* Same width for bottom sections on posts & pages */
.single .entry-meta,
.single .entry-footer,
.single .comments-area,
.page  .entry-footer,
.page  .comments-area {
  max-width: var(--article-max, 720px);
  margin: 2rem auto;
  padding: 0 20px;
}

/* Hide byline/date on pages */
.page .entry-meta,
.page .posted-on,
.page .byline {
  display: none !important;
}

/* Tidy extra spacing if meta is hidden */
.page .entry-header { margin-bottom: 1rem; }


/* ===== FRONT PAGE POLISH (GeneratePress + your wsj-* classes) ===== */

/* 0) Design tokens (tweak freely) */
:root{
  --headline: #0a0a0a;
  --text: #222;
  --muted:#6b7280;
  --rule:#e5e7eb;
  --font-sans: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans",sans-serif;
  --font-serif: Georgia,"Times New Roman",serif;
}

/* 1) Overall container rhythm */
.wsj-style{ max-width:1180px; margin:0 auto; padding:1.25rem; } /* you already use this shell */  /* :contentReference[oaicite:0]{index=0} */

/* 2) Hero/lead hierarchy */
.wsj-hero .wsj-hero-content h1{
  font: 800 2.1rem/1.15 var(--font-serif);
  color: var(--headline);
  margin:.4rem 0 .6rem;
}
.wsj-hero .wsj-hero-kicker{
  font: 700 12px/1.1 var(--font-sans);
  text-transform: uppercase; letter-spacing:.04em; color:#374151;
  margin-bottom:.35rem;
}
.wsj-hero .wsj-hero-summary{ color: var(--text); font: 400 1rem/1.5 var(--font-sans); }

/* 3) Section headers (consistent look) */
.wsj-style .section-title{
  font: 700 12px/1.2 var(--font-sans);
  text-transform: uppercase; letter-spacing:.04em;
  color:#374151; margin:0 0 .6rem;
  position:relative;
}
.wsj-style .section-title:after{
  content:""; display:block; height:1px; background:var(--rule); margin-top:.5rem;
} /* :contentReference[oaicite:1]{index=1} */

/* 4) Card/grid consistency */
.wsj-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px;
} /* your grid exists; we normalize spacing */ /* :contentReference[oaicite:2]{index=2} */

.frontpage-box,
.wsj-card{
  display:flex; flex-direction:column; height:100%;
  background:#fff; border:1px solid #eee; border-radius:6px;
  padding:12px; gap:.5rem;
} /* dedupe multiple .frontpage-box versions */ /* :contentReference[oaicite:3]{index=3} */

.frontpage-box .featured-image-link img,
.wsj-card img{
  width:100%; aspect-ratio:16/9; object-fit:cover; display:block; border-radius:4px;
} /* uniform crop for professionalism */ /* :contentReference[oaicite:4]{index=4} */

.frontpage-box .wsj-card-title a,
.wsj-card h4 a{
  font:700 1.02rem/1.25 var(--font-serif);
  color:var(--headline); text-decoration:none;
}
.frontpage-box .wsj-card-title a:hover,
.wsj-card h4 a:hover{ opacity:.92; } /* :contentReference[oaicite:5]{index=5} */

/* 5) Densify lists/briefs without clutter */
.wsj-briefs li{ margin:.25rem 0; }
.wsj-briefs li a{ text-decoration:none; color:inherit; } /* :contentReference[oaicite:6]{index=6} */

/* 6) Align everything to the same left/right edges */
.wsb-edge, /* optional utility you can add to wrappers */
.wsj-style .wsj-grid,
.wsj-style .wsj-two-columns{ margin-left:auto; margin-right:auto; max-width:1180px; }

/* 7) Side column widgets: Most Read / Newsletter */
.wsj-aside .widget{
  background:#fff; border:1px solid #eee; border-radius:6px; padding:14px; margin-bottom:14px;
}
.wsj-aside .widget h3{
  font:700 12px/1.2 var(--font-sans); text-transform:uppercase; letter-spacing:.04em; color:#374151; margin:0 0 .6rem;
}
.wsj-aside .widget li{ margin:.5rem 0; }

/* 8) Spacing cleanups (trim “bloggy” gaps) */
.wsj-style article{ margin-bottom:1rem; }
.wsj-style .wsj-grid-section article{ margin-bottom:.8rem; } /* :contentReference[oaicite:7]{index=7} */

/* 9) Make GP “wide/full” blocks behave inside the gutter */
.entry-content .alignwide,
body:not(.no-sidebar) .entry-content .alignfull{
  margin-left:0; width:100%; max-width:100%;
} /* you had opposite values in cached CSS; neutralize for front */ /* :contentReference[oaicite:8]{index=8} */

/* 10) Opinion & Interviews: give a literary headline style (optional) */
.wsj-style .wsj-opinion .wsj-card-title a,
.wsj-style .wsj-interviews .wsj-card-title a{
  font-family:"Merriweather", Georgia, "Times New Roman", serif;
  font-weight:700; font-size:1.05rem; line-height:1.25;
} /* :contentReference[oaicite:9]{index=9} */

.wsj-style{ width:100%; max-width:1180px; margin:0 auto; padding:0 20px; }

/* Support CTA: centered, below article */
.support-cta{
  max-width: 720px; margin: 2rem auto 1rem; padding: 16px 20px;
  text-align: center; background: #fff; border: 1px solid #eee; border-radius: 8px;
}
.support-cta__title{ margin: 0 0 .25rem; font-weight: 700; font-size: 1.1rem; }
.support-cta__text{ margin: 0 0 .9rem; color: #444; }

/* Button styling (brand it!) */
.support-cta__btn{
  display: inline-block; padding: 12px 20px; border-radius: 9999px;
  font-weight: 700; text-decoration: none;
  background: #f59e0b; color: #111; /* amber */
}
.support-cta__btn:hover{ filter: brightness(1.08); }

/* Make sure it aligns with article edges on narrow screens */
@media (max-width: 780px){
  .support-cta{ margin-left: 16px; margin-right: 16px; }
}

/* Mobile sticky Support bar */
.support-sticky{
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  background: #111;
  color: #fff;
  border-radius: 9999px;
  padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  z-index: 9999;
  transition: transform .25s ease, opacity .25s ease;
}
.support-sticky--hidden{ opacity:0; transform: translateY(20px); pointer-events:none; }

.support-sticky__cta{
  flex: 1 1 auto;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 9999px;
  background: #f59e0b; /* accent */
  color: #111;
}
.support-sticky__cta:hover{ filter: brightness(1.08); }

.support-sticky__close{
  flex: 0 0 auto;
  appearance: none; border: 0;
  width: 34px; height: 34px; line-height: 34px;
  border-radius: 9999px;
  background: #333; color: #fff; font-size: 20px; cursor: pointer;
}

@media (min-width: 681px){
  .support-sticky{ display:none; }
}

/* ===== WSJ-style front page tweaks (hierarchy + spacing + sidebar + labels) ===== */

/* 0) tokens */
:root{
  --headline: #0a0a0a;
  --text: #222;
  --muted:#6b7280;
  --rule:#e5e7eb;
}

/* 1) Headline hierarchy */
/* Lead story (hero) — bigger, tighter line height */
.wsj-hero .wsj-hero-content h1{
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  line-height: 1.15;
  color: var(--headline);
  margin: .35rem 0 .6rem;
}
/* Secondary card titles — strong but clearly smaller than hero */
.wsj-grid .wsj-card h3 a,
.wsj-grid .wsj-card h4 a,
.frontpage-box .wsj-card-title a{
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(1.02rem, 1.2vw, 1.15rem);
  line-height: 1.25;
  color: var(--headline);
  text-decoration: none;
}
.wsj-grid .wsj-card h3 a:hover,
.wsj-grid .wsj-card h4 a:hover,
.frontpage-box .wsj-card-title a:hover{ opacity:.92; }

/* 2) Spacing — let sections breathe */
.section-title{
  font: 700 12px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", sans-serif;
  text-transform: uppercase; letter-spacing:.04em;
  color:#374151;
  margin:.25rem 0 .75rem; /* more space under headers */
  position:relative;
}
.section-title::after{
  content:""; display:block; height:1px; background:var(--rule); margin-top:.5rem;
}

/* 3) Sidebar width & gutters (desktop) */
.wsj-two-columns{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px; /* was narrower — gives sidebar room */
  gap:22px;
  align-items:start;
}
@media (max-width: 980px){
  .wsj-two-columns{ grid-template-columns:1fr; gap:16px; }
}

/* 4) Section labels — subtle box feel */
.wsj-kicker, .wsj-label, .category-label{
  display:inline-block;
  padding:3px 6px;
  font:700 11px/1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", sans-serif;
  text-transform:uppercase; letter-spacing:.04em;
  color:#374151;
  background:#f7f7f8;
  border:1px solid #eee;
  border-radius:3px;
}

/* 5) Images — consistent crop on cards */
.wsj-grid .wsj-img-crop img,
.frontpage-box .featured-image-link img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
  border-radius:4px;
}

/* 6) Minor rhythm tidy */
.wsj-grid{ gap:14px; }
.wsj-grid .wsj-card{ border:1px solid #eee; border-radius:6px; background:#fff; overflow:hidden; }
.wsj-grid .wsj-card p{ margin:0 .8rem .9rem; color:var(--text); }




/* Support block container */
.support-cta{
  max-width: 720px; margin: 2rem auto 1rem; padding: 16px 20px;
  text-align: center; background: #fff; border: 1px solid #eee; border-radius: 8px;
}
.support-cta__title{ margin:0 0 .25rem; font-weight:700; font-size:1.1rem; }
.support-cta__text{ margin:0 0 1rem; color:#444; }

/* Side-by-side row on desktop, stacked on mobile */
.support-cta__row{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center;
}

/* Stripe button */
.support-cta__btn{
  display:inline-block; padding:12px 20px; border-radius:9999px; font-weight:700;
  background:#f59e0b; color:#111; text-decoration:none; flex:0 1 auto;
}
.support-cta__btn:hover{ filter:brightness(1.08); }

/* Google News badge */
.gn-follow img{ height:40px; display:block; }
.gn-follow{ display:inline-flex; align-items:center; }

/* Stack on small screens */
@media (max-width: 560px){
  .support-cta__row{ flex-direction:column; }
  .support-cta__btn, .gn-follow{ width:100%; justify-content:center; }
}

/* === Inline Ad Styling (manual insertion points) === */
.adsense-inline {
  margin: 2em 0;          /* spacing above and below each ad */
  text-align: center;     /* center-align the ad block */
  line-height: 1.4;
}

.adsense-inline ins.adsbygoogle {
  display: block !important;  /* ensure full width on narrow screens */
  margin: 0 auto;
}