/* Supplied 2026-10-19 logo. The frame + URL bar are one indivisible mark. */
img.lockup-logo {
  display: block;
  width: auto;
  height: 50px;
  aspect-ratio: 1200 / 952;
  object-fit: contain;
  flex: none;
}
.top img.lockup-logo { height: 52px; }
.nav.is-scrolled img.lockup-logo { height: 42px; }
.brandmark img.brand-full {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 1394;
  object-fit: contain;
}
.brandmark:has(.brand-full) { gap: 0; }
.foot-brand { width: 124px; }
.ab-mark { width: min(280px, 70%); }
@media (max-width: 960px) {
  .nav img.lockup-logo { height: 42px; }
  .nav.is-scrolled img.lockup-logo { height: 38px; }
}
@media (max-width: 760px), (max-width: 1100px) and (max-aspect-ratio: 5/6) {
  .top img.lockup-logo { height: 44px; }
}
@media (max-width: 480px) {
  .nav .lockup { gap: 10px; }
  .nav .lockup-name { padding-left: 10px; }
  .nav .lockup-name .zh { font-size: 12px; letter-spacing: .16em; margin-right: -.16em; }
  .nav .lockup-name .en { font-size: 7px; letter-spacing: .15em; }
}

/* The About hover visual contains a complete logo; never crop its URL bar. */
.scene[data-scene="about"] { bottom: 22%; }
.scene[data-scene="about"] img { object-fit: contain; object-position: right center; }
.scene[data-scene="about"].is-on { opacity: .9; }
.site[data-mode="about"] .caption { opacity: 0; }
@media (max-width: 960px) {
  .ab-mark { width: min(180px, 60%); }
}
@media (max-width: 760px), (max-width: 1100px) and (max-aspect-ratio: 5/6) {
  .scene[data-scene="about"] { top: 29%; bottom: 31%; }
}