:root {
  --paper: #f4f1e9;
  --ink: #292725;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { min-width: 1100px; margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); }
button, a { font: inherit; }

/* 封面沿用主作品集的米白底、浅色插画与超大英文排版。 */
.other-hero {
  position: relative;
  width: 100vw;
  min-width: 1100px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper);
}
.other-hero__base,
.other-hero__rabbits,
.other-hero__pony,
.other-hero__birds { position: absolute; display: block; user-select: none; pointer-events: none; }
.other-hero__base { inset: 0; width: 100%; height: 100%; object-fit: fill; }
.other-hero__rabbits { top: 3.75%; left: 50%; width: 12.65%; transform: translateX(-50%); }
.other-hero__pony { right: 5.2%; bottom: 16.2%; width: 34%; opacity: .4; }
.other-hero__birds { right: 1%; bottom: 7%; width: 34%; opacity: .3; }
.return-link,
.hero-copy,
.hero-caption,
.hero-display { position: absolute; z-index: 1; }
.return-link { top: 10.8%; left: 3%; color: #85827f; font-size: clamp(11px, .78vw, 15px); font-weight: 600; letter-spacing: .1em; text-decoration: none; transition: color .22s ease, transform .22s ease; }
.return-link:hover { color: #3b3834; transform: translateX(-5px); }
.hero-copy { top: 38.5%; left: 12.2%; color: #85827f; }
.hero-copy p { margin: 0 0 .7vw; font-size: clamp(10px, .82vw, 16px); letter-spacing: .16em; }
.hero-copy h1 { margin: 0; font-size: clamp(54px, 5.7vw, 108px); font-weight: 300; letter-spacing: .15em; line-height: .98; }
.hero-copy b { display: block; margin-top: 1.05vw; font-size: clamp(13px, 1.08vw, 21px); font-weight: 500; letter-spacing: .035em; }
.hero-caption { right: 6.1%; bottom: 7.6%; color: #898682; font-size: clamp(10px, .73vw, 14px); letter-spacing: .15em; }
.hero-display { bottom: -3.3vw; left: -1.2vw; margin: 0; color: rgba(154, 154, 147, .17); font-family: Arial, Helvetica, sans-serif; font-size: clamp(100px, 12.4vw, 248px); font-weight: 300; letter-spacing: -.075em; line-height: .8; white-space: nowrap; }

.work-section {
  --section-bg: #2b1c15;
  --section-ink: #f1dfbd;
  --section-muted: rgba(241, 223, 189, .68);
  --section-accent: #d9a866;
  position: relative;
  min-width: 1100px;
  padding: clamp(88px, 9.5vw, 174px) clamp(64px, 7.4vw, 142px) clamp(96px, 10vw, 182px);
  overflow: hidden;
  background: var(--section-bg);
  color: var(--section-ink);
}
.work-section::before { position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 8% 0, rgba(255,255,255,.06), transparent 31%); content: ""; pointer-events: none; }
.work-section__head,
.jinhua-gallery,
.mintai-grid,
.gubang-layout,
.yuhuang-content,
.anime-grid { position: relative; z-index: 1; max-width: 1820px; margin-inline: auto; }
.work-section__head { display: block; margin-bottom: clamp(66px, 7.2vw, 128px); }
.work-section__number { display: block; margin-bottom: .7vw; color: var(--section-accent); font-family: Georgia, serif; font-size: clamp(20px, 1.55vw, 30px); font-style: italic; letter-spacing: .05em; }
.work-section__title { margin: 0; font-size: clamp(36px, 3vw, 58px); font-weight: 600; letter-spacing: .045em; line-height: 1.12; }
.work-section__title-wrap { position: relative; display: inline-block; max-width: 100%; isolation: isolate; }
.work-section__title-wrap .work-section__title { position: relative; z-index: 1; }
.work-section__english { position: absolute; z-index: 0; left: .04em; bottom: -.53em; color: var(--section-accent); font-family: Arial, Helvetica, sans-serif; font-size: clamp(32px, 3.7vw, 76px); font-weight: 700; letter-spacing: .08em; line-height: 1; opacity: .16; pointer-events: none; white-space: nowrap; }

/* 原图按真实比例完整显示；悬停只做轻微抬升与放大。 */
.media-frame { position: relative; margin: 0; overflow: visible; background: transparent; opacity: 0; transform: translateY(24px); transition: opacity .55s ease, transform .46s cubic-bezier(.2,.8,.2,1), filter .42s ease; }
.media-frame.is-visible { opacity: 1; transform: translateY(0); }
.media-frame:hover { z-index: 2; filter: drop-shadow(0 22px 22px rgba(7, 5, 3, .23)); transform: translateY(-9px) scale(1.012); }
.media-frame:nth-child(3n + 2):hover { transform: translateY(-12px) scale(1.014); }
.media-frame:nth-child(3n):hover { transform: translateY(-7px) scale(1.01); }
.media-button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.media-button:focus-visible { outline: 2px solid var(--section-accent); outline-offset: 4px; }
.media-button img,
.motion-media video { display: block; width: 100%; height: auto; object-fit: contain; transition: transform .7s cubic-bezier(.18,.72,.22,1), filter .4s ease; }
.media-frame:hover img,
.media-frame:hover video { filter: saturate(1.025) brightness(1.025); transform: scale(1.01); }
.motion-media { display: block; width: 100%; height: 100%; }

/* 01 金华府：参考图的 3×2 均衡海报陈列。 */
.theme-jinhua { --section-bg: #2b160d; --section-ink: #f8e4ba; --section-muted: rgba(248, 228, 186, .72); --section-accent: #e8bd7a; }
.jinhua-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.5vw, 68px) clamp(24px, 3vw, 58px); }

/* 02 民泰：所有台历图等大，严格三列排列。 */
.theme-mintai { --section-bg: #662520; --section-ink: #fff7df; --section-muted: rgba(255,247,223,.78); --section-accent: #f3c783; }
.mintai-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 56px) clamp(18px, 2.5vw, 48px); }

/* 03 谷邦：商品图先规则排版，再以错落画面呈现品牌手册。 */
.theme-gubang { --section-bg: #eeeee9; --section-ink: #262522; --section-muted: rgba(38,37,34,.68); --section-accent: #8f7258; }
.theme-gubang::before { background: radial-gradient(circle at 92% 6%, rgba(187, 203, 212, .55), transparent 25%); }
.gubang-layout { display: grid; gap: clamp(74px, 9vw, 162px); }
.gubang-group { display: grid; gap: clamp(25px, 3vw, 56px); }
.gubang-group__title { margin: 0; color: var(--section-ink); font-size: clamp(18px, 1.5vw, 29px); font-weight: 600; letter-spacing: .08em; }
.gubang-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 54px); }
.gubang-manual { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 56px); align-items: start; }

/* 04 玉皇八号：三张同尺寸节日海报，上方一行，下方横幅满宽。 */
.theme-yuhuang { --section-bg: #2b1a12; --section-ink: #f2dbb3; --section-muted: rgba(242,219,179,.74); --section-accent: #da9a54; }
.yuhuang-content { display: grid; gap: clamp(48px, 5vw, 94px); }
.yuhuang-posters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 56px); }
.yuhuang-banner .media-frame { width: 100%; }

/* 05 二次元：两张周边大图等比并置。 */
.theme-anime { --section-bg: #163963; --section-ink: #f7f0dd; --section-muted: rgba(247,240,221,.76); --section-accent: #ef9271; }
.theme-anime::before { background: radial-gradient(circle at 20% 0, rgba(117, 158, 198, .28), transparent 29%); }
.anime-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 76px); }

.other-footer { display: flex; justify-content: space-between; gap: 24px; min-width: 1100px; padding: 25px clamp(36px, 7vw, 132px); background: #f4f1e9; color: #85817b; font-size: 10px; letter-spacing: .14em; }
.other-footer a { color: #65615b; text-decoration: none; transition: transform .2s ease; }
.other-footer a:hover { transform: translateY(-3px); }

.preview { position: fixed; z-index: 30; inset: 0; display: none; place-items: center; min-width: 1100px; padding: 44px; background: rgba(10, 8, 6, .95); }
.preview.is-open { display: grid; }
.preview-image { display: block; max-width: min(92vw, 1480px); max-height: 90vh; box-shadow: 0 24px 72px rgba(0,0,0,.6); }
.preview-close { position: fixed; top: 20px; right: 28px; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; font-size: 28px; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .media-frame { opacity: 1; transform: none; }
}