/**
 * PA Articles V2 — filter bar + featured article + card grid + load more,
 * plus the Articles-page overrides for the shared PA Hero Banner element.
 *
 * Self-contained: does not depend on the search-page styles in pa-v2.css, and
 * does not reuse .pa-article from the homepage Insights grid. It does consume
 * the v2 design tokens (--pa-v2-navy, --pa-v2-green, the two font stacks),
 * which are declared on .pa-v2 / .pa-v2-html by pa-v2.css.
 *
 * Class prefix is .pa-av2 rather than .pa-articles to keep it clearly separate
 * from anything on /search/.
 *
 * ONE WIDTH TOKEN: --pa-articles-max drives the hero copy, the filter bar and
 * the card grid. Change it once, below, and all three follow.
 */

/* ------------------------------------------------------------------
 * Tokens
 * ------------------------------------------------------------------ */
 .pa-av2,
 body.pa-articles-page {
     --pa-articles-max: 1088px;
     --pa-articles-gutter: clamp(20px, 4vw, 40px);
 }
 
 .pa-av2 {
     --pa-av2-gap: clamp(12px, 1.2vw, 20px);
     --pa-av2-radius: var(--pa-v2-radius, 5px);
     --pa-av2-border: #f2f2f2;
     --pa-av2-panel: #f4f5f7;
 
     /*
      * How far the select's focus ring sits OUTSIDE the control, on the
      * horizontal axis only. See .pa-av2-filters__field--select::before.
      */
     --pa-av2-select-ring-inset: 14px;
 }
 
 /* ------------------------------------------------------------------
  * Shell
  * ------------------------------------------------------------------ */
 
 .pa-av2 {
     position: relative;
     box-sizing: border-box;
     padding: clamp(28px, 3.5vw, 48px) 0 clamp(56px, 6vw, 88px);
 
     /* Escape any constrained container the builder drops this into. */
     width: 100vw;
     max-width: 100vw;
     margin-left: calc(50% - 50vw);
     margin-right: calc(50% - 50vw);
     padding-top: 28px;
 }
 
 .pa-av2 *,
 .pa-av2 *::before,
 .pa-av2 *::after {
     box-sizing: border-box;
 }
 
 body.pa-articles-page .material .wpb_content_element, .material .wpb_row {
     margin-bottom: 0 !important;
 }
 
 /*
  * max-width is the column PLUS the gutters, not the column flat: box-sizing is
  * border-box throughout, so a flat 1088 would leave only ~1008px of content
  * once the padding is subtracted. Written this way the content measures
  * exactly 1088px on wide screens while the gutters still protect the edges on
  * narrow ones.
  */
 .pa-av2__inner {
     width: 100%;
     max-width: calc(var(--pa-articles-max) + 2 * var(--pa-articles-gutter));
     margin: 0 auto;
     padding-left: var(--pa-articles-gutter);
     padding-right: var(--pa-articles-gutter);
 }
 
 /* ------------------------------------------------------------------
  * Filter bar
  * ------------------------------------------------------------------ */
 
 .pa-av2-filters {
     position: relative;
     display: flex;
     align-items: center;
     gap: clamp(12px, 1.4vw, 20px);
     margin: 0 0 clamp(28px, 3vw, 44px);
     padding: 0 0 22px;
 }
 
 /*
  * Full-bleed rule under the bar. The filter row lives inside the 1088px
  * column, so the line has to escape it — 100vw centred on the row rather than
  * a plain border-bottom, which would stop at the column edges.
  */
 .pa-av2-filters::after {
     content: "";
     position: absolute;
     left: 50%;
     bottom: 0;
     width: 100vw;
     transform: translateX(-50%);
     border-bottom: 1px solid var(--pa-av2-border);
     pointer-events: none;
 }
 
 .pa-av2-filters__field {
     position: relative;
     display: flex;
     align-items: center;
     min-width: 0;
     height: 52.75px;
     /* No border or background by default — only the search field gets a box. */
     border: 0;
     background: none;
 }
 
 /*
  * FOCUS RING, PAINTED OUTSIDE THE CONTROL.
  *
  * The select is borderless at rest and the <select> inside has no left padding,
  * so a border on the field itself sits flush against the glyphs — no breathing
  * room. Adding padding would shift the label, which must not move.
  *
  * So the ring lives on a pseudo-element inset NEGATIVELY on the horizontal
  * axis: it renders outside the control and takes no part in layout, leaving the
  * label exactly where it is.
  *
  * Horizontal only, deliberately. A uniform outline-offset would grow the ring
  * vertically too and break its alignment with the search field alongside it.
  *
  * ::before because the chevron already owns ::after.
  */
 .pa-av2-filters__field--select {
     flex: 0 1 254px;
 }
 
 .pa-av2-filters__field--select::before {
     content: "";
     position: absolute;
     inset: 0 calc(-1 * var(--pa-av2-select-ring-inset, 14px));
     border: 1px solid transparent;
     border-radius: var(--pa-av2-radius);
     transition: border-color 0.15s ease;
     pointer-events: none;
 }
 
 /*
  * :focus-within rather than :focus-visible so it also shows on mouse click —
  * this doubles as the "open" state, not just a keyboard affordance.
  *
  * CAVEAT: #f2f2f2 on white is ~1.1:1 contrast, so as a focus indicator this is
  * effectively invisible to low-vision users and fails WCAG 2.4.7. It matches
  * the comp. If it should also work as an indicator, add a :focus-visible rule
  * with border-color: var(--pa-v2-navy) for keyboard users only.
  */
 .pa-av2-filters__field--select:focus-within::before {
     border-color: var(--pa-av2-border);
 }
 
 .pa-av2-filters__field--search {
     flex: 1 1 auto;
     padding-left: 16px;
     border: 1px solid var(--pa-av2-border);
     border-radius: var(--pa-av2-radius);
     background: var(--pa-v2-white, #fff);
     transition: border-color 0.15s ease;
 }
 
 .pa-av2-filters__field--search:focus-within {
     border-color: var(--pa-v2-navy, #1d2f6d);
 }
 
 /* Chevron, pushed to the right end of the borderless select. */
 .pa-av2-filters__field--select::after {
     content: "";
     position: absolute;
     right: 8px;
     width: 9px;
     height: 9px;
     border-right: 1.5px solid var(--pa-v2-navy, #1d2f6d);
     border-bottom: 1.5px solid var(--pa-v2-navy, #1d2f6d);
     transform: translateY(-25%) rotate(45deg);
     pointer-events: none;
 }
 
 /*
  * Salient styles bare `select` and `input` globally and with high specificity,
  * so these need to be assertive. Scoped to .pa-av2, so nothing else is hit.
  *
  * font-size also sizes the native <select> popup on macOS, which reads the
  * control rather than the options — so this one value controls both the label
  * and how large the dropdown list opens.
  */
 .pa-av2 .pa-av2-filters__field select,
 .pa-av2 .pa-av2-filters__field input[type="search"],
 .pa-av2 .pa-av2-filters__field input[type="text"] {
     width: 100%;
     height: 100%;
     margin: 0 !important;
     padding: 0 32px 0 0 !important;
     border: 0 !important;
     border-radius: 0 !important;
     background: transparent !important;
     box-shadow: none !important;
     font-family: var(--pa-v2-font-sans, sans-serif);
     font-size: 16px;
     font-weight: 500;
     line-height: 24.77px;
     letter-spacing: 0;
     color: #1d2f6d;
     -webkit-appearance: none;
     appearance: none;
     outline: none;
     min-height: 0;
 }
 
 .pa-av2 .pa-av2-filters__field input[type="search"] {
     padding-left: 17px !important;
 }
 
 .pa-av2 .pa-av2-filters__field input[type="search"]::placeholder {
     color: var(--pa-v2-navy, #1d2f6d) !important;
 }
 
 /* The search input sits inside a padded box, so it needs its own insets. */
 .pa-av2 .pa-av2-filters__field--search input {
     padding: 0 16px 0 10px !important;
     font-weight: 400;
 }
 
 .pa-av2 .pa-av2-filters__field input::placeholder {
     color: var(--pa-v2-grey, #6b7a90);
     opacity: 1;
 }
 
 /* Kill the WebKit "x" so it doesn't collide with our layout. */
 .pa-av2 .pa-av2-filters__field input[type="search"]::-webkit-search-cancel-button {
     -webkit-appearance: none;
     appearance: none;
 }
 
 /*
  * Option sizing for platforms that size the popup from the option rather than
  * the control (Windows, Linux Firefox). macOS ignores this and uses the
  * select's own font-size above; both are needed for one consistent popup.
  */
 .pa-av2 .pa-av2-filters__field select option {
     font-family: var(--pa-v2-font-sans, sans-serif);
     font-size: 16px;
     color: #1d2f6d;
 }
 
 /* Sized from the 23px artwork; flex-shrink off so it can't squash. */
 .pa-av2-filters__icon {
     flex: 0 0 auto;
     width: 23px;
     height: 23px;
     color: var(--pa-v2-navy, #1d2f6d);
 }
 
 /*
  * The no-JS fallback submit. The script sets [hidden] on init, so this is only
  * ever visible when JS failed to run — in which case it must look like a real
  * button.
  */
 .pa-av2 .pa-av2-filters__submit {
     flex: 0 0 auto;
     height: 52.75px;
     padding: 0 26px !important;
     border: 2px solid var(--pa-v2-navy, #1d2f6d) !important;
     border-radius: var(--pa-av2-radius) !important;
     background: var(--pa-v2-navy, #1d2f6d) !important;
     color: var(--pa-v2-white, #fff) !important;
     font-family: var(--pa-v2-font-sans, sans-serif);
     font-size: 15px;
     font-weight: 700;
     line-height: 1;
     cursor: pointer;
 }
 
 .pa-av2 .pa-av2-filters__submit[hidden] {
     display: none !important;
 }
 
 @media (max-width: 860px) {
     .pa-av2-filters {
         flex-wrap: wrap;
     }
 
     .pa-av2-filters__field--select {
         flex: 1 1 calc(50% - 10px);
     }
 
     .pa-av2-filters__field--search {
         flex: 1 1 100%;
     }
 }
 
 /* ------------------------------------------------------------------
  * Results container — dims during an AJAX swap
  * ------------------------------------------------------------------ */
 
 .pa-av2__results {
     transition: opacity 0.18s ease;
 }
 
 .pa-av2__results[aria-busy="true"] {
     opacity: 0.45;
     pointer-events: none;
 }
 
 .pa-av2__featured-wrap:empty {
     display: none;
 }
 
 /* ------------------------------------------------------------------
  * Featured article
  * ------------------------------------------------------------------ */
 
 .pa-av2-featured {
     display: grid;
     /* Even split, per the comp — was 57/43. */
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
     gap: 0;
     overflow: hidden;
     /* Square corners, per the comp. */
     border-radius: 0;
     background: var(--pa-av2-panel);
     margin-bottom: clamp(20px, 2.4vw, 34px);
     /*
      * Fixed 465px rather than a minimum: the card must not grow when a long
      * title wraps to a fifth line. The panel is a centred flex column, so the
      * copy stays vertically centred as it gets taller. See the overflow note
      * on __panel below.
      */
     height: 465px;
     min-height: 465px;
 }
 
 .pa-av2-featured__media {
     display: block;
     height: 100%;
     min-height: 465px;
     background-color: var(--pa-v2-navy, #1d2f6d);
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
 }
 
 /* Generous panel inset — the comp sits the copy ~80px in from the split. */
 .pa-av2-featured__panel {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
     padding: clamp(28px, 5vw, 80px) clamp(28px, 4.5vw, 72px);
     /*
      * With the card height locked, an unusually long title + excerpt can exceed
      * 465px. Hidden clips it rather than letting it spill over the card edge —
      * if that ever bites, shorten the featured excerpt via the element's
      * "Featured excerpt length (words)" setting rather than raising the height.
      */
     overflow: hidden;
 }
 
 .pa-av2-featured__date {
     margin: 0 0 26px;
     padding-bottom: 0 !important;
     font-family: var(--pa-v2-font-sans, sans-serif);
     font-size: 16px;
     font-weight: 600;
     line-height: 100%;
     letter-spacing: 0;
     color: #1d2f6d;
 }
 
 /*
  * NOTE: line-height 100% is the supplied spec, but it is Figma's export of
  * "Auto" and contradicts the comp — measured there, the four title lines sit
  * ~38px apart at 28px, i.e. about 1.35. Swap the value below if the title
  * renders too tight.
  *
  * Same specificity problem as the card title: this is an <h3 class="h4"> inside
  * .entry-content, so pa-v2.css sets 28px / 1.1 with !important. The size
  * matched by luck; the line-height did not. Qualified + !important here so both
  * are actually ours.
  */
 html body.pa-v2 .pa-v2__main .entry-content .pa-av2 .pa-av2-featured__title,
 .pa-av2 .pa-av2-featured__title {
     margin: 0 0 22px;
     font-family: var(--pa-v2-font-sans, sans-serif);
     font-size: 28px !important;
     font-weight: 600;
     line-height: 100% !important; /* comp measures ~1.35 */
     letter-spacing: 0;
     color: #1d2f6d;
 }
 
 .pa-av2 .pa-av2-featured__title a {
     color: inherit;
     text-decoration: none;
 }
 
 .pa-av2 .pa-av2-featured__title a:hover,
 .pa-av2 .pa-av2-featured__title a:focus-visible {
     text-decoration: underline;
     text-decoration-color: var(--pa-v2-green, #c0e5d9);
     text-decoration-thickness: 2px;
     text-underline-offset: 0.2em;
 }
 
 .pa-av2-featured__excerpt {
     margin: 0 0 26px;
     padding-bottom: 0 !important;
     font-family: var(--pa-v2-font-lato, sans-serif);
     font-size: 16px;
     font-weight: 400;
     line-height: 22.5px;
     letter-spacing: 0;
     color: #1d2f6d;
 }
 
 /*
  * The comp drops the author line from the featured card (it still appears on
  * the grid cards). Hidden rather than removed from the template so the markup
  * stays consistent between the two renderers — delete the <p> from
  * pa_articles_v2_render_featured() if it should go for good.
  */
 .pa-av2-featured__author {
     display: none;
 }
 
 /*
  * Link spec was truncated in the brief ("font-f"), so this is inferred from
  * the comp: Plus Jakarta 600 / 16px / navy, underlined in navy rather than the
  * mint used elsewhere in v2.
  */
 .pa-av2 .pa-av2-featured__link {
     font-family: var(--pa-v2-font-sans, sans-serif);
     font-size: 16px;
     font-weight: 600;
     line-height: 100%;
     letter-spacing: 0;
     color: #1d2f6d;
     text-decoration: underline;
     text-decoration-color: currentColor;
     text-decoration-thickness: 1.5px;
     text-underline-offset: 0.35em;
 }
 
 .pa-av2 .pa-av2-featured__link:hover,
 .pa-av2 .pa-av2-featured__link:focus-visible {
     text-decoration-color: var(--pa-v2-navy, #1d2f6d);
 }
 
 /*
  * Shared arrow, used by BOTH the featured link and the grid card link.
  *
  * They previously rendered differently: the card link is font-weight 700 and
  * the featured link 600, so the same → glyph came out lighter on the featured
  * card. Pinning the arrow's own weight here decouples it from whatever weight
  * the surrounding label uses, so the two can never drift apart again.
  *
  * The &nbsp; in the markup keeps the arrow tied to the last word — without it
  * a narrow card can wrap the arrow onto a line by itself.
  */
 .pa-av2 .pa-av2-arrow {
     font-family: var(--pa-v2-font-sans, sans-serif);
     font-size: 16px;
     font-weight: 700;
     line-height: inherit;
     letter-spacing: 0;
     color: inherit;
 }
 
 /*
  * CONTINUOUS UNDERLINE.
  *
  * text-decoration-skip-ink breaks the underline wherever a glyph would cross
  * it. The → glyph is a horizontal stroke sitting at almost exactly underline
  * height, so it gets skipped on both sides — this is the gap either side of
  * the arrow. `none` forces the line straight through.
  */
 .pa-av2 .pa-av2-featured__link,
 .pa-av2 .pa-av2-card__link {
     text-decoration-skip-ink: none;
     -webkit-text-decoration-skip-ink: none;
 }
 
 @media (max-width: 860px) {
     .pa-av2-featured {
         grid-template-columns: minmax(0, 1fr);
         /* Stacked: release the fixed height or the two rows cannot both fit. */
         height: auto;
         min-height: 0;
     }
 
     .pa-av2-featured__media {
         min-height: 220px;
     }
 }
 
 /* ------------------------------------------------------------------
  * Card grid
  * ------------------------------------------------------------------ */
 
 /*
  * 3 x 348px cards + 2 x 22px gaps = 1088px, matching --pa-articles-max exactly.
  * Columns are 1fr rather than a hard 348px so the row still fills the column if
  * that token is ever changed.
  */
 .pa-av2__grid {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     grid-auto-rows: 400px;
     gap: 22px;
 }
 
 .pa-av2__grid:empty {
     display: none;
 }
 
 @media (max-width: 1024px) {
     .pa-av2__grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 }
 
 @media (max-width: 640px) {
     .pa-av2__grid {
         grid-template-columns: minmax(0, 1fr);
     }
 }
 
 .pa-av2-card {
     position: relative;
     isolation: isolate;
     overflow: hidden;
     height: 400px;
     border-radius: var(--pa-av2-radius);
     background: var(--pa-v2-navy, #1d2f6d);
     color: var(--pa-v2-white, #fff);
 }
 
 .pa-av2-card__media,
 .pa-av2-card__overlay {
     position: absolute;
     inset: 0;
     z-index: -1;
     pointer-events: none;
 }
 
 .pa-av2-card__media {
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     transition: transform 0.4s ease;
 }
 
 .pa-av2-card:hover .pa-av2-card__media {
     transform: scale(1.04);
 }
 
 .pa-av2-card__overlay {
     background: linear-gradient(
         180deg,
         rgba(3, 9, 32, 0) 0%,
         rgba(3, 9, 32, 0.05) 25%,
         rgba(3, 9, 32, 0.62) 62%,
         rgba(3, 9, 32, 0.92) 100%
     );
 }
 
 /*
  * Avatar row — one tile per co-author, left to right. Capped at three in PHP;
  * beyond that the byline collapses to "First + N more" and the row would run
  * into the card edge.
  */
 .pa-av2-card__avatars {
     position: absolute;
     top: 30px;
     left: 20px;
     z-index: 2;
     display: flex;
     gap: 6px;
 }
 
 .pa-av2-card__avatar {
     display: block;
     width: 52px;
     height: 52px;
     border-radius: 8px;
     border: 2px solid rgba(255, 255, 255, 0.9);
     background-color: var(--pa-v2-navy, #1d2f6d);
     background-size: cover;
     background-position: center;
 }
 
 .pa-av2-card__body {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     padding: 20px;
 }
 
 .pa-av2-card__date {
     margin: 0 0 10px;
     padding-bottom: 0 !important;
     font-family: var(--pa-v2-font-lato, sans-serif);
     font-size: 16px;
     font-weight: 400;
     line-height: 19.6px;
     letter-spacing: 0;
     color: #fff;
 }
 
 /*
  * SPECIFICITY: the card title is an <h3> inside .entry-content, so it is hit by
  *   html body.pa-v2 .pa-v2__main .entry-content :is(h3, .h3) {
  *       font-size: 35px !important; line-height: 1.1 !important;
  *   }
  * in pa-v2.css (0,4,2 + !important) — which is why the titles were rendering
  * enormous and overflowing the cards. This selector is (0,5,2) and carries
  * !important on the two properties that rule sets, so it wins on both counts.
  */
 html body.pa-v2 .pa-v2__main .entry-content .pa-av2 .pa-av2-card__title,
 .pa-av2 .pa-av2-card__title {
     margin: 0 0 10px;
     font-family: var(--pa-v2-font-sans, sans-serif);
     font-size: 20px !important;
     font-weight: 600;
     line-height: 25px !important;
     letter-spacing: 0;
     color: #fff;
 }
 
 .pa-av2 .pa-av2-card__title a {
     color: inherit;
     text-decoration: none;
 }
 
 /*
  * Whole-card click target. Stretched from the title link so the accessible
  * name is the article title and there is exactly one tab stop per card —
  * cheaper for keyboard users than separate image / title / "read" links.
  */
 .pa-av2 .pa-av2-card__title a::after {
     content: "";
     position: absolute;
     inset: 0;
     z-index: 3;
 }
 
 .pa-av2-card__author {
     margin: 0 0 14px;
     padding-bottom: 0 !important;
     font-family: var(--pa-v2-font-lato, sans-serif);
     font-size: 16px;
     font-weight: 400;
     line-height: 19.6px;
     letter-spacing: 0;
     color: #fff;
 }
 
 /*
  * Link spec was truncated in the brief ("font-style: Bol"), so size is inferred
  * from the comp: 16px, mint.
  *
  * display:block so the border-top above it — the hairline rule in the design —
  * spans the full content width. The underline still tracks only the text,
  * since text-decoration applies to inline content, not the block box.
  */
 .pa-av2-card__link {
     display: block;
     padding-top: 14px;
     border-top: 1px solid rgba(255, 255, 255, 0.55);
     font-family: var(--pa-v2-font-sans, sans-serif);
     font-size: 16px;
     font-weight: 700;
     letter-spacing: 0;
     color: #C0E5D9;
     text-decoration: underline;
     text-decoration-thickness: 1.5px;
     text-underline-offset: 0.3em;
     margin-bottom: 20px;
 }
 
 .pa-av2-card:hover .pa-av2-card__link {
     text-decoration-color: var(--pa-v2-green, #c0e5d9);
 }
 
 /* Newly appended cards fade in rather than snapping into place. */
 .pa-av2-card--new {
     animation: pa-av2-fade-in 0.32s ease both;
 }
 
 @keyframes pa-av2-fade-in {
     from {
         opacity: 0;
         transform: translateY(10px);
     }
     to {
         opacity: 1;
         transform: none;
     }
 }
 
 @media (prefers-reduced-motion: reduce) {
     .pa-av2-card--new {
         animation: none;
     }
 
     .pa-av2-card__media,
     .pa-av2__results {
         transition: none;
     }
 }
 
 /* ------------------------------------------------------------------
  * Empty state
  * ------------------------------------------------------------------ */
 
 .pa-av2__empty {
     padding: clamp(40px, 5vw, 72px) 0;
     text-align: center;
     color: var(--pa-v2-navy, #1d2f6d);
 }
 
 .pa-av2__empty[hidden] {
     display: none;
 }
 
 .pa-av2__empty p {
     margin: 12px 0 0;
     padding-bottom: 0 !important;
     color: var(--pa-v2-grey, #6b7a90);
 }
 
 /* ------------------------------------------------------------------
  * Load more
  * ------------------------------------------------------------------ */
 
 .pa-av2__more {
     display: flex;
     justify-content: center;
     margin-top: clamp(28px, 3vw, 44px);
 }
 
 /*
  * The 147 x 44px box from the design falls out of the box model, so neither
  * dimension is hardcoded: 12 + 16 + 12 padding/line-height plus 2 x 2px border
  * is exactly 44px tall, and the label plus 60px horizontal padding is 147px
  * wide for "Load More". Leaving them to size naturally means a longer label —
  * the element exposes one as a setting — widens the button instead of clipping.
  *
  * The !important flags are all cancelling Salient's global button styling,
  * which sets border-radius, min-width, height and text-shadow on every
  * button/input in page content.
  */
 .pa-av2 .pa-av2__more-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     min-width: 0 !important;
     width: auto !important;
     height: auto !important;
     padding: 12px 30px !important;
     margin: 0 !important;
     border: 2px solid #1d2f6d !important;
     border-radius: 5px !important;
     background: #1d2f6d !important;
     background-image: none !important;
     color: #fff !important;
     font-family: var(--pa-v2-font-sans, sans-serif);
     font-size: 16px !important;
     font-weight: 700 !important;
     line-height: 16px !important;
     letter-spacing: 0 !important;
     text-align: center;
     text-transform: none !important;
     text-decoration: none !important;
     text-shadow: none !important;
     box-shadow: none !important;
     box-sizing: border-box;
     opacity: 1;
     cursor: pointer;
     -webkit-appearance: none;
     appearance: none;
     transition: background-color 0.15s ease, color 0.15s ease;
 }
 
 /* Inverts on hover, matching the v2 blue button token elsewhere on the site. */
 .pa-av2 .pa-av2__more-btn:hover,
 .pa-av2 .pa-av2__more-btn:focus-visible {
     background: #fff !important;
     color: #1d2f6d !important;
 }
 
 .pa-av2 .pa-av2__more-btn[hidden] {
     display: none !important;
 }
 
 .pa-av2 .pa-av2__more-btn[disabled] {
     cursor: default;
     opacity: 0.75;
 }
 
 .pa-av2__spinner {
     display: none;
     width: 15px;
     height: 15px;
     border: 2px solid currentColor;
     border-right-color: transparent;
     border-radius: 50%;
     animation: pa-av2-spin 0.7s linear infinite;
 }
 
 .pa-av2 .pa-av2__more-btn.is-loading .pa-av2__spinner {
     display: block;
 }
 
 @keyframes pa-av2-spin {
     to {
         transform: rotate(360deg);
     }
 }
 
 @media (prefers-reduced-motion: reduce) {
     .pa-av2__spinner {
         animation-duration: 2s;
     }
 }
 
 /* ------------------------------------------------------------------
  * Screen-reader-only text (Salient defines this, but not on every page)
  * ------------------------------------------------------------------ */
 
 .pa-av2 .screen-reader-text {
     position: absolute !important;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
     border: 0;
 }
 
 /* ==================================================================
  * Articles hero — shorter, narrower, vertically centred.
  *
  * Overrides pa-hero-banner.css for this page only. Two selectors so it works
  * whether or not the element has an "Extra CSS class" set:
  *   - body.pa-articles-page      comes from the page template
  *   - .pa-hero-banner--articles  if you set that class on the element
  *
  * NOTE: the element's "Minimum height" field does nothing — pa-hero-banner.css
  * hardcodes min-height:630px and never reads the --pa-hero-min-h variable the
  * shortcode writes into the style attribute. That 630px is what we override
  * here. Fixing the element properly (min-height: var(--pa-hero-min-h, 630px))
  * would make the field work, but would also change the homepage, so it is
  * deliberately left alone.
  * ================================================================== */
 
 body.pa-articles-page .pa-hero-banner,
 .pa-hero-banner--articles {
     --pa-hero-articles-h: 512px;
     --pa-hero-articles-card: 292px;
 
     min-height: var(--pa-hero-articles-h);
     max-height: var(--pa-hero-articles-h);
 
     /*
      * Was clamp(120px, 12vw, 240px) on top — sized for the homepage's 630px
      * hero and far too much room at 512px. Top padding still has to clear the
      * fixed header, which floats over the image.
      */
     padding: 96px clamp(16px, 4vw, 32px) 72px;
     align-items: center;
 }
 
 /* Hero copy aligns to the same column as the filter bar and the card grid. */
 body.pa-articles-page .pa-hero-banner__inner,
 .pa-hero-banner--articles .pa-hero-banner__inner {
     max-width: calc(var(--pa-articles-max, 1088px) + 2 * var(--pa-articles-gutter, 40px));
     padding-left: var(--pa-articles-gutter, 40px);
     padding-right: var(--pa-articles-gutter, 40px);
     margin-left: auto;
     margin-right: auto;
     align-items: center;
     gap: clamp(1.5rem, 3vw, 2.5rem);
 }
 
 body.pa-articles-page .pa-hero-banner__aside,
 .pa-hero-banner--articles .pa-hero-banner__aside {
     max-width: var(--pa-hero-articles-card);
 }
 
 /*
  * Stat card — glass effect removed on this page.
  *
  * The effect is built from FOUR stacked layers, so neutralising only the root
  * leaves three still painting:
  *   1. .pa-glass-stat        backdrop-filter: url(#glass-distortion) blur+saturate
  *   2. .pa-glass-stat__fx    a gradient plus blur(22px) saturate(165%) and shadows
  *   3. .pa-glass-stat__noise a fractal-noise grain at 14% on overlay blend
  *   4. .pa-glass-stat__inner an inset 1px white ring
  *
  * All four are switched off below. The 1px outline and the rounded corner are
  * kept — those read as the card's shape rather than as the glass treatment.
  */
 body.pa-articles-page .pa-glass-stat,
 .pa-hero-banner--articles .pa-glass-stat {
     /*
      * A floor, not a cap: at the specified 55px title the card's natural height
      * is ~250px, so it grows past this.
      */
     min-height: 0;
     background: transparent;
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
     border: 1px solid rgba(255, 255, 255, 0.35);
     box-shadow: none;
 }
 
 /* Layers 2 and 3: remove outright rather than hide, so neither can composite. */
 body.pa-articles-page .pa-glass-stat__fx,
 .pa-hero-banner--articles .pa-glass-stat__fx,
 body.pa-articles-page .pa-glass-stat__noise,
 .pa-hero-banner--articles .pa-glass-stat__noise {
     display: none;
 }
 
 /* Layer 4: the inset ring, which would otherwise read as a second border. */
 body.pa-articles-page .pa-glass-stat__inner,
 .pa-hero-banner--articles .pa-glass-stat__inner {
     padding: 20px 24px 22px;
     box-shadow: none;
 }
 
 /*
  * Stat card typography.
  *
  * !important throughout because the card sits inside .entry-content, where
  * pa-v2.css sets heading and body sizes with !important of its own.
  */
 body.pa-articles-page .pa-glass-stat__title--h1,
 .pa-hero-banner--articles .pa-glass-stat__title--h1 {
     font-family: var(--pa-v2-font-sans, sans-serif) !important;
     font-size: 55px !important;
     font-weight: 600 !important;
     line-height: 1.1 !important;
     letter-spacing: 0 !important;
     color: #fff !important;
 }
 
 body.pa-articles-page .pa-glass-stat__text,
 .pa-hero-banner--articles .pa-glass-stat__text,
 body.pa-articles-page .pa-glass-stat__text p,
 .pa-hero-banner--articles .pa-glass-stat__text p {
     font-family: var(--pa-v2-font-lato, sans-serif) !important;
     font-size: 16px !important;
     font-weight: 400 !important;
     line-height: 1.4 !important;
     letter-spacing: 0 !important;
     color: #fff !important;
 }
 
 body.pa-articles-page .pa-glass-stat__text p,
 .pa-hero-banner--articles .pa-glass-stat__text p {
     max-width: 201px;
     margin-bottom: 47px;
 }
 
 /*
  * The design specifies text-decoration-thickness: 0%, which computes to an
  * invisible underline — read as "browser default" rather than "no underline",
  * since the same spec asks for solid underline. Left to `auto`.
  */
 body.pa-articles-page .pa-glass-stat__link,
 .pa-hero-banner--articles .pa-glass-stat__link {
     font-family: var(--pa-v2-font-sans, sans-serif) !important;
     font-size: 16px !important;
     font-weight: 700 !important;
     line-height: 1 !important;
     letter-spacing: 0 !important;
     color: #c0e5d9 !important;
     text-decoration: underline !important;
     text-decoration-style: solid !important;
     text-decoration-thickness: auto;
     /* See the continuous-underline note on .pa-av2-arrow above. */
     text-decoration-skip-ink: none;
     -webkit-text-decoration-skip-ink: none;
 }
 
 /*
  * Stat card arrow — replaced, not restyled.
  *
  * The shared glass-stat shortcode emits its own
  * <span class="pa-glass-stat__link-arrow"> →</span>, which pa-glass-stat-card.css
  * sizes at 14px. Restyling that span from here kept leaving it visually
  * different from the card arrows, so instead the span is suppressed and the
  * arrow is injected as ::after using the SAME declarations as .pa-av2-arrow.
  * One glyph definition, so the three arrows cannot disagree.
  *
  * Done in CSS rather than the shortcode because that element is also on the
  * homepage and must not change there.
  *
  * \00a0 is a non-breaking space, standing in for the &nbsp; used in the
  * Articles markup — it stops the arrow wrapping onto a line by itself.
  */
 body.pa-articles-page .pa-glass-stat__link-arrow,
 .pa-hero-banner--articles .pa-glass-stat__link-arrow {
     display: none !important;
 }
 
 body.pa-articles-page .pa-glass-stat__link::after,
 .pa-hero-banner--articles .pa-glass-stat__link::after {
     content: "\00a0\2192";
     font-family: var(--pa-v2-font-sans, sans-serif);
     font-size: 16px;
     font-weight: 700;
     line-height: inherit;
     letter-spacing: 0;
     color: inherit;
 }
 
 /*
  * Subhead: pa-v2.css already gives .large the specified Lato 20px / 1.4, but
  * pa-hero-banner.css paints it rgba(255,255,255,0.95). Spec says solid white.
  * Tighter stack too, to fit the shorter box.
  */
 body.pa-articles-page .pa-hero-banner__subhead,
 .pa-hero-banner--articles .pa-hero-banner__subhead {
     margin-top: 14px;
     max-width: 572px;
     color: #fff;
 }
 
 /*
  * Headline: pa-v2.css already sets Plus Jakarta 600 / 55px / 1.1 !important
  * inside .entry-content, matching the spec exactly, and pa-hero-banner.css
  * already paints it white — so nothing is needed here. Left as a note so the
  * omission reads as deliberate.
  */
 
 /*
  * Hero overlay strength. Overrides the value the element writes inline —
  * --pa-hero-overlay cannot be reset from a stylesheet (inline custom
  * properties win), so this repaints the overlay layer instead. 3,9,32 is the
  * same near-black navy pa-hero-banner.css uses, so only the alpha changes.
  */
 body.pa-articles-page .pa-hero-banner__overlay,
 .pa-hero-banner--articles .pa-hero-banner__overlay {
     background: rgba(3, 9, 32, 0.28);
 }
 
 /*
  * Below the two-column breakpoint the stat card stacks under the copy, which
  * cannot fit in 512px — release the cap and let the hero grow.
  */
 @media (max-width: 960px) {
     body.pa-articles-page .pa-hero-banner,
     .pa-hero-banner--articles {
         min-height: 0;
         max-height: none;
         padding-top: 110px;
         padding-bottom: 56px;
     }
 }

 html body.pa-v2 .pa-v2__main .entry-content a:not(.button):not(.wp-block-button__link):not(.wp-element-button):not(.pa-v2__btn):not(.pa-v2__social-link):not(.nectar-button):not(.view-more):not(.toggle-heading):not(.fa) {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 700 !important;
    line-height: inherit !important;
    text-underline-offset: 0.2em !important;
    gap: 0 !important;
}