/* Homepage phone layout. Every rule is viewport-scoped so desktop stays unchanged. */
@media (max-width: 700px) {
  .home-page {
    --mobile-pad: 18px;
    --mobile-songti: STSong, "Songti SC", "Hiragino Mincho ProN", "YuMincho", "Noto Serif CJK SC", "Source Han Serif SC", SimSun, serif;
    overflow-x: hidden;
  }

  .home-page .header-inner,
  .home-page .page-width,
  .home-page .footer-inner {
    width: calc(100% - (var(--mobile-pad) * 2));
  }

  .home-page .header-inner {
    min-height: 56px;
    display: block;
    position: relative;
    padding-block: 10px;
  }

  .home-page .site-header .brand {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
  }

  .home-page .main-nav {
    width: auto;
    position: absolute;
    top: 50%;
    right: 0;
    margin: 0;
    transform: translateY(-50%);
    justify-content: flex-start;
    gap: 8px;
    overflow: visible;
  }

  .home-page .nav-link {
    flex: 0 0 auto;
    padding: 7px 0 6px;
    border-bottom-width: 2px;
    font-size: 0.6rem;
    white-space: nowrap;
  }

  .home-page .editorial-hero,
  .home-page[data-home-layout="b"] .editorial-hero {
    min-height: 0;
    display: block;
    position: relative;
    padding-block: 14px 36px;
  }

  .home-page .editorial-hero-media,
  .home-page[data-home-layout="b"] .editorial-hero-media {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    margin-inline: 0;
  }

  .home-page .hero-look--photo > img {
    object-fit: contain;
    object-position: center;
  }

  .home-page .editorial-hero-copy,
  .home-page[data-home-layout="b"] .editorial-hero-copy {
    width: min(54%, 210px);
    position: absolute;
    z-index: 5;
    top: 20px;
    right: auto;
    bottom: auto;
    left: 8px;
    margin: 0;
    padding: 8px 10px 10px 6px;
    background: linear-gradient(90deg, rgba(247, 243, 235, 0.86) 0%, rgba(247, 243, 235, 0.66) 76%, rgba(247, 243, 235, 0) 100%);
  }

  .home-page .editorial-hero-copy h1,
  .home-page[data-home-layout="b"] .editorial-hero-copy h1 {
    margin-bottom: 6px;
    font-family: var(--mobile-songti) !important;
    font-size: clamp(1.48rem, 7vw, 1.72rem);
    font-weight: 300;
    line-height: 1.04;
  }

  .home-page .editorial-hero-copy h1 em {
    white-space: normal;
  }

  .home-page .editorial-hero-copy p {
    max-width: 178px;
    margin-bottom: 6px;
    padding: 0;
    font-size: 0.57rem;
    line-height: 1.48;
  }

  .home-page .editorial-hero-copy .editorial-link {
    font-size: 0.62rem;
  }

  .home-page .hero-carousel-dots {
    bottom: 12px;
  }

  .home-page .editorial-section-heading h2,
  .home-page .featured-topic-copy h3 {
    font-family: var(--mobile-songti) !important;
    font-weight: 300;
  }

  .home-page .scene-scroll-shell {
    width: calc(100vw - var(--mobile-pad));
    margin-right: calc(var(--mobile-pad) * -1);
  }

  .home-page .scene-scroll-arrow {
    width: 36px;
    height: 36px;
    right: 8px;
    font-size: 1rem;
  }

  .home-page .scene-rail {
    gap: 8px;
  }

  .home-page .scene-rail-item {
    flex: 0 0 min(52vw, 190px);
  }

  .home-page .scene-rail-media {
    width: 100%;
    aspect-ratio: 4 / 5;
    background: transparent;
  }

  .home-page .scene-rail-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .home-page .featured-more-link {
    font-size: 0.72rem;
  }

  .home-page .site-footer {
    padding-block: 24px;
  }

  .home-page .footer-inner {
    gap: 8px;
    font-size: 0.75rem;
  }
}