/* The story image and illustration each have their own space. */
.story-editorial { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); grid-template-areas: 'title visual' 'copy visual'; gap: 0 64px; align-items: start; padding-block: 64px 80px; }
.story-heading { grid-area: title; min-width: 0; }
.story-heading .page-title { margin-bottom: 0; }
.story-editorial .editorial-copy { grid-area: copy; min-width: 0; }
.story-editorial .intro { max-width: none; margin-block: 28px; }
.story-aside { grid-area: visual; min-width: 0; }
.story-photo { margin: 0; border-radius: 26px; overflow: hidden; }
.story-photo > img { display: block; width: 100%; height: auto; }
.story-note { display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 26px; align-items: center; margin-top: 28px; padding: 30px 26px; background: #ece2d2; border-radius: 24px; }
.story-mascot .mascot-art { height: 174px; width: auto; margin: auto; }
.story-note .eyebrow { font-size: 10px; margin: 0 0 12px; }
.story-note h2 { font-size: 34px; line-height: 1.1; margin: 0; }
@media (max-width: 1050px) {
  .story-editorial { column-gap: 36px; }
  .story-note { padding: 24px 18px; gap: 20px; grid-template-columns: 68px minmax(0,1fr); }
  .story-note h2 { font-size: 28px; }
  .story-mascot .mascot-art { height: 144px; }
}
@media (max-width: 900px) {
  .story-editorial { grid-template-columns: minmax(0,1fr); grid-template-areas: 'title' 'visual' 'copy'; gap: 26px; padding-block: 36px 56px; }
  .story-aside { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; }
  .story-note { margin: 0; padding: 22px 26px; grid-template-columns: 68px minmax(0,1fr); }
  .story-mascot .mascot-art { height: 110px; }
  .story-note h2 { font-size: 30px; }
  .story-editorial .intro { margin-top: 0; }
}