.age-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.36fr);
  align-items: center;
  gap: clamp(24px, 4vw, 54px);
}

.age-hero__layout > * { min-width: 0; }
.age-hero .school-hero__lead p { margin-bottom: 0; color: var(--school-muted); }
.age-hero__focus {
  display: grid;
  justify-items: center;
  gap: 12px;
  border: 1px solid var(--school-line);
  border-radius: 32px;
  padding: 28px 24px;
  background: rgba(255, 255, 255, 0.7);
  text-align: center;
}
.age-hero__number { color: var(--school-green); font-size: 100px; font-weight: 950; line-height: 1; }
.age-hero__focus > strong { font-size: 22px; }
.age-hero__focus p { margin: 0; font-size: 16px; }
.age-hero__focus a { color: var(--school-green-dark); font-weight: 850; }
.age-navigation { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.age-navigation a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--school-line);
  border-radius: 14px;
  padding: 10px 18px;
  background: #fff;
  color: var(--school-green-dark);
  font-weight: 850;
  text-decoration: none;
}
.age-navigation a[aria-current="page"], .age-navigation a:hover { border-color: var(--school-green); background: #e7f3eb; }
.age-page a:focus-visible, .age-page summary:focus-visible { outline: 3px solid var(--school-green); outline-offset: 3px; }
.age-games__intro { max-width: 980px; margin: 0 auto; font-size: 17px; }
.age-games__intro p:last-child { margin-bottom: 0; }
.age-games__access { margin: 24px 0 0; font-size: 15px; text-align: center; }
.age-content, .age-final {
  border: 1px solid var(--school-line);
  border-radius: 32px;
  padding: clamp(24px, 4vw, 48px);
  background: #f5faf7;
}
.age-content--practice { background: #fff8ed; }
.age-content__text { max-width: 1050px; font-size: 17px; }
.age-content__text p:last-child { margin-bottom: 0; }
.age-content .school-button { margin-top: 24px; }
.age-final { background: #eaf5ed; }
.age-final > p:not(.school-eyebrow) { font-size: 18px; }
.age-page .school-selection__heading { grid-template-columns: 1fr; }

@media (min-width: 821px) {
  .age-games { padding: 36px; }
  .age-games > .school-section__heading { max-width: 1080px; margin-bottom: 28px; }
  .age-games > .school-section__heading h2 { font-size: clamp(32px, 3.2vw, 46px); }
  .age-games .school-selection { padding: 24px; }
  .age-games .school-selection__heading { margin-bottom: 18px; }
}

@media (max-width: 820px) {
  .age-hero__layout { grid-template-columns: 1fr; }
  .age-hero__focus { grid-template-columns: auto 1fr; justify-items: start; text-align: left; padding: 20px; }
  .age-hero__number { grid-row: 1 / 4; align-self: center; font-size: 80px; }
  .age-hero__focus > strong { font-size: 18px; }
}

@media (max-width: 620px) {
  .age-page h1 { font-size: clamp(32px, 8.5vw, 42px); }
  .age-content, .age-final { border-radius: 24px; padding: 24px 18px; }
  .age-navigation { gap: 8px; }
  .age-navigation a { flex: 1 0 25%; padding: 10px 12px; }
  .age-page .school-actions .school-button { width: 100%; }
}

html[data-theme="dark"] .age-hero__focus,
html[data-theme="dark"] .age-content,
html[data-theme="dark"] .age-final { background: #20352f; }
html[data-theme="dark"] .age-content--practice { background: #293b37; }
html[data-theme="dark"] .age-hero__number { color: #8fd1ae; }
html[data-theme="dark"] .age-hero__focus a { color: var(--school-ink); }
html[data-theme="dark"] .age-navigation a { border-color: var(--school-line); background: #2a443c; color: var(--school-ink); }
html[data-theme="dark"] .age-navigation a[aria-current="page"],
html[data-theme="dark"] .age-navigation a:hover { border-color: #91baa7; background: #355749; }