/* ARTVERSE · academy.css · /academy only (loaded after site.css) */

.page-academy .nowrap { white-space: nowrap; }

/* Hero -------------------------------------------------------------------------
   LUOMU spirit, as on the home page: misty grey stage, giant thin ACADEMY with
   Nico standing in front of it.
   ≥900px: one stage, copy on the left, tags on the right, figure between (so the h1
   and the enquiry button are on the first screen of a small laptop or iPad).
   <900px: the stage (word + figure) stacks above the copy.
   The Concrete veil starts clear under the header so VERSE never sits on mid-grey. */
.acad-hero { position: relative; }
.acad-hero__stage {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(48% 56% at 56% 82%, rgba(244, 244, 243, .92) 0%, rgba(244, 244, 243, 0) 72%),
    linear-gradient(180deg, rgba(139, 142, 146, 0) 0, rgba(139, 142, 146, 0) 70px, rgba(139, 142, 146, .34) 15%, rgba(139, 142, 146, .1) 24%, rgba(139, 142, 146, 0) 30%),
    var(--mist);
}
.acad-hero__giant {
  position: relative;
  z-index: 0;
  margin: 0;
  text-align: center;
  color: var(--white);
  letter-spacing: .1em;
  margin-right: -.1em;
  text-shadow: 0 0 .03em rgba(255, 255, 255, .95), 0 0 .12em rgba(255, 255, 255, .7), 0 0 .3em rgba(255, 255, 255, .45);
  user-select: none;
  pointer-events: none;
}
.acad-hero__figure { position: relative; z-index: 1; pointer-events: none; }
.acad-hero__figure img { width: auto; max-width: none; height: 100%; }

.acad-hero__copy { display: grid; gap: 1.4rem; justify-items: start; }
.acad-hero__lockup { --lockup-size: 1.5rem; margin-bottom: .35rem; }
.acad-hero__title { font-size: clamp(1.875rem, 2.6vw, 2.5rem); } /* the long program name: one step smaller */
.acad-hero__cn { margin-top: -.35rem; font-size: 1rem; letter-spacing: .14em; color: var(--graphite); word-break: keep-all; }
.acad-hero__intro { max-width: 36ch; color: var(--graphite); font-size: var(--fs-lede); line-height: 1.65; }
.acad-hero__actions { --cluster-gap: 1rem 2rem; padding-top: .4rem; }

.acad-hero__aside { display: grid; gap: 1.6rem; justify-items: start; align-content: start; }
.acad-hero__alt {
  font-family: var(--f-display);
  font-size: 1.25rem;
  line-height: 1.12;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.acad-hero .acad-hero__tags {
  display: grid;
  gap: 1.1rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--black);
}
.acad-hero__tags .tag-pair__en { color: var(--graphite); white-space: nowrap; }

@media (min-width: 900px) {
  /* The figure is anchored to the bottom and reaches up into the lower half of the
     giant word. Its height follows the hero's real height, capped by the free width
     between the copy and the tags. */
  .acad-hero {
    --edge: max(var(--gutter), calc((100vw - var(--max)) / 2));
    --copy-w: clamp(23.75rem, 30vw, 27.5rem); /* wide enough for the bilingual enquiry button */
    --aside-w: clamp(11rem, 16vw, 15rem);
    --free: calc(100vw - 2 * var(--edge) - var(--copy-w) - var(--aside-w));
    --hero-h: clamp(680px, min(100svh, 60vw), 960px);
    min-height: var(--hero-h);
  }
  .acad-hero__stage { position: absolute; inset: 0; }
  .acad-hero__giant { position: absolute; left: 0; right: 0; top: calc(var(--header-h) - .02 * var(--fs-hero-thin)); }
  .acad-hero__figure {
    position: absolute;
    bottom: 0;
    left: calc(var(--edge) + var(--copy-w) + var(--free) * .5);
    height: min(calc(100% - var(--header-h) - .5 * var(--fs-hero-thin)), calc((var(--free) - 4rem) / .461));
    transform: translateX(-50%);
  }
  .acad-hero__content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: var(--copy-w) minmax(0, 1fr) var(--aside-w);
    align-items: end;
    min-height: var(--hero-h);
    padding-top: calc(var(--header-h) + .95 * var(--fs-hero-thin));
    padding-bottom: clamp(3rem, 7vh, 5rem);
  }
  .acad-hero__copy { grid-column: 1; }
  .acad-hero__aside { grid-column: 3; padding-bottom: .5rem; }
}
@media (min-width: 900px) and (max-height: 820px) {
  .acad-hero__copy { gap: 1.1rem; }
  .acad-hero__intro { font-size: 1rem; line-height: 1.6; }
}

@media (max-width: 899.98px) {
  .acad-hero__stage { padding-top: calc(var(--header-h) + 3vw); }
  .acad-hero__figure {
    width: fit-content;
    height: min(clamp(22rem, 112vw, 40rem), max(22rem, 66svh));
    margin: calc(-.52 * var(--fs-hero-thin)) auto 0;
    transform: none;
  }
  .acad-hero__content {
    display: grid;
    gap: 2.75rem;
    padding-top: clamp(2.5rem, 7vw, 4rem);
    padding-bottom: var(--section-y);
  }
  .acad-hero__intro { max-width: 42ch; }
  .acad-hero__aside { padding-top: 1.75rem; border-top: 1px solid var(--rule-on-light); }
  .acad-hero .acad-hero__tags { grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 2.5rem; }
}
@media (min-width: 760px) and (max-width: 899.98px) {
  .acad-hero__content { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; }
  .acad-hero__aside { border-top: 0; padding-top: 0; }
  .acad-hero .acad-hero__tags { grid-template-columns: 1fr; }
}
@media (max-width: 379.98px) {
  .acad-hero .acad-hero__tags { grid-template-columns: 1fr; }
}

/* 01 The Method: a sequence --------------------------------------------------------
   One row per step. The giant thin words step to the right, and a white line on each
   row's top rule fills a fifth more of the width at every step. The numerals are the
   page's Ember feature. */
.sequence { border-bottom: 1px solid var(--rule); }
.sequence__step {
  --n: 1;
  --i: 0;
  position: relative;
  display: grid;
  grid-template-columns: clamp(4.25rem, 7.5vw, 7.5rem) minmax(0, 1fr) minmax(0, 21rem);
  align-items: center;
  column-gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1.4rem, 2.6vw, 2.4rem);
  border-top: 1px solid var(--rule);
}
.sequence__step::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: calc(var(--n) * 20%);
  height: 1px;
  background: rgba(255, 255, 255, .55);
}
.sequence__step:nth-child(2) { --n: 2; --i: 1; }
.sequence__step:nth-child(3) { --n: 3; --i: 2; }
.sequence__step:nth-child(4) { --n: 4; --i: 3; }
.sequence__step:nth-child(5) { --n: 5; --i: 4; }
.sequence__num { font-size: clamp(2.5rem, 4.2vw, 4rem); color: var(--ember); }
.sequence__word {
  padding-left: 0; /* left aligned */
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: clamp(2.25rem, 6.1vw, 6rem);
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sequence__text { display: grid; gap: .4rem; }
.sequence__cn { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.5; color: var(--white); }
.sequence__en { font-family: var(--f-mono); font-size: .9375rem; line-height: 1.45; color: var(--concrete); } /* Concrete only at 15px and up */
@media (max-width: 899.98px) {
  .sequence__step { grid-template-columns: clamp(3.75rem, 14vw, 5rem) minmax(0, 1fr); row-gap: .9rem; align-items: baseline; }
  .sequence__text { grid-column: 2; }
  .sequence__word { padding-left: 0; }
}

/* 02 The ten modules ------------------------------------------------------------------ */
.modules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--black);
}
.module {
  display: grid;
  align-content: start;
  gap: .6rem;
  min-width: 0;
  padding: 1.75rem clamp(1rem, 2.2vw, 2.25rem) 2.4rem 0;
  border-bottom: 1px solid var(--rule);
}
.module:not(:nth-child(3n+1)) { padding-left: clamp(1rem, 2.2vw, 2.25rem); border-left: 1px solid var(--rule); }
.module__num { font-size: clamp(2.25rem, 3vw, 2.75rem); margin-bottom: .6rem; }
.module__title {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: clamp(.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.45;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.module__cn { font-size: 1.0625rem; line-height: 1.55; color: var(--graphite); }
.module__cn:not([lang]) { font-family: var(--f-cn); font-weight: 400; }
.module__out {
  position: relative;
  margin-top: .45rem;
  padding-left: 1.25rem;
  font-family: var(--f-mono);
  font-size: .875rem;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--graphite);
}
.module__out::before { content: ""; position: absolute; left: 0; top: .75em; width: .55rem; height: 1px; background: var(--ember); }
.module__out b { font-weight: 500; color: var(--black); }
.module__out [lang] { margin-left: .35em; }

/* Module 10: the finale, a dark band across the grid. */
.module--finale {
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.75rem clamp(1.5rem, 4vw, 4rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(2rem, 4.5vw, 3.75rem) clamp(1.25rem, 4vw, 3.75rem);
  border: 0;
}
.module--finale .module__num { grid-row: 1 / span 2; align-self: start; margin: 0; font-size: clamp(4rem, 9vw, 8.5rem); line-height: .8; }
.module--finale .module__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.5rem; }
.module--finale .module__cn { color: var(--mist); }
.module__arc {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1em .45em;
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
  border-top: 1px solid var(--rule);
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.5vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.module__arc em {
  font-family: var(--f-display);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--white);
}
.module__arrow { font-family: var(--f-mono); font-size: .62em; letter-spacing: 0; color: var(--white); }

@media (max-width: 899.98px) {
  .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .module:nth-child(2n) { padding-left: clamp(1rem, 2.2vw, 2.25rem); border-left: 1px solid var(--rule); }
  .module--finale, .module--finale:nth-child(2n) { padding: clamp(2rem, 4.5vw, 3.75rem) clamp(1.25rem, 4vw, 3.75rem); border: 0; }
}
@media (max-width: 639.98px) {
  .modules { grid-template-columns: 1fr; }
  .module, .module:nth-child(2n), .module:not(:nth-child(3n+1)) {
    grid-template-columns: 3.5rem minmax(0, 1fr);
    column-gap: 1rem;
    padding: 1.4rem 0 1.6rem;
    border-left: 0;
  }
  .module > * { grid-column: 2; }
  .module__num { grid-column: 1; grid-row: 1 / span 3; margin: 0; font-size: 2.25rem; line-height: 1.05; }
  .module--finale, .module--finale:nth-child(2n) { grid-template-columns: 1fr; padding: 2rem 1.25rem 2.25rem; }
  .module--finale > * { grid-column: 1; }
  .module--finale .module__num { grid-row: auto; font-size: 4rem; }
  .module__arc { flex-direction: column; align-items: flex-start; gap: .2em; font-size: clamp(1.75rem, 9vw, 2.5rem); }
  .module__arrow { display: inline-block; margin-left: .55em; transform: rotate(90deg); }
}

/* 03 How it's taught -------------------------------------------------------------------- */
.taught {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2.5rem, 5vw, 5rem) clamp(12px, 1.6vw, 24px);
  align-items: start;
}
.taught__film { grid-column: 1 / span 4; --offset: 16px; }
.taught__film-frame { margin-right: var(--offset); }
.taught__film figcaption { margin-top: calc(var(--offset) + .2rem); }
.taught__side { grid-column: 6 / -1; display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.formats { border-top: 1px solid var(--black); }
.formats__item {
  display: grid;
  padding-block: 1.25rem 1.35rem;
  border-bottom: 1px solid var(--rule);
}
.formats__name { font-family: var(--f-display); font-size: var(--fs-heading); line-height: 1.1; }
.taught__pair { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); align-items: start; }
.taught__mirror { grid-column: 1 / span 4; }
.taught__group { grid-column: 5 / span 3; margin-top: clamp(3rem, 8vw, 7rem); }
.taught__mirror img { object-position: 40% 30%; }
.taught__group img { object-position: 50% 40%; }
.taught__circle { grid-column: 1 / span 7; }
.taught__one { grid-column: 8 / span 5; margin-top: clamp(3rem, 10vw, 9rem); }
@media (max-width: 899.98px) {
  .taught { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .taught__film { grid-column: 1 / span 4; }
  .taught__side { grid-column: 1 / -1; }
  .taught__circle { grid-column: 1 / span 4; }
  .taught__one { grid-column: 3 / -1; margin-top: 0; }
}
@media (min-width: 560px) and (max-width: 899.98px) {
  /* Tablet: the clip and the three formats side by side, photographs below. */
  .taught__side { display: contents; }
  .taught__film { grid-column: 1 / span 3; grid-row: 1; }
  .formats { grid-column: 4 / -1; grid-row: 1; align-self: end; margin-bottom: 2.5rem; }
  .taught__pair { grid-column: 1 / -1; }
}
@media (max-width: 559.98px) {
  .taught__film { grid-column: 1 / span 5; }
  .taught__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .taught__mirror { grid-column: 1; }
  .taught__group { grid-column: 2; margin-top: 3rem; }
  .taught__circle { grid-column: 1 / -1; }
  .taught__one { grid-column: 2 / -1; }
}

/* 04 Pageant ------------------------------------------------------------------------------ */
.pageant {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}
.pageant__media { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding-left: clamp(0rem, 3vw, 3rem); }
.pageant__main { grid-column: 1 / span 5; grid-row: 1; }
.pageant__main img { object-position: 50% 30%; }
.pageant__second { position: relative; z-index: 2; grid-column: 3 / -1; grid-row: 2; margin-top: clamp(-7rem, -9vw, -4rem); margin-right: calc(-1 * clamp(0rem, 3vw, 3rem)); }
.pageant__second .frame { outline: 10px solid var(--black); }
.acad-pageant .pageant__second figcaption { display: grid; gap: .15rem; margin-top: 10px; color: var(--mist); } /* not Concrete: the caption is under 15px */
.pageant__vertical {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  letter-spacing: .4em;
  text-transform: uppercase;
  transform: rotate(180deg);
}
.pageant__copy { display: grid; gap: 1.5rem; justify-items: start; }
.pageant__copy .section-head__index { padding-top: 0; margin-bottom: .5rem; }
.pageant__copy .lede { color: var(--mist); max-width: 52ch; }
.pageant__creds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem clamp(1.5rem, 3vw, 3rem);
  width: 100%;
  margin-block: .75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.pageant__cred { display: grid; gap: 1rem; align-content: start; }
.pageant__cred [lang] { word-break: keep-all; overflow-wrap: anywhere; }
.pageant__copy .lede [lang] { white-space: nowrap; }
.pageant__name { font-family: var(--f-display); font-size: 1.75rem; line-height: 1; letter-spacing: .04em; }
.pageant__name [lang] { margin-left: .4em; font-size: .55em; letter-spacing: .12em; vertical-align: .3em; color: var(--mist); }
.pageant__note { max-width: 52ch; color: var(--mist); }
@media (min-width: 900px) and (max-width: 1099.98px), (max-width: 559.98px) {
  .pageant__creds { grid-template-columns: 1fr; }
}
@media (max-width: 899.98px) {
  .pageant { grid-template-columns: 1fr; }
  .pageant__media { max-width: 34rem; }
  .pageant__copy { order: -1; }
}
@media (max-width: 559.98px) {
  .pageant__media { padding-left: 2.25rem; }
  .pageant__second { margin-right: 0; margin-top: -3.5rem; grid-column: 2 / -1; }
  .pageant__second .frame { outline-width: 6px; }
}

/* Closing CTA: a framed backstage still (shared .cta-band--framed) ------------------------- */
.acad-cta .cta-band__frame { max-width: 25rem; }
.acad-cta .frame img { object-position: 30% 40%; }

/* Bilingual (EN + 简体中文) ----------------------------------------------------------------- */
.acad-hero__copy { grid-template-columns: minmax(0, 1fr); }
.acad-hero__intro.zh-p { max-width: 27em; font-size: .9375rem; line-height: 1.75; margin-top: -.55rem; }
.acad-hero__title .zh-sub { margin-top: .35em; }
.acad-hero__alt .zh-sub { font-size: 1rem; letter-spacing: .12em; margin-top: .6em; }
.page-academy span.zh-p { display: block; }
.page-academy main .zh-i { white-space: nowrap; } /* short labels: never split 色彩 / 测试 */
.module__out span.zh-p { margin: .25em 0 0; font-size: 1rem; line-height: 1.6; letter-spacing: .04em; }
.module__out .zh-i { font-size: 1.07em; margin-left: .55em; }
.module__arc-cn {
  font-family: var(--f-cn);
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  letter-spacing: .14em;
  line-height: 1.5;
  color: var(--mist);
}
.module__arc-cn .module__arrow { margin-inline: .35em; font-size: .8em; }
.module--finale > .module__arc-cn { grid-column: 2; margin-top: -1rem; }
.sequence__word .zh-sub { font-size: clamp(1rem, 1.4vw, 1.25rem); letter-spacing: .3em; margin-top: .6em; opacity: .7; }
.formats__name .zh-sub { font-size: clamp(1rem, 1.3vw, 1.125rem); }
.acad-pageant .pageant__second figcaption span.zh-p { font-size: 1em; margin: 0; }
.pageant__copy .lede.zh-p { white-space: normal; margin-top: -.75rem; }
.pageant__copy .pageant__note.zh-p { margin-top: -.75rem; }
.acad-modules .section-head__main .lede > [lang] { display: block; margin-top: .35em; font-family: var(--f-cn); }
@media (min-width: 900px) {
  /* The Chinese lines make the copy taller: tighten it so the h1 and the enquiry button
     still sit on the first screen of a laptop. */
  .acad-hero__copy { gap: 1.1rem; }
  .acad-hero__content { padding-bottom: clamp(2rem, 4.5vh, 3.5rem); }
  .acad-hero__actions { --cluster-gap: .6rem 2rem; padding-top: .2rem; }
  .acad-hero__intro, .acad-hero__intro.zh-p { max-width: none; }
}
@media (min-width: 900px) and (max-width: 1199.98px) {
  .acad-hero__alt { font-size: 1.0625rem; } /* "From first walk" stays on one line in the narrow aside */
}
@media (min-width: 900px) and (max-height: 820px) {
  .acad-hero__copy { gap: .9rem; }
  .acad-hero__lockup { margin-bottom: 0; }
  .acad-hero__content { padding-top: calc(var(--header-h) + .9 * var(--fs-hero-thin)); }
}
@media (max-width: 559.98px) {
  /* Bilingual buttons: keep them inside a phone column. */
  .page-academy main .btn { flex-wrap: wrap; padding-inline: 1.5em 1.3em; column-gap: .6em; }
  .page-academy main .btn .zh-i { margin-left: 0; letter-spacing: .06em; }
}
@media (max-width: 639.98px) {
  .module--finale > .module__arc-cn { grid-column: 1; margin-top: -.5rem; }
  .module__arc-cn .module__arrow { transform: none; margin-inline: .35em; } /* the Chinese arc stays on one line */
}