/* =========================================================
   Only inside WordPress (Longform KD Microsites, microsite.json "host").
   <html> has .lkd-hosted and --lkd-host-top = bottom edge of the
   site header. The standalone page never loads this file.
   ========================================================= */

/* fixed UI sits under the site header */
.lkd-hosted .pl { top: var(--lkd-host-top, 0px); }
.lkd-hosted .bar { top: var(--lkd-host-top, 0px); }
.lkd-hosted .menu { top: var(--lkd-host-top, 0px); }
.lkd-hosted .skip:focus { top: calc(var(--lkd-host-top, 0px) + 16px); }

/* first view: fill what is left of the screen below the site header */
.lkd-hosted .hero__stage { height: calc(100svh - var(--lkd-host-top, 0px)); }
.lkd-hosted.motion .hero__stage { top: var(--lkd-host-top, 0px); }

/* full-screen sticky scenes: keep their text clear of both bars
   (offsets inside the sticky box only, never its height or top) */
/* the hero stage already starts under the site header but is shorter: size the team by it */
.lkd-hosted .hero__team { width: min(62vw, calc((100svh - var(--lkd-host-top, 0px)) * .76)); }
@media (max-aspect-ratio: 1/1) {
  .lkd-hosted .hero__team { width: min(112vw, calc((100svh - var(--lkd-host-top, 0px)) * .62)); }
}
.lkd-hosted .finale__copy { top: calc(var(--bar-h) + 30px + 2vh + var(--lkd-host-top, 0px)); }
@media (max-aspect-ratio: 1/1) {
  .lkd-hosted .finale__copy { top: calc(var(--bar-h) + 30px + 15svh + var(--lkd-host-top, 0px)); }
}
.lkd-hosted.js .st__head { top: calc(var(--bar-h) + 30px + 3vh + var(--lkd-host-top, 0px)); }
@media (max-aspect-ratio: 1/1) {
  .lkd-hosted.js .st__head { top: calc(var(--bar-h) + 22px + 1.5vh + var(--lkd-host-top, 0px)); }
}
.lkd-hosted .about__mark { top: calc(var(--bar-h) + 60px + var(--lkd-host-top, 0px)); }
.lkd-hosted .sup__fig { top: calc(var(--bar-h) + 40px + var(--lkd-host-top, 0px)); height: calc(100svh - var(--bar-h) - 80px - var(--lkd-host-top, 0px)); }
@media (max-width: 899px) {
  .lkd-hosted .sup__fig { top: calc(var(--bar-h) + 14px + var(--lkd-host-top, 0px)); height: 44svh; }
}

/* the theme turns every a:hover grey */
.lkd-hosted .ms a.tl:hover { color: var(--blue); }
.lkd-hosted .ms a.nl:hover { color: var(--blue); }
.lkd-hosted .menu__list a:hover { color: var(--green) !important; }