/* ==========================================================================
   Hero (2026 redesign, from the UI/UX review prototype): heading with the
   orange-underlined last word, Join / Explore events, "Find your place"
   routes and the frosted figures card over soft brand blurs. Markup:
   front-page.php; count-up: home.js. Side by side above 1180px; stacked
   below, where the figures card moves after the events (.home-figures), so
   the events come first on tablets and phones (UI/UX review).
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 96px; /* Foot: every hero's 96px (was 88px; uniform heroes, 2026-10-27). */
  background: var(--surface-soft);
  color: var(--ink-strong);
  font-family: var(--font-ui);
}

.hero-grid {
  width: min(var(--max-wide), calc(100% - 42px));
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-areas:
    "intro figures"
    "routes figures";
  column-gap: 72px;
  row-gap: 28px;
}

.hero-grid--single {
  grid-template-columns: minmax(0, 760px);
  grid-template-areas: "intro" "routes";
}

.hero-intro {
  grid-area: intro;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.035em;
  text-wrap: wrap;
}

/* .hero-accent (the orange-underlined last word) and .pill-button are in
   components.css, shared with the About page. */
.hero-lead {
  max-width: 560px;
  margin: 0;
  color: var(--muted-ui);
  font-size: var(--text-ui-xl);
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.hero :focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}

.hero-eyebrow {
  color: var(--purple);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* "Find your place" routes */
.hero-routes {
  grid-area: routes;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
}

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

.route {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, .8);
  box-shadow: var(--shadow-card);
  color: var(--ink-strong);
  transition: border-color .15s ease;
}

.route:hover {
  border-color: var(--line-control);
}

.route:hover .route-title {
  color: var(--purple);
}

.route-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-round);
}

.route-icon svg {
  width: 18px;
  height: 18px;
}

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

.route-icon.is-purple {
  background: var(--purple-tint-ui);
  color: var(--purple);
}

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

.route-text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 2px;
  min-width: 0;
}

.route-title {
  font-size: var(--text-ui);
  font-weight: 700;
  line-height: 1.3;
  transition: color .15s ease;
}

.route-desc {
  color: var(--muted-strong);
  font-size: var(--text-ui-xs);
}

.route-arrow {
  flex-shrink: 0;
  color: var(--purple);
}

.route-arrow svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* Figures card */
.hero-figures {
  grid-area: figures;
  align-self: center;
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.hero-blur {
  position: absolute;
  border-radius: var(--radius-round);
  filter: blur(70px);
  pointer-events: none;
}

.hero-blur.is-violet {
  right: 250px;
  top: -30px;
  width: 280px;
  height: 280px;
  background: var(--violet);
  opacity: .55;
}

.hero-blur.is-orange {
  right: -30px;
  top: 40px;
  width: 240px;
  height: 240px;
  background: var(--join);
  opacity: .45;
}

.hero-blur.is-cyan {
  right: 140px;
  bottom: -40px;
  width: 260px;
  height: 260px;
  background: var(--highlight);
  opacity: .45;
}

.figures-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 36px;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: var(--shadow-menu);
}

.figures-head {
  min-height: var(--ds-button-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.figures-replay {
  display: grid;
  place-items: center;
  width: 44px;
  height: var(--ds-button-sm);
  padding: 0;
  border: 1px solid rgba(79, 23, 168, .18);
  border-radius: var(--radius-round);
  background: rgba(255, 255, 255, .6);
  color: var(--muted-ui);
  cursor: pointer;
}

.figures-replay[hidden] {
  display: none;
}

.figures-replay:hover {
  border-color: var(--purple);
  color: var(--purple);
}

.figures-replay svg {
  width: 14px;
  height: 14px;
}

.figures-total {
  display: flex;
  align-items: center;
  gap: 18px;
}

.figures-number {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-figure);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
}

.figures-caption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  color: var(--muted-ui);
  font-size: var(--text-ui);
  font-weight: 600;
}

.figures-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .8);
  color: var(--cyan-ink-strong);
  font-size: var(--text-ui-2xs);
  font-weight: 700;
}

.figures-chip svg {
  width: 12px;
  height: 12px;
}

.figures-split {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(79, 23, 168, .12);
}

.figures-rings {
  flex-shrink: 0;
  width: 190px;
  height: 190px;
}

.ring-track,
.ring {
  fill: none;
  stroke-width: 16;
}

.ring-track {
  stroke: rgba(79, 23, 168, .1);
}

.ring {
  stroke-linecap: round;
}

.ring.is-purple { stroke: var(--purple); }
.ring.is-orange { stroke: var(--join); }
.ring.is-cyan { stroke: var(--cyan-ring); }

.figures-legend {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.legend-dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-round);
}

.legend-dot.is-purple { background: var(--purple); }
.legend-dot.is-orange { background: var(--join); }
.legend-dot.is-cyan { background: var(--cyan-ring); }

.legend-label {
  flex-grow: 1;
  font-size: var(--text-ui-sm);
  font-weight: 600;
}

.legend-value {
  font-family: var(--font-display);
  font-size: var(--text-ui-lg);
  font-weight: 700;
}

.legend-share {
  width: 40px;
  text-align: right;
  color: var(--muted-ui);
  font-size: var(--text-ui-xs);
  font-weight: 600;
}

.figures-note {
  margin: -16px 0 0;
  color: var(--muted-strong);
  font-size: var(--text-ui-2xs);
}

/* The figures card's second copy, after the events (front-page.php): stacked
   layouts only. */
.home-figures {
  display: none;
}

/* Stacked: intro and routes; the figures card follows the events. */
@media (max-width: 1180px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "routes";
    row-gap: 40px;
  }

  .hero-grid > .hero-figures {
    display: none;
  }

  .hero-intro {
    max-width: 720px;
  }

  .home-figures {
    display: block;
    overflow: hidden;
    padding: 0 0 72px;
    background: var(--surface-soft);
    font-family: var(--font-ui);
    color: var(--ink-strong);
  }

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

  /* The card's width, so the blurs stay behind it. */
  .hero-figures {
    width: 100%;
    max-width: 560px;
  }
}

/* Phones (mobile prototype) */
@media (max-width: 767px) {
  .hero {
    padding: 36px 0; /* Foot: every hero's 36px on phones (was 28px). */
  }

  .hero-grid {
    row-gap: 32px;
  }

  .hero-intro {
    gap: 20px;
  }

  .hero-lead {
    font-size: var(--text-ui-md);
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

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

  .pill-button {
    justify-content: center;
    gap: 8px;
  }

  .pill-button svg {
    width: 16px;
    height: 16px;
  }

  .hero-eyebrow {
    font-size: var(--text-ui-3xs);
  }

  .hero-blur {
    filter: blur(55px);
  }

  .hero-blur.is-violet {
    left: -20px;
    right: auto;
    top: 0;
    width: 200px;
    height: 200px;
    opacity: .5;
  }

  .hero-blur.is-orange {
    right: -30px;
    top: 60px;
    width: 180px;
    height: 180px;
    opacity: .4;
  }

  .hero-blur.is-cyan {
    left: 100px;
    right: auto;
    bottom: 0;
    width: 200px;
    height: 200px;
    opacity: .4;
  }

  .figures-card {
    gap: 22px;
    padding: 24px;
    border-radius: var(--radius-xl);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
  }

  .figures-total {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .figures-caption {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: var(--text-ui-sm);
  }

  .figures-chip {
    padding: 3px 9px;
  }

  .figures-chip svg,
  .legend-share {
    display: none;
  }

  .figures-split {
    gap: 18px;
    padding-top: 20px;
  }

  .figures-rings {
    width: 120px;
    height: 120px;
  }

  .ring-track,
  .ring {
    stroke-width: 18;
  }

  .figures-legend {
    gap: 12px;
  }

  .legend-row {
    gap: 8px;
  }

  .legend-dot {
    width: 10px;
    height: 10px;
  }

  .legend-label {
    font-size: var(--text-ui-xs);
  }

  .legend-value {
    font-size: var(--text-ui-md);
  }

  .figures-note {
    margin-top: -10px;
  }

  .hero-routes {
    gap: 12px;
    padding-top: 0;
    border-top: 0;
  }

  /* Phones (UI/UX review: 2×2 tiles were tall, with 12px descriptions): one compact row each, icon, words, arrow. */
  .routes-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .route {
    gap: 12px;
    padding: 11px 14px;
    background: #fff;
    box-shadow: none;
  }

  .route-icon {
    width: 36px;
    height: 36px;
  }

  .route-icon svg {
    width: 16px;
    height: 16px;
  }

  .route-title {
    line-height: 1.25;
  }

  .route-desc {
    font-size: var(--text-ui-sm);
    line-height: 1.4;
  }
}

/* ==========================================================================
   Events (2026 redesign): eyebrow + heading, then "Coming up" beside
   "Recently held" as twin columns of equal width, each a heading with its own
   "All … →" link above up to three rows of the same compact row
   (template-parts/card-event-compact.php, .home-event), so past events need no
   section of their own and the two lists read as a pair (UI/UX review).
   Stacked from 900px down.
   ========================================================================== */
/* White (UI/UX review): the lilac hero ends where the events begin. */
.upcoming {
  padding: 96px 0 88px; /* Top: as after every hero (was 88px). */
  background: #fff;
  color: var(--ink-strong);
  font-family: var(--font-ui);
}

.upcoming-inner {
  width: min(var(--max-wide), calc(100% - 42px));
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Section heading pattern of the redesign (eyebrow + Sora heading). */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

.section-titles {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.section-eyebrow {
  color: var(--purple);
  font-size: var(--text-ui-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.section-titles h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-section);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.section-all {
  flex-shrink: 0;
  gap: 8px;
}

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

/* Twin columns of equal width: "Coming up" and "Recently held". */
.home-events {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 32px;
}

.home-events--single {
  grid-template-columns: minmax(0, 1fr);
}

.home-events-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.home-events-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.home-events-label {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-ui-lg);
  font-weight: 700;
  line-height: 1.3;
}

/* A quiet text link (secondary action), with a full-size tap area. */
.home-events-more {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--ds-button-sm);
  color: var(--purple);
  font-size: var(--text-ui-sm);
  font-weight: 700;
}

.home-events-more:hover {
  color: var(--purple-press);
}

/* Compact event row (template-parts/card-event-compact.php): an 84px square
   (the date tile, a photo, or the "Get notified" bell), the text, and an
   arrow. Every row is the same height (label and facts on one line, the title
   on at most two), so the two columns line up row by row. */
.home-event {
  position: relative;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 132px; /* A row with a two-line title, so every row is this height. */
  padding: 15px 18px 15px 15px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background: #fff;
  color: var(--ink-strong);
  transition: border-color .15s ease;
}

.home-event:hover {
  border-color: var(--line-control);
}

/* The date tile (.ev-date, components.css) at the row's square size. */
.home-event .ev-date {
  width: 84px;
  height: 84px;
  border-radius: var(--radius-ui);
}

.home-event-media {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  overflow: hidden;
  border-radius: var(--radius-ui);
  background: var(--held-tile);
}

.home-event-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A speaker's portrait (no event photo yet): framed on the face. */
.home-event-media.is-portrait img {
  object-position: 50% 20%;
}

/* No picture: the source's logo (white Chapter logo on purple; PMI logo on white). */
.home-event-media.is-logo {
  background: var(--purple);
}

.home-event-media.is-logo.is-pmi {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line-soft);
}

.home-event-media.is-logo img {
  width: 72%;
  height: auto;
  object-fit: contain;
}

/* "Get notified" row: a bell on the date tiles' soft purple. */
.home-event.is-notify .home-event-media {
  background: var(--purple-wash);
  color: var(--purple);
}

.home-event.is-notify .home-event-media svg {
  width: 30px;
  height: 30px;
}

.home-event-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.home-event-labels {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
}

.home-event-labels .ev-type {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-event-labels .ev-status {
  flex-shrink: 0;
}

.home-event-title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: var(--text-ui-lead);
  font-weight: 700;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-event-title a {
  color: inherit;
  transition: color .15s ease;
}

/* The whole row opens the event. */
.home-event-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.home-event:hover .home-event-title a {
  color: var(--purple);
}

.home-event-title a:focus-visible {
  outline: none;
}

.home-event:has(.home-event-title a:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.home-event-meta {
  margin: 0;
  overflow: hidden;
  color: var(--muted-ui);
  font-size: var(--text-ui-sm); /* 14px (was 13px; UI/UX review). */
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-event-go {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-round);
  color: var(--purple);
  transition: border-color .15s ease, background-color .15s ease;
}

.home-event-go svg {
  width: 16px;
  height: 16px;
}

.home-event:hover .home-event-go {
  border-color: var(--purple);
  background: var(--purple-wash);
}

/* Narrower columns: no arrow (the whole row is the link). */
@media (max-width: 1180px) {
  .home-event {
    grid-template-columns: 84px minmax(0, 1fr);
    padding-right: 16px;
  }

  .home-event-go {
    display: none;
  }
}

@media (max-width: 900px) {
  .home-events {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

@media (max-width: 767px) {
  .upcoming {
    padding: 40px 0;
    background: #fff;
  }

  .upcoming-inner {
    gap: 18px;
  }

  .section-titles {
    gap: 6px;
  }

  .section-eyebrow {
    font-size: var(--text-ui-3xs);
  }

  .home-events {
    gap: 24px;
  }

  .home-events-col {
    gap: 10px;
  }

  .home-events-label {
    font-size: var(--text-ui-md);
  }

  .home-event {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    min-height: 0;
    padding: 12px;
  }

  .home-event .ev-date,
  .home-event-media {
    width: 72px;
    height: 72px;
  }

  /* Phones (UI/UX review): the type label in full, the status chip beside it or, when it does not fit, under it, and the whole title
     (no line limit: a long one, e.g. "Creative Problem Solving… for PMOs", needs four lines on narrow phones), so
     nothing ends in "…". */
  .home-event-labels {
    flex-wrap: wrap; /* The chip stays beside a short label and goes under a long one. */
    gap: 4px 8px;
    white-space: normal;
  }

  .home-event-labels .ev-type {
    overflow: visible;
    white-space: normal; /* A label longer than the row wraps rather than being cut. */
  }

  .home-event-title {
    display: block;
    overflow: visible;
    font-size: var(--text-ui-md);
  }

  /* Facts may take two lines on phones (the rows are stacked, not side by side). */
  .home-event-meta {
    display: -webkit-box;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .home-figures {
    padding-bottom: 40px;
    background: #fff;
  }

  /* "All events →" / "All news →" as a text link. */
  .section-all {
    height: var(--ds-button-sm);
    padding: 0;
    border: 0;
    background: none;
    color: var(--purple);
    font-size: var(--text-ui-sm);
  }
}

section {
  padding: 85px 0;
}

.head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 30px;
}

.head h2 {
  font-size: var(--text-h2);
  line-height: 1.04;
  letter-spacing: var(--tracking-tighter);
  margin: 7px 0 0;
  color: var(--purple-deep);
}

.head p {
  margin: 0;
  max-width: 500px;
  color: var(--muted);
}

/* ==========================================================================
   Latest from the Chapter (2026 redesign): three story cards (picture, topic ·
   date, title, excerpt) with "All news". Phones: a sideways scroller of 280px
   cards without the excerpt, running to the screen edge, as in the mobile
   prototype. The picture keeps the theme's modes: cropped photo, whole
   picture over a blurred copy, or the logo when there is no photo. (A
   featured-story layout was tried after the UI/UX review and reverted at the
   user's request; the dates and the Story pictures' topic colours stayed.)
   ========================================================================== */
.latest {
  padding: 88px 0 96px;
  background: #fff;
  color: var(--ink-strong);
  font-family: var(--font-ui);
}

.latest-inner {
  width: min(var(--max-wide), calc(100% - 42px));
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.latest-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.story {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.story-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Topic label and date, as on the event rows (UI/UX review). */
.story-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
}

.story-meta time {
  color: var(--muted-strong);
  font-size: var(--text-ui-sm);
}

/* 220px tall at full width, as in the prototype; a fixed shape (not height)
   so the Story pictures (1.9:1, text near the edges) are not cropped on
   narrower screens. */
.story-visual {
  position: relative;
  aspect-ratio: 15 / 8;
  overflow: hidden;
  border-radius: var(--radius-xl);
  /* Shown only behind the image / logo (e.g. while it loads). */
  background: var(--purple);
}

.story-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

/* A faint edge over the picture, so a light one (Lilac Story picture, PMI white card) keeps its shape on the
   white section; on dark pictures it does not show. */
.story-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--line-soft);
  pointer-events: none;
}

.story:hover .story-visual > img:only-child,
.story:hover .story-visual .card-image-whole {
  transform: scale(1.03);
}

/* No photo: the Chapter logo (white, on purple) or the PMI logo (on white). */
.story-visual--logo img {
  inset: 22% 18%;
  width: 64%;
  height: 56%;
  object-fit: contain;
}

.story-visual--logo.is-pmi {
  background: #fff;
  border: 1px solid var(--line-soft);
}

/* "Show whole picture": the whole image over a blurred copy of itself. */
.story-visual--whole .card-image-backdrop {
  transform: scale(1.2);
  filter: blur(18px) saturate(1.1);
  opacity: .85;
}

/* Sized to the picture itself (not the box), 10px from the edges, so its own corners are rounded. */
.story-visual--whole .card-image-whole {
  margin: auto;
  width: auto;
  height: auto;
  max-width: calc(100% - 20px);
  max-height: calc(100% - 20px);
  border-radius: var(--radius-picture);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .25));
}

.story-topic {
  font-size: var(--text-ui-2xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.story-topic.is-purple { color: var(--purple); }
.story-topic.is-orange { color: var(--orange-ink); }
.story-topic.is-teal { color: var(--teal-ink); }

.story-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-story-title);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
}

.story-title a {
  color: inherit;
  transition: color .15s ease;
}

/* The whole card opens the story. */
.story-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
}

.story:hover .story-title a {
  color: var(--purple);
}

.story-title a:focus-visible {
  outline: none;
}

.story:has(.story-title a:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 6px;
  border-radius: var(--radius-xl);
}

.story-desc {
  margin: 0;
  color: var(--muted-strong);
  font-size: var(--text-ui);
  line-height: 1.55;
}

@media (max-width: 767px) {
  .latest {
    padding: 40px 0;
  }

  .latest-inner {
    gap: 18px;
  }

  .latest-grid {
    display: flex;
    gap: 14px;
    margin-right: -21px;
    padding: 6px 21px 6px 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .latest-grid::-webkit-scrollbar {
    display: none;
  }

  .story {
    flex: 0 0 280px;
    gap: 10px;
    scroll-snap-align: start;
  }

  .story-body {
    gap: 6px;
  }

  .story-topic {
    font-size: var(--text-ui-3xs);
  }

  .story-title {
    font-size: var(--text-ui-md);
  }

  .story-meta time {
    font-size: var(--text-ui-xs);
  }

  .story-desc {
    display: none;
  }

  .story:has(.story-title a:focus-visible) {
    outline-offset: 2px;
  }

  /* Dots under the scroller (UI/UX review: nothing showed there were more cards); the current card's is a wider
     purple pill. */
  .latest-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: -6px;
  }

  .latest-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--line-control);
    cursor: pointer;
    transition: width .2s ease, background-color .2s ease;
  }

  .latest-dot.is-active {
    width: 22px;
    background: var(--purple);
  }
}

/* Wider screens: the three cards are all in view. */
@media (min-width: 768px) {
  .latest-dots {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-visual img,
  .latest-dot {
    transition: none;
  }

  .story:hover .story-visual > img:only-child,
  .story:hover .story-visual .card-image-whole {
    transform: none;
  }
}


/* ==========================================================================
   Membership strip (2026 redesign): purple band with label, heading, one
   line and the orange "Explore PMI membership" button. Phones: stacked,
   fees note only, full-width button.
   ========================================================================== */
.join-strip {
  padding: 52px 0;
  background: var(--purple);
  color: #fff;
  font-family: var(--font-ui);
}

.join-strip-inner {
  width: min(var(--max-wide), calc(100% - 42px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.join-strip-text {
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.join-strip-eyebrow {
  color: var(--cyan-light);
  font-size: var(--text-ui-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.join-strip h2 {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-strip);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;
}

/* Three concrete benefits, each with a cyan tick, stacked. */
.join-strip-benefits {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.join-strip-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #fff;
  font-size: var(--text-ui);
  font-weight: 600;
  line-height: 1.45;
}

.join-strip-benefits svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--cyan-light);
}

/* The fees note: a footnote, small and quiet. */
.join-strip p.join-strip-note {
  margin: 2px 0 0;
  color: var(--on-purple);
  font-size: var(--text-ui-xs);
  line-height: 1.5;
}

.join-strip p a {
  color: #fff;
  text-decoration: underline;
}

.join-strip-button {
  flex-shrink: 0;
  padding: 0 28px;
  background: var(--join);
  color: var(--night-deep);
}

.join-strip-button:hover {
  background: var(--join-hover);
  color: var(--night-deep);
}

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

@media (max-width: 767px) {
  .join-strip {
    padding: 32px 0;
  }

  .join-strip-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .join-strip-text {
    gap: 12px;
  }

  .join-strip-eyebrow {
    font-size: var(--text-ui-3xs);
  }

  .join-strip-benefits {
    gap: 10px;
    margin-top: 2px;
  }

  .join-strip-button {
    height: var(--ds-button-md); /* One of the three button heights (was 52px; uniformity review, 2026-10-29). */
    justify-content: center;
  }
}

/* Latest newsletter: styled like the redesign sections (label, Sora heading,
   Manrope text, pill buttons, card with a soft border). */
.newsletter {
  padding: 72px 0;
  color: var(--ink-strong);
  font-family: var(--font-ui);
}

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

.newsletter-box {
  display: grid;
  grid-template-columns: 210px 1fr;
  align-items: center;
  gap: 40px;
  padding: 32px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow-card);
}

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

/* "In this issue" (UI/UX review): a third column on wide screens, after a thin line; each section links to its place
   in the edition, with a dot in its newsletter colour. Hidden on narrower screens, where the card is already full. */
.newsletter-contents {
  display: none;
}

@media (min-width: 1101px) {
  .newsletter-box {
    grid-template-columns: 210px minmax(0, 1fr) 260px;
  }

  .newsletter-contents {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-self: stretch;
    justify-content: center;
    padding-left: 32px;
    border-left: 1px solid var(--line-soft);
  }
}

.newsletter-contents-label {
  color: var(--purple);
  font-size: var(--text-ui-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.newsletter-contents ul {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.newsletter-contents li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: var(--text-ui-sm);
  line-height: 1.35;
}

.newsletter-contents li::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-round);
  background: var(--purple);
  transform: translateY(-1px);
}

.newsletter-contents li.is-orange::before { background: var(--orange); }
.newsletter-contents li.is-cyan::before { background: var(--cyan); }

.newsletter-contents a {
  color: var(--ink-strong);
  font-weight: 600;
  text-decoration: none;
  transition: color .15s ease;
}

.newsletter-contents a:hover,
.newsletter-contents a:focus-visible {
  color: var(--purple);
}

.cover {
  height: 225px;
  border-radius: var(--radius-ui);
  background: var(--purple);
  color: #fff;
  padding: 21px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cover b {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.1;
}

.cover .stripe {
  height: 11px;
  width: 72%;
  background: var(--cyan);
}

.newsletter-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.newsletter-box h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-strip);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink-strong);
}

.newsletter-box p {
  max-width: 640px;
  margin: 0 0 6px;
  color: var(--muted-ui);
  font-size: var(--text-ui-md);
  line-height: 1.6;
}

/* "Latest issue: Newsletter Q3 2026", under the heading. */
.newsletter-box p.newsletter-issue {
  margin: -4px 0 0;
  color: var(--ink-strong);
  font-size: var(--text-ui-md);
  font-weight: 600;
}

.newsletter-issue strong {
  color: var(--purple);
  font-weight: 700;
}

/* "Get each new issue by email": opens the sign-up pop-up; a purple link with a bell, under the buttons. */
.newsletter-email {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  color: var(--purple);
  font-size: var(--text-ui);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color .15s ease;
}

.newsletter-email:hover,
.newsletter-email:focus-visible {
  text-decoration-color: currentColor;
}

.newsletter-email svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

/* Phones: centred under the full-width buttons. */
@media (max-width: 767px) {
  .newsletter-email {
    align-self: center;
  }
}

.newsletter-text .hero-actions {
  align-self: stretch;
}

/* Community & volunteering: the heading on the left and the volunteering card
   on the right: a photo of Chapter volunteers across the top (the homepage's
   "Volunteer box: photo", else the theme's own), then the label, Sora
   heading, Manrope text and purple pill button on white. It replaced a plain
   cyan box (UI/UX audit: "looks unpolished, use a relevant photo"). */
.community {
  padding: 88px 0;
  background: var(--mist);
  color: var(--ink-strong);
  font-family: var(--font-ui);
}

.community-layout {
  width: min(var(--max-wide), calc(100% - 42px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
}

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

/* Left column (UI/UX review): heading, intro, then "More ways to take part" as rows with dividers. */
.community-intro {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.community-intro .section-titles p {
  max-width: 520px;
  margin: 4px 0 0;
  color: var(--muted-ui);
  font-size: var(--text-ui-md);
  line-height: 1.65;
}

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

.community-ways ul {
  max-width: 520px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.community-ways li + li {
  border-top: 1px solid var(--line);
}

.community-ways a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 16px;
  padding: 14px 0;
  color: var(--ink-strong);
  text-decoration: none;
}

.community-way-title {
  font-family: var(--font-display);
  font-size: var(--text-ui-md);
  font-weight: 700;
  transition: color .15s ease;
}

.community-way-desc {
  grid-row: 2;
  color: var(--muted-ui);
  font-size: var(--text-ui);
}

.community-way-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-round);
  background: #fff;
  color: var(--purple);
  transition: border-color .15s ease, transform .15s ease;
}

.community-way-arrow svg {
  width: 16px;
  height: 16px;
}

.community-ways a:hover .community-way-title,
.community-ways a:focus-visible .community-way-title {
  color: var(--purple);
}

.community-ways a:hover .community-way-arrow {
  border-color: var(--purple);
  transform: translateX(2px);
}

.volunteer {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: #fff;
  color: var(--ink-strong);
  box-shadow: var(--shadow-card);
}

.volunteer-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: center 55%;
  background: var(--mist);
}

.volunteer-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 32px 36px 36px;
}

.volunteer-eyebrow {
  color: var(--purple);
  font-size: var(--text-ui-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* 28px: a step below the section heading beside it (42px), so the two do not compete (UI/UX review). */
.volunteer h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-section-sm);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.volunteer p {
  max-width: 440px;
  margin: 0 0 6px;
  font-size: var(--text-ui-md);
  line-height: 1.6;
}

@media (max-width: 767px) {
  .community {
    padding: 40px 0;
  }

  .community-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .community-intro {
    display: contents; /* Phones: heading and intro, then the volunteer card, then the other ways (below). */
  }

  .community-intro .section-titles p {
    font-size: var(--text-ui);
  }

  .community-ways {
    order: 2;
    margin-top: 10px;
  }

  .community-ways a {
    padding: 11px 0;
  }

  .community .volunteer {
    order: 1;
  }

  .volunteer-body {
    padding: 22px;
  }

  .volunteer-eyebrow {
    font-size: var(--text-ui-3xs);
  }

  /* Phones: under the 26px section heading. */
  .volunteer h3 {
    font-size: var(--text-story-title);
  }

  .volunteer p {
    font-size: var(--text-ui); /* 15px: the design system's minimum for body text. */
  }

  /* Full width; the long label stays on one line on most phones and wraps
     centred on very narrow ones. */
  .volunteer .pill-button {
    align-self: stretch;
    height: auto;
    min-height: var(--ds-button-lg);
    padding: 10px 20px;
    font-size: var(--text-ui);
    text-align: center;
  }
}

/* ==========================================================================
   President's welcome (2026 redesign): round portrait, label, the quote in
   Sora, name آ· title and "Read the full welcome →", which opens the full
   welcome message between the quote and the name, with "Show less" after
   the name (UI/UX audit: text, then name, then "Show less"). Phones:
   portrait + name and title in a row on top, then the quote and the link,
   as in the mobile prototype.
   ========================================================================== */
.welcome {
  padding: 72px 0 100px;
  background: #fff;
  color: var(--ink-strong);
  font-family: var(--font-ui);
}

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

/* 216px + the 20px gap = the prototype's 180px portrait and 56px gap. The
   portrait sits at the top and any height it needs beyond the text goes to
   the third (1fr) row, so the label and quote rows keep their size and
   opening the full welcome never moves the portrait, label or quote. */
.welcome-box {
  max-width: 1116px;
  display: grid;
  grid-template-columns: 216px auto minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "photo eyebrow eyebrow"
    "photo quote quote"
    "photo byline more";
  align-items: center;
  column-gap: 20px;
  row-gap: 18px;
}

.avatar {
  grid-area: photo;
  align-self: start;
  display: grid;
  place-content: center;
  width: 180px;
  height: 180px;
  border: 6px solid var(--purple-wash);
  border-radius: var(--radius-round);
  background: var(--purple);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
}

img.avatar {
  display: block;
  object-fit: cover;
}

.welcome-eyebrow {
  grid-area: eyebrow;
  margin: 0;
  color: var(--purple);
  font-size: var(--text-ui-xs);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.welcome-quote {
  grid-area: quote;
  margin: 0;
}

.welcome-quote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-story-title);
  font-weight: 400;
  line-height: 1.4;
}

.welcome-byline {
  grid-area: byline;
  margin: 0;
  font-size: var(--text-ui);
}

/* "Read the full welcome →" / "Show less" (a button; home.js). */
.welcome-more {
  grid-area: more;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: var(--ds-button-sm);
  padding: 0;
  border: 0;
  background: none;
  color: var(--purple);
  font: inherit;
  font-size: var(--text-ui);
  font-weight: 700;
  cursor: pointer;
}

.welcome-more[hidden] {
  display: none;
}

.welcome-more:hover {
  color: var(--purple-press);
}

.welcome-more:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.welcome-more-close,
.welcome-more[aria-expanded="true"] .welcome-more-open {
  display: none;
}

.welcome-more[aria-expanded="true"] .welcome-more-close {
  display: inline;
}

/* Open (or without JavaScript): the quote, the full welcome, the name, then
   "Show less", one under the other beside the portrait; the portrait spans
   the welcome's row too, so the rows above it stay as they were when closed. */
.welcome-box:has(.welcome-full:not([hidden])) {
  grid-template-rows: auto auto 1fr auto auto;
  grid-template-areas:
    "photo eyebrow eyebrow"
    "photo quote quote"
    "photo full full"
    ". byline byline"
    ". more more";
}

.welcome-full {
  grid-area: full;
  max-width: 760px;
  padding-top: 8px;
}

.welcome-full h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: var(--text-ui-tile-sm);
  font-weight: 700;
  line-height: 1.3;
}

.welcome-full p {
  margin: 0 0 14px;
  color: var(--muted-ui);
  font-size: var(--text-ui-md);
  line-height: 1.7;
}

.welcome-full p:last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .welcome {
    padding: 36px 0 44px;
    border-top: 1px solid var(--line-soft);
  }

  .welcome-box {
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "photo byline"
      "quote quote"
      "more more";
    column-gap: 14px;
    row-gap: 16px;
  }

  .avatar {
    align-self: center;
    width: 64px;
    height: 64px;
    border-width: 4px;
    font-size: var(--text-ui-md);
  }

  /* The label is the section heading for screen readers; the prototype hides it on phones. */
  .welcome-eyebrow {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .welcome-byline strong,
  .welcome-role {
    display: block;
  }

  .welcome-sep {
    display: none;
  }

  .welcome-role {
    color: var(--muted-strong);
    font-size: var(--text-ui-xs);
  }

  .welcome-quote p {
    font-size: var(--text-ui-xl);
    line-height: 1.45;
  }

  .welcome-more {
    font-size: var(--text-ui-sm);
  }

  /* Phones keep the name beside the portrait at the top (the mobile
     prototype); the full welcome opens under the quote, then "Show less". */
  .welcome-box:has(.welcome-full:not([hidden])) {
    grid-template-rows: none;
    grid-template-areas:
      "photo byline"
      "quote quote"
      "full full"
      "more more";
  }

  .welcome-full p {
    font-size: var(--text-ui-sm);
  }
}

.contact-band {
  background: var(--purple);
  color: #fff;
  padding: 60px 0;
}

.contact-band-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}

.contact-band .eyebrow {
  color: var(--cyan);
}

.contact-band h2 {
  color: #fff;
  margin: 7px 0 14px;
}

.contact-band p {
  color: var(--on-dark);
  max-width: 460px;
}

.contact-band-details {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-lg);
}

.contact-band-details .detail-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  color: var(--on-dark);
  font-size: var(--text-md);
  line-height: 1.4;
}

.contact-band-details .detail-item svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--cyan);
}

.contact-band-details .detail-item a {
  color: #fff;
  font-weight: 700;
}

.contact-band-details .detail-item a:hover,
.contact-band-details .detail-item a:focus-visible {
  color: var(--cyan);
}

@media(max-width:760px) {
  .head {
    display: block;
  }

  .head p {
    margin-top: 15px;
  }

  .contact-band-grid {
    grid-template-columns: 1fr;
  }

  .contact-band-details {
    padding: 22px;
  }

  .newsletter-box {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 20px;
  }

  .cover {
    height: 165px;
  }

  section {
    padding: 62px 0;
  }

  .newsletter {
    padding: 40px 0;
  }

  .newsletter-box p {
    font-size: var(--text-ui); /* 15px: the design system's minimum for body text. */
  }
}

/* ==========================================================================
   WordPress homepage (front-page.php): states the static page did not have,
   and what it set with inline styles.
   ========================================================================== */

/* Newsletter cover as on the News page's newsletter band and the Newsletters
   page: the whole A4 cover, tilted, with rounded corners and a deep soft shadow. */
.newsletter .cover--image {
  display: block;
  height: auto;
  aspect-ratio: 210 / 297;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-ui);
  background: #fff;
  box-shadow: var(--shadow-menu);
  transform: rotate(-3deg);
}

/* Room for the tilted cover's corners inside the white box. */
.newsletter .newsletter-box {
  padding: 40px 40px 40px 48px;
}

@media (max-width: 760px) {
  .newsletter .newsletter-box {
    padding: 28px 24px 24px;
  }
}

.newsletter .cover--image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top;
}

.cover .eyebrow {
  color: var(--cyan);
}

@media (max-width: 760px) {
  /* Phones (UI/UX review: the cover made this the page's tallest block): a small cover beside the label, heading and
     "Latest issue" line; the text, the buttons and the email link under them, full width. */
  .newsletter .newsletter-box {
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: start;
    gap: 6px 16px;
  }

  .newsletter .newsletter-text {
    display: contents;
  }

  .newsletter .cover--image,
  .newsletter .cover {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 96px;
    height: auto;
    padding: 0;
  }

  .newsletter .newsletter-text > .section-eyebrow,
  .newsletter .newsletter-text > h2,
  .newsletter .newsletter-text > .newsletter-issue {
    grid-column: 2;
  }

  .newsletter .newsletter-text > .section-eyebrow {
    align-self: end;
  }

  .newsletter .newsletter-text > h2 {
    font-size: var(--text-story-title);
  }

  .newsletter .newsletter-box p.newsletter-issue {
    margin: 0;
    font-size: var(--text-ui);
  }

  .newsletter .newsletter-text > :not(.section-eyebrow):not(h2):not(.newsletter-issue) {
    grid-column: 1 / -1;
  }

  .newsletter .newsletter-text > p:not(.newsletter-issue) {
    margin-top: 12px;
  }

  .newsletter .newsletter-text > .hero-actions {
    margin-top: 4px;
  }

  .newsletter .newsletter-email {
    justify-self: center;
    margin-top: 10px;
  }
}

/* Shared accessibility and consistency controls (matches events.css / membership.css / learning.css) */
.actions { margin-top: 0; }
[id] { scroll-margin-top: 105px; }
@media (max-width: 760px) {
  [id] { scroll-margin-top: 85px; }
}