/* Academy typography and rhythm — route-scoped refinement only.
   Load after the shared hub styles. Existing color, media, motion and CTA
   declarations remain owned by the base site styles. */

body[data-route="/academy"] #app > .page{
  --academy-section-space:clamp(72px,8.9vw,128px);
  font-variant-numeric:tabular-nums;
}

body[data-route="/academy"] #app .page-hero-scroll .hero-left-inner h1{
  font-weight:900;
  font-size:clamp(44px,5.25vw,76px);
  line-height:1.02;
  letter-spacing:-.025em;
  text-wrap:balance;
}

body[data-route="/academy"] #app section.section{
  /* Adjacent sections together provide 72–128px of breathing room.
     More of that space precedes the next heading than follows content. */
  padding-block:calc(var(--academy-section-space) * .6666667)
    calc(var(--academy-section-space) * .3333333);
}

body[data-route="/academy"] #app .section-head{
  margin-bottom:clamp(40px,4vw,48px);
}

body[data-route="/academy"] #app .section-head p,
body[data-route="/academy"] #app .qualif-head p{
  margin-top:16px;
}

body[data-route="/academy"] #app .section-head h2,
body[data-route="/academy"] #app .qualif-head h2,
body[data-route="/academy"] #app .cta-final > h2{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(32px,4vw,48px);
  line-height:1.08;
  letter-spacing:-.02em;
  text-wrap:balance;
}

body[data-route="/academy"] #app .section-head .num,
body[data-route="/academy"] #app .section-head .eyebrow,
body[data-route="/academy"] #app .qualif-head .eyebrow{
  font-family:var(--font-display);
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
}

/* Keep the carousel's heading and controls as one existing header unit:
   spacing belongs below that unit, not between its internal children. */
body[data-route="/academy"] #app .carousel-head{
  margin-bottom:clamp(40px,4vw,48px);
}

body[data-route="/academy"] #app .carousel-head .section-head{
  margin-bottom:0;
}

/* Presentation's introductory lead sits outside sectionHead in the existing
   markup, so pair it with the title and let its existing grid gap complete
   the header-to-content spacing. */
body[data-route="/academy"] #app #presentation .section-head{
  margin-bottom:0;
}

body[data-route="/academy"] #app #presentation > .container > .lead{
  margin-top:16px;
  margin-bottom:16px;
}

body[data-route="/academy"] #app .qualif-head{
  margin-bottom:clamp(40px,4vw,48px);
}

body[data-route="/academy"] #app .card :is(.card-title,h3,h4):not(form *),
body[data-route="/academy"] #app .qualif-door :is(h3,h4,.qualif-door-t):not(form *){
  font-family:var(--font-display);
  font-size:clamp(22px,2vw,24px);
  font-weight:800;
  line-height:1.2;
}

/* Eyebrows and the hero proof are labels, not body paragraphs: retain their
   existing small scale so the original marquee footprint stays unchanged. */
body[data-route="/academy"] #app .page p:not(form p):not(.hero-cta p):not(.academy-floatbar p):not(.btn p):not(.eyebrow):not(.hero-proof){
  max-width:68ch;
  font-size:17px;
  line-height:1.6;
}

body[data-route="/academy"] #app .section-head p{
  max-width:68ch;
}

/* Keep the existing form, CTA and sticky-bar typography byte-for-byte in
   source and equivalent in computed style; only editorial numerals opt in. */
body[data-route="/academy"] #app :is(form,.btn,button,input,textarea,select,.academy-floatbar){
  font-variant-numeric:normal;
}

/* Lot 76b: Academy hero only. The FC74 scale is projected locally;
   the other hubs and shared tokens are deliberately not changed. */
body[data-route="/academy"] #app .page-hero-scroll{
  --hero-h1:clamp(2.25rem,4.4vw,3.75rem);
}
body[data-route="/academy"] #app .page-hero-scroll .hero-left-inner h1{
  font-size:var(--hero-h1);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.04em;
  font-style:normal;
  text-wrap:balance;
  word-break:normal;
  overflow-wrap:normal;
  hyphens:none;
}
/* This empty, fully transparent pseudo-element changed its inset with
   scroll-p and generated layout-shift entries despite painting no pixels. */
body[data-route="/academy"] #app .page-hero-scroll .hero-sticky::before{
  content:none;
}
body[data-route="/academy"] #app > .page > .hero-marquee{
  position:relative;
  inset:auto;
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  margin:0;
  opacity:1;
  pointer-events:none;
}
@media(max-width:767px){
  body[data-route="/academy"] #app .page-hero-scroll{
    --hero-h1:clamp(2rem,8.7vw,2.8rem);
  }
}
/* Reserve intrinsic studio widths before lazy decoding. These are the
   original files' aspect ratios, not new crops or altered logo sizes. */
body[data-route="/academy"] #app > .page > .hero-marquee .hero-marquee-logo{
  --academy-logo-h:clamp(30px,3.2vw,46px);
  height:var(--academy-logo-h);
  width:calc(var(--academy-logo-h) * var(--academy-logo-ratio));
}
body[data-route="/academy"] #app > .page > .hero-marquee img[src$="/weta-digital.webp"]{--academy-logo-ratio:2.782608696;}
body[data-route="/academy"] #app > .page > .hero-marquee img[src$="/mikros.webp"]{--academy-logo-ratio:2.266666667;}
body[data-route="/academy"] #app > .page > .hero-marquee img[src$="/mpc.webp"]{--academy-logo-ratio:1.787709497;}
body[data-route="/academy"] #app > .page > .hero-marquee img[src$="/framestore.webp"]{--academy-logo-ratio:4;}
body[data-route="/academy"] #app > .page > .hero-marquee img[src$="/teamto.webp"]{--academy-logo-ratio:1.730769231;}
body[data-route="/academy"] #app > .page > .hero-marquee img[src$="/asobo.webp"]{--academy-logo-ratio:2.608695652;}
body[data-route="/academy"] #app > .page > .hero-marquee img[src$="/la-fabrique-de-limage.webp"]{--academy-logo-ratio:1.369863014;}
@media(min-width:981px) and (prefers-reduced-motion:no-preference){
 /* Grow the painted window, not the embed's layout box. The visible
    window retains the former 50vw→100vw and 28.125vw→100vh geometry. */
 body[data-route="/academy"] #app .page-hero-scroll .hero-card{
   width:100vw;
   height:100vh;
   clip-path:inset(
     calc((1 - var(--scroll-p,0)) * (50vh - 14.0625vw))
     calc((1 - var(--scroll-p,0)) * 25vw)
     round calc(20px - var(--scroll-p,0) * 20px)
   );
 }
 /* Fixed 16:9 embed surface, scaled inside the original growing clip.
    It avoids iframe reflow while retaining the same centred video zoom. */
 body[data-route="/academy"] #app .page-hero-scroll .hero-card-video{
   width:100vw;
   height:56.25vw;
   transform:translate(-50%,-50%) scale(calc((1.42 - var(--scroll-p,0) * .2) * (.5 + var(--scroll-p,0) * .5)));
 }
}

/* ACADEMY_LIGHT_PARTNERS_START
   White studio WebPs are not tagged by the legacy PNG-only polarity list.
   Ink only these known white marks on the standalone light rail; its existing
   transparency mask already fades into the actual page surface. */
body[data-route="/academy"] #app > .page > .hero-marquee:where(.light *)
  .hero-marquee-logo:is(
    .is-white,
    [src$="/weta-digital.webp"],
    [src$="/mikros.webp"],
    [src$="/mpc.webp"],
    [src$="/framestore.webp"],
    [src$="/teamto.webp"],
    [src$="/asobo.webp"],
    [src$="/la-fabrique-de-limage.webp"]
  ) {
  filter: brightness(0);
}
/* ACADEMY_LIGHT_PARTNERS_END */