/* ==========================================================================
   /news/ - the six-market news feed (Plan 24).

   PREFIX IS `.em3-nw-*` ON PURPOSE. `.news*` is already the FOOTER NEWSLETTER
   (`.em3-foot-news2`), and `resources.css` is a frozen five-family shared
   surface reaching ~63 page types that Plans 15 to 18 all mark untouched.
   This page gets its own stylesheet and its own enqueue gate.

   Full light throughout, typographic hero, no photograph (ruling 8).
   ========================================================================== */

.em3-nw .em3-nw-page { background: #ffffff; color: #0b1038; }
/* UI AUDIT Plan 05 (D-01): this re-declared .em3-wrap with a hardcoded 24px gutter,
   so /news/ opened its text column at 154px while the other 126 content pages open at
   162px. Both numbers now come from the shared tokens, so the page cannot drift again
   and it steps with --em3-pad-x at every breakpoint (32 / 24 / 18 / 16). */
.em3-nw .em3-nw-page .em3-wrap { max-width: var(--em3-maxw); margin: 0 auto; padding-left: var(--em3-pad-x); padding-right: var(--em3-pad-x); }

/* Screen-reader-only text. The flag emoji is decorative; the country name is real text. */
.em3-nw .em3-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---- hero: typographic, no image ---- */
.em3-nw .em3-nw-hero { background: #ffffff; padding: 128px 0 56px; }
@media (max-width: 980px) { .em3-nw .em3-nw-hero { padding-top: 112px; } }
@media (max-width: 720px) { .em3-nw .em3-nw-hero { padding-top: 104px; } }
.em3-nw .em3-nw-hero__h { font-family: var(--em3-font-sans); font-weight: 700; font-size: calc(clamp(38px, 5vw, 62px) * var(--em3-h1-scale)); line-height: 1.04; letter-spacing: -0.03em; color: #0A1858; margin: 14px 0 0; max-width: 20ch; }
.em3-nw .em3-nw-hero__h .accent { font-family: var(--em3-font-serif); font-style: italic; font-weight: 400; color: #2e5dff; }
.em3-nw .em3-nw-hero__sub { margin: 20px 0 0; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; font-weight: 600; color: #45506f; max-width: 46ch; }
.em3-nw .em3-nw-hero__intro { margin: 18px 0 0; font-size: 16px; line-height: 1.7; color: #45506f; max-width: 68ch; }

/* ---- body ---- */
.em3-nw .em3-nw-body { background: #f5f7fc; padding: 56px 0 64px; }
.em3-nw .em3-nw-sec { padding: 34px 0; border-top: 1px solid rgba(11,16,56,0.12); }
.em3-nw .em3-nw-sec:first-child { border-top: 0; padding-top: 0; }
.em3-nw .em3-nw-sec__h { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--em3-font-sans); font-weight: 700; font-size: calc(clamp(24px, 2.4vw, 32px) * var(--em3-h2-scale)); letter-spacing: -0.02em; color: #0A1858; }
.em3-nw .em3-nw-flag { font-size: 1.05em; line-height: 1; }
.em3-nw .em3-nw-sec__blurb { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: #45506f; max-width: 74ch; }

.em3-nw .em3-nw-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.em3-nw .em3-nw-item { display: flex; flex-direction: column; background: #ffffff; border: 1px solid rgba(11,16,56,0.12); border-radius: var(--em3-radius, 1px); padding: 22px 20px; box-shadow: 0 30px 60px -46px rgba(10,24,88,0.28); transition: transform .25s ease, border-color .2s, box-shadow .25s; }
.em3-nw .em3-nw-item:hover { transform: translateY(-3px); border-color: rgba(46,93,255,0.42); box-shadow: 0 40px 70px -40px rgba(46,93,255,0.3); }
.em3-nw .em3-nw-item__h { margin: 0; font-size: calc(17px * var(--em3-h3-scale)); font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.em3-nw .em3-nw-item__h a { color: #0A1858; text-decoration: none; }
/* (0,3,0) beats the reset.css `a:hover, a:active { color:#333366 }` leak. */
.em3-nw .em3-nw-item__h a:hover,
.em3-nw .em3-nw-item__h a:focus,
.em3-nw .em3-nw-item__h a:active { color: #0b5cfc; text-decoration: underline; text-underline-offset: 3px; }
.em3-nw .em3-nw-item__h a:focus-visible { outline: 3px solid #0b5cfc; outline-offset: 3px; }
.em3-nw .em3-nw-item__sum { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: #45506f; flex: 1 1 auto; }
.em3-nw .em3-nw-item__src { margin: 14px 0 0; font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #69718a; }

.em3-nw .em3-nw-empty { margin: 0; padding: 40px 0; font-size: 16px; color: #45506f; }
.em3-nw .em3-nw-empty a { color: #0b5cfc; font-weight: 600; }

/* ---- closing CTA ---- */
.em3-nw .em3-nw-cta { background: #ffffff; padding: 64px 0 88px; text-align: center; }
.em3-nw .em3-nw-cta__h { margin: 0 auto; max-width: 22ch; font-family: var(--em3-font-sans); font-weight: 700; font-size: calc(clamp(26px, 3vw, 40px) * var(--em3-h2-scale)); line-height: 1.12; letter-spacing: -0.025em; color: #0A1858; }
.em3-nw .em3-nw-cta__p { margin: 16px auto 26px; max-width: 60ch; font-size: 16px; line-height: 1.65; color: #45506f; }

@media (max-width: 980px) { .em3-nw .em3-nw-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .em3-nw .em3-nw-list { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   UI AUDIT Plan 02 (D-16) - light-surface accent.
   `/news/` renders a WHITE hero (.em3-nw-hero{background:#ffffff}) but the page
   does not carry `.on-light`, so brand.css:252 `.em3-eyebrow.tagged` keeps the
   DARK-band accent `--em3-accent-hot` (#6a8aff) and measured **3.14:1** on white.
   The same token measures 6.02:1 on the dark bands where it belongs, so the token
   is not wrong - the surface is light. Light-system spec section 5 is explicit:
   an eyebrow on a light band uses --blue-deep #0746c7 (8.6:1 on white).
   -------------------------------------------------------------------------- */
.em3-nw .em3-eyebrow.tagged { color: #0746c7; }

/* D-19b: the required marker inside the newsletter/lead form on this page. */
.em3-nw .gform_wrapper .gfield_required { color: #0746c7; }