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

/* Hero -------------------------------------------------------------------------
   LUOMU spirit: misty grey, giant thin ARTVERSE behind the founders' cut-outs.
   ≥1240px: one full-height stage with copy laid over it.
   900–1239px: split: figures on the right half of the stage, copy on the left, so the
   h1 and the enquiry button are on the first screen of a small laptop or iPad.
   <900px: the stage (word + figures) stacks above the copy.
   The Concrete veil starts clear under the header so VERSE never sits on mid-grey. */
.hero { position: relative; }
.hero__stage {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(62% 52% at 52% 74%, rgba(244, 244, 243, .95) 0%, rgba(244, 244, 243, 0) 72%),
    linear-gradient(180deg, rgba(139, 142, 146, 0) 0, rgba(139, 142, 146, .1) 80px, rgba(139, 142, 146, .34) 24%, rgba(139, 142, 146, .14) 45%, rgba(139, 142, 146, 0) 62%),
    var(--mist);
}
.hero__giant {
  /* The giant ARTVERSE is drawn exactly like the logo: Bodoni Moda 400, ART in ink, VERSE in Ember. */
  font-family: var(--f-display);
  font-weight: 400;
  font-variation-settings: normal;
  font-size: calc(var(--fs-hero-thin) * .86);
  letter-spacing: .02em;
  position: relative;
  z-index: 0;
  margin: 0;
  text-align: center;
  color: var(--black);
  user-select: none;
  pointer-events: none;
}
.hero__giant span { color: var(--ember); }
.hero__figures { position: relative; z-index: 1; pointer-events: none; }
.hero__figures img { position: absolute; bottom: 0; width: auto; max-width: none; }
.hero__pair { left: 0; height: 100%; }

.hero__copy { display: grid; gap: 1.6rem; justify-items: start; }
.hero__intro { max-width: 32ch; color: var(--graphite); font-size: var(--fs-lede); line-height: 1.65; }
.hero__actions { --cluster-gap: 1rem 2rem; padding-top: .4rem; }
.hero__name { display: grid; gap: .55rem; }
.hero__name-word {
  font-family: var(--f-display);
  font-size: clamp(2.75rem, 4.4vw, 4.25rem);
  line-height: .9;
  letter-spacing: .02em;
}
.hero__name-word [lang] { font-size: .3em; letter-spacing: .14em; margin-left: .3em; vertical-align: .55em; }
.hero__caption { display: none; font-family: var(--f-mono); font-size: .875rem; color: var(--graphite); }

@media (min-width: 1240px) {
  /* The giant word sits just under the header; the figures are anchored to the bottom.
     --fig-h is capped by the width so Goey never reaches the right-hand aside. */
  .hero {
    --hero-h: clamp(660px, min(100svh, calc(50vw + 180px)), 1100px);
    --edge: max(var(--gutter), calc((100vw - var(--max)) / 2));
    --aside-w: 15rem;
    --fig-h: min(calc(var(--hero-h) - var(--header-h) - .66 * var(--fs-hero-thin)), calc((50vw - var(--edge) - var(--aside-w)) * 1.9));
    min-height: var(--hero-h);
  }
  .hero__stage { position: absolute; inset: 0; }
  .hero__giant { position: absolute; left: 0; right: 0; top: calc(var(--header-h) - .02 * var(--fs-hero-thin)); }
  .hero__figures {
    position: absolute;
    bottom: 0;
    left: 50%;
    height: var(--fig-h);
    aspect-ratio: .984;
    transform: translateX(-32%);
  }
  .hero__name { position: absolute; z-index: 2; bottom: clamp(1.75rem, 4vh, 3rem); }
  .hero__name--nico { left: var(--edge); }
  /* At least 96px from the right edge so the WhatsApp button in the corner never covers the name. */
  .hero__name--goey { right: max(var(--edge), 96px); justify-items: end; text-align: right; }
  .hero__content {
    position: relative;
    z-index: 2;
    display: grid;
    align-content: start;
    min-height: var(--hero-h);
    padding-top: calc(var(--header-h) + .95 * var(--fs-hero-thin));
    padding-bottom: 9.5rem;
    pointer-events: none;
  }
  .hero__content a, .hero__content button { pointer-events: auto; }
  .hero__copy { max-width: 25rem; }
}
@media (min-width: 1240px) and (max-height: 800px) {
  .hero__copy { gap: 1.15rem; }
  .hero__copy .hairline-heading { display: none; }
  .hero__intro { font-size: 1rem; line-height: 1.6; }
  .hero__name-word { font-size: 3.25rem; }
}

@media (max-width: 1239.98px) {
  .hero__stage { padding-top: calc(var(--header-h) + 1vw); }
  .hero__figures {
    --fig-h: min(calc((100vw - 2 * var(--gutter)) / .984), 44rem, max(20rem, 68svh));
    height: var(--fig-h);
    aspect-ratio: .984;
    margin: calc(-.16 * var(--fs-hero-thin)) auto 0;
  }
  .hero__name { display: none; }
  .hero__caption { display: block; margin-bottom: -.75rem; }
  .hero__content {
    display: grid;
    gap: 2.5rem;
    padding-top: clamp(2.5rem, 7vw, 4rem);
    padding-bottom: 0;
  }
  .hero__intro { max-width: 40ch; }
}
@media (min-width: 900px) and (max-width: 1239.98px) {
  /* Split: the stage runs the full width; the figures stand in its right half and the
     copy sits in the left half, over the stage. */
  .hero { display: grid; grid-template-columns: minmax(0, 1fr); }
  .hero__stage { grid-row: 1; grid-column: 1; }
  .hero__figures {
    --fig-h: min(calc((56vw - var(--gutter)) / .984), 46rem, max(22rem, 68svh));
    margin-top: calc(-.1 * var(--fs-hero-thin));
    margin-left: auto;
    margin-right: max(var(--gutter), calc(25vw - .492 * var(--fig-h)));
  }
  .hero__content {
    grid-row: 1;
    grid-column: 1;
    align-self: end;
    position: relative;
    z-index: 2;
    padding-top: 0;
    padding-bottom: clamp(2rem, 5vh, 3.5rem);
  }
  .hero__caption { display: none; }
  .hero__copy { max-width: min(26rem, calc(50vw - 2 * var(--gutter))); gap: 1.25rem; }
  .hero__intro { font-size: 1rem; line-height: 1.6; }
}

/* Divisions ------------------------------------------------------------------- */
.divisions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--black);
}
.division {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1.1rem;
  padding: 1.75rem clamp(1rem, 1.8vw, 1.75rem) 2rem 0;
  min-width: 0;
}
.division + .division { padding-left: clamp(1rem, 1.8vw, 1.75rem); border-left: 1px solid var(--rule); }
.division__title { --lockup-size: clamp(1.25rem, 1.45vw, 1.5rem); }
.division__title .lockup { flex-wrap: wrap; row-gap: .5em; }
.division p { color: var(--graphite); font-size: .9688rem; line-height: 1.6; max-width: 38ch; }
.division .link-arrow { justify-self: start; margin-top: .5rem; }
@media (max-width: 1099.98px) {
  .divisions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .division:nth-child(3) { padding-left: 0; border-left: 0; }
  .division:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 639.98px) {
  .divisions { grid-template-columns: 1fr; }
  .division, .division + .division { padding: 1.75rem 0 2rem; border-left: 0; }
  .division + .division { border-top: 1px solid var(--rule); }
}

/* Film ------------------------------------------------------------------------ */
.film__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.film__copy { display: grid; gap: 1.5rem; justify-items: start; }
.film__copy .lede { color: var(--mist); }
.film__note { max-width: 46ch; }
.film__media {
  position: relative;
  justify-self: center;
  width: min(100%, calc(min(80vh, 46rem) * 9 / 16));
  min-width: min(100%, 17rem);
  --offset: 18px;
}
.film__frame { position: relative; aspect-ratio: 9 / 16; background: var(--black); outline: 1px solid var(--rule-on-dark); }
.film__frame video { width: 100%; height: 100%; object-fit: cover; }
.film__ring {
  position: absolute;
  z-index: 2;
  top: -2.6rem;
  left: -2.6rem;
  --ring-size: 5.5rem;
  --ring-color: var(--rule-strong);
  color: var(--white);
  background: var(--black);
}
.film__media figcaption { margin-top: 1.9rem; color: var(--mist); }
@media (max-width: 899.98px) {
  .film__grid { grid-template-columns: 1fr; }
  .film__media { width: min(100% - 2.5rem, 24rem); }
  .film__media { margin-top: 2.5rem; }
  .film__ring { top: -1.8rem; left: -1.2rem; --ring-size: 4.25rem; font-size: .75rem; }
}

/* Method ---------------------------------------------------------------------- */
.method { padding-top: 0; }
.method__inner { border-top: 1px solid var(--rule-on-dark); padding-top: var(--section-y); }
.method__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule-on-dark);
}
.method__foot p { color: var(--mist); max-width: 52ch; }

/* Founders teaser --------------------------------------------------------------- */
.founders-teaser__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(12px, 1.6vw, 24px);
}
.founder-card { display: grid; gap: 1.5rem; align-content: start; min-width: 0; }
.founder-card--goey { grid-column: 1 / span 5; }
.founder-card--nico { grid-column: 8 / span 5; margin-top: clamp(4rem, 12vw, 11rem); }
.founder-card__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--black);
}
.founder-card__name h3 {
  font-family: var(--f-display);
  font-size: var(--fs-display-xl);
  line-height: .86;
  letter-spacing: .02em;
}
.founder-card__name h3 [lang] { font-size: .22em; font-weight: 600; letter-spacing: .12em; margin-left: .25em; vertical-align: .9em; color: var(--graphite); }
.founder-card__role { font-family: var(--f-mono); font-size: .875rem; color: var(--graphite); }
.founder-card__media { position: relative; margin-right: clamp(1.5rem, 5vw, 4rem); }
.founder-card--nico .frame { margin: 0 0 0 clamp(1.5rem, 5vw, 4rem); }
.founder-card--goey img { object-position: 50% 30%; }
.founder-card--nico img { object-position: 50% 32%; }
.founder-card__ring {
  position: absolute;
  z-index: 1;
  top: clamp(2rem, 5vw, 4rem);
  right: calc(-.5 * var(--ring-size));
  --ring-size: clamp(6.5rem, 8.5vw, 8rem);
  --ring-color: var(--black);
  background: var(--gallery);
}
.founders-teaser__foot { display: flex; justify-content: flex-end; margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (max-width: 899.98px) {
  .founders-teaser__grid { grid-template-columns: 1fr; row-gap: 4rem; }
  .founder-card--goey, .founder-card--nico { grid-column: 1; margin-top: 0; }
  .founder-card__media, .founder-card--nico .frame { margin: 0; width: min(100%, 32rem); }
  .founder-card--nico .frame { margin-left: auto; }
  .founder-card__ring { top: auto; bottom: -1.75rem; right: -.25rem; --ring-size: 5.75rem; font-size: .75rem; }
  .founders-teaser__foot { justify-content: flex-start; }
}

/* In practice -------------------------------------------------------------------- */
.practice-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 3rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.practice-head .section-head { margin-bottom: 0; flex: 1 1 40rem; }
.practice-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 24px);
  align-items: start;
}
.practice-link { display: block; min-width: 0; text-decoration: none; color: inherit; }
.practice-link:nth-child(even) { margin-top: clamp(2rem, 5vw, 4.5rem); }
.practice-link .frame { transition: opacity .5s var(--ease); }
.practice-link:hover .frame { opacity: .88; }
.practice-link:hover figcaption b { text-decoration: underline; text-decoration-color: var(--ember); text-underline-offset: .3em; }
.practice-strip figcaption { display: grid; gap: .15rem; }
@media (max-width: 1099.98px) {
  .practice-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .practice-link:nth-child(even) { margin-top: 0; }
  .practice-link:nth-child(3n+2) { margin-top: 2.5rem; }
}
@media (max-width: 639.98px) {
  .practice-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.75rem; }
  .practice-link:nth-child(n) { margin-top: 0; }
  .practice-link:first-child { grid-column: 1 / -1; }
  .practice-link:first-child .frame { aspect-ratio: 3 / 2; }
}

/* Closing CTA ---------------------------------------------------------------------- */
/* (the shared .cta-band--framed pattern: a wide still, no cut-out) */
.home-cta .cta-band__frame { max-width: 36rem; }
.home-cta .frame img { object-position: 60% 50%; }

/* Bilingual copy (home) ------------------------------------------------------------- */
.division .zh-p, .method__foot .zh-p { display: block; margin-top: .45em; }

/* Hero: the Chinese intro tucks under the English one (smaller, tighter) so the buttons
   stay on the first screen at 1440x900 and 1024x700, and at 1440x900 the founders' names
   still sit inside the first screen. */
.hero__intro.zh-p { margin-top: -1rem; max-width: 27em; font-size: .9375rem; line-height: 1.75; letter-spacing: .03em; }
@media (min-width: 1240px) {
  .hero__content { padding-top: calc(var(--header-h) + .84 * var(--fs-hero-thin)); }
  .hero__copy { gap: 1.1rem; }
  .hero__copy .zh-sub { margin-top: .3em; }
  .hero__intro { line-height: 1.58; }
  .hero__intro.zh-p { margin-top: -.55rem; max-width: none; font-size: .875rem; line-height: 1.65; }
}
@media (min-width: 1240px) and (max-height: 800px) {
  .hero__intro.zh-p { margin-top: -.6rem; }
}
@media (min-width: 900px) and (max-width: 1239.98px) {
  .hero__intro.zh-p { margin-top: -.75rem; font-size: .875rem; }
}

/* Long links: English + arrow on the first line, the Chinese on its own line below
   (always in the narrow division columns; on phones for the other long links). */
.division .link-arrow { flex-wrap: wrap; column-gap: .9em; row-gap: .2em; }
.division .link-arrow::after { order: 1; }
.division .link-arrow .zh-i { order: 2; flex-basis: 100%; margin-left: 0; }
@media (max-width: 639.98px) {
  .home-cta .link-arrow { flex-wrap: wrap; column-gap: .9em; row-gap: .2em; }
  .home-cta .link-arrow::after { order: 1; }
  .home-cta .link-arrow .zh-i { order: 2; flex-basis: 100%; margin-left: 0; }
  /* The long programme name fills its own line; the Chinese and the arrow follow. */
  .method__foot .link-arrow { flex-wrap: wrap; column-gap: .9em; row-gap: .2em; }
  .method__foot .link-arrow .zh-i { margin-left: 0; }
}

/* Chinese ledes sit close under their English lede rather than a full grid gap away. */
.section-head__main .lede + .zh-p { margin-top: -.6rem; }
.film__copy .lede + .zh-p, .cta-band__copy .lede + .zh-p { margin-top: -.9rem; }
.film__note .zh-i { display: block; margin: .2em 0 0; }

/* Practice captions: each Chinese line sits under its English line (keeps words whole). */
.practice-strip figcaption .zh-i { display: block; margin-left: 0; }

/* Name tags on the founders photo, for widths where the big corner names are hidden. */
.hero__tag {
  position: absolute;
  bottom: 5%;
  z-index: 2;
  margin: 0;
  padding: .45em .85em .45em 1em;
  background: rgba(244, 244, 243, .9);
  font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .26em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--black);
  white-space: nowrap;
}
.hero__tag .zh-i { font-size: 1.25em; letter-spacing: .12em; margin-left: .5em; }
.hero__tag--nico { left: 6%; }
.hero__tag--goey { right: 4%; }
@media (min-width: 1240px) { .hero__tag { display: none; } }
@media (min-width: 900px) and (max-width: 1239.98px) {
  .hero__tag--goey { right: 14%; }   /* clear of the WhatsApp button in the corner */
}