:root {
  color-scheme: light;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html {
  min-width: 320px;
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-y: none;
}

body {
  min-width: 320px;
  font-size: max(14px, 0.875rem);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video {
  max-width: 100%;
}

img {
  content-visibility: auto;
}

.scroll-panel,
.ip-card,
.gallery-card,
.style-card {
  content-visibility: auto;
  contain-intrinsic-size: 1px 720px;
}

.video-card,
.duo-card,
.collection-video-page,
.style-video-wrap,
.profile-hero,
.hero-stage {
  position: relative;
}

.local-video-retry {
  position: absolute;
  z-index: 30;
  left: 50%;
  bottom: 18px;
  max-width: calc(100% - 28px);
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 999px;
  background: rgb(12 12 12 / 78%);
  color: #fff;
  font: 600 13px/1.25 Arial, "Microsoft YaHei", sans-serif;
  backdrop-filter: blur(8px);
  transform: translateX(-50%);
  cursor: pointer;
}

.mobile-page-nav {
  position: fixed;
  z-index: 999;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  display: none;
  gap: 8px;
}

.mobile-page-nav button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 50%;
  background: rgb(20 20 20 / 72%);
  color: #fff;
  font: 700 20px/1 Arial, sans-serif;
  box-shadow: 0 6px 24px rgb(0 0 0 / 24%);
  backdrop-filter: blur(8px);
}

/* Readable paragraph scale for the fixed-layout portfolio manuals. */
.profile-block p,
.space-contrast-card figcaption,
.manual-layout-copy {
  font-size: clamp(10px, 0.78cqw, 16px);
  line-height: 1.65;
}

.campaign-hero-wrap small,
.campaign-poster-wrap small {
  font-size: clamp(9px, 0.52cqw, 12px);
}

@media (max-width: 700px) {
  body {
    font-size: 16px;
    line-height: 1.6;
  }

  .intro,
  .side-label,
  .nav a,
  footer,
  .history-item p,
  .service-item p,
  .service-item > span,
  .ip-caption,
  .ip-copy span {
    font-size: clamp(13px, 3.5vw, 15px);
    line-height: 1.6;
  }

  .about-copy,
  .history-item h2,
  .service-item h2,
  .contact a {
    line-height: 1.35;
  }

  .style-copy--detail,
  .style-copy--new-year-detail,
  .style-copy--expo-detail,
  .style-copy--stylized-detail,
  .collection-copy--detail,
  .collection-copy--viral-detail,
  .other-story-copy {
    font-size: clamp(10px, 2.45vw, 13px);
    line-height: 1.5;
  }

  .profile-block p,
  .space-contrast-card figcaption,
  .manual-layout-copy {
    font-size: clamp(10px, 2.45vw, 13px);
    line-height: 1.5;
  }

  .mobile-page-nav {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}