.article-shell { background: var(--colour-paper); }
.article-disclosure { border-block: 1px solid var(--colour-line); background: var(--colour-paper-soft); padding-block: var(--space-4); }
.article-disclosure p { max-width: var(--container-reading); margin: 0 auto; color: var(--colour-muted); font-size: var(--text-body-small); line-height: 1.55; }
.article-layout { display: grid; gap: var(--space-7); }
.article-main { min-width: 0; }
.article-aside { display: none; padding-top: var(--space-5); }
.article-toc { position: sticky; top: 6rem; border-left: 1px solid var(--colour-line); padding-left: var(--space-5); }
.article-toc p { margin: 0 0 var(--space-4); color: var(--colour-deep-teal); font-size: var(--text-label); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.article-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.article-toc a { color: var(--colour-muted); font-size: var(--text-body-small); text-decoration: none; }
.article-toc a:hover { color: var(--colour-deep-teal); }
.article-intro { max-width: var(--container-reading); margin-inline: auto; padding-block: var(--space-8); }
.article-intro p { margin: 0; color: var(--colour-ink-soft); font-size: var(--text-body-large); line-height: 1.65; }
.article-intro p + p { margin-top: var(--space-5); }
.article-feature-image { margin-block: var(--space-8); }
.article-feature-image .pw-image { min-height: 34rem; box-shadow: var(--shadow-editorial); }
.article-feature-image img { width: 100%; height: 100%; object-fit: cover; }
.article-idea { padding-block: var(--space-9); border-top: 1px solid var(--colour-line); }
.article-idea__grid { display: grid; gap: var(--space-7); align-items: center; }
.article-idea__copy { max-width: 38rem; }
.article-idea__copy .pw-standfirst { margin-top: var(--space-4); }
.article-idea__image { min-height: 30rem; box-shadow: var(--shadow-soft); }
.article-idea__image img { width: 100%; height: 100%; object-fit: cover; }
.article-tip-list { margin-top: var(--space-6); display: grid; gap: var(--space-4); }
.article-tip { border-top: 1px solid var(--colour-line); padding-top: var(--space-4); }
.article-tip strong { display: block; color: var(--colour-ink); font-family: var(--font-serif); font-size: 1.35rem; font-weight: 400; line-height: var(--leading-heading); }
.article-tip span { display: block; margin-top: var(--space-2); color: var(--colour-muted); font-size: var(--text-body-small); line-height: 1.55; }
.article-editor-note { margin-block: var(--space-8); background: var(--colour-forest-shadow); color: var(--colour-white); padding: var(--space-7); }
.article-editor-note .pw-eyebrow { color: var(--colour-brass-glow); }
.article-editor-note p { margin: var(--space-4) 0 0; color: rgba(255, 253, 249, .78); font-size: var(--text-body-large); line-height: 1.55; }
.article-mistakes { background: var(--colour-linen); }
.article-mistakes__grid { display: grid; gap: 1px; background: var(--colour-line); margin-top: var(--space-7); }
.article-mistakes__stack { margin-top: var(--space-7); display: grid; gap: var(--space-5); }
.article-mistakes__row { display: grid; gap: var(--space-5); }
.article-mistakes__row .article-mistake { border: 1px solid var(--colour-line); min-height: 100%; }
.article-mistake { background: var(--colour-paper); padding: var(--space-5); }
.article-mistake span { color: var(--colour-warm-clay); font-size: var(--text-label); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.article-mistake h3 { margin-top: var(--space-3); }
.article-mistake p { margin-top: var(--space-3); }
.article-faq { border-top: 1px solid var(--colour-line); }
.article-faq__items { max-width: var(--container-reading); margin: var(--space-7) auto 0; display: grid; gap: 1px; background: var(--colour-line); }
.article-faq details { background: var(--colour-white); padding: var(--space-5); }
.article-faq summary { cursor: pointer; font-family: var(--font-serif); font-size: 1.45rem; line-height: var(--leading-heading); }
.article-faq details p { margin-top: var(--space-4); color: var(--colour-muted); }
.article-related { background: var(--colour-paper-soft); }
.article-related__grid { display: grid; gap: var(--space-5); margin-top: var(--space-7); }
.article-related-card { display: grid; gap: var(--space-4); text-decoration: none; }
.article-related-card .pw-image { aspect-ratio: 4 / 3; box-shadow: var(--shadow-soft); }
.article-related-card img { width: 100%; height: 100%; object-fit: cover; }
.article-related-card span { color: var(--colour-deep-teal); font-size: var(--text-label); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.article-related-card h3 { margin: 0; font-family: var(--font-serif); font-size: clamp(1.6rem, 2.5vw, 2.45rem); font-weight: 400; line-height: 1.04; }
@media (min-width: 48rem) { .article-mistakes__grid, .article-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75rem) { .article-layout { grid-template-columns: minmax(0, 1fr) 16rem; align-items: start; } .article-aside { display: block; } .article-idea__grid { grid-template-columns: .95fr 1.05fr; } .article-idea--reverse .article-idea__media { order: -1; } .article-mistakes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .article-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 75rem) { .article-mistakes__row--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .article-mistakes__row--two { width: calc((100% - (2 * var(--space-5))) / 3 * 2 + var(--space-5)); margin-inline: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 47.99rem) { .article-intro { padding-block: var(--space-6); } .article-feature-image .pw-image, .article-idea__image { min-height: 26rem; height: 58svh; } .article-editor-note { padding: var(--space-5); } }
/* Article images should behave like editorial photography, never partial placeholders. */
.article-shell .pw-article-header__image,
.article-shell .article-feature-image .pw-image,
.article-shell .article-idea__image,
.article-shell .pw-product-card__image,
.article-shell .article-related-card .pw-image {
  display: block;
}
.article-shell .pw-article-header__image > img,
.article-shell .article-feature-image .pw-image > img,
.article-shell .article-idea__image > img,
.article-shell .pw-product-card__image > img,
.article-shell .article-related-card .pw-image > img {
  display: block;
  width: 100%;
  height: 100% !important;
  min-height: inherit;
  object-fit: cover;
  object-position: center;
}


/* Cornerstone article hero rhythm: shared editorial proportions for all article templates. */
.article-shell .pw-article-header__standfirst {
  margin-top: var(--space-4);
}
.article-shell .pw-article-header__image {
  width: min(100%, 60rem);
  max-height: 88rem;
  margin-top: var(--space-6);
  margin-inline: auto;
}
.article-shell .pw-article-header figure .pw-caption {
  margin-bottom: var(--space-5);
}
@media (max-width: 63.99rem) {
  .article-shell .pw-article-header__image {
    max-height: 50rem;
  }
}
@media (max-width: 47.99rem) {
  .article-shell .pw-article-header__image {
    max-height: 27rem;
  }
}