/*
 * Online newsletter edition (single-newsletter.php), 2026 redesign
 * (NewsletterDetail.dc.html). The hero layout comes from newsletters.css
 * (.nlx-hero); the section markup and base layout from newsletter.css (shared
 * with the print view, which keeps its own look). Everything here is scoped
 * to main.nle: Sora headings, Manrope text, the redesign's colours, cards and
 * pill buttons. Loaded after news-media.css and newsletter.css.
 */

.nle {
  color: var(--ink-strong);
  font-family: var(--font-ui);
}

.nle .wrap {
  width: min(var(--max-wide), calc(100% - 42px));
}

/* The frosted card's label is an h2: news-media.css's ".news-page main h2" would make it a heading. */
.news-page .nle .glass-card-label {
  max-width: none;
  margin: 0;
  color: var(--purple);
  font-family: var(--font-ui);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.nle :focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}

/* Hero ---------------------------------------------------------------------- */
.nle-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.nle-hero-actions svg {
  width: 18px;
  height: 18px;
}

.nle-hero-actions small {
  font-size: var(--text-ui-xs);
  font-weight: 600;
  opacity: .85;
}

/* "All editions": a quiet link under the hero's buttons (the actions are the PDF and the email sign-up). */
.nle-hero-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  color: var(--purple);
  font-size: var(--text-ui);
  font-weight: 700;
}

.nle-hero-all:hover {
  color: var(--purple-press);
  text-decoration: none;
}

/* "Highlights of this edition": the edition's main pieces as rows (icon in the section's colour, small label, title,
   arrow down to the section), on the frosted card; "All N sections" under them. */
.nle-hl {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nle-hl a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-ui);
  background: rgba(255, 255, 255, .72);
  color: var(--ink-strong);
  transition: background .15s ease, border-color .15s ease;
}

.nle-hl a:hover {
  border-color: var(--line-control);
  background: #fff;
  text-decoration: none;
}

.nle-hl-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-round);
  background: var(--purple-tint-ui);
  color: var(--purple);
}

.nle-hl .is-orange .nle-hl-icon {
  background: var(--orange-wash);
  color: var(--orange-ink);
}

.nle-hl .is-cyan .nle-hl-icon {
  background: var(--cyan-wash);
  color: var(--cyan-ink-strong);
}

.nle-hl-icon svg {
  width: 20px;
  height: 20px;
}

.nle-hl-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.nle-hl-text small {
  color: var(--muted-ui);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.nle-hl-text b {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-family: var(--font-display);
  font-size: var(--text-ui-md);
  font-weight: 700;
  line-height: 1.3;
}

.nle-hl-arrow {
  width: 16px;
  height: 16px;
  color: var(--purple);
}

/* "This quarter at a glance": four figure tiles and "Read the highlights". */
.nle-glance {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 540px;
  padding: 32px;
}

.nle-glance-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nle-glance-tiles li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, .7);
}

.nle-glance-tiles b {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-tile-xl);
  font-weight: 700;
  line-height: 1;
}

.nle-glance-tiles li:first-child b {
  color: var(--purple);
}

.nle-glance-tiles span {
  color: var(--muted-ui);
  font-size: var(--text-ui-sm);
  font-weight: 600;
  line-height: 1.4;
}

.nle-glance-link {
  justify-content: center;
  height: var(--ds-button-md);
  font-size: var(--text-ui); /* Colours: the standard secondary pill (pill-button--secondary; UI/UX audit). */
}

.nle-glance-link svg {
  width: 16px;
  height: 16px;
  color: var(--purple);
}

/* No figures: the cover, tilted. */
.nle-cover {
  position: relative;
  width: min(300px, 70%);
  overflow: hidden;
  border-radius: var(--radius-ui);
  box-shadow: var(--shadow-menu);
  transform: rotate(-3deg);
}

.nle-cover img {
  display: block;
  width: 100%;
  height: auto;
}

/* Edition: section menu + sections ------------------------------------------------ */
.news-page .nle-edition {
  padding: 0;
  background: #fff;
}

.nle .nl-layout {
  width: min(var(--max-wide), calc(100% - 42px));
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 64px;
  padding-top: 96px;
  padding-bottom: 0; /* The last chapter holds the end space, so a soft one runs down to "More editions". */
}

/* Wide screens: the menu is a panel left of the sections (the Privacy Notice's
   card), numbered entries, the current one in soft purple. Up to 1000px it
   becomes a bar across the top (Responsive, below). */
.nle-menu {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
  z-index: 20;
  max-height: calc(100vh - var(--nav-height) - 48px);
  overflow-y: auto;
  padding: 24px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow-card);
}

.admin-bar .nle-menu {
  top: calc(var(--nav-height) + 32px + 24px);
  max-height: calc(100vh - var(--nav-height) - 32px - 48px);
}

.nle-menu-title {
  margin: 0 0 14px;
  color: var(--purple);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.nle-menu-scroll {
  position: relative;
}

.nle-menu-list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  scrollbar-width: none;
}

.nle-menu-list::-webkit-scrollbar {
  display: none;
}

/* A chapter's sections, under its name (a dot in the chapter's colour, as the section numbers below it). */
.nle-menu-items {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nle-menu-chapter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 6px;
  color: var(--muted-ui);
  font-size: var(--text-ui-3xs);
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.nle-menu-chapter::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--purple);
}

.nle-menu-chapter.is-orange::before { background: var(--orange-deep); }
.nle-menu-chapter.is-cyan::before { background: var(--cyan-ink); }

.nle-menu-list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-ui);
  color: var(--ink-strong);
  font-size: var(--text-ui-sm);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.nle-menu-list a span {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
}

.nle-menu-list li.is-orange a span { color: var(--orange-deep); }
.nle-menu-list li.is-cyan a span { color: var(--cyan-ink); }
.nle-menu-list li.is-purple a span { color: var(--purple); }

.nle-menu-list a:hover {
  background: var(--purple-wash-hover);
  color: var(--purple);
}

.nle-menu-list a[aria-current="true"] {
  background: var(--purple-wash);
  box-shadow: inset 3px 0 0 var(--join);
  color: var(--purple);
  font-weight: 700;
}

/* Bar only: arrows (newsletter.js) when the row is wider than the bar, hidden at that end. */
.nle-menu-arrow {
  position: absolute;
  top: 50%;
  z-index: 2; /* Above the edge fade. */
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line-control);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 14px rgba(42, 12, 102, .12);
  color: var(--ink-strong);
  cursor: pointer;
  transform: translateY(-50%);
}

.nle-menu-arrow:hover {
  border-color: var(--purple);
  color: var(--purple);
}

.nle-menu-arrow[hidden] {
  display: none;
}

.nle-menu-arrow svg {
  width: 16px;
  height: 16px;
}

.nle-menu-arrow.is-prev {
  left: 0;
}

.nle-menu-arrow.is-next {
  right: 0;
}

/* Fade the row's edges under the arrows. */
.nle-menu-scroll.can-prev::before,
.nle-menu-scroll.can-next::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 120px;
  pointer-events: none;
}

.nle-menu-scroll.can-prev::before {
  left: 0;
  background: linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0));
}

.nle-menu-scroll.can-next::after {
  right: 0;
  background: linear-gradient(270deg, #fff 30%, rgba(255, 255, 255, 0));
}

.nle-menu-pdf {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  height: var(--ds-button-sm);
  margin-top: 16px;
  padding: 0 14px;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-pill);
  color: var(--ink-strong);
  font-size: var(--text-ui-sm);
  font-weight: 700;
  text-decoration: none;
}

.nle-menu-pdf:hover {
  border-color: var(--purple);
  color: var(--purple);
}

.nle-menu-pdf svg {
  width: 16px;
  height: 16px;
  color: var(--purple);
}

.nle .nl-sections {
  gap: 0;
}

/* Chapters (pmilc_newsletter_chapters()): runs of sections on one subject, each opening with its name in the
   chapter's colour (purple: the Chapter; orange: PMI region & world; teal: people & recognition, as the section
   numbers), every other one on a soft band across the window (a clipped shadow: no sideways page scroll). Inside
   a soft chapter, the light-grey boxes turn white so they still stand out. */
.nle .nl-chapter {
  --nl-chapter: var(--purple);
  position: relative;
  z-index: 0; /* The band (::before) sits behind the chapter's content, above the edition's white. */
  padding: 80px 0;
}

.nle .nl-chapter.is-orange { --nl-chapter: var(--orange-ink); }
.nle .nl-chapter.is-cyan { --nl-chapter: var(--cyan-ink); }

.nle .nl-chapter:first-child {
  padding-top: 0;
}

.nle .nl-chapter:last-child {
  padding-bottom: 96px;
}

.nle .nl-chapter.is-tinted::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--purple-wash-hover);
  box-shadow: 0 0 0 100vmax var(--purple-wash-hover);
  clip-path: inset(0 -100vmax);
}

.news-page .nle .nl-chapter-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 36px;
  color: var(--nl-chapter);
  font-size: var(--text-ui-xs);
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.nle .nl-chapter-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .25;
}

.nle .nl-chapter.is-tinted :is(.nl-cta, .nl-quote, .nl-letter-body blockquote, .nl-letter-author, .nl-ongoing-card, .nl-total) {
  background-color: #fff;
}

@media (forced-colors: active) {
  .nle .nl-chapter-label::after {
    background: CanvasText;
  }
}

/* Section heading: a coloured number tile, a Sora title and the summary (no full band). */
.nle .nl-section {
  scroll-margin-top: calc(var(--nav-height) + 24px); /* Clear of the site menu (and, up to 1000px, the section bar: below). */
}

/* A chapter's first section: its chapter name stays in view above it when reached from the menu. */
.nle .nl-chapter-label + .nl-section {
  scroll-margin-top: calc(var(--nav-height) + 24px + 60px);
}

/* More space between sections than inside them (section body 24px, sub-headings 32px, calls to action 24px), so
   each section reads as one block. */
.nle .nl-section + .nl-section {
  margin-top: 64px;
  padding-top: 64px;
  border-top: 1px solid var(--line-soft);
}

.nle .nl-section-head {
  align-items: flex-start;
  gap: 20px;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--ink-strong);
}

.nle .nl-section-titles {
  flex: 1;
  min-width: 0;
}

/* "All … →" beside the heading (instead of under the cards), as "More editions / All editions →". */
.nle .nl-section-all {
  flex: none;
  align-self: center;
  color: var(--purple);
  font-size: var(--text-ui-sm);
  font-weight: 700;
  white-space: nowrap;
}

.nle .nl-section-all:hover {
  color: var(--purple-press);
  text-decoration: none;
}

/* "↑ Top": one floating link back to the start of the edition (newsletter.js shows it once the hero is out of view). */
.nle-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--ds-button-sm);
  padding: 0 16px;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: var(--shadow-chip);
  color: var(--ink-strong);
  font-size: var(--text-ui-sm);
  font-weight: 700;
}

.nle-top[hidden] {
  display: none;
}

.nle-top:hover {
  border-color: var(--purple);
  color: var(--purple);
  text-decoration: none;
}

.nle-top svg {
  width: 16px;
  height: 16px;
  color: var(--purple);
}

.nle .nl-section-number {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-ui);
  background: var(--nl-accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-ui-step);
  font-weight: 700;
}

.news-page .nle .nl-section-head h2 {
  max-width: none;
  margin: 6px 0 8px;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-cta);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}

/* Summaries and intros (Save the Date's intro takes the summary's place) at a comfortable line length, ~70 characters. */
.nle .nl-section-summary {
  max-width: 680px;
  color: var(--muted-ui);
  font-size: var(--text-ui-md);
  line-height: 1.6;
}

.nle .nl-section-body {
  margin-top: 24px;
}

/* "Back to the top of the edition" lands here, clear of the sticky header. */
.nle-edition {
  scroll-margin-top: var(--header-height);
}

/* A 32px-tall tap area (the line of text alone was 20px: UI/UX review). */
.nle .nl-to-contents {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin-top: 14px;
  color: var(--muted-strong);
  font-size: var(--text-ui-xs);
  font-weight: 700;
}

.nle .nl-to-contents:hover {
  color: var(--purple);
}

.nle .nl-to-contents > span {
  margin-right: .4em;
}

.nle .nl-intro {
  max-width: 680px;
  margin: 0 0 18px;
  color: var(--muted-ui);
  font-size: var(--text-ui-md);
  line-height: 1.6;
}

.nle .nl-subhead,
.news-page .nle .nl-section .nl-subhead,
.news-page .nle .nl-section h3.nl-subhead {
  margin: 32px 0 14px;
  color: var(--nl-accent);
  font-family: var(--font-ui);
  font-size: var(--text-ui-xs);
  font-weight: 700;
  line-height: 1.55; /* As the site's other labels (13px / 20px), not the heading default. */
  letter-spacing: .12em;
}

/* Shared headings inside sections (news-media.css's generic h3 rule is beaten by .news-page .nle). */
.news-page .nle .nl-event h3,
.news-page .nle .nl-talk h3,
.news-page .nle .nl-spotlight h3,
.news-page .nle .nl-letter-body h3 {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.01em;
}

/* Save the Date: event rows as cards with the orange date tile. */
.nle .nl-events {
  gap: 12px;
}

.nle .nl-event {
  gap: 18px;
  padding: 16px 20px 16px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow-card);
}

.nle .nl-event-date {
  width: 64px;
  height: 72px;
  border-radius: var(--radius-ui);
  background: var(--join);
  color: var(--night-deep);
  font-size: var(--text-ui-3xs);
  font-weight: 700;
}

.nle .nl-event-date b {
  color: var(--night-deep);
  font-family: var(--font-display);
  font-size: var(--text-ui-tile-sm);
}

/* Date to be confirmed: the expected month over "TBC" in a lighter, dashed tile (the site's TBC chip colours,
   8:1), so "not confirmed yet" shows at a glance. */
.nle .nl-event-date.is-tbc {
  border: 1.5px dashed rgba(186, 74, 0, .45);
  background: var(--orange-wash);
  color: var(--tbc-ink);
}

.nle .nl-event-date.is-tbc b {
  margin-top: 2px;
  color: var(--tbc-ink);
  font-family: var(--font-ui);
  font-size: var(--text-ui-sm);
  letter-spacing: .08em;
}

.nle .nl-event-meta,
/* At most three lines, ending with "…" (the full text stays for screen readers; the event page has it all). */
.nle .nl-event-people {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  color: var(--muted-ui);
  font-size: var(--text-ui-sm);
}

.news-page .nle .nl-event h3 {
  margin: 4px 0;
  font-size: var(--text-card-title); /* As event card titles across the site (components.css .ev-title). */
  line-height: 1.3;
}

.nle .nl-event h3 a {
  color: var(--ink-strong);
}

.nle .nl-event h3 a:hover {
  color: var(--purple);
  text-decoration: none;
}

.nle .nl-event-link {
  display: inline-flex;
  align-items: center;
  height: var(--ds-button-sm);
  padding: 0 16px;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--ink-strong);
  font-size: var(--text-ui-sm);
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}

.nle .nl-event-link:hover {
  border-color: var(--purple);
  color: var(--purple);
}

.nle .nl-event-link > span[aria-hidden] {
  margin-left: .3em;
}

/* "Register": the row's main action, filled as the event page's "Register now". */
.nle .nl-event-link.is-primary {
  border-color: var(--purple);
  background: var(--purple);
  color: #fff;
}

.nle .nl-event-link.is-primary:hover {
  border-color: var(--purple-press);
  background: var(--purple-press);
  color: #fff;
}

.nle .nl-event-link:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Phones: the row has two columns (date tile, text: newsletter.css), so the
   button goes under the text; on its own it wrapped into the 54px date
   column and its text spilled out of the pill (UI/UX audit). */
@media screen and (max-width: 760px) {
  .nle .nl-event-link {
    grid-column: 2;
    justify-self: start;
  }
}

.nle .nl-ongoing {
  gap: 16px;
}

.nle .nl-ongoing-card {
  padding: 22px;
  border-radius: var(--radius-xl);
  background: var(--purple-wash-hover);
}

.nle .nl-ongoing-card b {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-lg);
}

.nle .nl-ongoing-card p {
  margin: 6px 0 14px;
  color: var(--muted-ui);
  font-size: var(--text-ui);
  line-height: 1.55;
}

.nle .nl-ongoing-card a {
  color: var(--purple);
  font-size: var(--text-ui-sm);
  font-weight: 700;
}

/* By the Numbers / Certifications: figure tiles as in the hero card. */
.nle .nl-figures {
  gap: 16px;
}

.nle .nl-figure {
  padding: 22px;
  border-radius: var(--radius-xl);
}

.nle .nl-figure b {
  font-family: var(--font-display);
  font-size: var(--text-ui-tile-xl);
  font-weight: 700;
  line-height: 1;
}

.nle .nl-figure span {
  margin-top: 8px;
  color: var(--ink-strong);
  font-size: var(--text-ui);
  font-weight: 700;
}

.nle .nl-figure small {
  color: var(--muted-ui);
  font-size: var(--text-ui-sm);
}

/* By the Numbers (online): colour carries meaning, not position (as Certifications below). The headline figure is
   the one filled tile (white on purple, 10:1); the others are white cards with ink figures and an icon for their
   subject, its colour by group: purple for community growth, teal for Chapter activity. Icon and label always say
   what a figure is, so colour is never the only cue. */
.nle .nl-figures--kpi .nl-figure {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-soft);
  background: #fff;
  box-shadow: var(--shadow-card);
}

.nle .nl-figures--kpi .nl-figure b {
  color: var(--ink-strong);
}

.nle .nl-figure-icon {
  display: grid;
  place-items: center;
  width: var(--ds-icon-sm);
  height: var(--ds-icon-sm);
  margin-bottom: 16px;
  border-radius: var(--radius-round);
  background: var(--purple-tint-ui);
  color: var(--purple);
}

.nle .nl-figure-icon svg {
  width: 22px;
  height: 22px;
}

.nle .nl-figure.is-activity .nl-figure-icon {
  background: var(--cyan-wash);
  color: var(--cyan-ink-strong);
}

.nle .nl-figures--kpi .nl-figure.is-lead {
  border-color: var(--purple);
  background: var(--purple);
  box-shadow: var(--shadow-button);
}

.nle .nl-figures--kpi .nl-figure.is-lead b,
.nle .nl-figures--kpi .nl-figure.is-lead span {
  color: #fff;
}

.nle .nl-figures--kpi .nl-figure.is-lead small {
  color: var(--on-purple);
}

.nle .nl-figures--kpi .nl-figure.is-lead .nl-figure-icon {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

@media (forced-colors: active) {
  .nle .nl-figures--kpi .nl-figure.is-lead {
    border: 2px solid CanvasText;
  }
}

/* Certifications Spotlight (online): colour carries meaning, not position. White tiles with ink figures;
   the leading credential filled in the section colour; a one-hue share bar per tile (light teal track,
   cyan-ink fill, width = --share) with its percentage in words below. */
.nle .nl-figures--credentials .nl-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--line-soft);
  background: #fff;
  box-shadow: var(--shadow-card);
}

.nle .nl-figures--credentials .nl-figure b {
  color: var(--ink-strong);
}

.nle .nl-figures--credentials .nl-share {
  position: relative;
  display: block;
  width: 100%;
  max-width: 180px;
  height: 6px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: #c2e3ea; /* A step darker than --cyan-tint, so the scale shows on white (fill vs track 4.6:1). */
}

.nle .nl-figures--credentials .nl-share::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--share, 0%);
  border-radius: inherit;
  background: var(--cyan-ink);
}

.nle .nl-figures--credentials .nl-share-text {
  margin-top: 6px;
  font-size: var(--text-ui-2xs);
  font-weight: 600;
}

/* The leading credential: the one filled tile (white on cyan-ink, 6.4:1). */
.nle .nl-figures--credentials .nl-figure.is-lead {
  border-color: var(--cyan-ink);
  background: var(--cyan-ink);
}

.nle .nl-figures--credentials .nl-figure.is-lead b,
.nle .nl-figures--credentials .nl-figure.is-lead span,
.nle .nl-figures--credentials .nl-figure.is-lead .nl-share-text {
  color: #fff;
}

.nle .nl-figures--credentials .nl-figure.is-lead .nl-share {
  background: rgba(255, 255, 255, .28);
}

.nle .nl-figures--credentials .nl-figure.is-lead .nl-share::after {
  background: #fff;
}

/* "+6 more credentials: CAPM®, CPBEP™, …": the smaller credentials in one line under the three tiles. */
.nle .nl-cert-more {
  margin: 16px 0 0;
  padding: 18px 22px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow-card);
  color: var(--muted-ui);
  font-size: var(--text-ui);
  line-height: 1.6;
}

.nle .nl-cert-more b {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-weight: 700;
}

@media (forced-colors: active) {
  .nle .nl-figures--credentials .nl-share {
    border: 1px solid CanvasText;
  }

  .nle .nl-figures--credentials .nl-share::after {
    background: CanvasText;
  }
}

/* The quarter at a glance: a vertical timeline (months with one item or several, no equal-height cards). Wide: the
   month on the left, a dot on the line, then the theme and its items; phones: the line at the left, the month above
   the theme (Responsive, below). */
.nle .nl-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nle .nl-timeline > li {
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 0 44px;
  padding-bottom: 28px;
}

.nle .nl-timeline > li:last-child {
  padding-bottom: 0;
}

/* The line, from this month's dot down to the next one. */
.nle .nl-timeline > li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: -6px;
  left: 133px;
  width: 2px;
  background: var(--line-control);
}

/* The month's dot. */
.nle .nl-timeline > li::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 128px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--nl-accent);
  box-shadow: 0 0 0 4px var(--purple-tint-ui);
}

.nle .nl-timeline-month {
  padding-top: 3px;
  color: var(--nl-accent);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.4;
  text-align: right;
  text-transform: uppercase;
}

.nle .nl-timeline-body b {
  display: block;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-lg);
  line-height: 1.3;
}

.nle .nl-timeline-body ul {
  margin: 8px 0 0;
  padding-left: 1.1em;
  list-style: disc; /* Not the nested list's hollow circle. */
  color: var(--muted-ui);
  font-size: var(--text-ui);
  line-height: 1.55;
}

.nle .nl-timeline-body li::marker {
  color: var(--nl-accent);
}

@media (forced-colors: active) {
  .nle .nl-timeline > li::before,
  .nle .nl-timeline > li::after {
    background: CanvasText;
  }
}

.nle .nl-total {
  gap: 24px;
  padding: 24px 28px;
  border-color: var(--line-soft);
  border-radius: var(--radius-xl);
}

.nle .nl-total > b {
  font-family: var(--font-display);
  font-size: var(--text-hero-long);
  font-weight: 700;
}

.nle .nl-total strong {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-step);
}

.nle .nl-total span {
  color: var(--muted-ui);
  font-size: var(--text-ui);
}

/* Certifications Spotlight and Welcoming New Members totals: a medallion (trophy / people joining) in the sections' teal (the lead credential tile's colour), with a
   soft halo, and a faint teal glow at the card's start tying it to the credential tiles below. Decorative only. */
.nle .nl-total--medal {
  align-items: center;
  background: radial-gradient(circle at 0 50%, var(--cyan-wash), transparent 42%) #fff;
  box-shadow: var(--shadow-card);
}

.nle .nl-total-medal {
  display: grid;
  flex: none;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-round);
  background: var(--cyan-ink);
  box-shadow: 0 0 0 7px var(--cyan-tint), 0 12px 24px rgba(10, 106, 124, .28);
  color: #fff;
}

.nle .nl-total-medal svg {
  width: 36px;
  height: 36px;
}

@media (max-width: 767px) {
  .nle .nl-total--medal {
    flex-wrap: wrap;
    gap: 16px 20px;
  }

  .nle .nl-total-medal {
    width: 56px;
    height: 56px;
    box-shadow: 0 0 0 5px var(--cyan-tint), 0 10px 20px rgba(10, 106, 124, .24);
  }

  .nle .nl-total-medal svg {
    width: 28px;
    height: 28px;
  }

  .nle .nl-total--medal > div {
    flex-basis: 100%;
  }
}

@media (forced-colors: active) {
  .nle .nl-total-medal {
    border: 2px solid CanvasText;
  }
}

/* Word from the Chapter. */
.news-page .nle .nl-letter-body h3 {
  margin: 0 0 14px;
  font-size: var(--text-ui-panel);
  line-height: 1.25;
}

.nle .nl-letter-body p,
.nle .nl-spotlight p {
  color: var(--muted-ui);
  font-size: var(--text-ui-md);
  line-height: 1.7;
}

/* The byline under a title: the same size in every card (talks and Volunteer Spotlights). */
.nle .nl-spotlight p.nl-talk-by {
  font-size: var(--text-ui-sm);
  line-height: 1.55;
}

/* A talk's text: body copy, as on story and event pages (16px / 1.7). */
.nle .nl-talk-body > p:not([class]) {
  line-height: 1.7;
}

.nle .nl-letter-body blockquote,
.nle .nl-quote {
  margin: 24px 0;
  padding: 22px 26px;
  border-left: 4px solid var(--purple);
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  background: var(--surface-soft);
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-step);
  font-style: normal;
  font-weight: 600;
  line-height: 1.45;
}

.nle .nl-quote {
  margin: 14px 0;
  padding: 16px 20px;
  font-size: var(--text-ui-lg);
}

/* The Quote block's "Plain" style in a letter (as on story pages, story.css): a longer quoted passage at the letter's
   text size, in italics, in the same box; the paragraphs keep the letter's size (15px on phones). */
.nle .nl-letter-body blockquote.is-style-plain {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-ui);
  font-weight: 500;
}

.nle .nl-letter-body blockquote.is-style-plain p {
  margin: 0;
  color: var(--muted-strong);
  font-style: italic;
}

/* The letter's call to action (fields "Call to action: message / button"): a light card under the letter and its
   author card, in view whether the letter is shortened or open: flat soft background, a thin border, a purple icon on
   a pale circle, the message (Sora regular, card-title size) and the secondary (outlined) pill button in a row;
   stacked on phones with a full-width button. */
.nle .nl-cta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px 24px;
  margin-top: 24px;
  padding: 22px 28px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  background: var(--surface-soft);
}

.nle .nl-cta-icon {
  display: grid;
  place-items: center;
  width: var(--ds-icon-md);
  height: var(--ds-icon-md);
  border-radius: var(--radius-round);
  background: var(--purple-tint-ui);
  color: var(--purple);
}

.nle .nl-cta-icon svg {
  width: 24px;
  height: 24px;
}

.news-page .nle .nl-cta-text {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-lg); /* 18px: above the letter's 16px text, below its title. */
  font-weight: 400;
  line-height: 1.45;
}

/* Two lines ("Title | text"): a bold Sora line, then a smaller, lighter Manrope one. */
.nle .nl-cta-title {
  display: block;
  font-weight: 700;
}

.nle .nl-cta-sub {
  display: block;
  margin-top: 4px;
  color: var(--muted-ui);
  font-family: var(--font-ui);
  font-size: var(--text-ui);
  font-weight: 400;
  line-height: 1.5;
}

.nle .nl-cta-button {
  white-space: nowrap;
}

@media (max-width: 767px) {
  .nle .nl-cta {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 20px;
  }

  .news-page .nle .nl-cta-text {
    font-size: var(--text-ui-md);
  }

  .nle .nl-cta-sub {
    font-size: var(--text-ui-sm);
  }

  .nle .nl-cta-button {
    grid-column: 1 / -1;
    justify-content: center;
    white-space: normal;
  }
}

/* The letter's highlighted quote, under its title: as on the story page (story.css .stx-quote). */
.nle .nl-letter-body .nl-letter-quote {
  margin: 16px 0 28px;
}

.nle .nl-letter-quote p {
  margin: 0;
  font: inherit;
  color: inherit;
}

.nle .nl-letter-quote cite {
  display: block;
  margin-top: 10px;
  color: var(--muted-strong);
  font-family: var(--font-ui);
  font-size: var(--text-ui-sm);
  font-style: normal;
  font-weight: 600;
}

/* A long letter, shortened (newsletter.js): about as tall as the author card, fading out. */
.nle .nl-letter-text.is-collapsed {
  max-height: 380px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}

.nle .nl-letter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--ds-button-sm);
  margin-top: 8px;
  padding: 0 18px;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--ink-strong);
  font-family: var(--font-ui);
  font-size: var(--text-ui-sm);
  font-weight: 700;
  cursor: pointer;
}

.nle .nl-letter-toggle[hidden] {
  display: none;
}

.nle .nl-letter-toggle:hover {
  border-color: var(--purple);
  color: var(--purple);
}

.nle .nl-letter-toggle svg {
  width: 16px;
  height: 16px;
  color: var(--purple);
  transition: transform .2s ease;
}

.nle .nl-letter-toggle.is-open svg {
  transform: rotate(180deg);
}

.nle .nl-letter-author {
  gap: 4px;
  padding: 14px 14px 20px;
  border-color: var(--line-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.nle .nl-letter-author img {
  border-radius: var(--radius-ui);
}

.nle .nl-letter-author b {
  color: var(--ink-strong);
  font-family: var(--font-display);
}

.nle .nl-letter-author span {
  color: var(--muted-ui);
  font-size: var(--text-ui-xs);
}

.nle .nl-letter-author .button {
  display: inline-flex;
  align-items: center;
  height: var(--ds-button-sm);
  padding: 0 16px;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--ink-strong);
  font-size: var(--text-ui-sm);
  font-weight: 700;
}

/* Meet Your Board. */
/* Meet Your PMILC Board: 170px slots, as many per row as the column holds, the last row centred
   (nine members: 5 + 4 on desktop, 3 × 3 beside the tablet contents panel, two per row on phones);
   photos up to 160px (the 300px image, so sharp). Sized by the column, not the screen, since the
   contents panel narrows it on tablets. */
.nle .nl-board {
  --board-gap: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px var(--board-gap);
}

.nle .nl-board li {
  flex: 0 0 min(170px, calc(50% - var(--board-gap) / 2));
  min-width: 0;
}

.nle .nl-board a {
  gap: 4px;
}

.nle .nl-board img,
.nle .nl-board .nl-initials {
  width: min(160px, 100%);
  height: auto;
  aspect-ratio: 1;
  margin-bottom: 10px;
}

.nle .nl-board .nl-initials {
  font-size: var(--text-ui-tile-sm);
}

.nle .nl-board img,
.nle .nl-initials {
  border: 3px solid #fff;
  box-shadow: var(--shadow-card);
}

@media (max-width: 700px) {
  .nle .nl-board {
    --board-gap: 14px;
    row-gap: 24px;
  }
}

.nle .nl-initials {
  background: var(--purple-tint-ui);
  color: var(--purple);
  font-family: var(--font-display);
  font-weight: 700;
}

.nle .nl-board b {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-md);
}

.nle .nl-board span {
  max-width: 22ch;
  color: var(--muted-ui);
  font-size: var(--text-ui-3xs);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .06em;
}

.nle .nl-board a:hover b {
  color: var(--purple);
  text-decoration: none;
}

/* Monthly Talks: white cards (no coloured top border). */
.nle .nl-talk {
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.nle .nl-talk-photos img,
.nle .nl-talk-photos .nl-initials {
  border-radius: var(--radius-ui);
  box-shadow: none;
}

/* Speakers after the first four: hidden until "+N more" (newsletter.js); [hidden] must win over .nl-initials' display. */
.nle .nl-talk-photos [hidden] {
  display: none;
}

.nle .nl-talk-toggle {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--ds-button-sm);
  padding: 0 12px;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--ink-strong);
  font: inherit;
  font-size: var(--text-ui-sm);
  font-weight: 700;
  cursor: pointer;
}

.nle .nl-talk-toggle:hover {
  border-color: var(--purple);
  color: var(--purple);
}

.nle .nl-talk-toggle:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.nle .nl-talk-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform .2s ease;
}

.nle .nl-talk-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .nle .nl-talk-toggle svg {
    transition: none;
  }
}

.nle .nl-talk-type {
  margin-bottom: 10px;
  color: var(--purple);
  font-family: var(--font-ui);
  font-size: var(--text-ui-2xs);
  letter-spacing: .12em;
}

.nle .nl-chips li {
  padding: 4px 12px;
  font-size: var(--text-ui-2xs);
  font-weight: 700;
}

.news-page .nle .nl-talk h3,
.news-page .nle .nl-spotlight h3 {
  margin: 0 0 6px;
  font-size: var(--text-card-title); /* As event card titles across the site. */
  line-height: 1.3;
}

.nle .nl-talk h3 a,
.nle .nl-spotlight h3 a {
  color: var(--ink-strong);
}

.nle .nl-talk h3 a:hover,
.nle .nl-spotlight h3 a:hover {
  color: var(--purple);
  text-decoration: none;
}

.nle .nl-talk-by {
  color: var(--muted-ui);
  font-size: var(--text-ui-sm);
  font-style: normal;
  font-weight: 600;
}

.nle .nl-talk-by a:hover {
  color: var(--purple-press);
  text-decoration: underline;
}

.nle .nl-talk-org {
  color: var(--muted-ui);
  font-size: var(--text-ui-xs);
}

.nle .nl-takeaways-title {
  font-size: var(--text-ui-2xs);
  font-weight: 700;
  letter-spacing: .12em;
}

.nle .nl-takeaways {
  color: var(--muted-ui);
  font-size: var(--text-ui-md); /* 16px / 1.6, as the key takeaways on story and event pages. */
  line-height: 1.6;
}

.nle .nl-takeaways li::marker {
  color: var(--purple);
}

.nle .nl-more {
  margin-top: 14px;
  color: var(--purple);
  font-size: var(--text-ui-sm);
  font-weight: 700;
}

.nle .nl-spotlight img {
  border-radius: var(--radius-xl);
}

/* Several members' pieces in one edition: a rule between them. */
.nle .nl-spotlight + .nl-spotlight {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

/* Story cards (card-story.php / card-event-recap.php): two across in the narrower column. */
.nle .nl-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.news-page .nle .ev-recap-title {
  margin: 0;
  color: var(--ink-strong);
  font-size: var(--text-story-title); /* As the same cards on the News, story and event pages. */
  line-height: 1.3;
}

/* Older, PDF-only issues: highlights and the editor's text. */
.nle-legacy {
  width: min(var(--max-wide), calc(100% - 42px));
  max-width: 860px;
  padding: 96px 0;
}

.nle-highlights {
  margin-bottom: 40px;
  padding: 32px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.nle-label {
  display: block;
  margin-bottom: 12px;
  color: var(--purple);
  font-size: var(--text-ui-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.news-page .nle-highlights h2 {
  margin: 0 0 16px;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-panel);
}

.nle-highlights li {
  color: var(--muted-ui);
  font-size: var(--text-ui-md);
  line-height: 1.6;
}

.nle-highlights li::marker {
  color: var(--purple);
}

.news-page .nle-rich p,
.news-page .nle-rich li {
  color: var(--muted-ui);
  font-size: var(--text-ui-md);
  line-height: 1.7;
}

/* More editions ------------------------------------------------------------------ */
.nle-more {
  padding: 96px 0;
  background: var(--surface-soft);
}

/* After a soft last chapter, a line marks where the edition ends. */
.nle-edition + .nle-more {
  border-top: 1px solid var(--line-soft);
}

/* Older, PDF-only issues: straight after the (soft) hero, on white. */
.nle-hero + .nle-more {
  background: #fff;
}

.nle-more-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}

.news-page .nle-more h2 {
  max-width: none;
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-section);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.nle-more-all {
  color: var(--purple);
  font-size: var(--text-ui);
  font-weight: 700;
  white-space: nowrap;
}

.nle-more-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.nle-edition-card {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 20px 24px 20px 20px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background: #fff;
  color: var(--ink-strong);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.nle-edition-card.is-next {
  grid-column: 2;
  flex-direction: row-reverse;
  text-align: right;
}

.nle-edition-card:hover {
  border-color: var(--line-control);
  box-shadow: var(--shadow-card);
  color: var(--ink-strong);
}

.nle-edition-cover {
  flex-shrink: 0;
  width: 72px;
  overflow: hidden;
  border-radius: var(--ds-radius-sm);
  box-shadow: var(--shadow-card);
}

.nle-edition-cover img {
  display: block;
  width: 100%;
  height: auto;
}

.nle-edition-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nle-edition-text small {
  color: var(--purple);
  font-size: var(--text-ui-xs);
  font-weight: 700;
}

.nle-edition-text b {
  font-family: var(--font-display);
  font-size: var(--text-ui-lg);
  font-weight: 700;
  line-height: 1.3;
}

.nle-edition-card:hover b {
  color: var(--purple);
}

/* Responsive ------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .nle .nl-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Up to 1000px: one column; the section menu becomes a full-width bar under
   the site header, one row like the site menu, scrolling sideways. */
@media screen and (max-width: 1000px) {
  .nle .nl-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 0;
  }

  .nle .nl-sections {
    padding-top: 40px;
  }

  .nle .nl-section {
    scroll-margin-top: calc(var(--nav-height) + 55px + 24px);
  }

  .nle .nl-chapter-label + .nl-section {
    scroll-margin-top: calc(var(--nav-height) + 55px + 24px + 60px);
  }

  .nle-menu,
  .admin-bar .nle-menu {
    top: var(--nav-height);
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    /* The white and the bottom line run the full window width (shadows, clipped to the bar's height: no
       sideways page scroll); the links stay in the column. */
    box-shadow: 0 0 0 100vmax #fff, 0 1px 0 100vmax var(--line-soft);
    clip-path: inset(0 -100vmax -1px);
  }

  .admin-bar .nle-menu {
    top: calc(var(--nav-height) + 32px);
  }

  .nle-menu-title {
    display: none;
  }

  .nle-menu-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
  }

  .nle-menu-scroll {
    display: flex;
    flex: 1;
    align-items: center;
    min-width: 0;
  }

  .nle-menu-list {
    display: flex;
    flex: 1;
    gap: 4px;
    min-width: 0;
    padding: 10px 0;
    overflow-x: auto;
    scroll-behavior: smooth;
  }

  /* One row: the chapters side by side, a thin line between them (their names are for the panel only). */
  .nle-menu-group,
  .nle-menu-items {
    display: flex;
    flex: none;
    align-items: center;
    gap: 4px;
  }

  .nle-menu-chapter {
    display: none;
  }

  .nle-menu-group + .nle-menu-group::before {
    content: "";
    flex: none;
    width: 1px;
    height: 20px;
    margin: 0 6px;
    background: var(--line-control);
  }

  .nle-menu-list a {
    gap: 6px;
    padding: 7px 10px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
  }

  .nle-menu-list a span {
    font-size: var(--text-ui-3xs);
  }

  .nle-menu-list a[aria-current="true"] {
    box-shadow: none;
  }

  .nle-menu-pdf {
    margin-top: 0;
  }
}

@media screen and (max-width: 782px) {
  .admin-bar .nle-menu {
    top: calc(var(--nav-height) + 46px);
  }
}

@media screen and (max-width: 600px) {
  .admin-bar .nle-menu {
    top: var(--nav-height);
  }

  /* Phones: more room for the links (the PDF button keeps its icon and its spoken label). */
  .nle-menu-pdf {
    justify-content: center;
    width: var(--ds-button-sm);
    padding: 0;
  }

  .nle-menu-pdf > span:not(.visually-hidden) {
    display: none;
  }

  .nle-menu-scroll.can-prev::before,
  .nle-menu-scroll.can-next::after {
    width: 64px;
  }
}

@media (max-width: 767px) {
  .nle-hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    width: 100%;
  }

  .nle-hero-actions .pill-button {
    justify-content: center;
    height: var(--ds-button-md); /* Every page's hero button size on phones (uniformity review, 2026-10-29). */
  }

  .nle-glance {
    gap: 16px;
    padding: 22px;
  }

  .news-page .nle .glass-card-label {
    font-size: var(--text-ui-3xs);
  }

  .nle-glance-tiles {
    gap: 10px;
  }

  .nle-glance-tiles li {
    padding: 14px;
    border-radius: var(--radius-ui);
  }

  .nle-glance-tiles b {
    font-size: var(--text-ui-tile-lg);
  }

  .nle-glance-tiles span {
    font-size: var(--text-ui-xs);
  }

  .nle .nl-chapter {
    padding: 56px 0;
  }

  .nle .nl-chapter:first-child {
    padding-top: 0;
  }

  .nle .nl-chapter:last-child {
    padding-bottom: 48px;
  }

  .news-page .nle .nl-chapter-label {
    margin-bottom: 28px;
    font-size: var(--text-ui-2xs);
  }

  .nle .nl-chapter-label + .nl-section {
    scroll-margin-top: calc(var(--nav-height) + 55px + 24px + 48px);
  }

  .nle .nl-section + .nl-section {
    margin-top: 48px;
    padding-top: 48px;
  }

  /* Phones: the line at the left, the month above the theme. */
  .nle .nl-timeline > li {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding-left: 28px;
    padding-bottom: 24px;
  }

  .nle .nl-timeline > li:not(:last-child)::before {
    top: 15px;
    left: 5px;
  }

  .nle .nl-timeline > li::after {
    top: 3px;
    left: 0;
  }

  .nle .nl-timeline-month {
    padding-top: 0;
    text-align: left;
  }

  .nle .nl-timeline-body b {
    font-size: var(--text-ui-md);
  }

  .nle .nl-timeline-body ul {
    margin-top: 6px;
    font-size: var(--text-ui-sm);
  }

  /* Phones: no "All editions" row between the action and the highlights card (the breadcrumb's "Newsletters" and
     "More editions" at the end lead there), so the PDF / email action comes first. */
  .nle-hero-all {
    display: none;
  }

  .nle .nl-section-head {
    flex-wrap: wrap;
    gap: 14px;
  }

  /* On phones the "All … →" link goes under the heading, aligned with its text. */
  .nle .nl-section-all {
    flex-basis: 100%;
    margin-top: -6px;
    padding-left: calc(var(--ds-icon-sm) + 14px);
  }

  .nle-top {
    right: 16px;
    bottom: 16px;
  }

  .nle-hl a {
    gap: 12px;
    padding: 10px 12px;
  }

  .nle .nl-section-number {
    width: var(--ds-icon-sm);
    height: var(--ds-icon-sm);
    font-size: var(--text-ui-md);
  }

  .news-page .nle .nl-section-head h2 {
    font-size: var(--text-section-sm);
  }

  .nle .nl-section-summary,
  .nle .nl-intro,
  .nle .nl-letter-body p,
  .nle .nl-spotlight p {
    font-size: var(--text-ui);
  }

  .nle .nl-event {
    padding: 14px;
  }

  /* Card titles on phones: as event card titles across the site (components.css). */
  .news-page .nle .nl-event h3,
  .news-page .nle .nl-talk h3,
  .news-page .nle .nl-spotlight h3 {
    font-size: var(--text-ui-md);
  }

  .nle .nl-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .news-page .nle .ev-recap-title {
    font-size: var(--text-ui-lg);
  }

  .nle-legacy {
    padding: 40px 0;
  }

  .nle-highlights {
    padding: 22px;
  }

  .nle-more {
    padding: 40px 0 44px;
  }

  /* Older, PDF-only issues: straight after the (soft) hero, on white. */
.nle-hero + .nle-more {
  background: #fff;
}

.nle-more-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
  }

  .news-page .nle-more h2 {
    font-size: var(--text-section-sm);
  }

  .nle-more-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .nle-edition-card.is-next {
    grid-column: auto;
  }

  .nle-edition-cover {
    width: 56px;
  }

  .nle-edition-text b {
    font-size: var(--text-ui-md);
  }
}