/* Pupil shared design-system alignment, v0.4.7.
 * Applied after existing school-life styles; the current collage hero/block
 * remains unchanged. No page content, image or navigation is replaced.
 */
body.pupil-sitepage-scope {
  --pupil-motion-fast: 150ms;
  --pupil-motion-base: 300ms;
  --pupil-motion-slow: 600ms;
  --pupil-motion-hero: 900ms;
  --pupil-motion-ease: cubic-bezier(.2,.8,.2,1);
  --pupil-reveal: var(--pupil-motion-slow);
  --pupil-hero: var(--pupil-motion-hero);
}
/* Inherit the one self-hosted Inter face loaded by the Pupil theme.
   Preserve the hero's intentional italic emphasis, not a second font. */
body.pupil-sitepage-scope .ax-hero,
body.pupil-sitepage-scope .ax-hero-title,
body.pupil-sitepage-scope .ax-hero-sub,
body.pupil-sitepage-scope .display-heading,
body.pupil-sitepage-scope .section-intro { font-family: var(--font, Inter, Arial, sans-serif); }
body.pupil-sitepage-scope .ax-hero-title em { font-style: italic; font-family: inherit; }
/* One accessible minimum for the smallest UI labels. */
body.pupil-sitepage-scope .section-kicker,
body.pupil-sitepage-scope .ax-kicker { font-size: 12px; }
/* Reuse the existing data-motion observer; do not add a second observer. */
body.pupil-sitepage-scope.motion-ready [data-motion].motion-entered {
  animation-duration: var(--pupil-motion-slow);
  animation-timing-function: var(--pupil-motion-ease);
}
body.pupil-sitepage-scope.motion-ready [data-pupil-section$="-hero"] h1 {
  animation-duration: var(--pupil-motion-hero);
  animation-timing-function: var(--pupil-motion-ease);
}
/* Gallery photos enter in a restrained sequence, under the shared observer. */
body.pupil-site-arts .ax-collage figure:nth-child(1) { --pupil-delay: 0ms; }
body.pupil-site-arts .ax-collage figure:nth-child(2) { --pupil-delay: 65ms; }
body.pupil-site-arts .ax-collage figure:nth-child(3) { --pupil-delay: 130ms; }
body.pupil-site-arts .ax-collage figure:nth-child(4) { --pupil-delay: 195ms; }
/* Keep the current photo crop and layout; apply shared button affordances. */
body.pupil-sitepage-scope .ax-hero .button { min-height: 46px; }
body.pupil-sitepage-scope a:focus-visible,
body.pupil-sitepage-scope button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  body.pupil-sitepage-scope [data-motion],
  body.pupil-sitepage-scope [data-motion].motion-entered,
  body.pupil-sitepage-scope [data-pupil-section$="-hero"] h1 {
    animation: none !important; transition: none !important;
    opacity: 1 !important; transform: none !important;
  }
}