.newsroom-article {
  background: var(--color-white);
}

.newsroom-article__hero {
  position: relative;
  overflow: hidden;
  padding: 6rem 0 7rem;
  color: var(--color-white);
  text-align: center;
  background:
    radial-gradient(ellipse 60% 80% at 50% 40%, rgba(178, 93, 66, 0.28), transparent 68%),
    #0a0a0a;
}

.newsroom-article__hero-inner {
  max-width: 920px;
}

.newsroom-article__eyebrow {
  margin: 0 0 1.25rem;
  color: var(--color-copper-light);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.newsroom-article__hero h1 {
  max-width: 850px;
  margin: 0 auto 1.5rem;
  color: var(--color-white);
  font-size: clamp(2.35rem, 6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.newsroom-article__dek {
  max-width: 720px;
  margin: 0 auto 1.25rem;
  color: rgba(255, 255, 255, 0.74);
  font-size: var(--text-lg);
  line-height: 1.55;
}

.newsroom-article__byline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
}

.newsroom-article__byline span,
.newsroom-article__hero time {
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--text-sm);
}

.newsroom-article__layout {
  max-width: 960px;
  padding-top: 0;
  padding-bottom: var(--section-padding-y);
}

.newsroom-article__image {
  position: relative;
  z-index: 2;
  overflow: hidden;
  width: min(760px, calc(100% - 2rem));
  aspect-ratio: 16 / 9;
  margin: -3.75rem auto 4rem;
  border-radius: 14px;
  background: #eee7e2;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

.newsroom-article__image img,
.newsroom-article__image picture {
  width: 100%;
  height: 100%;
}

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

.newsroom-article__body {
  max-width: 760px;
  margin: 0 auto;
  color: var(--color-text-primary);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.newsroom-article__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  overflow: hidden;
  max-width: 760px;
  margin: 0 auto 4rem;
  border: 1px solid #e8ded8;
  border-radius: 10px;
  background: #e8ded8;
}

.newsroom-article__facts div {
  padding: 1.35rem;
  background: #faf6f3;
}

.newsroom-article__facts dt {
  margin-bottom: 0.35rem;
  color: var(--color-text-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.newsroom-article__facts dd {
  margin: 0;
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
}

.newsroom-article__body h2 {
  margin: 3rem 0 1rem;
  color: var(--color-text-primary);
  font-size: clamp(1.75rem, 4vw, 2.35rem);
  letter-spacing: -0.025em;
}

.newsroom-article__body p {
  margin: 0 0 1.4rem;
}

/* The global reset strips list markers site-wide; restore them
   inside article bodies so editorial lists read as lists. */
.newsroom-article__body ul {
  list-style: disc;
  padding-left: 1.4rem;
  margin: 0 0 1.4rem;
}

.newsroom-article__body ol {
  list-style: decimal;
  padding-left: 1.4rem;
  margin: 0 0 1.4rem;
}

.newsroom-article__body li {
  margin-bottom: 0.8rem;
  padding-left: 0.4rem;
}

.newsroom-article__body li::marker {
  color: var(--color-copper);
}

/* Same story as the list markers above: the global reset sets
   a { color: inherit; text-decoration: none }, which suits nav items
   and cards that carry their own styling. Links inside imported
   article bodies have no class of their own, so without this they
   render as real anchors that look exactly like the text around them.
   There are 309 of them across the newsroom. */
.newsroom-article__body a {
  color: var(--color-copper);
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.16em;
  transition: color 0.15s ease;
}

.newsroom-article__body a:hover,
.newsroom-article__body a:focus-visible {
  color: var(--color-copper-darker);
  text-decoration-thickness: 0.12em;
}

@media (prefers-reduced-motion: reduce) {
  .newsroom-article__body a {
    transition: none;
  }
}

.newsroom-block {
  margin: 2.5rem 0;
}

.newsroom-block--image img,
.newsroom-block--video video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: #eee7e2;
}

.newsroom-block figcaption {
  margin-top: 0.65rem;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.newsroom-block--faq {
  padding-top: 0.5rem;
}

.newsroom-block--faq dl,
.newsroom-block--faq dd {
  margin: 0;
}

.newsroom-block--faq dl > div {
  padding: 1.4rem 0;
  border-top: 1px solid #e8ded8;
}

.newsroom-block--faq dt {
  margin-bottom: 0.55rem;
  font-weight: var(--weight-semibold);
  line-height: 1.45;
}

.newsroom-block--faq dd p:last-child {
  margin-bottom: 0;
}

@media (max-width: 700px) {
  .newsroom-article__hero {
    padding: 4.5rem 0 5.5rem;
  }

  .newsroom-article__layout {
    padding-inline: 1rem;
  }

  .newsroom-article__image {
    width: 100%;
    margin-bottom: 2.75rem;
    border-radius: 10px;
  }

  .newsroom-article__facts {
    grid-template-columns: 1fr;
    margin-bottom: 2.75rem;
  }
}

/* ============================================================
   RELATED ARTICLES
   Three-card "Continue Reading" strip below the article body.
   Mirrors the archive card treatment in newsroom.css.
============================================================ */
.newsroom-related {
  padding: 4rem 0 5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.newsroom-related__title {
  font-size: 1.5rem;
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  margin: 0 0 2rem;
}

.newsroom-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.newsroom-related__card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  display: block;
}

.newsroom-related__card-image {
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.125rem;
  transition: transform 0.3s, box-shadow 0.3s;
}

.newsroom-related__card:hover .newsroom-related__card-image {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.newsroom-related__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.newsroom-related__card-meta {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.625rem;
}

.newsroom-related__card-category {
  font-size: 0.5625rem;
  color: var(--color-copper);
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.newsroom-related__card-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
}

.newsroom-related__card-date {
  font-size: 0.6875rem;
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
  font-weight: var(--weight-medium);
}

.newsroom-related__card-title {
  font-size: 1.0625rem;
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin: 0 0 0.75rem;
  transition: color 0.2s;
}

.newsroom-related__card:hover .newsroom-related__card-title {
  color: var(--color-copper);
}

.newsroom-related__card-read {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--color-copper);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
}

.newsroom-related__card-read-arrow {
  display: inline-flex;
  transition: transform 0.2s;
}

.newsroom-related__card:hover .newsroom-related__card-read-arrow {
  transform: translateX(3px);
}

@media (max-width: 900px) {
  .newsroom-related__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}