/*
Theme Name: Palm Oil Monitor
Theme URI: https://example.com/policy-outlook
Description: Child theme of the Newspack theme for Palm Oil Monitor.
Author: Khalil Hegarty
Author URI: https://oxleyhegarty.com.au
Template: newspack-theme
Version: 0.2.0
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: policy-outlook
*/

/* =========================================================================
   Fonts — self-hosted Fraunces variable (upright + italic)
   Files: assets/fonts/Fraunces-Variable.woff2,
          assets/fonts/Fraunces-Italic-Variable.woff2
   Both axes opsz 9–144, wght 100–900, SOFT 0–100, WONK 0–1. CSS font-weight
   maps to the wght axis automatically; the masthead pins all axes via
   font-variation-settings for typographic precision.
   ========================================================================= */
@font-face {
	font-family: "Fraunces";
	src: url("assets/fonts/Fraunces-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Fraunces";
	src: url("assets/fonts/Fraunces-Italic-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

/* =========================================================================
   Typography system
   Fraunces (serif: headlines + body) + Inter (sans: UI / metadata)
   Modular scale, ratio 1.25, base 18px. Fluid via clamp() between a
   375px (mobile) and 1280px (desktop) viewport.
   ========================================================================= */

:root {
	/* Font families */
	--font-serif: "Fraunces", Georgia, serif;
	--font-sans: "Inter", system-ui, sans-serif;

	/* Modular type scale, tightened. Ratio ~1.25 below base; upper end
	   capped so h1 doesn't run away. Fluid 375px -> 1280px.
	   Desktop (max) targets: base 17, lg 18, xl 20, 2xl 23, 3xl 28,
	   4xl 34, 5xl 44 px. Mobile (min, 375px) interpolated body 16 -> h1 32. */
	--text-xs:   clamp(0.6563rem, calc(0.6459rem + 0.044vw), 0.6813rem);
	--text-sm:   clamp(0.8125rem, calc(0.7970rem + 0.066vw), 0.85rem);
	--text-base: clamp(1rem,      calc(0.9741rem + 0.110vw), 1.0625rem);
	--text-lg:   clamp(1.0375rem, calc(1.0012rem + 0.155vw), 1.125rem);
	--text-xl:   clamp(1.1125rem, calc(1.0555rem + 0.243vw), 1.25rem);
	--text-2xl:  clamp(1.225rem,  calc(1.1369rem + 0.376vw), 1.4375rem);
	--text-3xl:  clamp(1.4063rem, calc(1.2638rem + 0.608vw), 1.75rem);
	--text-4xl:  clamp(1.6313rem, calc(1.4267rem + 0.873vw), 2.125rem);
	--text-5xl:  clamp(2rem,      calc(1.6892rem + 1.326vw), 2.75rem);
	--text-6xl:  clamp(2.2938rem, calc(1.8975rem + 1.691vw), 3.25rem);

	/* Line-heights */
	--leading-tight: 1.15;  /* headlines / display */
	--leading-snug: 1.35;   /* subheads */
	--leading-normal: 1.55; /* body */
	--leading-loose: 1.75;  /* long-form */

	/* Tracking */
	--tracking-tight: -0.02em;  /* display sizes */
	--tracking-normal: 0;
	--tracking-wide: 0.05em;    /* uppercase metadata */

	/* Brand */
	--color-accent: #496d5f;        /* POM green */
	--color-accent-hover: #375247;  /* POM green, darker (hover/active) */

	/* Masthead lockup tokens (PolicyTrade) */
	--pt-stamp-radius: 3px;
	--pt-track: -0.015em;
}

/* =========================================================================
   PolicyTrade masthead lockup
   Markup (filtered into Newspack's <h1|p class="site-title"><a>...</a></>):
     <a class="pt-masthead" aria-label="PolicyTrade — home">
       <span class="pt-stamp">PT</span>
       <span class="pt-mark">
         <span class="pt-wordmark">PolicyTrade</span>
         <span class="pt-tagline">The policy behind the trade.</span>
       </span>
     </a>
   Inherits color via currentColor so it adapts to the header's text colour
   in light and dark without a separate dark-mode block.
   ========================================================================= */
.pt-masthead {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	text-decoration: none;
	color: inherit;
}

.pt-stamp {
	flex: 0 0 auto;
	width: 1.55em;
	height: 1.55em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid currentColor;
	border-radius: var(--pt-stamp-radius);
	font-family: "Fraunces", Georgia, serif;
	font-variation-settings: "opsz" 40, "wght" 500;
	font-size: 1.05em;
	line-height: 1;
	letter-spacing: var(--pt-track);
}

.pt-mark {
	display: inline-flex;
	flex-direction: column;
	line-height: 1.1;
}

.pt-wordmark {
	font-family: "Fraunces", Georgia, serif;
	font-variation-settings: "opsz" 144, "wght" 500;
	font-size: 1.9rem;
	letter-spacing: var(--pt-track);
}

.pt-tagline {
	font-family: "Fraunces", Georgia, serif;
	font-style: italic;
	font-variation-settings: "opsz" 40, "wght" 400;
	font-size: 0.82rem;
	opacity: 0.7;
	margin-top: 0.15em;
}

@media (max-width: 640px) {
	.pt-tagline { display: none; }
}

/* -------------------------------------------------------------------------
   Base elements
   ------------------------------------------------------------------------- */

body {
	font-family: var(--font-serif);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	color: #1a1a1a;
	background-color: #fdfdfb;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-serif);
	font-weight: 600;
	letter-spacing: var(--tracking-tight);
	line-height: var(--leading-snug);
}

/* Newspack pins `.page-title` (and `.page-description`, the inner span that
   holds the visible title text on archives) to the sans heading font via a
   class-specificity selector group, beating the `h1, h2…` rule above. Restore
   the editorial serif here so archive / 404 / search h1s match the rest of
   the site. */
.page-title,
.not-found .page-title,
.error-404 .page-title,
.page-title .page-description {
	font-family: var(--font-serif);
	font-weight: 600;
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

/* UI / metadata — Inter */
.byline,
.post-meta,
nav,
button,
.caption {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
}

.category-label {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

/* Links — inherit color, subtle underline offset, darker on hover */
a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

a:hover,
a:focus {
	color: #000;
}

/* =========================================================================
   Brand accent + Newspack component overrides
   Selectors verified against the live DOM (.cat-links, .byline,
   #secondary block widgets, .wp-block-newspack-blocks-homepage-articles).
   ========================================================================= */

/* --- Category labels: post hero + homepage cards ------------------------- */
/* Markup: <span class="cat-links"><a>Entertainment</a></span>             */

.cat-links {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.cat-links a,
.cat-links a:visited {
	color: var(--color-accent);
	text-decoration: none;
	/* Newspack's parent compiled CSS gives .cat-links a a primary-colour
	   background pill (blue by default). Strip it so the chip renders as
	   text-only, matching the category labels used elsewhere on the site. */
	background-color: transparent;
	padding: 0;
}

.cat-links a:hover,
.cat-links a:focus {
	color: var(--color-accent-hover);
	background-color: transparent;
}

/* Homepage card variant — explicit accent (beats parent .cat-links a {inherit}) */
.wp-block-newspack-blocks-homepage-articles .cat-links a,
.wp-block-newspack-blocks-homepage-articles .cat-links a:visited {
	color: var(--color-accent);
}

.wp-block-newspack-blocks-homepage-articles .cat-links a:hover,
.wp-block-newspack-blocks-homepage-articles .cat-links a:focus {
	color: var(--color-accent-hover);
}

/* Hero overlay (featured image "behind") — label stays white */
.single-featured-image-behind .cat-links a,
.single-featured-image-behind .cat-links a:visited,
.single-featured-image-behind .cat-links a:hover,
.single-featured-image-behind .cat-links a:focus {
	color: #fff;
}

/* --- Byline links -------------------------------------------------------- */

.byline a,
.byline a:visited,
.entry-meta .byline a,
.entry-meta .byline a:visited {
	color: var(--color-accent);
}

.byline a:hover,
.byline a:focus,
.entry-meta .byline a:hover,
.entry-meta .byline a:focus {
	color: var(--color-accent-hover);
}

/* --- Sidebar "Latest" widget (core Latest Posts block) ------------------- */
/* The Latest widget is the core Latest Posts block (.wp-block-latest-posts),
   not the classic Recent Posts widget. Match the Official News widget: a dark
   Fraunces title (maroon on hover) with the post date as a small muted Inter
   eyebrow positioned ABOVE the title. Requires the block's "Display post date"
   option to be enabled. Scoped to .wp-block-latest-posts so the Categories and
   Official News widgets are untouched. */

/* Date above title: the block renders <a __post-title> then <time __post-date>
   in source order; flex-column + order:-1 pulls the date up into the eyebrow
   position. The #secondary-scoped selector (0,1,1,1) also overrides Newspack's
   .widget-area ul li { display: inline-block }. */
#secondary .wp-block-latest-posts__list > li {
	display: flex;
	flex-direction: column;
	margin: 0 0 1.1rem;
}
#secondary .wp-block-latest-posts__list > li:last-child {
	margin-bottom: 0;
}

#secondary .wp-block-latest-posts__post-date {
	order: -1;
	margin: 0 0 0.3rem;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #4a4a4a;
	line-height: 1.35;
}

#secondary .wp-block-latest-posts__post-title,
#secondary .wp-block-latest-posts__post-title:visited {
	display: block;
	font-family: var(--font-serif);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	color: #1a1a1a;
	text-decoration: none;
}

#secondary .wp-block-latest-posts__post-title:hover,
#secondary .wp-block-latest-posts__post-title:focus {
	color: var(--color-accent);
}

/* Classic-widget entry-title fallback — unchanged maroon treatment, kept for
   any non-block widget that emits .entry-title links. */
#secondary .widget .entry-title a,
#secondary .widget .entry-title a:visited {
	color: var(--color-accent);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

#secondary .widget .entry-title a:hover,
#secondary .widget .entry-title a:focus {
	color: var(--color-accent-hover);
}

/* --- In-article body links (single posts only) --------------------------- */

.single .entry-content a {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
}

.single .entry-content a:hover,
.single .entry-content a:focus {
	color: var(--color-accent-hover);
}

/* --- Sidebar widget titles: "section label" treatment -------------------- */
/* #secondary uses block widgets (h2.wp-block-heading); classic selectors    */
/* (.widgettitle/.widget-title) kept for non-block widgets.                  */
/* These match .article-section-title (the homepage section labels) exactly  */
/* so every section label on the site renders as one treatment: small maroon */
/* Inter caps. Values mirror that selector — 14px / 700 / 0.12em / accent;   */
/* line-height var(--leading-snug) = 1.35 equals its computed 18.9px/14px.    */

#secondary .widgettitle,
#secondary .widget-title,
#secondary .widget_block .wp-block-heading {
	font-family: var(--font-sans);
	/* The block widget bakes font-size:24px; font-weight:300 as INLINE styles on
	   the h2.wp-block-heading (set in the block editor), which beats any selector.
	   !important is the only way a stylesheet can override an inline style, so the
	   two properties the block sets inline are forced here to match the section
	   label. */
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: var(--leading-snug);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-accent);
}

/* --- Homepage card excerpts: roman, not italic --------------------------- */
/* Excerpt is a bare <p> in .entry-wrapper. Extra class raises specificity   */
/* above the plugin's inline .wpnbha article .entry-wrapper p { 0.8em }.     */

.wp-block-newspack-blocks-homepage-articles.wpnbha article .entry-wrapper p {
	font-style: normal;
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	color: #4a4a4a;
}

/* --- Section labels: "Entertainment" / "Events" / "Featured" -------------- */
/* Newspack outputs all category labels via newspack_categories() as a       */
/* single .cat-links span (single hero, archive, homepage cards) — styled    */
/* above. The homepage/section group headers use .article-section-title;     */
/* they act as section labels and get the same treatment. The compound       */
/* .wp-block-...-articles.wpnbha prefix (0,0,3,0) outranks newspack-blocks'   */
/* view.css (.wpnbha .article-section-title, 0,0,2,0), which loads after us.  */

.article-section-title,
.wp-block-newspack-blocks-homepage-articles.wpnbha .article-section-title {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-accent);
	/* Replace Newspack's 4px grey rule with a hairline divider beneath */
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	padding-bottom: 0.5rem;
	margin-bottom: 1.5rem;
}

/* Spacing: breathing room below the category label inside homepage cards */
.wp-block-newspack-blocks-homepage-articles.wpnbha .cat-links {
	margin-bottom: 0.75rem;
}

/* --- Masthead site title ------------------------------------------------- */
/* Markup: <p class="site-title"><a rel="home">…</a></p> in .site-branding.  */
/* .site-branding ancestor (0,0,3,1) ties Newspack's stuck-header inline     */
/* rule (.h-sb .site-title a:link); child loads later, so it wins.           */

.site-title {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: var(--text-xl);
	text-transform: none;
	letter-spacing: -0.01em;
}

.site-branding .site-title a,
.site-branding .site-title a:link,
.site-branding .site-title a:visited,
.site-branding .site-title a:hover,
.site-branding .site-title a:focus {
	color: #1a1a1a;
	text-decoration: none;
}

/* --- Primary navigation -------------------------------------------------- */
/* Markup: nav.main-navigation > ul#menu-primary.main-menu > li.menu-item > a */

/* Let the 6-item row wrap instead of cramping at ~1280px and below. */
.main-navigation .main-menu {
	flex-wrap: wrap;
	row-gap: 0.25rem;
}

.main-navigation .menu-item a,
.main-navigation .main-menu > li > a {
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.02em;
	text-transform: none;
	color: #1a1a1a;
	text-decoration: none;
	padding: 0 0.9rem;
}

.main-navigation .menu-item a:hover,
.main-navigation .menu-item a:focus,
.main-navigation .main-menu > li > a:hover,
.main-navigation .main-menu > li > a:focus {
	color: var(--color-accent);
	text-decoration: none;
}

/* --- Desktop primary nav: WSJ-style refinement --------------------------- */
/* Scoped to #site-navigation (the desktop nav wrapper under
   .bottom-header-contain.desktop-only) so the mobile-sidebar copy of
   .main-navigation, which lives under aside.mobile-sidebar, is untouched.
   #site-navigation also gives id-level specificity to beat Newspack's parent
   rules that otherwise pull the colour to #555 and the right-padding to 18px.

   Spec: 14px / 500 / title case / Inter / dark (#1a1a1a) / tighter inter-item
   padding. Submenu links and the dropdown caret inherit so the dropdown stays
   typographically consistent. */

#site-navigation .main-menu > li > a,
#site-navigation .main-menu .sub-menu a {
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: #1a1a1a;
	text-decoration: none;
	padding: 0 0.6rem;        /* ~9.6px each side, tighter than parent's 18px right */
}

/* Flush the row's outer edges so the bar reads cohesive, not floating. */
#site-navigation .main-menu > li:first-child > a {
	padding-left: 0;
}
#site-navigation .main-menu > li:last-child > a {
	padding-right: 0;
}

/* Dropdown caret button — inherit type so it doesn't lag at the parent size. */
#site-navigation .submenu-expand {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

/* Active state — subtle maroon on the current section and its ancestors.
   WordPress emits .current-menu-item on the exact match, .current-menu-parent
   on a direct parent, and .current-menu-ancestor higher up — covering both
   category archives and single posts within them. */
#site-navigation .main-menu .current-menu-item > a,
#site-navigation .main-menu .current-menu-parent > a,
#site-navigation .main-menu .current-menu-ancestor > a,
#site-navigation .main-menu .current_page_item > a {
	color: var(--color-accent);
}

/* --- Heading links: no underline, inherit heading colour ----------------- */
/* Archive h1 (.page-title) and post titles (.entry-title a) in archives,    */
/* plus generic heading anchors. Sidebar latest-posts links keep their       */
/* accent colour (set above) and are de-underlined there, not here.          */

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.page-title a,
.entry-title a,
.post-title a,
.widget-title a {
	color: inherit;
	text-decoration: none;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
h1 a:focus, h2 a:focus, h3 a:focus, h4 a:focus, h5 a:focus, h6 a:focus,
.page-title a:hover, .page-title a:focus,
.entry-title a:hover, .entry-title a:focus,
.post-title a:hover, .post-title a:focus,
.widget-title a:hover, .widget-title a:focus {
	color: var(--color-accent);
	text-decoration: none;
}

/* --- Archive title: hide the "Category:" prefix -------------------------- */
/* the_archive_title() (Newspack-filtered) renders:                          */
/*   <h1 class="page-title"><span class="page-subtitle">Category: </span>    */
/*   <span class="page-description">Commodities</span></h1>                   */

.page-header .page-title .page-subtitle {
	display: none;
}

/* =========================================================================
   Static front page (magazine homepage)
   Live markup: <main id="main"> <header class="entry-header">
     <h1 class="entry-title">Homepage</h1></header>
     <article id="post-127"><div class="entry-content">
       <div class="wp-block-newspack-blocks-homepage-articles wpnbha ...">…
   ========================================================================= */

/* 1. Hide the page title so the homepage opens on the hero. Child combinator
   so card titles (.entry-title inside articles) are untouched. */
body.home .site-main > .entry-header {
	display: none;
}

/* 2. Vertical rhythm between Homepage Posts blocks; hero sits flush.
   Tight: the plugin's .wpnbha { margin-bottom: 1em } already adds ~16px
   below each block, so margin-top of 1.5rem nets ~40px between blocks —
   enough to register a section break, not enough to read as a chasm. */
body.home .entry-content > .wp-block-newspack-blocks-homepage-articles {
	margin-top: 1.5rem;
}
body.home .entry-content > .wp-block-newspack-blocks-homepage-articles:first-of-type {
	margin-top: 0;
}

/* 3. Suppress Newspack's branded logomark when it is (mis)used as a post
   featured image — scoped to .post-thumbnail ONLY, never .custom-logo
   (the site logo is also the logomark file). The real fix is the data-side
   reassignment in assign-featured-images.bat; this is the safety net. */
.post-thumbnail:has(img[src*="logomark"]) {
	display: none;
}
.post-thumbnail img[src*="logomark"] {
	max-height: 48px;
	width: auto;
}

/* 4. Excerpt colour — force the muted grey over any inherited accent/link. */
.wp-block-newspack-blocks-homepage-articles .entry-wrapper p {
	color: #4a4a4a;
}

/* 5. Hero image + title — the hero Homepage Posts block, now nested inside a
   Columns block (left column of the .pt-pr-hero-row layout). The hero column
   is identified via :has(+ .pt-pr-hero-row) — the .wp-block-column whose next
   sibling is the rail column. Robust to the new structure and unambiguous
   (matches exactly the hero column, never Top Stories or other blocks).

   Image is constrained to a banner height with object-fit:cover so it crops
   instead of rendering at its full intrinsic height (~511px at 682px wide).
   Title is reduced from the full-width 41px size since the column is ~33%
   narrower — a long hero title at 41px wraps to 4 lines on a 682px column. */
body.home .wp-block-column:has(+ .pt-pr-hero-row) .post-thumbnail img {
	width: 100%;
	height: clamp(320px, 38vw, 460px);
	object-fit: cover;
	display: block;
}

/* =========================================================================
   Archive / category / tag pages — audit items A, B, C, D, E
   Template chain (parent): newspack-theme/archive.php loops
     - template-parts/content/content-excerpt.php  (first article, with excerpt)
     - template-parts/content/content-archive.php  (all subsequent)
   All rules scoped to body.archive so .search and .blog layouts are untouched.
   ========================================================================= */

/* --- A. Page-header treatment ------------------------------------------- */
/* Hairline rule beneath the whole header, tightened tracking on the title. */
/* Tight breadcrumb→title spacing: Newspack's compiled CSS gives             */
/* .site-content margin-top: 4rem (≈64px). Override on archive + single so   */
/* there's ~1.5rem total between the breadcrumb and the page title.          */

/* Single posts keep the existing breathing room above the header. Archive,
   blog and search are tightened further: the breadcrumb's margin-bottom and
   page-header's padding-top are both 0, so the entire breadcrumb-to-h1 gap
   is .site-content's margin-top (confirmed in DevTools). Halving it pulls
   the whole header up; columns are unaffected because #primary itself has 0
   padding/margin. */
body.single .site-content {
	margin-top: 1.5rem;
}
body.archive .site-content,
body.blog .site-content,
body.search .site-content {
	margin-top: 0.75rem;
}

/* Tighten the archive/blog/search header. `#primary >` raises specificity
   above Newspack's parent rules (which otherwise force padding-bottom: 20px
   and margin-bottom: 50px). Hairline kept; intra-header padding pulled to
   0.5rem; the page-header's margin-bottom is the shared row-container top
   gap (#primary itself has 0 padding/margin, and the columns flex onto the
   next line below this full-width header) — pulled to 1rem so the hero and
   the rail BOTH move up together, preserving their top-alignment. Never
   trim margin/padding on #main or #secondary in isolation: that would desync
   the columns. (Note: root font-size is 20px, so 1rem = 20px.) */
body.archive #primary > .page-header,
body.blog #primary > .page-header,
body.search #primary > .page-header {
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	padding-top: 0;
	padding-bottom: 0.5rem;
	margin-bottom: 1rem;
}

/* Page-title bottom margin tightened so the rule sits closer to the title.
   Line-height pulled to 1.05 — the visible "Sustainability" text lives in a
   <span class="page-description"> inside the h1 and renders at ~2.8em (xxxl),
   so its line-height was adding ~20px of optical air above the cap and below
   the baseline. Newspack's parent CSS sets a heading line-height directly on
   .page-description (1.2), beating the inherited value, so we also target the
   nested span explicitly to win. */
body.archive #primary > .page-header .page-title,
body.blog #primary > .page-header .page-title,
body.search #primary > .page-header .page-title,
body.archive #primary > .page-header .page-title .page-description,
body.blog #primary > .page-header .page-title .page-description,
body.search #primary > .page-header .page-title .page-description {
	line-height: 1.05;
}

body.archive #primary > .page-header .page-title,
body.blog #primary > .page-header .page-title,
body.search #primary > .page-header .page-title {
	margin-top: 0;
	margin-bottom: 0.5rem;
}

/* Align the first sidebar widget heading with the first article's featured
   image top on archives — the archive counterpart to the single-post
   alignment.

   On archives #primary is the flex row: the full-width .page-header wraps onto
   its own line, then #main (the article loop) and #secondary share the next
   row. So #secondary's natural (zero-margin) top already sits at #main's top,
   which is the first article's image top (archive cards are image-first) — the
   page title + hairline do NOT push the sidebar down. The parent's
   #secondary { margin-top } drops it ~20px below that; replace it with the same
   ~5px negative nudge used on single posts (compensating the heading's
   half-leading + ascender) so the "LATEST" cap meets the image's top edge.
   No grid restructure is needed here since the image is already at the column
   top. Scoped to >=782px, where the two-column layout exists; the Official News
   CPT archive has no sidebar, so this is a no-op there. */
@media only screen and (min-width: 782px) {
	body.archive #secondary {
		margin-top: -5px;
	}
}

/* Vertical hairline in the gutter between the main column and the sidebar on
   two-column archive layouts.

   Layout context (Newspack parent): on `.archive.has-sidebar`, from 782px up,
   `#primary` is a flex row (justify-content:space-between) holding #main (65%)
   and #secondary (~35%), leaving a 2rem gutter (3rem at >=1168px).

   The sidebar (Search, Recent Posts, ...) is usually far shorter than the main
   column, so a plain border-left on #secondary would look stunted. Instead we
   hang the rule off #main — the taller column — as an absolutely-positioned
   pseudo-element placed 1rem into the gutter, so its height tracks the main
   column rather than the short sidebar. top/bottom insets keep it a contained
   rule, not edge-to-edge. Colour matches the archive header hairline above.

   `:has(#secondary)` guards the Official News CPT archive, whose template
   renders no sidebar: there #primary has no #secondary child, so no rule
   appears (it stays the full-width wire). */
@media only screen and (min-width: 782px) {
	body.archive.has-sidebar #primary:has(#secondary) #main {
		position: relative;
	}

	body.archive.has-sidebar #primary:has(#secondary) #main::after {
		content: "";
		position: absolute;
		top: 2rem;
		bottom: 2rem;
		left: calc(100% + 1rem);
		width: 1px;
		background-color: rgba(0, 0, 0, 0.12);
		pointer-events: none;
	}
}

/* =========================================================================
   Single post with sidebar — two-column layout

   Newspack renders #main as a flex/wrap container whose children are, in
   source order: .entry-header (full width), .post-thumbnail (featured image,
   full width), .main-content (65%), #secondary (35%). With a full-width
   featured image the sidebar is pushed below it, so its first widget heading
   sits ~700px (the image height) below the image's top edge.

   Re-lay #main as a grid so the featured image is constrained to the left
   (main) column and the sidebar rises into the right column, top-aligned with
   the image. The article body flows beneath the image in the left column;
   the sidebar spans both left-column rows on the right.

   Scoped to single posts with a sidebar in Newspack's default featured-image
   position, at the same >=782px breakpoint where the parent goes two-column
   (below it, the parent's single-column stack stands; other featured-image
   modes — behind/above — are left to the parent). */
@media only screen and (min-width: 782px) {
	body.single.has-sidebar.single-featured-image-default #main {
		display: grid;
		grid-template-columns: 65% 1fr;
		column-gap: 2rem;
		align-items: start;
		grid-template-areas:
			"header  header"
			"image   sidebar"
			"content sidebar";
	}

	body.single.has-sidebar.single-featured-image-default #main > .entry-header {
		grid-area: header;
	}

	body.single.has-sidebar.single-featured-image-default #main > .post-thumbnail {
		grid-area: image;
		width: auto; /* fill the grid cell rather than the old flex-stretched 100% */
		margin: 0 0 2rem;
	}
	body.single.has-sidebar.single-featured-image-default #main > .post-thumbnail img {
		width: 100%;
		height: auto;
	}

	body.single.has-sidebar.single-featured-image-default #main > .main-content {
		grid-area: content;
		width: auto; /* override the parent's .single .main-content { width: 65% } */
	}

	body.single.has-sidebar.single-featured-image-default #main > #secondary {
		grid-area: sidebar;
		width: auto; /* override the parent's #secondary { width: calc(35% - 2rem) } */
		/* The grid aligns the sidebar box-top to the image box-top; drop the
		   parent's top padding/margin (~50px) so the heading isn't pushed down.
		   The heading line-box then adds ~5.45px of half-leading + ascender
		   above the cap, so the visible "LATEST" cap would sit ~5px below the
		   image's top edge — lift the column by that much so the cap meets it. */
		padding-top: 0;
		margin-top: -5px;
	}
}

body.archive .page-title {
	/* Parent's `.archive .page-title { color: <primary/blue> }` shows through
	   on the Official News archive because that template puts the title text
	   directly in the h1 (no dark .page-description span to mask it, unlike
	   category archives). Force the editorial dark + Fraunces here.

	   NOTE: font-size is deliberately NOT set on this shared selector. The
	   parent's font-size vars are em-based (xxxl = 2.8em), and on category
	   archives the visible text lives in a nested .page-description span that
	   itself sizes at 2.8em *relative to .page-title*. Setting a font-size on
	   .page-title here inflates that span's em base and multiplies the result
	   (2.8em x 2.8em ~= 157px) — the oversized-title regression. Size is scoped
	   per archive type below instead. */
	font-family: var(--font-serif);
	font-weight: 600;
	color: #1a1a1a;
	letter-spacing: -0.015em;
	text-transform: none;
}

/* Title SIZE, scoped per archive type so nothing compounds.

   Category archives: the visible title is the nested .page-description span,
   already sized by the parent at 2.8em (xxxl) off a 20px .page-title base
   (~56px desktop). We leave .page-title at the parent default so that base is
   untouched and the span keeps its original, responsive computed size.

   Official News CPT archive: the title text sits directly in .page-title with
   no .page-description child, so applying the same xxxl here can't compound.
   2.8em off the same 20px base gives the identical computed size as the
   category .page-description, so both archive types match at every width. */
body.post-type-archive-pt_press_release .page-title {
	font-size: var(--newspack-theme-font-size-xxxl);
}

/* --- B. Title hierarchy: feature large, list items quieter -------------- */
/* Feature = first article in the loop. Listed items must clearly de-rank   */
/* below it so the page reads as "lead + list" not "five competing leads".  */

body.archive .site-main > article.entry:first-of-type .entry-title {
	font-size: var(--text-5xl);
	line-height: var(--leading-tight);
	font-weight: 600;
}

body.archive .site-main > article.entry:not(:first-of-type) .entry-title {
	font-size: 1.375rem;   /* 22px @ 16px root */
	line-height: var(--leading-snug);
	font-weight: 600;
}

/* --- C. Thumbnail aspect lock ------------------------------------------- */
/* Force the feature image to a banner-height clamp; pin list thumbs to 4:3 */
/* so heterogeneous source aspects don't make the row rhythm jitter.        */

body.archive .post-thumbnail img {
	width: 100%;
	display: block;
	object-fit: cover;
}

/* Make sure the feature stacks full-width even when the parent's           */
/* .feature-latest body class isn't applied (theme_mod default = true,      */
/* but we don't want to depend on it).                                      */

body.archive .site-main > article.entry:first-of-type {
	display: block;
}

body.archive .site-main > article.entry:first-of-type .post-thumbnail {
	max-width: 100%;
	margin: 0 0 1rem;
}

body.archive .site-main > article.entry:first-of-type .post-thumbnail img {
	height: clamp(280px, 38vw, 460px);
}

body.archive .site-main > article.entry:not(:first-of-type) .post-thumbnail img {
	aspect-ratio: 4 / 3;
	height: auto;
}

/* --- D. Divider + label between feature and the list ------------------- */
/* Target the article immediately after the feature; draw a hairline above  */
/* it and tuck an "More in this section" chip onto that rule.              */

body.archive .site-main > article.entry:first-of-type + article.entry {
	margin-top: 3rem;
	padding-top: 2.5rem;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	position: relative;
}

body.archive .site-main > article.entry:first-of-type + article.entry::before {
	content: "More in this section";
	position: absolute;
	top: -0.6em;
	left: 0;
	padding-right: 0.75rem;
	background: #fdfdfb;   /* matches body background; "cuts" the rule */
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-accent);
}

/* =========================================================================
   Official News — single-post template (.pt-pr-single)
   Editorial layout: eyebrow dateline → headline → original (optional) →
   source line → topics → AI summary → footer (source CTA + attribution + back).
   Reads the existing CPT meta keys only; data contract unchanged.
   ========================================================================= */

.pt-pr-single__header {
	margin-bottom: 2rem;
}

/* --- Eyebrow dateline --------------------------------------------------- */
/* "Official News · {ministry} · {country} · {date}". Inter, uppercase,
   small. flex-wrap so it breaks onto the next line gracefully on mobile
   instead of hard-stacking each item. */
.pt-pr-single__eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1rem;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent);
	line-height: 1.4;
}

.pt-pr-single__eyebrow-item,
.pt-pr-single__eyebrow-date {
	display: inline-block;
}

.pt-pr-single__eyebrow-date {
	color: #4a4a4a;        /* differentiate the date from accent labels */
	font-weight: 500;
	letter-spacing: 0.06em;
}

.pt-pr-single__eyebrow-sep {
	color: rgba(0, 0, 0, 0.35);
	font-weight: 400;
}

/* --- Headline ----------------------------------------------------------- */
.pt-pr-single__title {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: var(--text-4xl);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	margin: 0 0 0.6rem;
	color: #1a1a1a;
}

/* --- Original-language title (italic) ----------------------------------- */
.pt-pr-single__original {
	margin: 0 0 1rem;
	font-family: var(--font-serif);
	font-size: var(--text-base);
	color: #4a4a4a;
}

/* --- Topic chips (Inter caps, subordinate to the eyebrow) --------------- */
.pt-pr-single__topics {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
}

.pt-pr-single__topics li {
	margin: 0;
}

.pt-pr-single__topics a,
.pt-pr-wire__topic {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
	text-decoration: none;
}

.pt-pr-single__topics a:hover,
.pt-pr-single__topics a:focus,
.pt-pr-wire__topic:hover,
.pt-pr-wire__topic:focus {
	color: var(--color-accent-hover);
}

/* --- Summary content (inherits body Fraunces; no section label needed) -- */
.pt-pr-single__summary {
	margin-top: 1.5rem;
}

/* --- Footer (source CTA + attribution + back-to-archive) ---------------- */
.pt-pr-single__footer {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.pt-pr-single__source-cta {
	margin: 0 0 0.5rem;
	font-family: var(--font-sans);
	font-size: 15px;
}

.pt-pr-single__source-link {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.pt-pr-single__source-link:hover,
.pt-pr-single__source-link:focus {
	color: var(--color-accent-hover);
}

.pt-pr-single__attribution {
	margin: 0 0 1.5rem;
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: var(--leading-snug);
	color: #6a6a6a;
}

.pt-pr-single__back {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 14px;
}

.pt-pr-single__back a {
	color: #1a1a1a;
	text-decoration: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.25);
	padding-bottom: 1px;
}

.pt-pr-single__back a:hover,
.pt-pr-single__back a:focus {
	color: var(--color-accent);
	border-bottom-color: var(--color-accent);
}

/* =========================================================================
   Official News archive — editorial news-wire list (.pt-pr-wire)
   Stacked chronological items, hairline-separated. No bullets, no grid.
   The page header (h1.page-title) and top spacing are inherited from the
   existing body.archive rules; the per-item eyebrow + topic chips reuse the
   .pt-pr-single__* styles. Only the wire layout is defined here.
   ========================================================================= */

.pt-pr-wire__item {
	padding: 1.5rem 0;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.pt-pr-wire__item:first-child {
	border-top: none;
	padding-top: 0;
}

.pt-pr-wire__eyebrow {
	margin-bottom: 0.5rem;
}

/* Headline — Fraunces, tier-2 listing size (~22-24px via --text-2xl),
   not the 44px single-post hero size. */
.pt-pr-wire__title {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: var(--text-2xl);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-tight);
	margin: 0 0 0.5rem;
}

.pt-pr-wire__title a {
	color: #1a1a1a;
	text-decoration: none;
}

.pt-pr-wire__title a:hover,
.pt-pr-wire__title a:focus {
	color: var(--color-accent);
}

/* Excerpt — roman, muted, matching the homepage excerpt treatment. */
.pt-pr-wire__excerpt {
	margin: 0 0 0.6rem;
	font-family: var(--font-serif);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	color: #4a4a4a;
}

/* Topic chips — inline, hashtag-style (chip appearance shared with the
   single-post rule above). No list markup, so no bullets. */
.pt-pr-wire__topics {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}

.pt-pr-wire__empty {
	font-family: var(--font-serif);
	color: #4a4a4a;
}

/* --- Filter bar (progressive enhancement over the wire) ----------------- */
/* Hidden until JS removes [hidden]; no-JS users just get the clean wire.   */
/* Item styling is reused from .pt-pr-wire__*; only the bar is new here.    */

.pt-pr-filter {
	margin: 0 0 2rem;
	padding: 0 0 1.5rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.pt-pr-filter__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem 1.25rem;
}

/* Field = uppercase Inter label stacked over its control. */
.pt-pr-filter__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6a6a6a;
}

.pt-pr-filter__field--grow {
	flex: 1 1 12rem;
}

.pt-pr-filter select,
.pt-pr-filter input[type="date"],
.pt-pr-filter input[type="search"] {
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: #1a1a1a;
	background-color: #fff;
	padding: 0.45rem 0.6rem;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 2px;
}

.pt-pr-filter input[type="search"] {
	width: 100%;
}

.pt-pr-filter select:focus,
.pt-pr-filter input:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 2px rgba(122, 31, 43, 0.18);   /* maroon focus ring */
}

.pt-pr-filter__clear {
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-accent);
	background: none;
	border: none;
	padding: 0.5rem 0;
	cursor: pointer;
}

.pt-pr-filter__clear:hover,
.pt-pr-filter__clear:focus {
	color: var(--color-accent-hover);
	text-decoration: underline;
}

.pt-pr-filter__status {
	margin: 0 0 1.25rem;
	font-family: var(--font-sans);
	font-size: 13px;
	color: #6a6a6a;
}

/* =========================================================================
   Official News widget (.pt-pr-widget) — mu-plugin output, any widget area.

   Heading matches the section-label treatment exactly (identical to
   .article-section-title and the #secondary widget headings: Inter 14px / 700 /
   0.12em / uppercase / maroon). Items reuse the eyebrow dateline look, sized
   down for a narrow sidebar, with a Fraunces title link at the Recent-Posts
   link size. Item-level selectors carry the .pt-pr-widget ancestor (two
   classes) so they outrank Newspack's .widget-area a / p rules when the widget
   sits in the sidebar; the heading is left unprefixed so its typography wins
   over element-level h2 rules in any widget area.
   ========================================================================= */

.pt-pr-widget__heading {
	margin: 0 0 1rem;
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 700;
	line-height: var(--leading-snug);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-accent);
}

/* The widget/rail headings can wrap their title in an <a> linking to the
   Official News archive. Make the link visually identical to plain heading
   text (no underline, inherit colour) so it reads as a heading, with a
   subtle accent-hover shift for affordance. The .pt-pr-widget / .pt-pr-rail
   ancestor (two classes) outranks the parent's `.entry-content a` rule that
   would otherwise pull these links to grey + underlined on the homepage. */
.pt-pr-widget .pt-pr-widget__heading a,
.pt-pr-widget .pt-pr-widget__heading a:visited,
.pt-pr-rail .pt-pr-rail__heading a,
.pt-pr-rail .pt-pr-rail__heading a:visited {
	color: inherit;
	text-decoration: none;
}
.pt-pr-widget .pt-pr-widget__heading a:hover,
.pt-pr-widget .pt-pr-widget__heading a:focus,
.pt-pr-rail .pt-pr-rail__heading a:hover,
.pt-pr-rail .pt-pr-rail__heading a:focus {
	color: var(--color-accent-hover);
	text-decoration: none;
}

.pt-pr-widget__list {
	margin: 0;
	padding: 0;
}

.pt-pr-widget .pt-pr-widget__item {
	display: block;
	margin: 0 0 1.1rem;
	padding: 0;
}

.pt-pr-widget .pt-pr-widget__item:last-child {
	margin-bottom: 0;
}

/* Eyebrow — the single-post dateline look, sized down for the sidebar. */
.pt-pr-widget .pt-pr-widget__eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin: 0 0 0.3rem;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
	line-height: 1.35;
}

.pt-pr-widget__eyebrow-date {
	color: #4a4a4a;
	font-weight: 500;
	letter-spacing: 0.05em;
}

.pt-pr-widget__eyebrow-sep {
	color: rgba(0, 0, 0, 0.35);
	font-weight: 400;
}

/* Title link — Fraunces at the Recent-Posts link size, dark heading colour
   (maroon on hover), matching the .pt-pr-wire__title a treatment. */
.pt-pr-widget .pt-pr-widget__link {
	display: block;
	font-family: var(--font-serif);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	color: #1a1a1a;
	text-decoration: none;
}

.pt-pr-widget .pt-pr-widget__link:hover,
.pt-pr-widget .pt-pr-widget__link:focus {
	color: var(--color-accent);
}

.pt-pr-widget .pt-pr-widget__empty {
	margin: 0;
	font-family: var(--font-serif);
	color: #4a4a4a;
}

/* =========================================================================
   Official News rail ([official_news_feed] shortcode) — lean feed for the
   homepage hero row's right column. The heading reuses .article-section-title;
   each item is a small maroon country tag (cat-links treatment) over a
   Fraunces title link. No eyebrow / ministry / date / excerpt.
   ========================================================================= */

.pt-pr-rail__heading {
	margin-top: 0;
}

.pt-pr-rail__list {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.pt-pr-rail__item {
	margin: 0;
}

/* Eyebrow line — country tag + date as one inline line above the title. */
.pt-pr-rail__eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem;
	margin: 0 0 0.2rem;
	line-height: 1.35;
}

/* Country tag + date — same .cat-links treatment so they read as a single,
   consistent maroon eyebrow line (unlike the sidebar widget eyebrow, which
   greys the date to differentiate it from the maroon ministry/country labels). */
.pt-pr-rail__tag,
.pt-pr-rail__date {
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
}

/* Separator dot between tag and date. */
.pt-pr-rail__eyebrow-sep {
	color: rgba(0, 0, 0, 0.35);
	font-weight: 400;
}

/* Title — Fraunces, dark, ~16px tight, maroon on hover. The .pt-pr-rail
   ancestor (two classes) outranks the parent's `.entry-content a` rule, which
   would otherwise pull links to grey + underlined when the rail renders inside
   the homepage's .entry-content. */
.pt-pr-rail .pt-pr-rail__link {
	display: block;
	font-family: var(--font-serif);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.25;
	color: #1a1a1a;
	text-decoration: none;
}

.pt-pr-rail .pt-pr-rail__link:hover,
.pt-pr-rail .pt-pr-rail__link:focus {
	color: var(--color-accent);
	text-decoration: none;
}

/* Excerpt — roman serif, muted, matching the homepage POM card and
   .pt-pr-wire excerpt treatment, but at --text-xs so it stays clearly
   below the 16px title (var(--text-sm) would resolve above it). Only the
   Think Tank rail renders an excerpt (the Official News rail has none).
   The .pt-pr-rail ancestor (two classes) outranks the parent's
   `.entry-content p` rule, which would otherwise inflate this to the
   body-copy size (--text-base, ~21px) and invert the title/excerpt
   hierarchy — the same override the title link above relies on. */
.pt-pr-rail .pt-pr-rail__excerpt {
	margin: 0.25rem 0 0;
	font-family: var(--font-serif);
	font-size: var(--text-xs);
	line-height: var(--leading-normal);
	color: #4a4a4a;
}

.pt-pr-rail__empty {
	margin: 0;
	font-family: var(--font-serif);
	color: #4a4a4a;
}

/* =========================================================================
   Homepage hero row — two-column layout. The `pt-pr-hero-row` additional-CSS-
   class is on the RIGHT (rail) .wp-block-column. Its parent (the outer
   .wp-block-columns) is flex with default `align-items: normal` (= stretch),
   so the rail column already matches the hero column's height automatically.

   Row height is driven by the hero column: the rail is absolutely positioned
   inside the rail column with inset:0 so it does NOT contribute to the
   column's intrinsic height. The rail scrolls internally if its content runs
   longer than the hero. The mobile breakpoint (where core's Columns block
   stacks the columns) is outside this media query, so on mobile the rail
   falls back to natural in-flow positioning beneath the hero.
   ========================================================================= */

@media (min-width: 782px) {
	body.home .pt-pr-hero-row {
		position: relative;
		overflow: hidden;
	}

	body.home .pt-pr-hero-row > .pt-pr-rail {
		position: absolute;
		inset: 0;
		overflow-y: auto;
		padding-right: 0.5rem; /* breathing room for the scrollbar */
	}
}

/* =========================================================================
   Postcard dividers — vertical inset hairlines between cards in multi-column
   Homepage Posts blocks (3-up, 4-up, 2-up). Mirrors the sidebar divider
   treatment: 1px rgba(0,0,0,0.12) with a 2rem vertical inset.

   Cards live in `.wp-block-newspack-blocks-homepage-articles > div > article`,
   where the inner unnamed div is a flex container (flex-wrap: wrap, gap: 32px).
   Dividers render as a ::before on each non-first-of-row card, positioned 16px
   into the left gap (centered in the 32px gap, ~16px clearance each side).

   article:nth-of-type(Nn+1) identifies the first card of each row; those are
   excluded. (`:nth-of-type` rather than `:nth-child` because the inner div
   also contains the H2 section title as its first child, which would shift
   article positions under `:nth-child`.)
   The modulus changes with the wrap breakpoint:
     - 4-up wraps to 2x2 between 600–781px (then stacks below 600px);
     - 3-up and 2-up keep their native count down to 600px;
     - below 600px all blocks stack single-column, so no dividers render.

   Sustainability uses image-alignleft (no columns-N class) and the FEATURED
   hero is columns-1 — both excluded automatically. */

.wp-block-newspack-blocks-homepage-articles > div > article::before {
	position: absolute;
	top: 2rem;
	bottom: 2rem;
	left: -16px;            /* centered in the 32px (2rem) flex gap */
	width: 1px;
	background-color: rgba(0, 0, 0, 0.12);
	pointer-events: none;
}

/* 3-up and 2-up — stable layout from 600px up. */
@media (min-width: 600px) {
	.wp-block-newspack-blocks-homepage-articles.columns-3 > div > article:not(:nth-of-type(3n+1)),
	.wp-block-newspack-blocks-homepage-articles.columns-2 > div > article:not(:nth-of-type(2n+1)) {
		position: relative;
	}
	.wp-block-newspack-blocks-homepage-articles.columns-3 > div > article:not(:nth-of-type(3n+1))::before,
	.wp-block-newspack-blocks-homepage-articles.columns-2 > div > article:not(:nth-of-type(2n+1))::before {
		content: "";
	}
}

/* 4-up — collapses to 2x2 between 600–781px. */
@media (min-width: 600px) and (max-width: 781.98px) {
	.wp-block-newspack-blocks-homepage-articles.columns-4 > div > article:not(:nth-of-type(2n+1)) {
		position: relative;
	}
	.wp-block-newspack-blocks-homepage-articles.columns-4 > div > article:not(:nth-of-type(2n+1))::before {
		content: "";
	}
}

/* 4-up — full 4-per-row at >=782px. */
@media (min-width: 782px) {
	.wp-block-newspack-blocks-homepage-articles.columns-4 > div > article:not(:nth-of-type(4n+1)) {
		position: relative;
	}
	.wp-block-newspack-blocks-homepage-articles.columns-4 > div > article:not(:nth-of-type(4n+1))::before {
		content: "";
	}
}

/* =========================================================================
   Archive "more in this section" card excerpts — sized below the hero.

   There is no literal "More in this section" header in the DOM: the archive
   simply renders the first article as a large hero (full-width thumbnail +
   large excerpt) and the remaining articles as smaller image-left cards
   below. Both share the same .entry-content > p markup and inherit the body
   font-size (20.89px), so the small cards' excerpts read as loud as the
   hero's. Step the subsequent cards down to 0.9rem (= 18px at the 20px root)
   so the hero excerpt stays the dominant block of body text.

   Hero (the first article) is untouched. Scoped to archive/blog/search so
   single posts and the homepage are unaffected. */
body.archive #main > article:not(:first-of-type) .entry-content p,
body.blog #main > article:not(:first-of-type) .entry-content p,
body.search #main > article:not(:first-of-type) .entry-content p {
	font-size: 0.9rem;
	line-height: var(--leading-normal);
}

/* =========================================================================
   Entry-date links — no underline.

   Newspack wraps the post date as <span class="posted-on"><a><time>...</time>
   </a></span>. The child theme's global `a { text-decoration: underline; ... }`
   rule underlines that link by default, which makes the date read as a "click
   me" CTA on hero + archive cards + single posts. Drop the underline on the
   date link only — scoped to .posted-on a / .entry-date a so breadcrumb and
   in-body links keep theirs. No new hover state added; the existing colour
   stays subtle. */
.posted-on a,
.posted-on a:visited,
a.entry-date,
.entry-date a {
	text-decoration: none;
	border-bottom: 0;
}

/* =========================================================================
   PolicyTrade dark footer (.pt-footer)
   Colours are hardcoded ink/cream in both light and dark page modes —
   intentionally never inverts. The accent (--pt-footer-accent) is the brand
   maroon lightened ~15-20% so eyebrows/links clear AA on the #1a1a18 band.
   ========================================================================= */

.pt-footer {
	/* Brand maroon lightened for the dark band. The brief's #c0655c value
	   measured 4.36:1 contrast against #1a1a18 — under WCAG AA's 4.5:1 for
	   small text — so nudged to #d2776e (5.48:1) on small Inter eyebrows /
	   12px copy. Still reads as the same warm rust tone. */
	--pt-footer-accent: #d2776e;
	background: #1a1a18;
	color: #c9c6bd;
	margin-top: 3rem;
}

.pt-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 2.5rem 1.5rem 1.5rem;
}

.pt-footer__grid {
	display: grid;
	grid-template-columns: 1.8fr 1fr 1fr 1.3fr;
	gap: 32px;
}

.pt-footer__lockup {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	margin-bottom: 10px;
}

.pt-footer__stamp {
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #f5f3ee;
	border-radius: 3px;
	color: #f5f3ee;
	font-family: "Fraunces", Georgia, serif;
	font-variation-settings: "opsz" 40, "wght" 500;
	font-size: 15px;
	letter-spacing: -0.5px;
}

.pt-footer__wordmark {
	font-family: "Fraunces", Georgia, serif;
	font-variation-settings: "opsz" 144, "wght" 500;
	font-size: 22px;
	letter-spacing: -0.3px;
	color: #f5f3ee;
}

.pt-footer__tagline {
	font-family: "Fraunces", Georgia, serif;
	font-style: italic;
	font-size: 14px;
	color: #c9c6bd;
	margin: 0 0 14px;
}

.pt-footer__note {
	font-size: 13px;
	line-height: 1.6;
	color: #94918a;
	margin: 0 0 16px;
	max-width: 34ch;
}

.pt-footer__eyebrow {
	color: var(--pt-footer-accent);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 10px;
}

.pt-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pt-footer__links a,
.pt-footer__contact-link {
	color: #c9c6bd;
	text-decoration: none;
	display: block;
	padding: 3px 0;
	font-size: 14px;
}

.pt-footer__links a:hover,
.pt-footer__contact-link:hover {
	color: var(--pt-footer-accent);
}

.pt-footer__contact-label {
	font-size: 14px;
	color: #c9c6bd;
	margin: 0 0 4px;
}

.pt-footer__meta {
	font-size: 13px;
	color: #94918a;
	margin: 12px 0 0;
}

.pt-footer__meta + .pt-footer__meta {
	margin-top: 2px;
}

.pt-footer__social {
	margin-top: 16px;
	display: flex;
	gap: 8px;
}

/* Newspack's social menu renders <ul.social-links-menu><li><a>...</a></li></ul>;
   strip the list chrome so links sit inline as icon buttons. */
.pt-footer__social .social-links-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 8px;
}
.pt-footer__social .social-links-menu li {
	margin: 0;
}

.pt-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 0.5px solid rgba(245, 243, 238, 0.18);
	border-radius: 6px;
	color: #c9c6bd;
	text-decoration: none;
}

.pt-footer__social a:hover {
	color: var(--pt-footer-accent);
	border-color: var(--pt-footer-accent);
}

.pt-footer__social svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.pt-footer__bar {
	border-top: 0.5px solid rgba(245, 243, 238, 0.14);
	margin-top: 26px;
	padding-top: 14px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 12px;
	/* Lifted from #7d7a73 (4.07:1, under AA) to #94918a (5.54:1) so the
	   12px copyright + "From the publishers of…" meta clears WCAG AA against
	   the #1a1a18 band. Matches the .pt-footer__meta colour in the brand
	   column for visual consistency. */
	color: #94918a;
}

.pt-footer__pom {
	font-style: italic;
	font-family: "Fraunces", Georgia, serif;
}

@media (max-width: 782px) {
	.pt-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 24px;
	}
	.pt-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 480px) {
	.pt-footer__grid {
		grid-template-columns: 1fr;
	}
	.pt-footer__bar {
		flex-direction: column;
	}
}

/* POM: centre primary nav */
.site-header #site-navigation { flex-basis: 100%; text-align: center; }
.site-header #site-navigation ul ul { text-align: left; }
.site-header .nav1 .main-menu > li:last-child { margin-right: 0; }