/* Resend reference: black canvas, quiet boundaries and deliberate exhibit scale.
   All photography and project artwork belong to this portfolio. */
:root {
  --bg: #000000;
  --bg-1: #080808;
  --bg-2: #101010;
  --bg-3: #181818;
  --text: #f0f0f0;
  --text-2: #acadaf;
  --text-3: #96989b;
  --line: #292d30;
  --line-soft: #1b1d1f;
  --line-strong: #373a3d;
  --signal: #b8a8ed;
  --signal-soft: rgb(184 168 237 / 0.24);
  --r: 6px;
  --r-tile: 8px;
  --shell: 1440px;
  --gallery-gap: clamp(18px, 2vw, 32px);
}
.site-header { background: rgb(0 0 0 / 0.88); }
.header-cta { border-radius: var(--r); }
.hero-cta { min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(#171717, #0d0d0d); }
.hero-cta:hover { background: #1c1c1c; border-color: #565a5d; }
.scroll-progress { background: var(--signal); }
.site-nav a[aria-current] { color: var(--text); }
.art:hover img { filter: none; }
.art::after { content: ""; position: absolute; inset: 0; border: 1px solid rgb(255 255 255 / 0.08); border-radius: inherit; pointer-events: none; transition: border-color 0.2s ease; }
.art:hover::after { border-color: rgb(255 255 255 / 0.25); }
.hero { padding-top: calc(var(--head-h) + 28px); gap: 32px; }
.hero-top { grid-template-columns: minmax(0, 0.95fr) minmax(0, 0.9fr) minmax(0, 1fr); align-items: center; gap: 32px; }
.hero-type { min-width: 0; }
.hero-name { display: grid; gap: 12px; }
.hero-en { font-size: 14px; letter-spacing: 0.24em; }
.hero-top > .light-sculpture { width: 100%; height: 160px; max-width: 380px; justify-self: center; }
.hero-intro { display: grid; justify-items: start; gap: 18px; padding: 0; }
.hero-lede { max-width: 28ch; text-wrap: pretty; }
.hero-stage { gap: 28px 24px; height: clamp(360px, 48vh, 540px); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.hero--video {
  --hero-top-gap: 14px;
  max-width: none;
  padding: calc(var(--head-h) + var(--hero-top-gap)) 0 0;
}
.hero-film {
  position: relative;
  /* Keep the complete 16:9 frame inside both viewport dimensions. */
  width: min(100%, calc((100svh - var(--head-h) - var(--hero-top-gap)) * 1.7777778));
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 0;
  background: #0d0d0f;
}
.hero-film > video { display: block; width: 100%; height: 100%; object-fit: contain; }
/* The cover ships no still frame: the plate holds the nameplate and the film
   fades in as soon as it can play, so the page never opens on a frozen image
   that differs from the film's own first shot. */
.js .hero-film > video { opacity: 0; transition: opacity 520ms ease; }
.js .hero-film > video.is-film-live { opacity: 1; }
.hero-film__play { position: absolute; right: 16px; bottom: 16px; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #aaa; border-radius: var(--r); color: #fff; background: #171717; }
.hero-film__play[hidden] { display: none; }
.hero-film__play .icon { width: 20px; height: 20px; }
.hero-film__fallback { position: absolute; inset: auto 16px 16px auto; padding: 12px 16px; color: #fff; background: #171717; border-radius: var(--r); }
/* Keep the existing nameplate within the complete video frame. */
.hero-film__plate {
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
  display: grid;
  gap: 10px;
  padding: clamp(28px, 5vw, 84px) clamp(20px, 5vw, 72px) clamp(30px, 4.6vw, 64px);
  background: linear-gradient(to top, rgb(10 11 12 / 0.86) 0%, rgb(10 11 12 / 0.5) 42%, transparent 100%);
  pointer-events: none;
}
.hero-film__name {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: clamp(30px, 4.6vw, 68px);
  font-weight: var(--w-display);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--text);
  font-feature-settings: "palt" 1;
}
.hero-film__name em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.34em;
  color: rgb(255 255 255 / 0.72);
  align-self: end;
  padding-bottom: 0.5em;
  margin-left: 4px;
}
/* A hairline above the nameplate ties it to the film's edge without a box. */
.hero-film__plate::before {
  content: "";
  position: absolute;
  inset: 0 clamp(20px, 5vw, 72px) auto;
  height: 1px;
  background: rgb(255 255 255 / 0.22);
}
.hero-film__role {
  font-size: clamp(11px, 1.05vw, 14px);
  letter-spacing: 0.14em;
  color: var(--text-2);
}
.hero-film__meta {
  position: absolute;
  inset: clamp(14px, 2vw, 26px) clamp(20px, 5vw, 72px) auto;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgb(255 255 255 / 0.55);
  pointer-events: none;
}
@media (max-width: 820px) {
  .hero-film__meta { display: none; }
  .hero-film__plate { padding: 26px 20px 28px; }
}

.hero-work { outline: 1px solid rgb(255 255 255 / 0.07); outline-offset: -1px; }
.stage-cap > .icon { transition: transform 280ms var(--ease), color 280ms ease; }
.hero-stage figure:has(.hero-work:hover) .stage-cap > .icon { transform: translate(3px, -3px); color: var(--text); }
/* The light stays on the frame so the artwork keeps its own colors. */
.art::before, .hero-work::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, #d5d9df, transparent) 0 0 / 140px 1px no-repeat,
              linear-gradient(0deg, transparent, #a0a7b1, transparent) 0 0 / 1px 140px no-repeat;
  opacity: 0;
  transition: opacity 240ms ease, background-position 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) and (pointer: fine) {
  .art:hover::before, .hero-work:hover::before { opacity: 1; background-position: 100% 0, 0 100%; }
}
.art:focus-visible::after { border-color: #d5d9df; }
.chapter-label::before, .chapter-label::after { content: ""; position: absolute; inset: -1px 0 auto; height: 1px; pointer-events: none; }
.chapter-label::before { background: #a0a6ad; transform: scaleX(var(--draw, 1)); transform-origin: left; opacity: 0.5; }
.chapter-label::after { background: linear-gradient(90deg, transparent 35%, #eff1f5 50%, transparent 65%); background-size: 220% 100%; background-position: calc(130% - var(--line-pass, 1) * 260%) 0; opacity: calc(1 - var(--line-pass, 1)); }
.zone-block + .zone-block { margin-top: clamp(40px, 5vw, 72px); }
.b-arrangement { display: grid; gap: clamp(40px, 5.5vw, 80px); }
.arrangement-row {
  display: grid;
  grid-template-columns: var(--tracks, repeat(2, minmax(0, 1fr)));
  align-items: start;
  gap: var(--gallery-gap);
  --row-fraction: 1;
  width: calc((100% + var(--gallery-gap)) * var(--row-fraction) - var(--gallery-gap));
  margin-inline: auto;
  min-width: 0;
}
.arrangement-row > * { min-width: 0; }
.arrangement-row .art, .arrangement-row .plate-cap { max-width: min(100%, var(--native-width, 1600px)); margin-inline: auto; }
.arrangement-row--stack { align-items: center; }
.arrangement-stack { display: grid; align-content: center; gap: clamp(24px, 3vw, 44px); min-width: 0; }
.arrangement-row--music { max-width: 1000px; }
.b-arrangement--ip-old .arrangement-row, .b-arrangement--ip-orchard .arrangement-row { align-items: center; }
.b-arrangement--goods-all { gap: clamp(44px, 6vw, 88px); }
.b-arrangement--goods-all .arrangement-row { align-items: center; }
.b-arrangement--joy-people { gap: clamp(36px, 4vw, 64px); }
.b-arrangement--joy-people .arrangement-row { max-width: 1160px; }
.b-arrangement--xc-ops { gap: 36px; }
.b-arrangement--xc-ops .arrangement-row { margin-inline: 0; }
/* 中国故事：主屏幕优先，滚动演讲背景作为较小的辅助展示。 */
[data-zone="ev-china"] .b-arrangement--motion .arrangement-row {
  grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
  align-items: center;
}
[data-zone="ev-china"] .poster-strip--landscape .plate {
  --h: clamp(96px, 11vw, 168px);
}
[data-zone="ev-china"] .poster-strip--landscape .plate:nth-child(3n + 2) {
  --h: clamp(82px, 9vw, 140px);
  padding-top: clamp(8px, 0.9vw, 14px);
}
[data-zone="ev-china"] .poster-strip--landscape .plate:nth-child(3n) {
  --h: clamp(90px, 10vw, 154px);
}
@media (max-width: 620px) {
  [data-zone="ev-china"] .b-arrangement--motion .arrangement-row {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-zone="ev-china"] .b-arrangement--motion .plate + .plate {
    width: 70%;
    justify-self: center;
  }
}
.b-stage { grid-template-columns: var(--stage-columns, minmax(0, 7fr) minmax(0, 5fr)); gap: var(--gallery-gap); }
.plate-row--companions { margin-top: 32px; }
.plate-row--companions:has(> .plate:only-child) { max-width: 880px; margin-inline: auto; }
/* 万人会议：四张同一宽度，不再让第一张单独铺满 */
[data-zone="ev-meeting"] .b-lead.is-bleed {
  margin-inline: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gallery-gap);
  align-items: start;
}
[data-zone="ev-meeting"] .b-lead .plate--full {
  width: auto;
  max-width: none;
}
[data-zone="ev-meeting"] .plate-row--companions {
  display: contents;
  margin-top: 0;
  max-width: none;
}
@media (max-width: 960px) {
  [data-zone="ev-meeting"] .b-lead.is-bleed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  [data-zone="ev-meeting"] .b-lead.is-bleed { grid-template-columns: minmax(0, 1fr); }
}
/* 书香校园：大主视觉，下方桌牌作为小幅辅助图。 */
[data-zone="ev-campus"] .plate-row--companions:has(> .plate:only-child) {
  width: min(100%, 240px);
}
@media (min-width: 821px) {
  [data-zone="ev-campus"] .b-lead .plate--full {
    width: 80%;
    max-width: 1120px;
  }
}
@media (max-width: 620px) {
  [data-zone="ev-campus"] .plate-row--companions:has(> .plate:only-child) {
    width: min(100%, 180px);
  }
}
.b-volumes { display: grid; gap: clamp(64px, 8vw, 112px); }
.book-volume { min-width: 0; }
.volume-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 32px; }
.volume-head h4 { font-size: 22px; font-weight: var(--w-head); letter-spacing: -0.02em; }
.volume-head > span { font-size: 12px; color: var(--text-3); }
.b-fold { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 40px var(--gallery-gap); }
.b-fold > .plate { grid-column: span 2; }
.b-fold > .plate:only-child { grid-column: 1 / -1; }
@media (min-width: 821px) {
  .b-fold > .plate:nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; }
  .b-fold > .plate:last-child:nth-child(3n + 2) { grid-column: 4 / span 2; }
  .b-fold > .plate:last-child:nth-child(3n + 1):not(:only-child) { grid-column: 3 / span 2; }
}
/* 无忧长图战报与工会比赛：四列紧凑预览，原图仍可点开纵向阅读。
   工会比赛五张，单独排成一行五个。 */
#wuyou [data-zone="joy-long"] .b-fold,
#wuyou [data-zone="joy-guild"] .b-fold {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px var(--gallery-gap);
}
#wuyou [data-zone="joy-guild"] .b-fold {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
#wuyou [data-zone="joy-long"] .b-fold > .plate,
#wuyou [data-zone="joy-guild"] .b-fold > .plate {
  grid-column: auto;
  width: 100%;
  max-width: none;
  justify-self: stretch;
}
/* The window height lives in style.css (--fold-h: 400px) so 长图战报 and
   工会比赛 share it; this sheet only arranges the four columns. */
@media (max-width: 820px) {
  #wuyou [data-zone="joy-long"] .b-fold,
  #wuyou [data-zone="joy-guild"] .b-fold {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px var(--gallery-gap);
  }
}
@media (max-width: 960px) {
  .hero-top { grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.75fr) minmax(0, 1.15fr); gap: 24px; }
  .hero-top > .light-sculpture { height: 144px; }
  .hero-stage { gap: 24px 16px; }
  .arrangement-row { gap: 20px; }
  .b-stage { grid-template-columns: var(--stage-columns, minmax(0, 7fr) minmax(0, 5fr)); }
}
@media (max-width: 820px) {
  .hero-top { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 20px 32px; }
  .hero-intro { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 32px; }
  .hero-lede { max-width: 38ch; }
  .b-fold { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-fold > .plate { grid-column: auto; }
  .b-fold > .plate:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: calc((100% - 20px) / 2); justify-self: center; }
  .b-fold > .plate:only-child { max-width: 760px; width: 100%; }
  .b-stage { grid-template-columns: minmax(0, 1fr); }
  .book-volume--uk .arrangement-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  :root { --gallery-gap: 16px; }
  .b-arrangement { gap: 36px; }
  .arrangement-row, .arrangement-row--stack { grid-template-columns: minmax(0, 1fr); gap: 28px; width: 100%; }
  .arrangement-stack { gap: 28px; }
  .b-arrangement--joy-people .arrangement-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .b-arrangement--joy-people .arrangement-row > .plate:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: calc((100% - 16px) / 2); justify-self: center; width: 100%; }
  .b-arrangement--motion .arrangement-row { gap: 32px; }
  .volume-head { margin-bottom: 24px; padding-bottom: 16px; }
  .volume-head h4 { font-size: 18px; }
  .b-fold { grid-template-columns: minmax(0, 1fr); }
  .b-fold > .plate:last-child:nth-child(odd), .b-fold > .plate { max-width: none; grid-column: 1 / -1; }
  .hero { padding-top: calc(var(--head-h) + 24px); gap: 28px; }
  .hero--video {
    --hero-top-gap: 16px;
    padding-top: calc(var(--head-h) + var(--hero-top-gap));
  }
  .hero-top { grid-template-columns: minmax(0, 1fr) 116px; gap: 24px 16px; }
  .hero-name { gap: 10px; }
  .hero-en { font-size: 12px; letter-spacing: 0.22em; }
  .hero-top > .light-sculpture { height: 116px; }
  .hero-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; }
  .hero-lede { max-width: 26ch; font-size: 13px; }
  .hero-cta { padding: 8px 10px; font-size: 12px; }
  .hero-stage { height: auto; }
  .b-arrangement--joy-people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .b-arrangement--joy-people .arrangement-row { display: contents; }
  .b-arrangement--joy-people .arrangement-row > .plate:last-child:nth-child(odd) { grid-column: auto; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .art::after, .art::before, .hero-work::before, .stage-cap > .icon { transition: none; }
  .art::before, .hero-work::before, .chapter-label::after { display: none; }
}
html[data-motion="paused"] .art::before, html[data-motion="paused"] .hero-work::before, html[data-motion="paused"] .chapter-label::after { display: none; }
html[data-motion="paused"] .chapter-label::before { transform: none; }
html[data-motion="paused"] .hero-work img { transform: none; transition: none; }
@media (forced-colors: active) {
  .hero-cta { background: Canvas; border-color: ButtonText; }
  .art::after { border-color: CanvasText; }
  .art::before, .hero-work::before, .chapter-label::before, .chapter-label::after { display: none; }
}
/* ============================================================
   2026-10-19 · 手感修订
   1 氛围退成底噪：巨字与母题只提供气候，不和作品争注意力
   2 手机首屏：姓名板移出画面，影片回到完整 16:9
   3 手机章标不再吸顶，把纵向空间还给作品
   4 播放键改为玻璃底，按压有回弹
   ============================================================ */

/* --- 1 · ambience is a floor, not a layer -------------------------------- */
/* 310px 的章节巨字原本在 14% 白描边下几乎读到字形，作品之间出现第二层文字。
   压到 9% 后它只在纯黑处显影，图像上方仍然安静。 */
.amb__word { color: rgb(255 255 255 / 0.032); -webkit-text-stroke-color: rgb(255 255 255 / 0.092); }
.amb__motif--dots { opacity: 0.11; }
.amb__motif--rings i { border-color: rgb(255 255 255 / 0.1); }
.amb__motif--rules { background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.065) 0 1px, transparent 1px 128px); }
.amb__motif--beams {
  background:
    conic-gradient(from 124deg at 10% -14%, transparent 0deg, rgb(255 255 255 / 0.1) 8deg, transparent 21deg),
    conic-gradient(from 230deg at 90% -14%, transparent 0deg, rgb(255 255 255 / 0.075) 7deg, transparent 20deg);
}

/* --- 2 · phone: the nameplate steps out of the film --------------------- */
/* 390px 宽时影片只有 219px 高，原有姓名板占掉 112px（51%），压住人物下巴。
   620px 以下让影片自己撑满 16:9，姓名板落到画面下方，当作编辑式图注。 */
@media (max-width: 620px) {
  .hero--video { --hero-top-gap: 0px; }
  .hero-film {
    display: flex;
    flex-direction: column;
    width: 100%;
    aspect-ratio: auto;
    overflow: visible;
    background: #000;
  }
  .hero-film > video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: #0d0d0f; }
  .hero-film__plate {
    position: relative;
    inset: auto;
    gap: 8px;
    padding: 18px var(--gut) 0;
    background: none;
  }
  .hero-film__plate::before { inset: 0 var(--gut) auto; background: rgb(255 255 255 / 0.16); }
  .hero-film__name { font-size: clamp(30px, 8.6vw, 38px); gap: 10px; }
  .hero-film__name em { font-size: 10px; letter-spacing: 0.3em; padding-bottom: 0.5em; }
  .hero-film__role { font-size: 12px; letter-spacing: 0.1em; line-height: 1.5; }
  /* 播放键仍贴在影片右下角，而不是姓名板底部 */
  .hero-film__play,
  .hero-film__fallback { top: calc(56.25vw - 58px); bottom: auto; right: 12px; }
  .hero-film__play { width: 46px; height: 46px; }
  .hero { padding-bottom: 4px; }
}

/* --- 3 · phone: the chapter tag stops eating the viewport --------------- */
/* 820px 以下已经有底部章节切换器，吸顶章标是第二份同样的信息，却常年占掉 46px。 */
@media (max-width: 820px) {
  .chapter-label { position: static; }
}

/* --- 4 · the film's own corner labels need a floor to stand on ---------- */
/* 「2021 – 2026 / 五年以上商业视觉」压在人物白色大衣上时整行消失。
   顶部只加一层 90–150px 的暗角，字形回到可读，画面本身不动。 */
.hero-film::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: clamp(88px, 16%, 148px);
  background: linear-gradient(to bottom, rgb(6 7 8 / 0.78), rgb(6 7 8 / 0.32) 60%, transparent);
  pointer-events: none;
}
@media (max-width: 820px) {
  .hero-film::after { display: none; }
}
.hero-film__meta { color: rgb(255 255 255 / 0.8); }

/* --- 5 · multi-image rows hang from one baseline ------------------------- */
/* 同等宽度的一行海报如果高度不同，默认顶对齐会让图注落成四级台阶
   （运营海报一行曾相差 132px）。四张以上、且没有主图＋细节堆叠的行，
   改为底对齐：海报挂在同一条基线上，图注自然读成一行。 */
.arrangement-row:not(:has(> .arrangement-stack)):has(> .plate:nth-child(4)) { align-items: end; }

/* --- 6 · the play control reads as glass, not as a grey box -------------- */
.hero-film__play,
.hero-film__fallback {
  z-index: 3;
  border: 1px solid rgb(255 255 255 / 0.22);
  background: rgb(10 11 12 / 0.62);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  transition: background-color 180ms ease, border-color 180ms ease, scale 140ms var(--ease);
}
.hero-film__play:hover,
.hero-film__fallback:hover { background: rgb(20 21 23 / 0.88); border-color: rgb(255 255 255 / 0.42); }
.hero-film__play:active,
.hero-film__fallback:active { scale: 0.94; }

/* 底部两个常驻控件让开 iPhone 的 home indicator */
.chapter-sheet,
.motion-toggle { bottom: calc(clamp(16px, 2.4vw, 28px) + env(safe-area-inset-bottom, 0px)); }

@media (prefers-reduced-motion: reduce) {
  .hero-film__play,
  .hero-film__fallback { transition: none; }
}

.chapter-en,
.chapter-num,
.hero-film__name em,
.hero-film__role,
.volume-head > span { font-weight: var(--w-head); }

.zone-title > span:not(.motion-type) {
  font-size: 11px;
  font-weight: var(--w-head);
  letter-spacing: 0.1em;
}

#wuyou {
  --gallery-gap: clamp(12px, 1.2vw, 20px);
  --joy-space: clamp(20px, 2vw, 32px);
}

#wuyou .chapter-head { padding-block: 24px 8px; }
#wuyou .chapter-record { gap: 12px; }
#wuyou .zone { padding-block: 24px 32px; }
#wuyou .zone-head { padding-bottom: 16px; margin-bottom: 20px; }
#wuyou .zone-block + .zone-block { margin-top: var(--joy-space); }
#wuyou .plate-cap { padding-top: 8px; }

#wuyou .b-arrangement--joy-game {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--joy-space) var(--gallery-gap);
}

#wuyou .b-arrangement--joy-game > .arrangement-row {
  width: 100%;
  max-width: none;
  margin: 0;
  gap: var(--gallery-gap);
  align-items: start;
}

#wuyou .arrangement-row--joy-top {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.75fr) minmax(0, 1fr);
  align-items: center;
}

#wuyou .arrangement-row--joy-top .art,
#wuyou .arrangement-row--joy-top .plate-cap { max-width: none; }
#wuyou .arrangement-row--joy-top > .plate:nth-child(2) { width: 100%; }
#wuyou .arrangement-row--music { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
#wuyou .arrangement-stack { gap: var(--gallery-gap); }

#wuyou .b-arrangement--joy-game > .arrangement-row:last-child {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#wuyou .b-arrangement--joy-game > .arrangement-row:last-child > .plate:last-child {
  grid-column: 1 / -1;
}

#wuyou .b-arrangement--joy-people {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--joy-space) var(--gallery-gap);
}

#wuyou .b-arrangement--joy-people .arrangement-row { display: contents; }
#wuyou .b-arrangement--joy-people .plate {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
}

#wuyou [data-zone="joy-long"] .b-fold,
#wuyou [data-zone="joy-guild"] .b-fold { gap: var(--joy-space) var(--gallery-gap); }

@media (max-width: 960px) {
  #wuyou .b-arrangement--joy-game { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  #wuyou .b-arrangement--joy-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  #wuyou { --joy-space: 20px; }
  #wuyou .chapter-head { padding-block: 20px 4px; }
  #wuyou .zone { padding-block: 20px 24px; }
  #wuyou .arrangement-row--joy-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #wuyou .arrangement-row--joy-top > .plate:first-child { grid-column: 1 / -1; }
  #wuyou .arrangement-row--tight:nth-child(2) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #wuyou .arrangement-row--tight:nth-child(3) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #wuyou .b-arrangement--joy-people .arrangement-row > .plate:last-child:nth-child(odd) { max-width: none; }
  #wuyou .cap-title { font-size: 12px; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #wuyou .art img { transition: scale 600ms var(--ease), opacity 650ms var(--ease); }
  html[data-motion="playing"] #wuyou .art:hover img { scale: 1.025; }
}

@media print {
  .hero-film { display: none; }
  .hero-top { grid-template-columns: 1fr; }
  .hero-intro { grid-column: 1; }
  .art::before, .hero-work::before, .chapter-label::before, .chapter-label::after { display: none; }
  .volume-head h4 { color: #111; }
  .volume-head > span { color: #444; }
  .b-arrangement, .b-volumes { gap: 20px; }
  .arrangement-row { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 12px; break-inside: avoid; }
  .arrangement-stack { display: contents; }
  .art::after { display: none; }
}