.back-shop { justify-self: end; padding-bottom: 4px; border-bottom: 1px solid var(--ink); font-size: 11px; letter-spacing: .1em; }
.main-nav .active { border-color: var(--ink); }

.scene-hero { position: relative; height: min(58vw, 650px); min-height: 440px; overflow: hidden; background: #d8d0c5; }
.scene-hero::after { content: ""; position: absolute; inset: 0; background: rgba(18,17,14,.24); pointer-events: none; }
.scene-hero > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.scene-hero-copy { position: absolute; z-index: 1; left: 7vw; bottom: 70px; max-width: 660px; color: #fff; }
.scene-hero-copy span { font: 10px/1 Georgia, serif; letter-spacing: .22em; }
.scene-hero-copy h1 { margin: 13px 0 15px; font: 400 clamp(42px, 6vw, 78px)/1.05 "Songti SC", SimSun, serif; letter-spacing: .06em; }
.scene-hero-copy p { margin: 0; max-width: 520px; color: rgba(255,255,255,.78); font-size: 13px; line-height: 1.8; }

.scene-directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 76px 6vw 96px; background: #f5f2ed; }
.scene-directory a { position: relative; min-height: 430px; overflow: hidden; background: #ddd6cc; color: #fff; }
.scene-directory img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .55s ease; }
.scene-directory a:hover img { transform: scale(1.025); }
.scene-directory a::after { content: ""; position: absolute; inset: 45% 0 0; background: rgba(20,18,15,.62); }
.scene-directory span, .scene-directory strong, .scene-directory small { position: absolute; z-index: 1; left: 28px; }
.scene-directory span { bottom: 90px; font: 9px/1 Georgia, serif; letter-spacing: .2em; }
.scene-directory strong { bottom: 47px; font: 400 28px/1.2 "Songti SC", SimSun, serif; }
.scene-directory small { right: 28px; bottom: 25px; color: rgba(255,255,255,.7); font-size: 10px; }

.scene-section { scroll-margin-top: 76px; padding: 96px 7vw 110px; background: #fff; }
.outdoor-section { background: #ece7df; }
.scene-section-heading { max-width: 680px; margin: 0 auto 48px; text-align: center; }
.scene-section-heading span { color: var(--muted); font: 10px/1 Georgia, serif; letter-spacing: .2em; }
.scene-section-heading h2 { margin: 13px 0 14px; font: 400 clamp(36px, 5vw, 58px)/1.1 "Songti SC", SimSun, serif; letter-spacing: .06em; }
.scene-section-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.usage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px 22px; }
.usage-grid article { min-width: 0; border-bottom: 1px solid #cfc9c1; padding-bottom: 22px; }
.usage-grid img { width: 100%; aspect-ratio: 1.55; display: block; object-fit: cover; background: #e3ddd4; }
.usage-grid .focus-left img { object-position: left center; }
.usage-grid .focus-right img { object-position: right center; }
.usage-grid h3 { margin: 16px 0 7px; font: 400 19px/1.25 "Songti SC", SimSun, serif; }
.usage-grid p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.section-cta { display: block; width: max-content; margin: 48px auto 0; padding: 13px 24px; border: 1px solid var(--ink); font-size: 11px; letter-spacing: .12em; }
.section-cta:hover { background: var(--ink); color: #fff; }

@media (max-width: 820px) {
  .back-shop { font-size: 10px; }
  .scene-hero { height: 68vh; min-height: 480px; }
  .scene-hero-copy { left: 22px; right: 22px; bottom: 36px; }
  .scene-directory { grid-template-columns: 1fr; padding: 42px 16px 64px; }
  .scene-directory a { min-height: 300px; }
  .scene-section { padding: 68px 16px 78px; }
  .usage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 10px; }
}

@media (max-width: 520px) {
  .brand-cn { display: none; }
  .scene-hero { min-height: 430px; }
  .scene-hero > img { object-position: 60% center; }
  .scene-directory a { min-height: 250px; }
  .usage-grid { grid-template-columns: 1fr; }
}