/* Square illustrated subject menus. Source artwork is also supplied at 1000px. */
.subjects.menu-illustrated{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.menu-illustrated .subject-card{padding:0;overflow:hidden;border-width:2px;border-bottom-width:5px;box-shadow:0 5px 0 #dce7f7;position:relative}
.menu-illustrated .subject-card .subject-art{display:block;width:100%;aspect-ratio:1;height:auto;object-fit:contain;background:white;border-radius:20px 20px 0 0;transition:transform .22s ease}
.menu-illustrated .subject-card:hover .subject-art{transform:scale(1.025)}
.menu-illustrated .subject-info{align-self:stretch;padding:14px 22px 20px;background:white;position:relative;border-top:1px solid var(--line)}
.menu-illustrated .subject-info p{font-size:1rem;color:var(--ink);margin:0 0 10px;line-height:1.7;min-height:3.4em;display:flex;align-items:center;justify-content:center}
.menu-illustrated .go{display:inline-flex;align-items:center;justify-content:center;padding:7px 15px;border-radius:40px;border:1px solid currentColor;font-size:.875rem}
.subject-card:focus-visible{outline:4px solid var(--blue);outline-offset:5px}
@media(max-width:1100px){.subjects.menu-illustrated{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
@media(max-width:600px){.subjects.menu-illustrated{grid-template-columns:minmax(0,1fr);gap:22px;max-width:440px;margin:auto}.menu-illustrated .subject-info{padding:12px 18px 18px}.menu-illustrated .subject-info p{min-height:0}.menu-illustrated .subject-card .subject-art{width:100%;height:auto}}
@media(min-width:2200px){.subjects.menu-illustrated{gap:32px}.menu-illustrated .subject-info{padding:18px 28px 24px}}
@media(prefers-reduced-motion:reduce){.menu-illustrated .subject-card:hover .subject-art{transform:none}}

/* Each grade has its own full-body mascot, separate from subject artwork. */
.grades-illustrated .grade-card{display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:24px;min-width:0;text-align:center}
.grades-illustrated .grade-number{position:absolute;top:18px;left:18px;width:58px;height:64px;font-size:1.65rem;z-index:2;margin:0}
.grade-visual{display:flex;justify-content:center;align-items:center;padding-top:16px;min-width:0}
.grade-art{display:block;width:230px;max-width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:white}
.grade-copy{display:flex;flex-direction:column;align-items:center;flex:1;min-width:0}
.grades-illustrated .grade-copy h3{font-size:1.2rem;margin:0 0 8px;line-height:1.75}
.grades-illustrated .grade-copy p{margin:0 0 14px;line-height:1.8}
.grades-illustrated .card-link{margin-top:auto}
.grades-illustrated .grade-card:focus-visible{outline:4px solid #082567;outline-offset:5px}
@media(max-width:1000px){.grade-art{width:210px}}
@media(max-width:600px){
  .grades-illustrated{gap:14px}
  .grades-illustrated .grade-card{padding:14px 10px;gap:8px}
  .grades-illustrated .grade-number{top:10px;left:10px;width:46px;height:48px;font-size:1.35rem;border-radius:17px}
  .grade-visual{padding-top:34px}
  .grade-art{width:38vw}
  .grades-illustrated .grade-copy h3{font-size:1.03rem;line-height:1.85}
  .grades-illustrated .grade-copy p{font-size:1rem}
}
@media(min-width:2200px){
  .grades-illustrated .grade-card{padding:32px;gap:20px}
  .grades-illustrated .grade-number{width:86px;height:92px;top:26px;left:26px}
  .grade-art{width:320px}
}