/* One continuous paper canvas, with sparse accents and a blended hero photograph. */
.home-page { position:relative; isolation:isolate; background:#fffdfa; }
.home-page::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url('/assets/japan-sakura-watercolor.webp'),url('/assets/japan-fuji-watercolor.webp');
  background-size:1400px auto,1300px auto;
  background-position:right -140px top 60px,left -180px bottom -70px;
  background-repeat:no-repeat; opacity:.17; mix-blend-mode:multiply;
}
.home-page>main,.home-page>.site-header,.home-page>.site-footer { position:relative; z-index:1; }
.home-page .site-header { background:transparent; box-shadow:none; }
.home-page main,.home-page .hero,.home-page .section,.home-page .section.mist,
.home-page .cta-band,.home-page .site-footer { background:transparent; }
.home-page #su-kien,.home-page #truong,.home-page #trao-doi,.home-page #cau-chuyen,
.home-page #chuong-trinh,.home-page #don-vi,.home-page #cau-hoi { background:transparent; }
.home-page .hero::before,.home-page .hero::after,
.home-page .section::before,.home-page .section::after,
.home-page .cta-band::before,.home-page .cta-band::after { content:none; }
.home-page .hero { position:relative; isolation:isolate; padding-top:76px; padding-bottom:88px; overflow:hidden; }
.home-page .hero-grid { position:relative; z-index:2; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); align-items:center; gap:clamp(42px,5vw,72px); }
.home-page .hero-grid>div { grid-column:1; }
.home-page .hero-title { max-width:660px; font-size:clamp(40px,3.45vw,52px); line-height:1.2; }
.home-page .hero-title>span { display:block; }
.home-page .hero-title-school { text-wrap:balance; }
.home-page .hero-title-location { white-space:nowrap; }
.home-page .hero .lead { max-width:570px; margin-top:23px; margin-bottom:22px; font-size:16px; }
.home-page .hero-art {
  position:absolute; z-index:1; top:0; right:0; bottom:0; left:auto;
  width:min(62vw,1050px); height:100%; max-width:none; min-height:0; margin:0;
  pointer-events:none; mix-blend-mode:multiply;
}
.home-page .hero-art img {
  display:block; width:100%; height:100%; max-width:none; aspect-ratio:auto;
  object-fit:cover; object-position:center 42%; border:0; border-radius:0; box-shadow:none;
  mask-image:linear-gradient(to right,transparent 0%,#000 17%),linear-gradient(to bottom,transparent 0%,#000 5%,#000 78%,transparent 100%);
  mask-composite:intersect;
}
.home-page .hero-caption {
  position:absolute; right:clamp(24px,6vw,94px); bottom:20px;
  display:block; margin:0; padding:0; border:0; background:transparent; box-shadow:none;
  color:#68758b; font-size:10px; line-height:1.5; text-align:right;
}
@media (min-width:901px) and (max-width:1100px) {
  .home-page .hero { padding-top:62px; padding-bottom:74px; }
  .home-page .hero-grid { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:36px; }
  .home-page .hero-title { font-size:clamp(34px,4vw,43px); }
  .home-page .hero .lead { font-size:15px; }
  .home-page .hero-art { width:62%; }
}
@media (max-width:900px) {
  .home-page .hero { padding-top:42px; padding-bottom:12px; }
  .home-page .hero-grid { display:block; }
  .home-page .hero-grid>div { max-width:680px; }
  .home-page .hero-title { max-width:680px; font-size:clamp(31px,5.6vw,42px); line-height:1.23; }
  .home-page .hero-title>span { display:inline; }
  .home-page .hero .lead { max-width:580px; margin-top:17px; margin-bottom:18px; font-size:15px; }
  .home-page .hero-art {
    position:relative; inset:auto; z-index:1; width:100%; height:clamp(280px,62vw,430px);
    max-width:none; margin:12px 0 0; min-height:0;
  }
  .home-page .hero-art img {
    height:100%; aspect-ratio:auto; object-fit:cover; object-position:center 38%; border:0;
    mask-image:linear-gradient(to bottom,transparent 0%,#000 9%,#000 77%,transparent 100%);
    mask-composite:add;
  }
  .home-page .hero-caption { right:28px; bottom:8px; font-size:9px; }
}
@media (max-width:540px) {
  .home-page::before {
    background-size:900px auto,900px auto;
    background-position:right -460px top 210px,left -400px bottom -40px;
    opacity:.13;
  }
  .home-page .hero { padding-top:34px; }
  .home-page .hero-title { font-size:clamp(30px,8.1vw,38px); }
  .home-page .hero-art { height:285px; margin-top:4px; }
  .home-page .hero-caption { right:18px; bottom:8px; }
}