.article-page {
  --cream: #f2eadc;
  --campaign: #dfcb92;
  background: var(--cream);
}

.article-page .site-header { background: rgba(242, 234, 220, 0.97); }

.article-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr);
  min-height: calc(100svh - 7.5rem);
  border-bottom: 1px solid var(--ink);
  background: #0a0a0a;
  color: white;
}

.article-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(3rem, 7vw, 7rem) clamp(1rem, 5vw, 5rem);
}

.article-hero__copy .eyebrow { color: var(--campaign); }

.article-hero h1 {
  max-width: 11ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(4rem, 8.5vw, 9rem);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.84;
}

.article-deck {
  max-width: 34rem;
  margin: clamp(2rem, 4vw, 3.5rem) 0 0;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  line-height: 1.35;
}

.article-hero__image { min-height: 42rem; overflow: hidden; }
.article-hero__image img { height: 100%; object-fit: cover; object-position: center 63%; }

.article-page--cdg .article-hero h1 {
  max-width: 13ch;
  font-size: clamp(3.7rem, 7vw, 7.5rem);
}

.article-page--cdg .article-hero__image img { object-position: center 35%; }

.article-page--lego {
  --campaign: #ff62c7;
}

.article-page--lego .article-hero h1 {
  max-width: 12ch;
  font-size: clamp(3.5rem, 6.8vw, 7.3rem);
}

.article-page--lego .article-hero__image {
  background: #fff;
}

.article-page--lego .article-hero__image img {
  object-fit: contain;
  object-position: center;
}

.article-body {
  display: grid;
  grid-template-columns: minmax(17rem, 0.72fr) minmax(0, 1fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: start;
  padding: clamp(3.5rem, 8vw, 8rem) clamp(1rem, 6vw, 7rem);
  border-bottom: 1px solid var(--ink);
}

.article-body__image { position: sticky; top: 1.5rem; }
.article-body__image img { aspect-ratio: 3 / 4; object-fit: cover; }
.article-body__image--square img { aspect-ratio: 1; }
.article-body__image figcaption {
  margin-top: 0.65rem;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.article-copy { max-width: 48rem; }
.article-copy p {
  margin: 0 0 1.4em;
  font-family: var(--serif);
  font-size: clamp(1.55rem, 3vw, 2.8rem);
  letter-spacing: -0.025em;
  line-height: 1.12;
}

.article-copy p:first-child::first-letter {
  float: left;
  margin: -0.08em 0.08em 0 0;
  font-size: 3.2em;
  line-height: 0.9;
}

.article-verdict {
  padding-top: 1.2rem;
  border-top: 1px solid var(--ink);
  font-style: italic;
}

.article-button {
  display: inline-block;
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--ink);
  background: var(--acid);
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-decoration: none;
  text-transform: uppercase;
}
.article-button:hover { background: var(--ink); color: white; }

.article-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
}

.article-actions .article-button { margin-top: 0; }

.article-disclosure {
  margin-top: 1.4rem !important;
  font-family: var(--sans) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.04em !important;
  line-height: 1.45 !important;
}

@media (max-width: 760px) {
  .article-hero { grid-template-columns: 1fr; }
  .article-hero__copy { min-height: 34rem; padding-bottom: 3.5rem; }
  .article-hero h1 { font-size: clamp(3.9rem, 18vw, 6rem); }
  .article-page--cdg .article-hero h1 { font-size: clamp(3.35rem, 15vw, 5.2rem); }
  .article-page--lego .article-hero h1 { font-size: clamp(3.15rem, 14vw, 4.9rem); }
  .article-hero__image { min-height: 75svh; }
  .article-body { grid-template-columns: 1fr; }
  .article-body__image { position: static; margin: 0; }
  .article-copy p { font-size: clamp(1.55rem, 7.3vw, 2.2rem); }
}