/* Existing dark editorial world: a compact, cover-led new catalogue desk. */
.home-r4 .home-company-desk .recommendation-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px}
.home-r4 .home-company-desk .recommendation-art{aspect-ratio:2/3;overflow:hidden;border-radius:12px}
.home-r4 .home-company-desk .recommendation-art img{display:block;width:100%;height:100%;object-fit:cover}
.home-r4 .home-company-desk h3{font-size:16px;line-height:1.5;min-height:3em;font-weight:600;text-wrap:pretty}
.home-r4 .home-company-desk a:focus-visible{outline:2px solid #f49eb9;outline-offset:5px;border-radius:12px}
.home-r4 .feature-art img{object-position:62% center}
@media(max-width:1199px){.home-r4 .home-company-desk .recommendation-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}}
@media(max-width:600px){.home-r4 .home-company-desk .recommendation-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}.home-r4 .home-company-desk h3{font-size:15px}.home-r4 .feature-art img{object-position:68% center}}

/* Keep responsive portrait originals inside the existing fixed hero composition. */
.home-r4 .feature-art{overflow:hidden;min-height:0}
.home-r4 .feature-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* This source image is split into a title plate and a character scene. */
.home-r4 .feature-slide[data-home-identity="work:异人旅馆2"] .feature-art img {
    inset: 0 0 0 auto;
    width: 200%;
    max-width: none;
    object-position: right 38% !important; /* Override the slide's inline focus. */
}

@media (min-width: 768px) {
    .home-r4 .feature-slide[data-home-identity="work:异人旅馆2"] .feature-art {
        left: 48%;
        mask-image: linear-gradient(90deg, transparent, currentColor 24%);
    }

    .home-r4 .feature-slide[data-home-identity="work:异人旅馆2"]::after {
        background: linear-gradient(90deg, var(--bg) 47%, rgb(23 28 42 / 68%) 53%, transparent 66%);
    }
}

@media (max-width: 767px) {
    .home-r4 .feature-slide[data-home-identity="work:异人旅馆2"] .feature-art {
        aspect-ratio: 1.7;
    }
}

/* Keep an opaque backdrop behind each frame during the GSAP dissolve. */
.home-r4 .feature-slide {
  background: var(--bg);
}

.home-r4 .feature-slide[data-home-identity="work:异人旅馆2"] .feature-art img {
  object-position: right 26% !important;
}

@media (min-width: 768px) {
  .home-r4 .feature-slide[data-home-identity="work:异人旅馆2"] {
    background: radial-gradient(ellipse at 71% 50%, #483331, transparent 61%), var(--bg);
  }

  .home-r4 .feature-slide[data-home-identity="work:异人旅馆2"] .feature-art {
    left: auto;
    width: min(63%, 590px);
    mask-image: linear-gradient(90deg, transparent, currentColor 16%);
  }

  .home-r4 .feature-slide[data-home-identity="work:异人旅馆2"]::after {
    background:
      linear-gradient(90deg, var(--bg) 22%, rgb(23 28 42 / 94%) 32%,
        rgb(23 28 42 / 64%) 45%, transparent 64%),
      linear-gradient(0deg, rgb(23 28 42 / 32%), transparent 35%);
  }
}

@media (max-width: 767px) {
  .ui-refinement.home-r4 [data-hero] .feature-stage {
    min-block-size: calc(79.365vw + 244px);
  }

  .home-r4 .feature-slide[data-home-identity="work:异人旅馆2"] .feature-art {
    aspect-ratio: 1.26;
  }

  .home-r4 .feature-slide[data-home-identity="work:异人旅馆2"] .feature-art::after {
    position: absolute;
    inset: 90% 0 0;
    background: linear-gradient(transparent, var(--bg));
    content: "";
    pointer-events: none;
  }
}

@media (max-width: 359px) {
  .ui-refinement.home-r4 [data-hero] .feature-stage {
    min-block-size: calc(79.365vw + 270px);
  }
}

.home-r4 .home-swipe-entry {
  display: flex;
  justify-content: flex-end;
  padding: 6px clamp(16px, 3vw, 48px);
}
.home-r4 .home-swipe-entry a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0 14px;
  border: 1px solid #dc85a2;
  border-radius: 8px;
  color: #ffe0eb;
  background: #27202e;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}
.home-r4 .home-swipe-entry a:focus-visible { outline: 2px solid #f49eb9; outline-offset: 3px; }
.home-r4 section:has(>.home-guide-link)>.section-heading{margin-bottom:4px}
.home-r4 .home-guide-link{margin:0 0 12px}
.home-r4 .home-guide-link .text-link{text-decoration:underline;text-underline-offset:3px}
.home-r4 .home-guide-link .text-link svg{flex:none}


.editorial-entry,.work-detail { color:#eef2fc; color-scheme:dark; }
.editorial-entry *, .work-detail * { box-sizing:border-box; }
.editorial-entry { font:inherit; max-width:1320px; margin:0 auto 36px; padding:clamp(16px,3vw,36px); border:1px solid #354056; border-radius:20px; background:#141b2a; }
.editorial-entry h2 { color:#f4f6fc; margin:0 0 8px; font-size:clamp(23px,3vw,36px); }
.editorial-entry p { color:#c9d1e2; margin:0; line-height:1.65; }
.editorial-entry ul, .work-detail ul { list-style:none; padding:0; margin:0; }
.editorial-entry .entry-links, .editorial-entry .work-links { display:grid; gap:12px; margin-top:16px; }
.editorial-entry .entry-links { grid-template-columns:repeat(2,minmax(0,1fr)); }
.editorial-entry .work-links { grid-template-columns:repeat(3,minmax(0,1fr)); }
.editorial-entry a { display:block; height:100%; padding:14px 16px; border:1px solid #404d65; border-radius:12px; background:#1e293e; color:#fff; text-decoration:none; line-height:1.4; overflow-wrap:anywhere; }
.editorial-entry a:hover,.editorial-entry a:focus-visible { border-color:#e9a4c1; }
.editorial-entry a span { display:block; margin-top:4px; font-size:.875rem; color:#c7d2e8; }
.editorial-entry .work-links a { background:#182132; }
.editorial-entry h3 { margin:22px 0 0; color:#fff; font-size:1.05rem; }
.editorial-work { margin:0; background:#101622; font:16px/1.7 system-ui,"Microsoft YaHei",sans-serif; }
.work-detail { max-width:980px; margin:auto; padding:clamp(16px,5vw,60px); }
.work-detail a { color:#f1a9c8; text-underline-offset:.22em; }
.work-detail nav { margin-bottom:24px; color:#c7d2e8; display:flex; flex-wrap:wrap; gap:8px; }
.work-detail h1 { color:#f8f9fe; margin:0; font-size:clamp(29px,5vw,51px); line-height:1.18; overflow-wrap:anywhere; }
.work-detail h2 { color:#f8f9fe; margin:0 0 6px; font-size:1.2rem; }
.work-detail p { margin:0 0 12px; color:#dce3f2; }
.work-detail .kind { margin-bottom:8px; color:var(--accent); font-weight:700; }
.work-detail .lead { margin:14px 0 20px; font-size:1.08rem; }
.work-detail figure { margin:0; }
.work-detail figure svg { display:block; width:100%; height:auto; border:1px solid #354056; border-radius:14px; background:#182234; }
.work-detail figcaption { color:#bec9df; font-size:.9rem; padding-top:6px; }
.work-detail dl { background:#182234; margin:24px 0; padding:10px 16px; border-radius:14px; }
.work-detail dl div { display:grid; grid-template-columns:minmax(88px,.27fr) 1fr; gap:10px; padding:10px 0; border-bottom:1px solid #37445c; }
.work-detail dl div:last-child { border-bottom:0; }
.work-detail dt { font-weight:700; }
.work-detail dd { margin:0; overflow-wrap:anywhere; }
.work-detail section { margin:20px 0; }
.work-detail li { margin-bottom:8px; }
.work-detail footer { padding-top:14px; border-top:1px solid #37445c; color:#c7d2e8; }
@media(max-width:620px) {
  .editorial-entry .entry-links,.editorial-entry .work-links { grid-template-columns:minmax(0,1fr); gap:8px; }
  .editorial-entry a { padding:11px 13px; }
  .work-detail dl div { display:block; }
  .work-detail dd { margin-top:2px; }
}