/*
 * DII Article Page presentation (P2-WP-07 Article Page Implementation), loaded
 * on single posts only (with dii-homepage.css, which owns the shared Newsletter
 * panel). Same DII tokens and derived tints as the rest of the site; no new
 * brand colour, no external font, no image, no script dependency.
 *
 * Widths are deliberately different: the page container (75rem), the masthead
 * (52rem), the hero (58rem), the body reading measure (42rem, about 65
 * characters at 18px) and the supporting rail (16rem). Breakpoints: 48rem
 * (tablet) and 64rem / 75rem (desktop, widening to the three-column reading
 * layout).
 *
 * Body components are plain semantic HTML with classes the article content can
 * use: .dii-callout (--key, --guidance, --note, --evidence), .dii-key-takeaways,
 * .dii-sources, .dii-disclosure and .dii-comparison (or a table inside
 * .is-style-comparison). Tables are wrapped by the theme in .dii-table-scroll.
 */

.dii-article-page {
  max-width: var(--cdi-grid-max-content-width, 75rem);
  margin: 0 auto;
  padding: 0 var(--cdi-spacing-md, 1rem) var(--cdi-spacing-3xl, 4rem);
}

/* Breadcrumb */
.dii-site .dii-breadcrumb {
  padding: var(--cdi-spacing-lg, 1.5rem) 0 var(--cdi-spacing-sm, 0.5rem);
  font-size: var(--cdi-font-size-body-small, 0.875rem);
}

.dii-site .dii-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dii-site .dii-breadcrumb__item + .dii-breadcrumb__item::before {
  content: '\203A';
  margin: 0 0.5rem;
  color: var(--dii-color-text-secondary);
}

.dii-site .dii-breadcrumb a {
  color: var(--dii-color-text-secondary);
  text-underline-offset: 0.2em;
}

.dii-site .dii-breadcrumb a:hover {
  color: var(--dii-color-brand-secondary);
}

.dii-site .dii-breadcrumb__current {
  color: var(--dii-color-brand-primary);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Masthead */
.dii-article__masthead {
  max-width: 52rem;
  padding-top: var(--cdi-spacing-sm, 0.5rem);
}

.dii-site .dii-article__category {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dii-site .dii-article__category a {
  color: var(--dii-accent-text);
  text-decoration: none;
}

.dii-site .dii-article__category a:hover {
  text-decoration: underline;
}

.dii-site .dii-article__title {
  margin: var(--cdi-spacing-sm, 0.5rem) 0 var(--cdi-spacing-md, 1rem);
  color: var(--dii-color-brand-primary);
  font-size: clamp(2rem, 4.2vw, 3.125rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  overflow-wrap: break-word;
}

.dii-site .dii-article__standfirst {
  max-width: 44rem;
  margin: 0;
  color: var(--dii-color-text-secondary);
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.5;
}

.dii-article__meta {
  display: grid;
  gap: var(--cdi-spacing-sm, 0.5rem);
  margin-top: var(--cdi-spacing-lg, 1.5rem);
  padding: var(--cdi-spacing-md, 1rem) 0;
  border-top: 1px solid var(--dii-color-border-subtle);
  border-bottom: 1px solid var(--dii-color-border-subtle);
  font-size: var(--cdi-font-size-body-small, 0.875rem);
}

.dii-article__byline,
.dii-article__facts,
.dii-article__share-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--cdi-spacing-lg, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dii-article__label {
  color: var(--dii-color-text-secondary);
}

.dii-article__person {
  color: var(--dii-color-brand-primary);
  font-weight: 700;
}

.dii-article__role {
  color: var(--dii-color-text-secondary);
}

.dii-article__facts {
  color: var(--dii-color-text-secondary);
}

.dii-article__share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem var(--cdi-spacing-sm, 0.5rem);
}

.dii-article__share .dii-article__share-list {
  gap: 0.5rem;
}

/* Compact square buttons (matching the approved baseline's icon-button
   shape and spacing). No brand logo artwork is available/approved for
   LinkedIn/X, so each button shows the platform's own initial letter (or a
   generic mail/link glyph) rather than a fabricated or unlicensed logo. */
.dii-site .dii-article__share-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  min-height: 0;
  border-radius: 0.375rem;
  color: white;
  background: var(--dii-color-brand-primary);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
}

.dii-site .dii-article__share-list a:hover {
  background: var(--dii-color-brand-secondary);
}

.dii-site .dii-article__share-list .dii-article__share-glyph {
  font-size: 0;
}

.dii-site .dii-article__share-list .dii-article__share-glyph::before {
  font-size: 0.8125rem;
}

.dii-site .dii-article__share-list [data-share='linkedin'] .dii-article__share-glyph::before {
  content: 'in';
}

.dii-site .dii-article__share-list [data-share='x'] .dii-article__share-glyph::before {
  content: 'X';
}

.dii-site .dii-article__share-list [data-share='email'] .dii-article__share-glyph::before {
  content: '\2709';
  font-size: 1rem;
}

.dii-article__hero {
  max-width: 58rem;
  margin: var(--cdi-spacing-xl, 2rem) 0 0;
}

.dii-article__hero-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
}

.dii-article__hero-caption {
  margin-top: var(--cdi-spacing-sm, 0.5rem);
  color: var(--dii-color-text-secondary);
  font-size: var(--cdi-font-size-body-small, 0.875rem);
  line-height: 1.4;
}

/* Reading layout */
.dii-article__layout {
  display: grid;
  gap: var(--cdi-spacing-xl, 2rem);
  margin-top: var(--cdi-spacing-xl, 2rem);
}

.dii-article__body,
.dii-article__rail {
  min-width: 0;
}

.dii-article__body {
  max-width: 42rem;
}

.dii-article__rail {
  display: grid;
  gap: var(--cdi-spacing-lg, 1.5rem);
  align-content: start;
}

/* Contents */
.dii-site .dii-toc {
  min-width: 0;
}

.dii-site .dii-toc__summary {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--cdi-spacing-md, 1rem);
  border: 1px solid var(--dii-color-border-subtle);
  border-radius: 0.5rem;
  color: var(--dii-color-brand-primary);
  font-weight: 700;
  cursor: pointer;
}

.dii-site .dii-toc__summary::after {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  margin: -0.25rem 0 0 auto;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  transform: rotate(45deg);
}

.dii-site .dii-toc__details[open] > .dii-toc__summary::after {
  margin-top: 0.25rem;
  transform: rotate(225deg);
}

.dii-site .dii-toc__details[open] > .dii-toc__summary {
  margin-bottom: var(--cdi-spacing-sm, 0.5rem);
}

.dii-site .dii-toc__summary:focus-visible {
  outline: 2px solid var(--dii-color-focus);
  outline-offset: 2px;
}

.dii-site .dii-toc__list,
.dii-site .dii-toc__sublist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dii-site .dii-toc__list {
  counter-reset: dii-toc;
}

/* Numbered top-level entries, matching the approved baseline's "1. Why it
   matters" style; h3 sub-entries (inside .dii-toc__sublist) stay unnumbered. */
.dii-site .dii-toc__item--h2 {
  counter-increment: dii-toc;
}

.dii-site .dii-toc__item a {
  display: flex;
  gap: 0.5rem;
  padding: 0.375rem var(--cdi-spacing-sm, 0.5rem);
  border-left: 2px solid transparent;
  border-radius: 0.25rem;
  color: var(--dii-color-text-secondary);
  font-size: var(--cdi-font-size-body-small, 0.875rem);
  line-height: 1.35;
  text-decoration: none;
}

.dii-site .dii-toc__item--h2 > a::before {
  content: counter(dii-toc) '.';
  flex: none;
  color: var(--dii-color-brand-primary);
  font-weight: 700;
}

.dii-site .dii-toc__item a:hover {
  color: var(--dii-color-brand-secondary);
  text-decoration: underline;
}

.dii-site .dii-toc__item--h3 a {
  padding-left: var(--cdi-spacing-xl, 2rem);
  font-size: 0.8125rem;
}

/* Body: the reading measure */
.dii-site .dii-article__body {
  color: var(--dii-color-text-primary);
  font-size: 1.0625rem;
  line-height: 1.75;
  overflow-wrap: break-word;
}

.dii-site .dii-article__body > :first-child {
  margin-top: 0;
}

.dii-site .dii-article__body p {
  margin: 0 0 1.25em;
}

.dii-site .dii-article__body h2,
.dii-site .dii-article__body h3,
.dii-site .dii-article__body h4 {
  color: var(--dii-color-brand-primary);
  scroll-margin-top: var(--cdi-spacing-lg, 1.5rem);
}

.dii-site .dii-article__body h2 {
  margin: 2.5em 0 0.6em;
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.dii-site .dii-article__body h3 {
  margin: 2em 0 0.5em;
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.3;
}

.dii-site .dii-article__body h4 {
  margin: 1.75em 0 0.4em;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
}

.dii-site .dii-article__body ul,
.dii-site .dii-article__body ol {
  margin: 0 0 1.25em;
  padding-left: 1.5rem;
}

.dii-site .dii-article__body li {
  margin: 0.4em 0;
  padding-left: 0.25rem;
  line-height: 1.6;
}

.dii-site .dii-article__body li > ul,
.dii-site .dii-article__body li > ol {
  margin: 0.4em 0 0.4em;
}

.dii-site .dii-article__body ::marker {
  color: var(--dii-color-brand-secondary);
  font-weight: 700;
}

.dii-site .dii-article__body a {
  color: var(--dii-color-link);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

.dii-site .dii-article__body a:visited {
  color: color-mix(in srgb, var(--dii-color-link) 65%, var(--dii-color-brand-primary));
}

.dii-site .dii-article__body a:hover {
  color: var(--dii-color-brand-primary);
  text-decoration-thickness: 0.15em;
}

.dii-site .dii-article__body strong {
  color: var(--dii-color-brand-primary);
}

.dii-site .dii-article__body blockquote {
  margin: 2em 0;
  padding: 0.25rem 0 0.25rem var(--cdi-spacing-lg, 1.5rem);
  border-left: 0.25rem solid var(--dii-color-brand-secondary);
  color: var(--dii-color-brand-primary);
  font-size: 1.25rem;
  line-height: 1.55;
}

.dii-site .dii-article__body blockquote p {
  margin: 0 0 0.75em;
}

.dii-site .dii-article__body blockquote cite {
  color: var(--dii-color-text-secondary);
  font-size: var(--cdi-font-size-body-small, 0.875rem);
  font-style: normal;
}

.dii-site .dii-article__body code {
  padding: 0.1em 0.35em;
  border-radius: 0.25rem;
  background: var(--dii-tint);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

.dii-site .dii-article__body pre {
  margin: 1.5em 0;
  padding: var(--cdi-spacing-md, 1rem);
  border-radius: 0.5rem;
  overflow-x: auto;
  background: var(--dii-tint);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.dii-site .dii-article__body pre code {
  padding: 0;
  background: transparent;
}

.dii-site .dii-article__body hr {
  height: 0;
  margin: 2.5rem 0;
  border: 0;
  border-top: 1px solid var(--dii-color-border-subtle);
}

/* Figures */
.dii-site .dii-article__body figure {
  margin: 2rem 0;
}

.dii-site .dii-article__body img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

.dii-site .dii-article__body figcaption {
  margin-top: var(--cdi-spacing-sm, 0.5rem);
  color: var(--dii-color-text-secondary);
  font-size: var(--cdi-font-size-body-small, 0.875rem);
  line-height: 1.4;
}

/* Tables: real tables inside a labelled, focusable scroll region */
.dii-site .dii-table-scroll {
  margin: 0;
  border: 1px solid var(--dii-color-border-subtle);
  border-radius: 0.5rem;
  overflow-x: auto;
}

.dii-site .dii-table-scroll:focus-visible {
  outline: 2px solid var(--dii-color-focus);
  outline-offset: 2px;
}

.dii-site .dii-article__body figure.wp-block-table {
  margin: 0;
}

.dii-site .dii-article__body table {
  width: 100%;
  min-width: 34rem;
  margin: 0;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.dii-site .dii-table {
  margin: 2rem 0;
}

.dii-site .dii-table__caption {
  margin: 0 0 var(--cdi-spacing-sm, 0.5rem);
  color: var(--dii-color-brand-primary);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
}

.dii-site .dii-article__body th,
.dii-site .dii-article__body td {
  padding: 0.75rem var(--cdi-spacing-md, 1rem);
  border: 0;
  border-bottom: 1px solid var(--dii-color-border-subtle);
  text-align: left;
  vertical-align: top;
}

.dii-site .dii-article__body thead th {
  border-bottom: 2px solid var(--dii-color-brand-secondary);
  color: var(--dii-color-brand-primary);
  background: var(--dii-tint);
  font-weight: 700;
}

.dii-site .dii-article__body tbody tr:last-child th,
.dii-site .dii-article__body tbody tr:last-child td {
  border-bottom: 0;
}

.dii-site .dii-article__body tbody th {
  color: var(--dii-color-brand-primary);
  font-weight: 700;
}

.dii-site .dii-article__body .has-text-align-right,
.dii-site .dii-article__body td[data-numeric] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Comparison tables: a fixed first column that stays in view while scrolling */
.dii-site .dii-article__body table.dii-comparison tbody th,
.dii-site .dii-article__body .is-style-comparison table tbody th,
.dii-site .dii-article__body table.dii-comparison th:first-child,
.dii-site .dii-article__body .is-style-comparison table th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 8rem;
  background: white;
  box-shadow: 1px 0 0 var(--dii-color-border-subtle);
}

.dii-site .dii-article__body table.dii-comparison thead th:first-child,
.dii-site .dii-article__body .is-style-comparison table thead th:first-child {
  background: var(--dii-tint);
}

.dii-site .dii-article__body table.dii-comparison tbody tr:nth-child(even) td,
.dii-site .dii-article__body .is-style-comparison table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--dii-color-brand-secondary) 3%, white);
}

/* Callouts */
.dii-site .dii-callout {
  --dii-callout-accent: var(--dii-color-brand-secondary);
  --dii-callout-bg: var(--dii-tint);
  margin: 2rem 0;
  padding: var(--cdi-spacing-lg, 1.5rem);
  border-left: 0.3125rem solid var(--dii-callout-accent);
  border-radius: 0.5rem;
  background: var(--dii-callout-bg);
}

.dii-site .dii-callout--guidance {
  --dii-callout-accent: var(--dii-color-brand-primary);
  --dii-callout-bg: color-mix(in srgb, var(--dii-color-brand-primary) 5%, white);
}

.dii-site .dii-callout--note {
  --dii-callout-accent: var(--dii-color-text-secondary);
  --dii-callout-bg: color-mix(in srgb, var(--dii-color-text-secondary) 8%, white);
}

.dii-site .dii-callout--evidence {
  --dii-callout-accent: var(--dii-panel-teal);
  --dii-callout-bg: white;
  border: 1px solid var(--dii-color-border-subtle);
  border-left: 0.3125rem solid var(--dii-callout-accent);
}

.dii-site .dii-callout__title {
  margin: 0 0 var(--cdi-spacing-sm, 0.5rem);
  color: var(--dii-accent-text);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dii-site .dii-callout__stat {
  margin: 0 0 0.25rem;
  color: var(--dii-color-brand-primary);
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.dii-site .dii-callout > :last-child {
  margin-bottom: 0;
}

/* Key Takeaways: a pale, bordered editorial panel with a filled checkmark
   before each item, matching the approved baseline (not a generic
   blockquote or a plain white card). */
.dii-site .dii-key-takeaways {
  margin: 0 0 2.5rem;
  padding: var(--cdi-spacing-lg, 1.5rem);
  border: 1px solid var(--dii-color-border-subtle);
  border-radius: 0.5rem;
  background: var(--dii-tint);
}

.dii-site .dii-key-takeaways__title {
  margin: 0 0 var(--cdi-spacing-md, 1rem);
  color: var(--dii-color-brand-primary);
  font-size: 1.125rem;
  font-weight: 800;
}

.dii-site .dii-key-takeaways ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dii-site .dii-key-takeaways li {
  position: relative;
  padding: 0.375rem 0 0.375rem 2rem;
  line-height: 1.5;
}

.dii-site .dii-key-takeaways li:not(:last-child) {
  border-bottom: 1px solid color-mix(in srgb, var(--dii-color-brand-secondary) 15%, transparent);
}

.dii-site .dii-key-takeaways li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  color: white;
  background: var(--dii-color-brand-secondary);
  font-size: 0.6875rem;
  line-height: 1;
}

.dii-site .dii-key-takeaways > :last-child {
  margin-bottom: 0;
}

/* Sources and disclosure */
.dii-site .dii-sources {
  margin-top: 3rem;
  padding-top: var(--cdi-spacing-lg, 1.5rem);
  border-top: 1px solid var(--dii-color-border-subtle);
  color: var(--dii-color-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.dii-site .dii-article__body .dii-sources h2 {
  margin-top: 0;
  font-size: 1.25rem;
}

.dii-site .dii-sources ol {
  margin-bottom: 0;
}

.dii-site .dii-disclosure {
  margin: 2rem 0;
  padding: 0.875rem var(--cdi-spacing-md, 1rem);
  border: 1px solid var(--dii-color-border-subtle);
  border-radius: 0.5rem;
  color: var(--dii-color-text-secondary);
  font-size: 0.875rem;
  line-height: 1.55;
}

.dii-site .dii-disclosure p {
  margin: 0;
}

.dii-site .dii-disclosure__title {
  color: var(--dii-color-brand-primary);
  font-weight: 700;
}

.dii-site .dii-ad-slot {
  margin: 2rem 0;
}

/* Rail: article information */
.dii-site .dii-info {
  padding: var(--cdi-spacing-lg, 1.5rem);
  border: 1px solid var(--dii-color-border-subtle);
  border-radius: 0.75rem;
  background: white;
}

.dii-site .dii-info__heading {
  margin: 0 0 var(--cdi-spacing-md, 1rem);
  color: var(--dii-color-brand-primary);
  font-size: var(--cdi-font-size-h6, 1.125rem);
  font-weight: 800;
  line-height: 1.2;
}

.dii-site .dii-info__list {
  display: grid;
  gap: 0;
  margin: 0;
}

.dii-site .dii-info__row {
  padding: 0.625rem 0;
  border-top: 1px solid var(--dii-color-border-subtle);
}

.dii-site .dii-info__row:first-child {
  padding-top: 0;
  border-top: 0;
}

.dii-site .dii-info__row dt {
  color: var(--dii-color-text-secondary);
  font-size: 0.8125rem;
}

.dii-site .dii-info__row dd {
  margin: 0.125rem 0 0;
  color: var(--dii-color-brand-primary);
  font-weight: 600;
}

.dii-site .dii-info__sub {
  display: block;
  color: var(--dii-color-text-secondary);
  font-size: 0.8125rem;
  font-weight: 400;
}

.dii-site .dii-info__row a {
  color: var(--dii-color-link);
}

/* Article footer */
.dii-site .dii-article__footer {
  margin-top: var(--cdi-spacing-2xl, 3rem);
  padding-top: var(--cdi-spacing-lg, 1.5rem);
  border-top: 1px solid var(--dii-color-border-subtle);
}

.dii-site .dii-article__footer-heading {
  margin: 0 0 var(--cdi-spacing-sm, 0.5rem);
  color: var(--dii-color-text-secondary);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dii-site .dii-article__terms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cdi-spacing-sm, 0.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dii-site .dii-article__terms a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 var(--cdi-spacing-md, 1rem);
  border: 1px solid var(--dii-color-border-subtle);
  border-radius: 62.4375rem;
  color: var(--dii-color-brand-primary);
  font-size: var(--cdi-font-size-body-small, 0.875rem);
  font-weight: 600;
  text-decoration: none;
}

.dii-site .dii-article__terms a:hover {
  border-color: var(--dii-color-brand-secondary);
  color: var(--dii-color-brand-secondary);
}

/* Related articles */
/* Related Articles: an Article-rail component (approved baseline places it
   in the right rail, not as a body-ending section), matching the compact
   thumbnail-row density of the Homepage's Latest Insights/Case Studies. */
.dii-site .dii-related {
  padding: var(--cdi-spacing-lg, 1.5rem);
  border: 1px solid var(--dii-color-border-subtle);
  border-radius: 0.75rem;
  background: white;
}

.dii-site .dii-related__heading {
  margin: 0 0 var(--cdi-spacing-md, 1rem);
  color: var(--dii-color-brand-primary);
  font-size: var(--cdi-font-size-h5, 1.25rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.dii-site .dii-related__list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dii-site .dii-related__item {
  display: flex;
  align-items: flex-start;
  gap: var(--cdi-spacing-sm, 0.5rem);
  padding: var(--cdi-spacing-sm, 0.5rem) 0;
  border-top: 1px solid var(--dii-color-border-subtle);
}

.dii-site .dii-related__item:first-child {
  padding-top: 0;
  border-top: 0;
}

.dii-site .dii-related__item:last-child {
  padding-bottom: 0;
}

.dii-site .dii-related__thumb {
  display: block;
  flex: none;
  width: 5rem;
  height: 4rem;
  border-radius: 0.375rem;
  object-fit: cover;
}

.dii-site .dii-related__text {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
}

.dii-site .dii-related__meta {
  margin: 0;
  color: var(--dii-accent-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dii-site .dii-related__title {
  margin: 0;
  font-size: var(--cdi-font-size-body-small, 0.875rem);
  font-weight: 700;
  line-height: 1.3;
}

.dii-site .dii-related__title a {
  color: var(--dii-color-brand-primary);
  text-decoration: none;
}

.dii-site .dii-related__title a:hover {
  color: var(--dii-color-brand-secondary);
  text-decoration: underline;
}

/* Tablet */
@media (min-width: 48rem) {
  .dii-article-page {
    padding-right: var(--cdi-spacing-lg, 1.5rem);
    padding-left: var(--cdi-spacing-lg, 1.5rem);
  }

  .dii-site .dii-article__body {
    font-size: 1.125rem;
  }

  .dii-site .dii-article__body h2 {
    font-size: 1.75rem;
  }

  .dii-article__rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* Desktop: contents beside the body, rail beneath until there is room for three columns */
@media (min-width: 64rem) {
  .dii-article__layout {
    gap: var(--cdi-spacing-xl, 2rem) var(--cdi-spacing-2xl, 3rem);
    margin-top: var(--cdi-spacing-2xl, 3rem);
  }

  .dii-article__layout--toc {
    grid-template-columns: 13rem minmax(0, 42rem);
  }

  .dii-article__layout--toc .dii-article__rail {
    grid-column: 2;
  }

  .dii-article__layout:not(.dii-article__layout--toc) {
    grid-template-columns: minmax(0, 42rem) 16rem;
  }

  .dii-site .dii-toc {
    position: sticky;
    top: var(--cdi-spacing-lg, 1.5rem);
    align-self: start;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
  }

  .dii-site .dii-toc__summary {
    min-height: 0;
    margin-bottom: var(--cdi-spacing-sm, 0.5rem);
    padding: 0;
    border: 0;
    color: var(--dii-accent-text);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    pointer-events: none;
    cursor: default;
    list-style: none;
  }

  .dii-site .dii-toc__summary::-webkit-details-marker {
    display: none;
  }

  .dii-site .dii-toc__summary::after {
    display: none;
  }

  .dii-site .dii-article__hero-image {
    aspect-ratio: 2 / 1;
    object-fit: cover;
  }
}

@media (min-width: 75rem) {
  .dii-article__layout--toc {
    /* Matches the approved baseline's measured column widths at 1365px
       viewport: TOC 229px/14.3rem, centre 684px/42.75rem, rail 307px/19.2rem
       (designs/dii/baselines/DII_ARTICLE_BASELINE_v1.0.png). */
    grid-template-columns: 14rem minmax(0, 43rem) 19rem;
    gap: var(--cdi-spacing-xl, 2rem);
  }

  .dii-article__layout--toc .dii-article__rail {
    grid-column: 3;
    grid-template-columns: minmax(0, 1fr);
  }

  .dii-article__layout:not(.dii-article__layout--toc) .dii-article__rail {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 47.99rem) {
  .dii-site .dii-breadcrumb__item[aria-current='page'] {
    display: none;
  }

  .dii-site .dii-article__body {
    line-height: 1.7;
  }

  .dii-site .dii-article__body blockquote {
    font-size: 1.125rem;
  }

  .dii-site .dii-callout,
  .dii-site .dii-key-takeaways {
    padding: var(--cdi-spacing-md, 1rem);
  }

  .dii-article__share {
    gap: 0.25rem var(--cdi-spacing-md, 1rem);
  }
}