.article-cluster .page-hero h1 { max-width: 24ch; }
.article-cluster .article-intro { display: grid; max-width: 52rem; gap: var(--space-sm); }
.article-cluster .article-intro .lead { margin: 0; }
.article-overview-grid,
.article-type-grid,
.article-comparison-grid,
.article-pair-grid,
.article-cluster-nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.article-overview-grid { margin-bottom: var(--space-lg); }
.article-overview-item { display: grid; min-height: 7.5rem; place-items: center; align-content: center; gap: 0.35rem; padding: var(--space-md); border: 1px solid rgba(90, 70, 214, 0.16); border-radius: var(--radius-lg); background: var(--color-primary-soft); text-align: center; }
.article-overview-item strong { color: var(--color-primary-strong); font: 800 clamp(1.8rem, 8vw, 3rem)/1 var(--font-heading); }
.article-overview-item span { color: var(--color-text-muted); font-weight: 700; }
.article-overview-item--2,
.article-overview-item--4 { background: var(--color-secondary-soft); }
.article-example-list { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0 0 var(--space-lg); padding: 0; list-style: none; }
.article-example-list li { padding: 0.55rem 0.85rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); box-shadow: 0 0.12rem 0 rgba(27, 36, 55, 0.07); color: var(--color-text); font-weight: 700; }
.article-support,
.article-rule { max-width: 52rem; color: var(--color-text-muted); }
.article-type-card { display: grid; align-content: start; overflow: hidden; }
.article-type-card h3 { margin-block: var(--space-md); color: var(--color-text-muted); font-size: var(--text-md); }
.article-type-card .article-example-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.article-type-card .article-example-list li { padding: 0.5rem 0.65rem; border: 0; border-radius: var(--radius-sm); background: var(--color-surface-subtle); box-shadow: none; font-size: var(--text-sm); }
.article-token { display: inline-grid; width: fit-content; min-width: 4.5rem; min-height: 4.5rem; place-items: center; padding-inline: var(--space-sm); border: 0.16rem solid var(--color-text); border-radius: 1rem; background: var(--color-accent); box-shadow: 0.22rem 0.22rem 0 var(--color-text); color: var(--color-text); font: 800 var(--text-2xl)/1 var(--font-heading); transform: rotate(-2deg); }
.article-type-card--2 .article-token,
.article-type-card--4 .article-token { background: var(--color-secondary-soft); transform: rotate(2deg); }
.article-comparison { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-sm); padding: var(--space-md); text-align: center; }
.article-comparison > span:first-child { color: var(--color-text-muted); }
.article-comparison > span[aria-hidden] { color: var(--color-primary); font-size: var(--text-xl); }
.article-comparison strong { color: var(--color-primary-strong); }
.article-rule { margin-top: var(--space-lg); font-size: var(--text-lg); }
.article-formula-row { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 42rem; gap: var(--space-md); margin-top: var(--space-xl); }
.article-formula { display: grid; min-height: 5rem; place-items: center; padding: var(--space-md); border: 2px solid rgba(90, 70, 214, 0.28); border-radius: var(--radius-lg); background: var(--color-primary-soft); box-shadow: var(--shadow-sm); color: var(--color-primary-strong); font: 800 clamp(1.4rem, 7vw, 2.4rem)/1.2 var(--font-heading); text-align: center; }
.article-formula:nth-child(2),
.article-formula--large { border-color: rgba(8, 124, 116, 0.3); background: var(--color-secondary-soft); color: var(--color-secondary-strong); }
.article-contract-layout { display: grid; gap: var(--space-lg); }
.article-formula--large { align-self: start; min-height: 8rem; }
.article-contract-layout .article-example-list { align-content: start; margin: 0; }
.article-pair { padding: var(--space-md); border-left: 0.35rem solid var(--color-primary); }
.article-pair p { margin: 0; }
.article-pair p + p { margin-top: var(--space-sm); color: var(--color-secondary-strong); font-weight: 750; }
.article-related-callout { margin-block: var(--space-lg); }
.article-related-callout p { margin: 0; padding: var(--space-lg); border: 1px solid rgba(90, 70, 214, 0.2); border-radius: var(--radius-lg); background: var(--color-primary-soft); color: var(--color-text-muted); }
.article-related-callout a { color: var(--color-primary-strong); font-weight: 800; }
.article-game { max-width: var(--container-narrow); margin-inline: auto; }
.article-game .article-game__picker { padding-top: 0; padding-bottom: 0; border-top: 0; border-bottom: 0; }
.article-game__options { justify-content: center; gap: 0.55rem; }
.article-game .article-option { min-width: 3.75rem; padding-inline: 1rem; box-shadow: 0 0.12rem 0 rgba(23, 32, 51, 0.1); font: 800 var(--text-md)/1 var(--font-heading); touch-action: manipulation; user-select: none; }
.article-game .article-option:disabled { cursor: default; }
.article-game .article-option.is-error { border-color: var(--color-error); background: var(--color-error-soft); box-shadow: 0 0.2rem 0 var(--color-error); color: var(--color-error); }
.article-game .article-option.is-correct { border-color: var(--color-secondary); background: var(--color-secondary); box-shadow: 0 0.2rem 0 var(--color-secondary-strong); color: var(--color-surface); opacity: 1; transform: translateY(-0.1rem); }
.article-game__token { transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); }
.article-game__token.is-error { border-color: var(--color-error); background: var(--color-error-soft); box-shadow: 0.18rem 0.18rem 0 var(--color-error); color: var(--color-error); transform: rotate(2deg); }
.article-game__token.is-correct { border-color: var(--color-secondary-strong); background: var(--color-secondary-soft); box-shadow: 0.18rem 0.18rem 0 var(--color-secondary-strong); color: var(--color-secondary-strong); transform: rotate(2deg); }
.article-game__prompt { transition: border-color var(--transition-fast), background var(--transition-fast); }
.article-game__phrase { max-width: 100%; }
.article-game--word .article-game__prompt { font-size: clamp(1.55rem, 7.5vw, 4.75rem); }
.article-game--word .article-game__phrase { white-space: nowrap; }
.article-game__blank { display: inline-grid; min-width: 2.1em; min-height: 1.35em; place-items: center; margin-inline: 0.1em; padding: 0.02em 0.16em 0.04em; border: 0.08em solid var(--color-accent); border-radius: 0.2em; background: var(--color-accent); box-shadow: 0.06em 0.08em 0 rgba(23, 32, 51, 0.14); color: var(--color-primary-strong); font-size: 0.72em; line-height: 1; vertical-align: 0.08em; transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast); }
.article-game__blank.is-error { border-style: solid; border-color: var(--color-error); background: var(--color-error-soft); color: var(--color-error); }
.article-game__blank.is-correct { border-style: solid; border-color: var(--color-accent); background: var(--color-accent); color: var(--color-primary-strong); }
.article-game__prompt.is-error { border-color: rgba(192, 57, 43, 0.46); }
.article-game__prompt.is-correct { border-color: rgba(8, 124, 116, 0.48); }
.article-game__controls { margin-bottom: var(--space-sm); }
.article-game__feedback { min-height: 1.6em; margin: 0; padding-top: var(--space-sm); font-size: var(--text-lg); font-weight: 800; text-align: center; }
.article-game__feedback.is-error { color: var(--color-error); }
.article-game__feedback.is-success { color: var(--color-success); }
.article-game__composition { width: fit-content; margin: var(--space-sm) auto 0; padding: 0.6rem 0.9rem; border-radius: var(--radius-pill); background: var(--color-accent-soft); color: var(--color-primary-strong); font: 800 var(--text-lg)/1.2 var(--font-heading); }
.article-cluster-nav { margin: 0; padding: 0; list-style: none; }
.article-cluster-nav li { min-width: 0; }
.article-cluster-link { display: flex; height: 100%; min-height: 5rem; align-items: center; color: var(--color-primary-strong); font-family: var(--font-heading); font-weight: 800; text-decoration: none; }
.article-cluster-link.is-current { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-text); }

@media (min-width: 36rem) {
  .article-overview-grid,
  .article-formula-row,
  .article-comparison-grid,
  .article-pair-grid,
  .article-cluster-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 48rem) {
  .article-overview-grid,
  .article-type-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .article-contract-layout { grid-template-columns: minmax(14rem, 0.7fr) minmax(0, 1.3fr); }
}

@media (prefers-reduced-motion: reduce) {
  .article-cluster *,
  .article-cluster *::before,
  .article-cluster *::after { animation: none !important; transition: none !important; }
}