@charset "UTF-8";
/* Minimal, clean, versatile responsive media queries
   Views: desktop (PC), tablet landscape, tablet portrait, mobile
   Use em-based breakpoints for better zoom/accessibility handling.
*/

html {
  font-size: 16px;
}

body {
  margin: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /* base type scale and layout vars */
  --max-content-width: 1290px;
  --container-padding: 1rem;
  /* site font stack variables (kept here so scoped styles use the current faces) */
  --default-font: "ff-meta-serif-web-pro", "Cambria", "Charter", serif;
  --secondary-font: "ff-zwo-web-pro", "Franklin Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Font colors */
  --font-color-gray666: #666;
  --font-color-light-gray: #E2E2E2;
  --font-color-stripes-blue: #0472E3;
  --font-color-gray222: #222;
  --font-color-default: #000;
  /* Font sizes (canonical set + compatibility aliases) */
  /* Canonical tokens */
  /* 14px */
  --font-size-xsmall: 0.875rem;
  /* 15px */
  --font-size-small: 0.937rem;
  /* 16px */
  --font-size-default: 1rem;
  /* 18px */
  --font-size-semi-medium: 1.125rem;
  /* 19px */
  --font-size-medium: 1.1875rem;
  /* 20px */
  --font-size-large: 1.25rem;
  /* 24px */
  --font-size-xlarge: 1.5rem;
  /* 30px */
  --font-size-xxlarge: 1.875rem;
  
  /* margin/ padding */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-s: 12px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 32px;
  --space-xxl: 40px;
  /* article layout widths */
  --article-column-width: 690px;
  --article-lead-width: 910px;
  --article-lead-inset-max: 878px;
  --article-inline-inset-max: 658px;
  --article-portrait-inset-max: 318px;
  --article-text-column-max: 722px;
  /* font decoration */
  /* Inline/lead image geometry (matches landscape350 / landscape910 aspect ratio) */
  --article-inline-image-aspect-ratio: 1.602129103326724;
  --article-image-gutter: 0px;
  --article-inline-image-width: min(690px, calc(100vw - (2 * var(--article-image-gutter))));
  --article-inline-image-height: calc(var(--article-inline-image-width) / var(--article-inline-image-aspect-ratio));
  --article-lead-image-width: min(910px, calc(100vw - (2 * var(--article-image-gutter))));
  --article-lead-image-height: calc(var(--article-lead-image-width) / var(--article-inline-image-aspect-ratio));
  /* Portrait max heights match desktop (do not grow with viewport width). */
  --article-lead-portrait-height: calc(var(--article-lead-width) / var(--article-inline-image-aspect-ratio));
  --article-inline-portrait-height: calc(var(--article-column-width) / var(--article-inline-image-aspect-ratio));
  --article-storyline-portrait-height: 600px;
}

button {
    outline: none !important; 
}

input[type="button"]::-moz-focus-inner {
    border: 0;
}

/* Universal styling */
.storyline-list li::marker {
    color: unset !important;
}

.page > .container #article-text a {
  text-decoration: none;
  color: var(--font-color-stripes-blue);
}

.page > .container #article-text .article-storyline a {
  text-decoration: underline !important;
}

.page > .container #article-text a:active {
    color: #fff !important;
}

.page > .container #article-text a:hover {
  text-decoration: underline;
  color: var(--font-color-stripes-blue);
}
.article-storyline #article-text * {
  text-align: unset !important;
}
p.section_title {
  margin: var(--space-m) 0 !important;
  font-family: var(--secondary-font) !important;
  font-size: var(--font-size-xlarge) !important;
  font-weight: 800 !important;
  line-height: 1.5rem !important;
  color: #000 !important;
}

#article-text .previous-coverage-block a,
#article-text .related-stories-block a,
#article-text .stripes-top-news_block p.title a {
  color: var(--font-color-default) !important;
}

#article-text .stripes-top-news_block p.branch-section a:hover {
  color: var(--font-color-stripes-blue) !important;
}

#article-text ul.storyline-ul,
#article-text ol.storyline-ol {
  width: 690px;
  margin: 0 0 var(--space-m) 0 !important;
  padding-left: 1.40em;
  font-size: var(--font-size-large);
  box-sizing: border-box;
  list-style-position: outside;
}

#article-text ul.storyline-ul li,
#article-text ol.storyline-ol li {
  padding-bottom: var(--space-s);
  margin-bottom: 0;
  overflow-wrap: anywhere;
}

#article-text ul.storyline-ul li::marker,
#article-text ol.storyline-ol li::marker {
  padding-right: 0.5em;
}

.tag a {
  font-size: var(--font-size-small) !important;
  text-decoration: underline !important;
  color: var(--font-color-gray666) !important;
}

.tag a:hover {
  text-decoration: none !important;
}

/* Shared component/base styles (desktop-specific rules are inside media queries) */
/* Author area */
.top-author-info {
  width: 690px;
  margin: 0 auto var(--space-xl);
  left: unset !important;
}

/*
  Non-mobile only: when byline is dates-only, .top-author-info collapses and Share
  (JS-aligned to this block's top) sits too close to Trinity. min-height matches the
  Share control; flex centers Published/Updated within that height. When author/
  publication lines are present, content taller than 46px so layout is unchanged.
*/
@media (min-width: 37.5em) {
  .top-author-info {
    min-height: 46px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Author <p> always renders; hide when empty so date-only bylines do not
   leave a blank line (including mobile, where the byline sits under h1). */
.top-author-info > p:first-of-type:empty {
  display: none;
}

.top-author-info p {
  margin: 0 auto;
  font-family: var(--secondary-font);
  font-size: var(--font-size-default);
  color: var(--font-color-default);
}

.top-author-info p:first-of-type {
  margin: 0 0 var(--space-xs);
}

.top-author-info p.date {
  color: var(--font-color-gray666);
}

/* Keep new article date micro-elements stable if legacy .date span rules exist. */
#article-text .date.js-article-date-info span,
#article-text .date.js-article-date-info .js-article-updated-separator,
#article-text .date.js-article-date-info .js-article-updated-time {
  position: static !important;
  left: auto !important;
}

/* Every rendered Storyline article footer section owns exactly one leading divider. */
body.storyline-article #article-text > .storyline-article-footer > section {
  border-top: solid 1px var(--font-color-default);
}

body.storyline-article #article-text > .storyline-article-footer > .author-block {
  border-top-color: var(--font-color-light-gray);
}

.author-block {
  max-width: 690px;
  margin: 0 auto var(--space-m);
  padding: var(--space-m) 0 0;
}

.author {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0 auto var(--space-l);
}

.author-block .author .headshot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}

#article-text .author-block .author img.headshot {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.author-block .author .headshot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-block .author p {
  margin: 0 auto var(--space-xxs);
  font-family: var(--secondary-font);
  font-size: var(--font-size-default);
  color: var(--font-color-default);
}

/* Author bio social links (email / X) */
.author-bio-links {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
}

.author-block .author-details .author-bio-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid #E2E2E2;
  background-color: #fff;
  color: inherit;
  text-decoration: none;
  transition: background-color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}

.author-block .author-details .author-bio-link:hover,
.author-block .author-details .author-bio-link:active {
  background-color: #EDEDED;
}

.author-block .author-details .author-bio-link:focus {
  outline: none;
}

.author-block .author-details .author-bio-link:focus-visible {
  outline: 2px solid var(--font-color-stripes-blue);
  outline-offset: 2px;
}

.author-bio-link-icon {
  display: block;
  width: 24px;
  height: 24px;
}

/* Author bio read-more toggle */
.author-block .author-details > p {
  transition: max-height 0.25s ease;
}

/* Overlay wrapper — absolutely positioned at bottom-right of collapsed paragraph */
.author-bio-toggle-wrap {
  position: absolute;
  bottom: 0;
  right: 0;
  padding-left: 2em;
  background: linear-gradient(to right, transparent, #fff 20%);
  line-height: inherit;
  pointer-events: none; /* allow clicks to pass through gradient area */
}

/* Expanded state — wrapper flows inline after text */
.author-bio-toggle-wrap--expanded {
  position: static;
  padding-left: 0.25em;
  background: none;
}

/* The toggle button itself */
.author-bio-toggle {
  display: inline;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 400;
  color: var(--font-color-gray666);
  text-decoration: none;
  pointer-events: auto;
}

.author-bio-toggle:hover {
  text-decoration: underline;
}

.author-bio-toggle:focus-visible {
  outline: 2px solid var(--font-color-stripes-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* inline contents */
.storyline-p.connatix div {
  margin: 0 auto !important;
  text-align: center !important;
}

.storyline-p.connatix {
  overflow: visible;
}

.storyline-p.connatix .twitter-tweet,
.storyline-p.connatix .twitter-tweet-rendered {
  display: block !important;
  width: 100% !important;
  max-width: 550px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.storyline-p.connatix iframe,
.storyline-p > iframe {
  display: block;
  width: 100% !important;
  max-width: 100%;
}

.inline-image {
  display: grid !important;
  justify-content: center;
  width: 690px !important;
  max-width: 690px !important;
  margin: 0 auto 1.5rem !important;
  padding: 0 !important;
}

.inline-image.landscape-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--article-inline-image-aspect-ratio);
}

.inline-image.portrait-image {
  width: var(--article-inline-image-width) !important;
  max-width: var(--article-inline-image-width) !important;
}

.inline-image.portrait-image img {
  display: block;
  width: auto;
  max-width: 100%;
  height: var(--article-inline-portrait-height);
  max-height: var(--article-inline-portrait-height);
  object-fit: contain;
  margin-inline: auto;
}

.inline-image img {
  margin-bottom: 0.75rem;
}

.ssslideshow {
  position: relative;
  width: 690px;
  max-width: 690px !important;
  margin: 0 auto;
  overflow: hidden;
}

.ssslideshow .sss {
  position: relative;
  width: 100%;
  max-width: 690px;
  height: 100% !important;
  min-height: 0;
  margin: 0 auto;
  padding: 0 !important;
  overflow: hidden;
}

.ssslideshow .ssslide,
.ssslideshow .ssslide > img {
  max-width: 100%;
}

/* SSS layout model: slideshow height is controlled only by .ssslideshow via JS. */
.ssslideshow [role='group'][aria-roledescription='slide'],
.ssslideshow .ssslide {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden;
}

.ssslideshow .ssslide .inline-image,
.ssslideshow [role='group'][aria-roledescription='slide'] .inline-image {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* Direct slide images only (legacy markup without .inline-image wrapper) */
.ssslideshow .ssslide > img,
.ssslideshow [role='group'][aria-roledescription='slide'] > img {
  width: 100% !important;
  height: 100%;
  max-width: none;
  margin: 0 !important;
  display: block;
  object-fit: contain;
}

.ssslideshow .ssslide .inline-image img,
.ssslideshow [role='group'][aria-roledescription='slide'] .inline-image img {
  width: auto !important;
  max-width: 100%;
  height: auto !important;
  max-height: 100%;
  aspect-ratio: auto !important;
  object-fit: contain;
  margin: 0 auto !important;
  display: block;
}

/* Gallery portrait slides: no fixed inline height — outer .ssslideshow height is set by JS */
.ssslideshow .ssslide .inline-image.portrait-image,
.ssslideshow [role='group'][aria-roledescription='slide'] .inline-image.portrait-image,
#article-text .ssslideshow .ssslide .inline-image.portrait-image,
#article-text .ssslideshow [role='group'][aria-roledescription='slide'] .inline-image.portrait-image {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ssslideshow .ssslide .inline-image.portrait-image img,
.ssslideshow [role='group'][aria-roledescription='slide'] .inline-image.portrait-image img,
#article-text .ssslideshow .ssslide .inline-image.portrait-image img,
#article-text .ssslideshow [role='group'][aria-roledescription='slide'] .inline-image.portrait-image img {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  margin-inline: auto !important;
  display: block !important;
  flex: 0 1 auto !important;
}

/* Captions stay visible, but do not participate in slideshow height calculation. */
.ssslideshow .ssslide .caption {
  display: none;
}

.ssslideshow-active-caption {
  width: 100%;
  max-width: 690px;
  margin: 0 auto var(--space-m);
  padding: var(--space-xs) 0 0;
  box-sizing: border-box;
}

.ssslideshow-active-caption p {
  margin: 0;
}

/* SSS slideshow tap targets */
.ssslideshow .sssnext,
.ssslideshow .sssprev {
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
  z-index: 3;
  background-repeat: no-repeat;
}

.ssslideshow .sssnext {
  background-position: right center;
}

.ssslideshow .sssprev {
  background-position: left center;
}

@media (max-width: 48em) {
  .ssslideshow .sssnext,
  .ssslideshow .sssprev {
    transform: translateY(-50%) scale(1);
  }
}

.page {
  color: #111;
}

.page p {
  margin: 0 0 1rem 0;
}

.page .headline {
  font-family: var(--default-font);
  font-weight: 700;
}

.page .storyline-p, .page .tags, .page .subheads-h2 {
  width: 690px;
  max-width: 690px;
  margin: 0 auto var(--space-m);
  font-size: var(--font-size-large);
  font-weight: 500;
  line-height: 1.6;
}

.page h2.subheads-h2 {
  font-family: var(--default-font) !important;
  margin: 0 auto var(--space-xxs);
  font-size: var(--font-size-xlarge);
  font-weight: 600;
}

.page .article-storyline {
  width: 690px;
  margin: 0 auto var(--space-l);
}

.page .storyline-p a {
  cursor: pointer;
}

/*
  Pelcro inline paywall rewrites article markup into
  .body-text.pelcro-article-replace using plain <p> tags.
  Bridge those nodes back to new-template paragraph styles,
  and suppress the injected legacy share block to avoid duplicates.
*/
#article-text .article-storyline .body-text.pelcro-article-replace #preview-text > p {
  width: 690px;
  max-width: 690px;
  margin: 0 auto var(--space-m);
  font-size: var(--font-size-large) !important;
  font-weight: 500;
  line-height: 1.6 !important;
  color: var(--font-color-default) !important;
}

#article-text .article-storyline .body-text.pelcro-article-replace #preview-text > p a {
  color: var(--font-color-stripes-blue) !important;
  text-decoration: none;
}

#article-text .article-storyline .body-text.pelcro-article-replace #preview-text > p a:hover {
  text-decoration: underline;
}

#article-text .article-storyline .body-text.pelcro-article-replace .share-widget,
#article-text .article-storyline .body-text.pelcro-article-replace > svg {
  display: none !important;
}

#article-text hr {
  max-width: 690px;
}

.page > .container > #article-text .ad-wrapper {
  width: 690px;
  max-width: 690px;
  margin: 0 auto var(--space-m);
  padding: var(--space-l) 0;
  border-top: 1px solid var(--font-color-light-gray);
  border-bottom: 1px solid var(--font-color-light-gray);
  text-align: center !important;
}

.article-storyline .ad-wrapper div {
  /* Box model */
  margin: 0 auto;
  text-align: center;
}

.inline-image.align-center img {
  width: 100%;
  max-width: 910px;
}

.article-lead-image {
  display: grid !important;
  justify-content: center;
  width: 910px;
  max-width: 910px;
  margin: 0 auto 2rem;
  padding: 0 !important;
}

.article-lead-image.landscape-image img {
  display: block;
  width: 100%;
  max-width: var(--article-lead-image-width);
  height: auto;
  aspect-ratio: var(--article-inline-image-aspect-ratio);
  margin-bottom: 0.75rem;
}

.article-lead-image.portrait-image img {
  display: block;
  width: auto;
  max-width: 100%;
  height: var(--article-lead-portrait-height);
  max-height: var(--article-lead-portrait-height);
  object-fit: contain;
  margin-inline: auto;
  margin-bottom: 0.75rem;
}

.article-lead-image:not(.portrait-image):not(.landscape-image) img {
  display: block;
  width: 100%;
  max-width: var(--article-lead-image-width);
  margin-bottom: 0.75rem;
}

/* storyline+article: hero video matches lead-image width (910px). */
body.storyline-article #article-text > .article-lead-video {
  width: var(--article-lead-width);
  max-width: var(--article-lead-width);
  margin: 0 auto 2rem;
}

body.storyline-article #article-text > .article-lead-video video {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
}

/* Connatix injects nested player divs; force them to fill the 910px hero. */
body.storyline-article #article-text > .article-lead-video--connatix > div,
body.storyline-article #article-text > .article-lead-video--connatix .storyline-p.connatix,
body.storyline-article #article-text > .article-lead-video--connatix .storyline-p.connatix > div,
body.storyline-article #article-text > .article-lead-video--connatix .storyline-p.connatix div,
body.storyline-article #article-text > .article-lead-video--connatix .storyline-p.connatix iframe {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Stripes Top News */
.stripes-top-news_block ul {
  display: flex;
  gap: 0 var(--space-l);
  width: 910px;
  margin: 0 auto var(--space-l);
  padding: 0;
  list-style: none;
}

.stripes-top-news_block ul li {
  width: 287px;
}

.stripes-top-news_block ul li p.branch-section {
  margin: var(--space-xxs) 0;
  font-family: var(--secondary-font);
  font-weight: 600;
  text-transform: uppercase;
}

.stripes-top-news_block ul li p.title {
  font-family: var(--primary-font);
  font-size: var(--font-size-semi-medium) !important;
  font-weight: 600;
}

.page > .container .stripes-top-news_block a:hover {
  text-decoration: underline;
  color: var(--font-color-default) !important;
}

/* Page/container sizing */
.container,
.page {
  max-width: var(--max-content-width);
  margin: 0 auto;
}
/* Layout: main two-column frame */
main.container {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 80px;
  padding: 0;
}
/* Article column */
#article-text {
  flex: 0 0 910px;
  max-width: 910px;
}
/* Article header (section + headline) */
section.article-header {
  width: 100%;
  max-width: 1045px;
  padding: 24px 0;
}
section.article-header p {
  margin: 0 0 0.8rem 0;
  font-family: var(--secondary-font);
  font-size: var(--font-size-default);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: var(--font-color-stripes-blue);
}
section.article-header p a {
  text-decoration: none;
  color: var(--font-color-stripes-blue);
}
section.article-header p a:hover {
  text-decoration: underline;
}
/* Sponsored Content Article (pages-sponsored-content-article) section label —
   matches legacy article badge treatment. Shared CSS with Storyline Article shell
   (body.storyline-article via default-article-master). */
body.storyline-article section.article-header p.sponsored-section-label {
  display: inline-block;
  background: #F5A81DB3 !important;
  padding: 3px 4px 4px;
  text-align: center;
  color: #222;
}
body.storyline-article section.article-header p.sponsored-section-label a {
  color: #222 !important;
}
body.storyline-article section.article-header p.sponsored-section-label a:hover {
  color: #222 !important;
}
/* Sponsored Content Article: no max-width constraint on article header */
body.storyline-article section.article-header.sponsored-content {
  max-width: 910px;
  margin: 0 auto;
}

/* Sponsored Content Article — tablet: match article-header/headline width to hero image */
@media (min-width: 37.5em) and (max-width: 82.6875em) {
  body.storyline-article section.article-header.sponsored-content {
    width: min(var(--article-lead-inset-max), calc(100vw - (2 * var(--space-xl))));
    max-width: min(var(--article-lead-inset-max), calc(100vw - (2 * var(--space-xl))));
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
}

/* Sponsored Content Article — tablet ≤878px: match full-bleed lead image content width */
@media (min-width: 37.5em) and (max-width: 54.875em) {
  body.storyline-article section.article-header.sponsored-content {
    width: calc(100vw - (2 * var(--space-m)));
    max-width: calc(100vw - (2 * var(--space-m)));
  }
}

/* Sponsored Content Article — mobile: 16px horizontal padding on headline */
@media (max-width: 37.4375em) {
  body.storyline-article section.article-header.sponsored-content {
    width: 100%;
    max-width: 100%;
  }

  body.storyline-article section.article-header p.sponsored-section-label {
    margin-left: var(--space-m);
    margin-right: var(--space-m);
  }

  body.storyline-article section.article-header.sponsored-content h1#article-headline {
    padding-left: var(--space-m);
    padding-right: var(--space-m);
    box-sizing: border-box;
  }
}

/* Include #article-headline so this beats legacy layout.min.css #article-headline rules */
section.article-header h1#article-headline {
  max-width: none;
  margin: 0 0 1rem 0;
  font-size: clamp(2.5rem, calc(2vw + 1.5rem), 3rem);
}
/* Inline image / caption */
.article-lead-image p,
.inline-image .caption p,
.caption p {
  margin: 0;
  font-family: var(--secondary-font);
  font-size: var(--font-size-xsmall);
  color: var(--font-color-gray666) !important;
  line-height: 150%;
  font-weight: 400;
}

/* Trinity audio area */
#TrinityAudioID {
  width: 690px;
  margin: 0 auto var(--space-l);
}

/* tags */
.tags {
  width: auto;
  margin: 0 auto var(--space-l);
}

.tags p {
  width: auto;
  display: inline-block;
  margin: 0 var(--space-m) 0 0;

}

.tags p a {
  font-size: var(--font-size-small) !important;
  text-transform: uppercase;
  font-family: var(--secondary-font);
  text-decoration: underline !important;
  color: var(--font-color-gray666) !important;
  font-weight: 600;
}

/* Previous coverage area & Related Stories area */
.previous-coverage-block,
.related-stories-block {
  width: 690px;
  margin: 0 auto;
  padding: 0;
}
.previous-coverage-block ul,
.related-stories-block ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.previous-coverage-block ul li,
.related-stories-block ul li {
  display: flex;
  gap: var(--space-l);
  padding: var(--space-m) 0;
  border-bottom: solid 1px var(--font-color-light-gray);
}
.previous-coverage-block ul li:first-child,
.related-stories-block ul li:first-child {
  padding: 0 0 var(--space-m);
}
.previous-coverage-block ul li:last-child,
.related-stories-block ul li:last-child {
  padding-bottom: var(--space-l);
  border-bottom: none;
}
.previous-coverage-block ul li p,
.related-stories-block ul li p {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--primary-font);
  font-size: var(--font-size-semi-medium);
  font-weight: 600;
  color: var(--font-color-default);
}
.previous-coverage-block ul li > a,
.related-stories-block ul li > a {
  flex-shrink: 0;
}
.previous-coverage-block ul li img,
.related-stories-block ul li img {
  width: 116px;
  height: 73px;
  display: block;
}
/* Explore our newsletters block */
.explore-our-newsletters-block {
  width: 690px;
  margin: 0 auto var(--space-l);
}
.explore-our-newsletters-block ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.explore-our-newsletters-block ul li {
  display: flex;
  gap: var(--space-m);
  padding: var(--space-s) 0;
}
.explore-our-newsletters-block ul li.newsletter-hidden {
  display: none;
}
.explore-our-newsletters-block ul li:first-of-type {
  padding: 0 0 var(--space-s);
}
.explore-our-newsletters-block ul li p {
  margin: 0;
}
.explore-our-newsletters-block ul li > img {
  width: 59px !important;
  height: 59px !important;
}
.explore-our-newsletters-block p {
  font-family: var(--secondary-font);
  font-size: var(--font-size-default);
  font-weight: 400;
  color: var(--font-color-gray666);
}
.explore-our-newsletters-block p:first-of-type {
  width: 440px;
}
.explore-our-newsletters-block p:last-of-type {
  width: 160px;
}
.explore-our-newsletters-block p:last-of-type img {
  width: 20px;
  height: 20px;
}
.explore-our-newsletters-block p a {
  display: inline-block;
}
.explore-our-newsletters-block p a:nth-of-type(1) {
  margin: 0 var(--space-s) 0 0;
  text-decoration: underline !important;
  color: var(--font-color-default) !important;
}
.explore-our-newsletters-block p a:nth-of-type(2) {
  margin: 0 0 0 var(--space-s);
  text-decoration: none;
  font-weight: 600;
}
.explore-our-newsletters-block p span.title {
  display: block;
  margin: 0 auto var(--space-xxs);
  font-family: var(--default-font);
  font-size: var(--font-size-medium);
  font-weight: 600;
  color: var(--font-color-default);
}
/* Align small inline icons with the surrounding text */
.explore-our-newsletters-block a img {
  display: inline-block;
  vertical-align: middle;
  transform: translateY(2px) translateX(5px);
}
/* see more utility: class for the dynamically inserted newsletter toggle */
.explore-our-newsletters-block p.newsletter_tab {
  margin: 0 auto !important;
  text-align: center;
}
.explore-our-newsletters-block p.newsletter_tab a {
  text-decoration: none !important;
  cursor: pointer;
  color: var(--font-color-gray666) !important;
}
.explore-our-newsletters-block p.newsletter_tab i {
  margin-left: 0.5rem;
  font-style: normal;
  font-variant: all-small-caps !important;
  padding-top: 3px;
}
/* Videos block, Around the web block and Stripes top news */
.videos-block,
.around-the-web-block,
.stripes-top-news_block {
  width: 910px;
  margin: 0 auto var(--space-l);
}
/* Utility: hide blocks that should be removed when ads fail to render */
.is-hidden {
  display: none !important;
}
/* Video placeholder for desktop (910x606) */
.videos-block .video-placeholder {
  position: relative;
  display: block;
  align-items: center;
  justify-content: center;
  margin: 1rem auto;
  background: #e6e6e6 center/cover no-repeat;
  color: #333;
  text-align: center;
}

  /* Other elements from current styling */
  .storyline-quote {
    color: #222222;
    border-left: 0.375rem solid var(--font-color-stripes-blue);
    word-wrap: break-word;
    line-height: 1.5;
    margin-block-start: 0;
    margin-block-end: 0;
    font-size: var(--font-size-large);
    margin: 0 auto var(--space-l);
    width: auto;
    padding: 0 0 0 var(--space-m);
}

  .storyline-quote p:first-of-type {
    font-style: italic;
    font-weight: 600;
}

  /* Desktop fixed size */
  @media (min-width: 910px) {
    .videos-block .video-placeholder {
      width: 910px;
      height: 606px;
    }
  }

  /* Smaller screens: full width, maintain 16:9-ish aspect ratio */
  @media (max-width: 909px) {
    .videos-block .video-placeholder {
      width: 100%;
      height: calc(100vw * 0.666);
    }
  }

  /* Spinner inside placeholder */
  .video-placeholder .video-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 6px solid rgba(0,0,0,0.1);
    border-top-color: rgba(0,0,0,0.65);
    transform: translate(-50%, -50%);
    animation: video-spinner-spin 1s linear infinite;
  }

  @keyframes video-spinner-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
  }

  /* Right rail */
  aside.rail {
    flex: 0 0 300px;
    max-width: 300px;
  }

  aside .rail hr {
    margin: 24px auto 16px;
  }

  /* Editors / aside headings */
  .section-heading,
  .aside-heading {
    margin: 0 0 0.75rem 0;
    font-weight: 700;
    font-size: 1.125rem;
    text-transform: uppercase;
  }

  .list-with-image img {
    display: block;
    width: 100%;
    height: auto;
  }

/* Mobile-first base styles go above (or import existing rules here). */
/* Mobile: up to 599px */
@media (max-width: 37.4375em) {

  /* 599px / 16 = 37.4375em */
  :root {
    --container-padding: 0.75rem;
    --article-image-gutter: var(--space-m);
  }

  /* Example helpers */
  .container {
    display: block;
    padding: 0 !important;
    overflow-x: hidden;
  }

  section.article-header h1#article-headline {
    margin: 0;
    font-size: var(--font-size-xxlarge);
    color: var(--font-color-gray222);
    line-height: 120%; /* 36px */
  }

  .page .article-storyline {
    width: auto;
    margin: 0 auto var(--space-l);
  }

  #article-text {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .inline-image {
    display: grid !important;
    justify-content: center;
    width: auto !important;
    max-width: unset !important;
    padding: 0 !important;
  }

  .inline-image.landscape-image {
    width: 100% !important;
    max-width: 100% !important;
  }

  .inline-image.landscape-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: var(--article-inline-image-aspect-ratio);
  }

  .inline-image.portrait-image {
    width: 100% !important;
    max-width: 100% !important;
  }

  .inline-image.portrait-image img {
    width: auto !important;
    max-width: 100%;
    height: var(--article-inline-portrait-height);
    max-height: var(--article-inline-portrait-height);
    object-fit: contain;
    margin-inline: auto;
  }

  .inline-image .caption,
  .ssslideshow-active-caption {
    padding: 0 var(--space-m) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .ssslideshow-active-caption p {
    padding: 0 !important;
  }

  .ssslideshow-active-caption {
    width: 100%;
    max-width: 100%;
    padding-left: var(--space-m);
    padding-right: var(--space-m);
    box-sizing: border-box;
  }

  .ssslideshow {
    width: 100%;
    max-width: 100% !important;
    margin: 0 auto var(--space-s);
    padding: 0;
    overflow: hidden;
  }
  .ssslideshow .sss {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  .ssslideshow .ssslide,
  .ssslideshow .ssslide > img {
    max-width: 100%;
  }

  .ssslideshow .ssslide .inline-image,
  .ssslideshow [role='group'][aria-roledescription='slide'] .inline-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .ssslideshow .ssslide .inline-image img,
  .ssslideshow [role='group'][aria-roledescription='slide'] .inline-image img {
    width: auto !important;
    max-width: 100%;
    height: auto !important;
    max-height: 100%;
    aspect-ratio: auto !important;
    margin: 0 auto !important;
    object-fit: contain;
  }

  #article-text ul.storyline-ul,
  #article-text ol.storyline-ol {
    width: auto !important;
    margin: 0 var(--space-m) var(--space-m) 24px !important;
    padding: 0 0 0 var(--space-m) !important;
    font-size: var(--font-size-large);
  }

  #article-text ol.storyline-ol {
    padding: 0 0 0 calc(var(--space-m) + 0.5rem) !important;
    list-style-position: outside;
  }

  #article-text ol.storyline-ol li::marker {
    font-variant-numeric: tabular-nums;
  }

  .rail {
    display: none;
  }

  section.article-header {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: var(--space-l) var(--space-m);
    border-top: 1px solid var(--font-color-light-gray);
    box-sizing: border-box;
  }

  .article-lead-image {
    display: grid !important;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto 2rem;
    padding: 0 !important;
    box-sizing: border-box;
  }

  .article-lead-image:not(.portrait-image) img {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: var(--article-inline-image-aspect-ratio);
  }

  .article-lead-image.portrait-image img {
    width: auto;
    max-width: 100%;
    height: var(--article-lead-portrait-height);
    max-height: var(--article-lead-portrait-height);
    object-fit: contain;
    margin-inline: auto;
  }

  .top-author-info,
  #TrinityAudioID {
    width: calc(100% - var(--space-xl));
    max-width: unset;
    margin: 0 var(--space-m) 2rem;
    box-sizing: border-box;
  }

   .article-lead-image .caption {
    width: calc(100% - var(--space-xl));
    max-width: unset;
    margin: 0 var(--space-m);
    box-sizing: border-box;
  }

  .page .storyline-p,.page .tags, .page .subheads-h2 {
    width: calc(100% - var(--space-xl));
    max-width: unset;
    margin: 0 auto var(--space-l);
    box-sizing: border-box;
  }

  #article-text .article-storyline .body-text.pelcro-article-replace #preview-text > p {
    width: calc(100% - var(--space-xl));
    max-width: unset;
    margin: 0 auto var(--space-l);
    box-sizing: border-box;
  }

  .page > .container > #article-text .ad-wrapper {
    max-width: unset;
    width: calc(100% - var(--space-m) * 2);
    padding: var(--space-l) 0;
  }

  .author-block,
  .previous-coverage-block,
  .related-stories-block,
  .videos-block,
  .around-the-web-block,
  .explore-our-newsletters-block,
  .stripes-top-news_block {
    max-width: 100%;
    width: calc(100% - var(--space-m) * 2);
    margin-right: var(--space-m);
    margin-left: var(--space-m);
    box-sizing: border-box;
  }

  .videos-block,
  .around-the-web-block,
  .explore-our-newsletters-block,
  .stripes-top-news_block {
    padding: 0 0 var(--space-xs);
  }

  /* Explore our newsletter block */
  .explore-our-newsletters-block ul li {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    grid-auto-rows: auto;
    align-items: start;
    column-gap: var(--space-m);
    row-gap: 0;
    padding: var(--space-s) 0;
  }

  .explore-our-newsletters-block ul li > img {
    width: 40px !important;
    height: 40px !important;
    grid-column: 1;
    grid-row: 1 / span 2;
    object-fit: cover;
  }

  .explore-our-newsletters-block ul li p {
    font-size: var(--font-size-small);
  }

  .explore-our-newsletters-block ul li p:first-of-type {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    margin: 0 0 4px 0;
  }

  .explore-our-newsletters-block ul li p:first-of-type .title {
    font-size: var(--font-size-semi-medium);
    margin: 0 0 var(--space-xs);
    line-height: 1rem;
  }

  .explore-our-newsletters-block ul li p:last-of-type {
    display: contents;
    width: auto;
    margin: 0;
  }

  .explore-our-newsletters-block ul li p:last-of-type a:nth-of-type(1) {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    align-self: start;
    text-decoration: underline;
    color: var(--font-color-default);
    margin: 0;
    padding: 2px 0;
    display: inline-block;
  }

  .explore-our-newsletters-block ul li p:last-of-type a:nth-of-type(2) {
    grid-column: 3;
    grid-row: 1;
    white-space: nowrap;
    font-weight: 700;
    text-decoration: none;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
  }
  
  .explore-our-newsletters-block a img {
    display: inline-block;
    vertical-align: middle;
    transform: translateY(1.5px);
}
  .explore-our-newsletters-block ul li p:last-of-type a:nth-of-type(2) img {
    width: 20px;
    height: 20px;
  }

  .stripes-top-news_block ul {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .stripes-top-news_block ul li {
    display: grid;
    grid-template-columns: 1fr 80px;
    column-gap: var(--space-l);
    align-items: start;
    width: 100%;
    padding: var(--space-m) 0;
    border-bottom: solid 1px var(--font-color-light-gray);
  }

  .stripes-top-news_block ul li:first-of-type {
    padding: 0 0 var(--space-m);
  }

  .stripes-top-news_block ul li > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 0;
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .stripes-top-news_block ul li > div:first-child {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    width: 80px;
  }
  .stripes-top-news_block ul li:last-child {
    padding-bottom: var(--space-l);
    border-bottom: none;
  }
  .stripes-top-news_block ul li p {
    width: 100%;
    margin: 0;
    font-family: var(--primary-font);
    font-size: var(--font-size-default);
    font-weight: 800;
    color: var(--font-color-default);
  }
  .stripes-top-news_block ul li p.branch-section {
    margin: 0;
    font-family: var(--secondary-font);
  }

  .previous-coverage-block ul li, .related-stories-block ul li {
    gap: var(--space-s);
 }

  .previous-coverage-block img,
  .related-stories-block img {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover;
  }

  .previous-coverage-block ul li img,
  .related-stories-block ul li img,
  .stripes-top-news_block ul li img {
    width: 80px !important;
    min-width: 80px;
    max-width: 80px;
    height: 80px !important;
    min-height: 80px;
    max-height: 80px;
    flex-shrink: 0;
    object-fit: cover;
    display: block;
  }

    .storyline-quote {
      width: auto;
    margin: 0 var(--space-m) 1.5rem;
  }
}

/* Tablet portrait (small, incl. iPad mini): 600px — 880px */
@media (min-width: 37.5em) and (max-width: 55em) {
  html,
  body {
    width: 100%;
    overflow-x: clip;
  }

  :root {
    --article-image-gutter: var(--space-l);
  }

  .container, .page {
    display: block;
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
}

  main.container {
    display: block;
    width: 100%;
    max-width: 100%;
    gap: 0;
    padding: 0;
  }

  #article-text {
    flex: unset;
    max-width: 100%;
  }

  .page .article-storyline {
    width: 100%;
}
  
  .main .container {
    display: block;
    width: 100%;
    max-width: unset;
    padding: 0 !important;
    overflow-x: hidden;
  }

  #article-text,
  .article-lead-image,
  .inline-image,
  .ssslideshow,
  .videos-block,
  .around-the-web-block,
  .stripes-top-news_block {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .page .storyline-p,
  .page .subheads-h2,
  .article-lead-image .caption,
  .page .tags,
  .top-author-info,
  #TrinityAudioID,
  .author-block,
  .previous-coverage-block,
  .related-stories-block,
  .explore-our-newsletters-block,
  .page > .container > #article-text .ad-wrapper {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-m);
    padding-right: var(--space-m);
    box-sizing: border-box;
  }

  #article-text .article-storyline .body-text.pelcro-article-replace #preview-text > p {
    width: 100%;
    max-width: 100%;
    margin: 0 auto var(--space-l);
    padding-left: var(--space-m);
    padding-right: var(--space-m);
    box-sizing: border-box;
  }

  #article-text img:not(.headshot),
  #article-text video,
  #article-text embed,
  #article-text object {
    max-width: 100%;
  }

  #article-text .inline-image.landscape-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: var(--article-inline-image-aspect-ratio);
  }

  #article-text .inline-image.portrait-image img {
    width: auto !important;
    max-width: 100%;
    height: var(--article-inline-portrait-height);
    max-height: var(--article-inline-portrait-height);
    object-fit: contain;
    margin-inline: auto;
  }

  #article-text .article-lead-image.portrait-image img {
    width: auto;
    max-width: 100%;
    height: var(--article-lead-portrait-height);
    max-height: var(--article-lead-portrait-height);
    object-fit: contain;
    margin-inline: auto;
  }

  #article-text iframe {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
  }

  .page > .container > #article-text .ad-wrapper iframe {
    width: 300px;
    max-width: 100%;
    height: 250px;
    min-height: 250px;
  }

  .inline-image {
    display: grid !important;
    justify-content: center;
    width: 100%;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .stripes-top-news_block ul li img {
    width: 80px !important;
    min-width: 80px;
    max-width: 80px;
    height: 80px !important;
    min-height: 80px;
    max-height: 80px;
    flex-shrink: 0;
    object-fit: cover;
    display: block;
  }

  .inline-image .caption {
    padding: 0;
  }

  .ssslideshow-active-caption {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

  .ssslideshow {
    width: 100%;
    max-width: 100% !important;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
  }
  .ssslideshow .sss {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  .ssslideshow .ssslide,
  .ssslideshow .ssslide > img {
    max-width: 100%;
  }

  .ssslideshow .ssslide .inline-image,
  .ssslideshow [role='group'][aria-roledescription='slide'] .inline-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .ssslideshow .ssslide .inline-image img,
  .ssslideshow [role='group'][aria-roledescription='slide'] .inline-image img {
    width: auto !important;
    max-width: 100%;
    height: auto !important;
    max-height: 100%;
    aspect-ratio: auto !important;
    margin: 0 auto !important;
    object-fit: contain;
  }

  #article-text ul.storyline-ul,
  #article-text ol.storyline-ol {
    width: auto !important;
    max-width: var(--article-text-column-max) !important;
    margin: 0 auto var(--space-m) !important;
    font-size: var(--font-size-large);
    box-sizing: border-box;
  }

  #article-text ul.storyline-ul {
    padding: 0 var(--space-m) 0 calc(var(--space-m) + 1em) !important;
    list-style-position: outside;
  }

  #article-text ol.storyline-ol {
    padding: 0 var(--space-m) 0 calc(var(--space-m) + 1em + 0.5rem) !important;
    list-style-position: outside;
  }

  #article-text ol.storyline-ol li::marker {
    font-variant-numeric: tabular-nums;
  }

  #article-text ul.storyline-ul li,
  #article-text ol.storyline-ol li {
    margin: 0 0 var(--space-s) 0 !important;
  }

  .rail {
    display: none;
  }

  section.article-header {
    width: auto;
    max-width: 820px;
    margin: 0 auto;
    padding: var(--space-xs) var(--space-l) var(--space-m);
    box-sizing: border-box;
  }

  .article-lead-image {
    display: grid !important;
    justify-content: center;
    width: 100%;
    margin: 0 auto 2rem;
    padding: 0 !important;
    box-sizing: border-box;
  }

  .article-lead-image:not(.portrait-image) img {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: var(--article-inline-image-aspect-ratio);
  }

  .article-lead-image.portrait-image img {
    width: auto;
    max-width: 100%;
    height: var(--article-lead-portrait-height);
    max-height: var(--article-lead-portrait-height);
    object-fit: contain;
    margin-inline: auto;
  }

  .inline-image.portrait-image {
    width: 100% !important;
    max-width: 100% !important;
  }

  .inline-image.portrait-image img {
    width: auto !important;
    max-width: 100%;
    height: var(--article-inline-portrait-height);
    max-height: var(--article-inline-portrait-height);
    object-fit: contain;
    margin-inline: auto;
  }

  .inline-image.landscape-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: var(--article-inline-image-aspect-ratio);
  }

  .article-lead-image .caption,
  .top-author-info,
  #TrinityAudioID {
    width: 100%;
    max-width: 100%;
    padding: 0 var(--space-m);
    box-sizing: border-box;
  }

  .page .storyline-p, .page .tags, .page .subheads-h2 {
    width: auto;
    max-width: var(--article-text-column-max);
    padding: 0 var(--space-m);
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
  }

  .page .storyline-quote {
    width: calc(100% - (var(--space-m) * 2)) !important;
    max-width: 688px !important;
    margin: 0 auto !important;
  }

  .page > .container > #article-text .ad-wrapper {
    max-width: 100%;
    width: 100%;
    padding: var(--space-l) var(--space-m);
  }

  .page > .container > #article-text .ad-wrapper div {
    width: fit-content;
  }

  .author-block,
  .previous-coverage-block,
  .related-stories-block,
  .explore-our-newsletters-block,
  .videos-block,
  .around-the-web-block,
  .stripes-top-news_block {
    width: calc(100% - (var(--space-m) * 2));
    max-width: var(--article-column-width);
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
    box-sizing: border-box;
  }

  .videos-block,
  .around-the-web-block,
  .explore-our-newsletters-block,
  .stripes-top-news_block {
    padding: 0 0 var(--space-xs);
  }

  .explore-our-newsletters-block p:first-of-type {
    width: unset;
    flex-grow: 1;
  }
  .explore-our-newsletters-block p:last-of-type {
    width: 160px !important;
    min-width: 160px;
}

/* Keep slideshow geometry stable across 880px -> 680px to avoid height jumps/gaps */
@media (min-width: 42.5em) and (max-width: 55em) {
  .ssslideshow {
    width: 100%;
    max-width: 690px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .ssslideshow .sss,
  .ssslideshow .ssslide,
  .ssslideshow .ssslide > img {
    width: 100%;
    max-width: 690px !important;
    margin-left: auto;
    margin-right: auto;
  }

  .ssslideshow .ssslide .inline-image,
  .ssslideshow [role='group'][aria-roledescription='slide'] .inline-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 690px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
  }

  .ssslideshow .ssslide .inline-image img,
  .ssslideshow [role='group'][aria-roledescription='slide'] .inline-image img {
    width: auto !important;
    max-width: 100%;
    height: auto !important;
    max-height: 100%;
    aspect-ratio: auto !important;
    margin: 0 auto !important;
    object-fit: contain;
  }
}

  .stripes-top-news_block ul {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .stripes-top-news_block ul li {
    display: grid;
    grid-template-columns: 1fr 80px;
    column-gap: var(--space-l);
    align-items: start;
    width: 100%;
    padding: var(--space-m) 0;
    border-bottom: solid 1px var(--font-color-light-gray);
  }
  .stripes-top-news_block ul li:first-of-type {
    padding: 0 0 var(--space-m);
  }

  .stripes-top-news_block ul li > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 0;
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .stripes-top-news_block ul li > div:first-child {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    width: 80px;
  }
  .stripes-top-news_block ul li:last-child {
    padding-bottom: var(--space-l);
    border-bottom: none;
  }
  .stripes-top-news_block ul li p {
    width: 100%;
    margin: 0;
    font-family: var(--primary-font);
    font-size: var(--font-size-default);
    font-weight: 800;
    color: var(--font-color-default);
  }
  .stripes-top-news_block ul li p.branch-section {
    margin: 0;
    font-family: var(--secondary-font);
  }
  .stripes-top-news_block ul li img {
    width: 80px;
    height: 80px;
    object-fit: cover;
  }

  section.article-header h1#article-headline {
    font-size: clamp(1.75rem, calc(2.2vw + 1rem), 1.75rem);
    margin: 0;
    line-height: 130%;
  }
}

/* Tablet portrait: inline-image caption horizontal padding (600px-690px) */
@media (min-width: 37.5em) and (max-width: 43.125em) {
  .inline-image .caption {
    padding: 0 var(--space-m);
  }
}

/* Tablet landscape / small laptop: 881px — 1323px */
@media (min-width: 55.0625em) and (max-width: 82.6875em) {

  :root {
    --container-padding: 1.25rem;
    --article-image-gutter: calc(var(--space-l) * 2);
    --article-lead-image-width: min(880px, calc(100vw - (2 * var(--article-image-gutter))));
  }

  #article-text {
    padding: 0;
    flex: 0 0 auto;
    max-width: 915px;
  }

  main.container {
    width: auto;
    display: block;
    max-width: 880px;
    margin: 0 auto;
  }

  .rail {
    display: none;
  }

  section.article-header {
    margin: 0 auto;
    width: calc(100% - (var(--space-l) * 2) );
    max-width: 880px;
  }

  section.article-header h1#article-headline {
    font-size: clamp(2.25rem, calc(1.5vw + 1.5rem), 2.5rem);
    line-height: 130%;
  }

  .videos-block, .around-the-web-block, .stripes-top-news_block, .stripes-top-news_block ul {
    width: auto;
    max-width: 880px;
  }

  .explore-our-newsletters-block p {
    font-size: var(--font-size-small);
}

  .videos-block .video-placeholder {
    width: 880px;
    height: 586px;
  }

  .article-lead-image {
    width: auto;
    max-width: 880px;
    margin: 0 auto 2rem;
  }

  .stripes-top-news_block ul li p.title {
    font-size: var(--font-size-medium) !important;
}
}

/* Tablet: shrink footer blocks to viewport with 16px horizontal padding */
@media (max-width: 57em) {
  .videos-block,
  .around-the-web-block,
  .stripes-top-news_block {
    width: calc(100vw - (var(--space-m) * 2));
    max-width: none;
    margin-left: calc(var(--space-m) - ((100vw - 100%) / 2));
    margin-right: calc(var(--space-m) - ((100vw - 100%) / 2));
    box-sizing: border-box;
  }

  .stripes-top-news_block ul {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }

  .videos-block .video-placeholder {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 880 / 586;
  }
}

/* Desktop: 1200px and up */
@media (min-width: 75em) {

  /* 1200px+ */
  :root {
    --container-padding: 1.5rem;
  }
}

/* storyline+article: full-bleed lead image when right rail is hidden (<1323px) */
@media (max-width: 82.6875em) {
  body.storyline-article .rail {
    display: none;
  }

  body.storyline-article section.article-header {
    width: var(--article-column-width);
    max-width: calc(100% - (var(--space-m) * 2));
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

  body.storyline-article #article-text > .article-lead-image {
    display: block !important;
    justify-content: unset;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 2rem;
    padding: 0 var(--space-m);
    box-sizing: border-box;
  }

  body.storyline-article #article-text > .article-lead-image img {
    display: block;
    width: calc(100% - var(--space-xl));
    max-width: var(--article-lead-inset-max);
    height: auto;
    position: static;
    left: auto;
    transform: none;
    margin: 0 auto 0.75rem;
  }

  body.storyline-article #article-text > .article-lead-image .caption {
    width: calc(100% - var(--space-xl));
    max-width: var(--article-lead-inset-max);
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
  }

  body.storyline-article #article-text > .article-lead-video {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 var(--space-m);
    box-sizing: border-box;
  }

  body.storyline-article #article-text > .article-lead-video video,
  body.storyline-article #article-text > .article-lead-video > .f6,
  body.storyline-article #article-text > .article-lead-video--connatix > div {
    width: calc(100% - var(--space-xl));
    max-width: var(--article-lead-inset-max);
    margin-left: auto;
    margin-right: auto;
  }
}

/* storyline+article: full-width lead image below 878px */
@media (max-width: 54.875em) {
  body.storyline-article #article-text > .article-lead-image img,
  body.storyline-article #article-text > .article-lead-image .caption {
    width: 100%;
    max-width: 100%;
  }

  body.storyline-article #article-text > .article-lead-image .caption {
    padding: 0 var(--space-m);
  }

  body.storyline-article #article-text > .article-lead-video video,
  body.storyline-article #article-text > .article-lead-video > .f6,
  body.storyline-article #article-text > .article-lead-video--connatix > div {
    width: 100%;
    max-width: 100%;
  }
}

/* storyline+article: inset images via size adjustment (600px-722px) */
@media (min-width: 37.5em) and (max-width: 45.125em) {
  body.storyline-article #article-text > .article-lead-image img {
    display: block;
    width: calc(100% - var(--space-xl)) !important;
    max-width: 100%;
    margin: 0 auto 0.75rem;
  }

  body.storyline-article #article-text > .article-lead-image .caption {
    width: calc(100% - var(--space-xl));
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
  }

  body.storyline-article #article-text .article-storyline > .inline-image {
    display: block !important;
    width: calc(100% - var(--space-xl)) !important;
    max-width: var(--article-inline-inset-max) !important;
    margin-left: auto;
    margin-right: auto;
    padding: 0 !important;
    box-sizing: border-box;
  }

  body.storyline-article #article-text .article-storyline > .inline-image.portrait-image {
    max-width: var(--article-portrait-inset-max) !important;
  }

  body.storyline-article #article-text .article-storyline > .inline-image img {
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: auto;
    margin: 0 0 0.75rem;
  }

  body.storyline-article #article-text .article-storyline > .inline-image .caption {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body.storyline-article #article-text .ssslideshow,
  body.storyline-article #article-text .ssslideshow + .ssslideshow-active-caption {
    width: calc(100% - var(--space-xl));
    max-width: var(--article-inline-inset-max);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  body.storyline-article #article-text .ssslideshow + .ssslideshow-active-caption {
    padding-left: 0;
    padding-right: 0;
  }
}

/* storyline+article: full-width inline images and slideshow on mobile */
@media (max-width: 37.4375em) {
  body.storyline-article #article-text .article-storyline > .inline-image,
  body.storyline-article #article-text .article-storyline > .inline-image img,
  body.storyline-article #article-text .article-storyline > .inline-image .caption,
  body.storyline-article #article-text .ssslideshow,
  body.storyline-article #article-text .ssslideshow + .ssslideshow-active-caption {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.storyline-article #article-text .article-storyline > .inline-image {
    display: grid !important;
    margin-left: auto;
    margin-right: auto;
  }

  body.storyline-article #article-text .article-storyline > .inline-image .caption,
  body.storyline-article #article-text .ssslideshow + .ssslideshow-active-caption {
    padding: 0 var(--space-m);
    margin-left: 0;
    margin-right: 0;
  }

  body.storyline-article #article-text .ssslideshow + .ssslideshow-active-caption p {
    padding: 0;
  }

  body.storyline-article #article-text .ssslideshow {
    margin-bottom: var(--space-s);
  }

  /*  place byline directly under the headline on mobile update */
  section.article-header p {
    margin: 0 0 var(--space-xs) 0 !important;
  }
  section.article-header p a {
    color: var(--font-color-gray666) !important;
  }
  body.storyline-article #article-text {
    display: flex;
    flex-direction: column;
  }

  body.storyline-article #article-text > .top-author-info {
    order: -1;
  }

  body.storyline-article section.article-header {
    padding-bottom: var(--space-m);
  }

  .top-author-info {
    margin-bottom: var(--space-m) !important;
  }

  /* 24px above Trinity on mobile. Flex items do not collapse margins, so
     Trinity owns margin-top and anything that can sit above it (hero image,
     hero video, no-hero byline, Connatix/video last-child) drops bottom margin. */
  body.storyline-article #article-text > #TrinityAudioID {
    margin-top: var(--space-l);
  }

  body.storyline-article #article-text > .article-lead-image,
  body.storyline-article #article-text > .article-lead-video {
    margin-bottom: 0;
  }

  body.storyline-article #article-text > .article-lead-video > :last-child,
  body.storyline-article #article-text > .article-lead-video .storyline-p.connatix {
    margin-bottom: 0;
  }

  body.storyline-article #article-text > .top-author-info:first-child {
    margin-bottom: 0 !important;
  }

  .top-author-info p {
    font-size: var(--font-size-xsmall) !important;
  }
  .top-author-info p a {
    color: var(--font-color-gray222) !important;
    text-decoration: underline !important;
  }
}

/* storyline+article: align author block with paragraph column on <=880px */
@media (max-width: 55em) {
  body.storyline-article .top-author-info {
    width: 100%;
    max-width: var(--article-text-column-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-m);
    padding-right: var(--space-m);
    box-sizing: border-box;
  }
}

/* Keep Stripes Top News in 3 columns until 571px */
@media (min-width: 35.6875em) and (max-width: 55em) {
  .stripes-top-news_block ul {
    display: flex;
    gap: 0 var(--space-l);
    width: 100%;
    margin: 0 auto var(--space-l);
    padding: 0;
    list-style: none;
  }

  .stripes-top-news_block ul li {
    display: block;
    width: calc((100% - (var(--space-l) * 2)) / 3);
    padding: 0;
    border-bottom: none;
  }

  .stripes-top-news_block ul li:first-of-type,
  .stripes-top-news_block ul li:last-child {
    padding: 0;
  }

  .stripes-top-news_block ul li > div:first-child,
  .stripes-top-news_block ul li > div:last-child {
    order: 0;
    width: auto;
  }

  .stripes-top-news_block ul li img {
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    height: auto !important;
    min-height: 0;
    max-height: none;
    object-fit: cover;
  }
}

/* Utility: prefer-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* storyline+article: remove newsletter signup top margin (new template only) */
body.storyline-article .newsletter-signup-wrap.dailyheadlines-background.cover {
  margin-top: 0;
}

/* Sponsored Content Article (pages-sponsored-content-article): space between
   main content and newsletter after footer blocks are omitted. */
body.storyline-article main.container.sponsored-content {
  padding-bottom: 16px;
}
@media (min-width: 82.75em) {
  body.storyline-article main.container.sponsored-content {
    padding-bottom: 66px;
  }
}

/* Sponsored Content Article: hide mid-article DFP slots (.ad-wrapper), matching
   legacy sponsored behavior (previously done via per-article CMS CSS). */
body.storyline-article main.container.sponsored-content #article-text .ad-wrapper {
  display: none;
}

/* Sponsored Content Article: hide Trinity player units if any still inject
   (legacy used .IsBis; primary fix omits mount + script — this is backup). */
body.storyline-article:has(main.container.sponsored-content) .trinity-player-iframe-wrapper,
body.storyline-article:has(main.container.sponsored-content) #TrinityAudioID {
  display: none !important;
}

/* Hide mobile-only ad spots on desktop for new article page */
@media (min-width: 48em) {
  .only-mobile { display: none !important; }
}

/* storyline+article (STRIPES-224 Issue 1): non-landscape body images.
   Portrait and square wrappers shrink-wrap to the rendered image width so the
   caption always matches the image, and the block is centered in the text
   column (clamped to the .storyline-p width on small viewports).
   Wide and free-crop images span the full text column like landscape.
   Declared after every media query so one set of rules applies at all
   breakpoints; landscape (and no-selection fallback) behavior is untouched. */
body.storyline-article #article-text .article-storyline > .inline-image.portrait-image,
body.storyline-article #article-text .article-storyline > .inline-image.square-image {
  display: block !important;
  width: fit-content !important;
  max-width: min(var(--article-column-width), calc(100vw - var(--space-xl))) !important;
  margin: 0 auto 1.5rem !important;
  padding: 0 !important;
  box-sizing: border-box;
}

body.storyline-article #article-text .article-storyline > .inline-image.portrait-image img,
body.storyline-article #article-text .article-storyline > .inline-image.square-image img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  margin: 0 auto 0.75rem !important;
}

/* Portrait: fixed height matching desktop; width follows the image's aspect ratio. */
body.storyline-article #article-text .article-storyline > .inline-image.portrait-image img {
  height: var(--article-storyline-portrait-height) !important;
  max-height: var(--article-storyline-portrait-height);
  object-fit: contain;
}

/* Portrait lead/hero: keep desktop height across breakpoints.
   Storyline full-bleed rules set height:auto on all lead images, which makes
   tall portraits fill the viewport on tablet/mobile. */
body.storyline-article #article-text > .article-lead-image.portrait-image img,
.article-lead-image.portrait-image img {
  width: auto !important;
  max-width: 100% !important;
  height: var(--article-lead-portrait-height) !important;
  max-height: var(--article-lead-portrait-height);
  object-fit: contain;
  margin-inline: auto;
}

/* Portrait lead/hero: shrink-wrap block to the image so the caption tracks
   image width on tablet/mobile (full-bleed rules otherwise stretch caption). */
body.storyline-article #article-text > .article-lead-image.portrait-image,
.article-lead-image.portrait-image {
  display: block !important;
  width: fit-content !important;
  max-width: min(var(--article-lead-width), calc(100vw - var(--space-xl))) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

body.storyline-article #article-text > .article-lead-image.portrait-image .caption,
.article-lead-image.portrait-image .caption {
  width: 0 !important;
  min-width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* width: 0 keeps the caption from expanding the shrink-wrapped wrapper;
   min-width: 100% then stretches it to the final (image) width. */
body.storyline-article #article-text .article-storyline > .inline-image.portrait-image .caption,
body.storyline-article #article-text .article-storyline > .inline-image.square-image .caption {
  width: 0 !important;
  min-width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* Wide and free crops fill the text column like landscape images, keeping
   their own aspect ratio (height: auto). Their wrapper and caption follow the
   generic .inline-image (landscape) rules at every breakpoint. */
body.storyline-article #article-text .article-storyline > .inline-image.wide-image img,
body.storyline-article #article-text .article-storyline > .inline-image.free-image img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  margin: 0 0 0.75rem !important;
}