/* Article pages: layered on top of site.css */
.article-hero { padding: 40px 0 0; }
.article-hero .panel {
  border-radius: 40px; padding: 96px 48px 84px; text-align: center; position: relative; overflow: hidden;
  background: radial-gradient(circle at 85% 15%, rgba(201,168,76,.22), transparent 42%),
              radial-gradient(circle at 10% 90%, rgba(201,138,166,.25), transparent 45%), var(--plum-deep);
  color: #f5e9ef;
}
.article-hero .inner { max-width: 760px; margin: 0 auto; }
.article-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: .74rem; letter-spacing: .26em; text-transform: uppercase; color: var(--rose); }
.article-eyebrow::before, .article-eyebrow::after { content: ""; width: 28px; height: 1px; background: var(--gold); }
.article-title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.3rem, 4.8vw, 3.8rem); line-height: 1.1; color: #fff; margin: 22px 0 0; text-wrap: balance; }
.article-standfirst { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.5; color: var(--gold-light); margin-top: 20px; }
.article-byline { margin-top: 30px; display: inline-flex; align-items: center; gap: 12px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(245,233,239,.75); }
.article-byline img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: top; border: 1px solid var(--gold); }

.article-body { max-width: 720px; margin: 0 auto; padding: 72px 24px 24px; }
.article-body p { font-size: 1.12rem; color: var(--text-mid); margin-bottom: 1.6rem; line-height: 1.85; }
.article-body p.lead { font-family: var(--serif); font-size: 1.55rem; line-height: 1.5; color: var(--plum-ink); }
.article-body p.lead::first-letter { float: left; font-size: 4.2rem; line-height: .9; padding: 6px 10px 0 0; color: var(--plum); }
.article-body a { color: var(--plum); text-decoration: none; border-bottom: 1px solid var(--gold); }
.article-body a:hover { color: var(--plum-soft); }
.article-quote {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.45; color: var(--plum);
  background: linear-gradient(140deg, var(--blush), var(--paper)); border-left: 3px solid var(--gold);
  border-radius: 0 24px 24px 0; padding: 28px 32px; margin: 2.6rem 0;
}
.article-cite { display: block; font-style: normal; font-family: var(--sans); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft); margin-top: 14px; }

.back-wrap { max-width: 720px; margin: 0 auto; padding: 10px 24px 90px; }
.back-link { display: inline-block; font-size: .76rem; letter-spacing: .15em; text-transform: uppercase; color: var(--plum); text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 2px; }
.back-link:hover { color: var(--plum-soft); }

@media (max-width: 640px) {
  .article-hero { padding-top: 16px; }
  .article-hero .panel { padding: 64px 22px 56px; border-radius: 30px; margin: 0 -8px; }
  .article-body { padding: 48px 16px 16px; }
  .article-body p.lead { font-size: 1.35rem; }
  .back-wrap { padding: 0 16px 70px; }
}