/* 杜思涵作品集 · 样式
   纸色底 + 墨色字 + 每章一个点缀色；标题思源宋体，正文思源黑体 */

@font-face { font-family: "SH Serif"; src: url("../assets/fonts/serif.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "SH Sans"; src: url("../assets/fonts/sans.woff2") format("woff2"); font-weight: 300 600; font-display: swap; }

:root {
  --paper: #F2EEE9;
  --paper-2: #E9E5DD;
  --ink: #171513;
  --ink-2: #4C4842;
  --mute: #8C867D;
  --line: rgba(23, 21, 19, .14);
  --acc: #B23A2E;
  --serif: "SH Serif", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
  --sans: "SH Sans", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --latin: "Helvetica Neue", "Segoe UI", Arial, "SH Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --gut: clamp(20px, 4vw, 64px);
  --max: 1480px;
  --hd: 68px;
  --ease: cubic-bezier(.22, .7, .18, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hd) + 20px); }
html.lb-open { overflow: hidden; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 15.5px/1.85 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, dl, dd, ul, ol { margin: 0; }
ul, ol { list-style: none; padding: 0; }
::selection { background: var(--acc); color: #fff; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 200; background: var(--ink); color: #fff; padding: 8px 14px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.lab { font: 500 11px/1.5 var(--latin); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.tick { display: inline-block; width: 18px; height: 1px; margin-right: 10px; vertical-align: middle; background: var(--acc); }
.hint { margin-top: 14px; font-size: 12px; color: var(--mute); }
.seal { display: inline-grid; place-items: center; background: var(--acc); color: #fff; font-family: var(--serif); font-weight: 600; border-radius: 2px; }

/* 图片 */
.im { -webkit-user-drag: none; }
.blend { mix-blend-mode: multiply; }
:has(> .blend) { background-color: var(--paper); }
.px { image-rendering: crisp-edges; image-rendering: pixelated; }
[data-zoom] { cursor: zoom-in; }
.fig { position: relative; min-width: 0; }
.fig-box { position: relative; overflow: hidden; aspect-ratio: var(--ar, auto); background: var(--bg, var(--paper)); }
.fig-box > .im { width: 100%; height: 100%; object-fit: contain; }
.fig.cover .fig-box > .im { object-fit: cover; }
.fig figcaption { margin-top: 10px; font-size: 12.5px; line-height: 1.6; color: var(--mute); }
.fig figcaption b { margin-right: 8px; font: 500 11px/1 var(--latin); letter-spacing: .06em; color: var(--ink); }
.fig-box > [data-zoom] { transition: transform 1.2s var(--ease); }

/* 进场动效 */
.rise { opacity: 0; transform: translateY(26px); animation: rise 1.1s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 90ms + 100ms); }
@keyframes rise { to { opacity: 1; transform: none; } }
.rv { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.rv.in { opacity: 1; transform: none; }
.rv .fig--big .fig-box { clip-path: inset(4% 3%); transition: clip-path 1.5s var(--ease); }
.rv .fig--big .fig-box > .im { transform: scale(1.07); transition: transform 1.8s var(--ease); }
.rv.in .fig--big .fig-box { clip-path: inset(0); }
.rv.in .fig--big .fig-box > .im { transform: none; }
#view { min-height: 100vh; transition: opacity .26s ease; }
#view.is-out { opacity: 0; }

/* ───────────── 页眉 ───────────── */
.hd { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hd); display: flex; align-items: center; gap: 28px; padding: 0 var(--gut); border-bottom: 1px solid transparent; transition: transform .5s var(--ease), background-color .4s, border-color .4s; }
.hd.is-scrolled { background: rgba(242, 238, 233, .88); -webkit-backdrop-filter: saturate(1.2) blur(14px); backdrop-filter: saturate(1.2) blur(14px); border-bottom-color: var(--line); }
.hd.is-hidden { transform: translateY(-100%); }
.hd-logo { display: flex; align-items: baseline; gap: 12px; flex: none; }
.hd-name { font: 600 19px/1 var(--serif); letter-spacing: .1em; }
.hd-en { font: 500 10.5px/1 var(--latin); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.hd-sub { flex: 1; min-width: 0; display: flex; justify-content: center; align-items: center; gap: 22px; font-size: 13px; color: var(--mute); white-space: nowrap; overflow: hidden; }
.hd-sub a { position: relative; transition: color .3s; }
.hd-sub a:hover, .hd-sub a.on { color: var(--ink); }
.hd-sub a.on::before { content: ""; position: absolute; left: -10px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--acc); }
.hd-sub .hd-ch { color: var(--ink); font-family: var(--serif); font-weight: 600; padding-right: 22px; border-right: 1px solid var(--line); }
.hd-sub .hd-ch b { margin-right: 8px; font: 500 11px/1 var(--latin); letter-spacing: .1em; color: var(--acc); }
.hd-nav { display: flex; gap: 30px; margin-left: auto; font-size: 14px; flex: none; }
.hd-nav a { position: relative; padding: 4px 0; }
.hd-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.hd-nav a:hover::after, .hd-nav a.on::after { transform: scaleX(1); transform-origin: left; }
.hd-progress { position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--acc); transform-origin: left; transform: scaleX(var(--p, 0)); opacity: 0; transition: opacity .3s; }
.is-chapter .hd-progress { opacity: 1; }

/* ───────────── 首页 · 主视觉 ───────────── */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 56px; column-gap: clamp(16px, 3vw, 48px); max-width: var(--max); min-height: 100vh; min-height: 100svh; margin: 0 auto; padding: calc(var(--hd) + 16px) var(--gut) 0; }
.hero-txt { align-self: end; position: relative; z-index: 2; padding-bottom: clamp(48px, 10vh, 110px); }
.hero-name { display: flex; margin: 22px 0 18px -.04em; font: 600 clamp(76px, 10.5vw, 168px)/.98 var(--serif); letter-spacing: .06em; }
.hero-name span { display: inline-block; }
.hero-role { font: 400 clamp(19px, 1.8vw, 27px)/1.4 var(--serif); letter-spacing: .14em; }
.hero-bio { max-width: 29em; margin-top: 30px; font-size: 14.5px; color: var(--ink-2); }
.hero-cta { display: flex; align-items: center; gap: 30px; margin-top: 36px; }
.btn { display: inline-flex; align-items: center; gap: 14px; height: 48px; padding: 0 26px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 14px; letter-spacing: .08em; transition: background-color .35s; }
.btn i { font-style: normal; transition: transform .45s var(--ease); }
.btn:hover { background: var(--acc); }
.btn:hover i { transform: translateY(3px); }
.lnk { padding-bottom: 3px; border-bottom: 1px solid var(--line); font-size: 14px; transition: border-color .3s; }
.lnk:hover { border-color: var(--ink); }
.hero-stage { position: relative; align-self: end; height: calc(100svh - var(--hd) - 16px); min-height: 520px; }
.hero-fig { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; background: var(--paper); opacity: 0; transform: translateY(16px) scale(1.015); transition: opacity 1.3s var(--ease), transform 1.8s var(--ease); pointer-events: none; }
.hero-fig.on { z-index: 1; opacity: 1; transform: none; pointer-events: auto; }
.hero-fig .im { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.hero-rail { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 28px 0 clamp(48px, 10vh, 110px); }
.hero-vert { writing-mode: vertical-rl; font: 400 13px/1 var(--serif); letter-spacing: .5em; color: var(--mute); }
.hero-names { display: flex; flex-direction: column; gap: 20px; }
.hero-names button { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--mute); transition: color .4s; }
.hero-names .hn { writing-mode: vertical-rl; font: 600 17px/1 var(--serif); letter-spacing: .3em; }
.hero-names .seal { width: 22px; height: 22px; font-size: 12px; background: transparent; color: var(--mute); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .4s, color .4s; }
.hero-names button:hover, .hero-names button.on { color: var(--ink); }
.hero-names button.on .seal { background: var(--acc); color: #fff; box-shadow: none; }
.hbar { position: relative; display: block; width: 1px; height: 44px; overflow: hidden; background: var(--line); }
.hbar b { position: absolute; inset: 0; background: var(--acc); transform: scaleY(0); transform-origin: top; }
.hero-names button.on .hbar b { transform: scaleY(1); }
.hero-names button.run .hbar b { animation: hfill 6s linear forwards; }
@keyframes hfill { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ───────────── 首页 · 作品 ───────────── */
.works { padding-top: clamp(100px, 13vw, 190px); }
.sec-hd { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 48px; padding-bottom: 28px; margin-bottom: clamp(48px, 6vw, 88px); border-bottom: 1px solid var(--ink); }
.sec-title { margin-top: 16px; font: 600 clamp(48px, 6vw, 92px)/1 var(--serif); letter-spacing: .08em; }
.sec-index { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 26px; font-size: 13.5px; color: var(--ink-2); }
.sec-index a { transition: color .3s; }
.sec-index a:hover { color: var(--acc); }
.sec-index b { margin-right: 8px; font: 500 11px/1 var(--latin); letter-spacing: .08em; color: var(--mute); }

.feat, .grp { display: grid; grid-template-columns: minmax(0, 3.3fr) minmax(0, 8.7fr); gap: 28px clamp(24px, 3.4vw, 56px); padding-bottom: clamp(56px, 7vw, 110px); margin-bottom: clamp(56px, 7vw, 110px); border-bottom: 1px solid var(--line); }
.feat-meta, .grp-hd { display: flex; flex-direction: column; align-items: flex-start; }
.feat-no { font: 500 12px/1 var(--latin); letter-spacing: .14em; color: var(--acc); }
.feat-title { margin: 18px 0 12px; font: 600 clamp(34px, 3.4vw, 54px)/1.1 var(--serif); letter-spacing: .04em; transition: color .4s; }
.feat-kind { font-size: 13.5px; color: var(--ink-2); }
.feat-lead { margin-top: 24px; font: 400 18px/1.65 var(--serif); }
.feat-dl { width: 100%; margin-top: auto; padding-top: 32px; font-size: 13px; }
.feat-dl div { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.feat-dl dt { color: var(--mute); }
.go { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding-bottom: 4px; border-bottom: 1px solid var(--ink); font-size: 14px; }
.go i { font-style: normal; transition: transform .45s var(--ease); }
.feat:hover .go i, .grp-hd:hover .go i { transform: translateX(6px); }
.feat:hover .feat-title, .grp-hd:hover .feat-title { color: var(--acc); }
.feat-media { min-width: 0; }
.feat-img { overflow: hidden; }
.feat-img .im { width: 100%; transition: transform 1.6s var(--ease); }
.feat:hover .feat-img .im { transform: scale(1.03); }

.trio { display: flex; gap: clamp(4px, .6vw, 10px); }
.trio-it { display: flex; flex-direction: column; min-width: 0; }
.trio-img { overflow: hidden; aspect-ratio: var(--ar); }
.trio-img .im { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.feat:hover .trio-img .im, a.trio-it:hover .trio-img .im { transform: scale(1.035); }
.trio-cap { padding-top: 14px; }
.trio-cap h3 { font: 600 20px/1.3 var(--serif); letter-spacing: .1em; transition: color .3s; }
.trio-cap p { margin-top: 2px; font-size: 12.5px; color: var(--ink-2); }
.trio-cap .lab { margin-top: 6px; letter-spacing: .1em; }
a.trio-it:hover h3 { color: var(--acc); }

.ccards { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px); }
.ccards.c3 { --n: 3; }
.ccards.c4 { --n: 4; }
.ccard-img { overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-2); }
.ccard-img .im { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.ccard:hover .ccard-img .im { transform: scale(1.05); }
.ccard-no { margin-top: 14px; font: 500 11px/1 var(--latin); letter-spacing: .1em; color: var(--acc); }
.ccard h4 { margin-top: 8px; font: 600 19px/1.35 var(--serif); transition: color .3s; }
.ccard:hover h4 { color: var(--acc); }
.ccard p:last-child { margin-top: 4px; font-size: 13px; color: var(--mute); }

/* ───────────── 首页 · 关于 ───────────── */
.about { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px clamp(24px, 5vw, 96px); padding-top: clamp(60px, 8vw, 120px); padding-bottom: clamp(110px, 13vw, 190px); }
.about-name { margin-top: 22px; font: 600 clamp(48px, 5vw, 76px)/1 var(--serif); letter-spacing: .1em; }
.about-en { margin-top: 14px; font: 500 12px/1 var(--latin); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.about-intent { display: inline-block; margin-top: 28px; padding: 7px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 13.5px; }
.about-bio { font: 400 clamp(19px, 1.8vw, 26px)/1.85 var(--serif); text-wrap: pretty; }
.about-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: clamp(40px, 5vw, 72px); padding-top: 28px; border-top: 1px solid var(--line); }
.about-cols h4 { margin-bottom: 16px; }
.edu li { display: flex; flex-direction: column; gap: 2px; }
.edu li + li { margin-top: 18px; }
.edu-y { font: 500 11px/1.4 var(--latin); letter-spacing: .06em; color: var(--mute); }
.edu b { font: 600 15px/1.5 var(--serif); }
.edu span:last-child { font-size: 13px; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; font: 500 12.5px/1 var(--latin); }
.plays a { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; transition: color .3s; }
.plays li:first-child a { padding-top: 0; }
.plays a:hover { color: var(--acc); }
.plays i { font-style: normal; transition: transform .4s var(--ease); }
.plays a:hover i { transform: translate(3px, -3px); }

/* ───────────── 章节页 · 开篇 ───────────── */
.ch-open { position: relative; padding-top: calc(var(--hd) + clamp(36px, 5vw, 80px)); }
.ch-top { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.ch-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 32px clamp(24px, 5vw, 80px); padding-top: clamp(32px, 4vw, 56px); align-items: start; }
.ch-title { font: 600 clamp(72px, 10.5vw, 172px)/.96 var(--serif); letter-spacing: .04em; }
.ch-title.long { font-size: clamp(54px, 6.6vw, 112px); line-height: 1.06; }
.ch-no { display: block; margin-bottom: 22px; font: 500 12px/1 var(--latin); letter-spacing: .16em; text-transform: uppercase; color: var(--acc); }
.ch-lead { font: 400 clamp(20px, 1.9vw, 28px)/1.55 var(--serif); }
.ch-text { max-width: 34em; margin-top: 18px; color: var(--ink-2); }
.meta { margin-top: 28px; border-top: 1px solid var(--line); }
.meta div { display: grid; grid-template-columns: 76px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.meta dt { color: var(--mute); }
.credits { margin-top: 26px; padding: 20px 22px; background: var(--paper-2); border-left: 2px solid var(--acc); }
.credits ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 22px; margin-top: 12px; }
.credits li { position: relative; padding-left: 14px; font-size: 13.5px; line-height: 1.7; }
.credits li::before { content: ""; position: absolute; left: 0; top: .78em; width: 5px; height: 5px; border-radius: 50%; background: var(--acc); }
.credits-note { margin-top: 10px; font-size: 12.5px; color: var(--mute); }
.play { display: inline-flex; align-items: center; gap: 14px; margin-top: 22px; padding: 11px 20px; border: 1px solid var(--ink); border-radius: 999px; font-size: 13.5px; transition: background-color .3s, color .3s; }
.play .lab { color: inherit; opacity: .6; }
.play i { font-style: normal; transition: transform .4s var(--ease); }
.play:hover { background: var(--ink); color: var(--paper); }
.play:hover i { transform: translate(3px, -3px); }
.vert { position: absolute; top: calc(var(--hd) + clamp(110px, 10vw, 150px)); right: calc(var(--gut) - 34px); writing-mode: vertical-rl; font: 400 13px/1 var(--serif); letter-spacing: .5em; color: var(--mute); }

.ch-cover { margin-top: clamp(48px, 6vw, 96px); }
.ch-cover.bleed .fig-box { max-height: 92vh; }
.ch-cover.bleed .fig-box > .im { object-fit: cover; }
.ch-cover .trio-img { aspect-ratio: auto; height: min(68vh, 46vw); }

/* ───────────── 内容块 ───────────── */
.ch-body > * + * { margin-top: clamp(40px, 5vw, 72px); }
.b-lab { margin-bottom: 16px; }
.b-note { max-width: 40em; margin: -6px 0 18px; font-size: 13.5px; color: var(--ink-2); }

.b-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px clamp(24px, 4vw, 64px); align-items: end; padding-top: 28px; border-top: 1px solid var(--line); }
.ch-body > .b-head { margin-top: clamp(100px, 11vw, 170px); }
.b-title { margin-top: 14px; font: 600 clamp(28px, 3vw, 46px)/1.2 var(--serif); letter-spacing: .03em; }
.b-title small { display: block; margin-top: 8px; font: 400 16px/1.6 var(--serif); letter-spacing: .08em; color: var(--mute); }
.b-head-r p { max-width: 36em; color: var(--ink-2); }
.credit { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; color: var(--ink) !important; }
.credit i { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }

.b-proj { padding-top: 26px; border-top: 2px solid var(--ink); }
.ch-body > .b-proj { margin-top: clamp(120px, 14vw, 220px); }
.ch-body > .b-proj:first-child { margin-top: clamp(90px, 10vw, 150px); }
.b-proj-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 24px clamp(24px, 5vw, 80px); margin-top: 24px; align-items: start; }
.b-proj-title { font: 600 clamp(44px, 5.4vw, 84px)/1.06 var(--serif); letter-spacing: .02em; }
.b-proj-title small { display: block; margin-top: 14px; font: 400 clamp(17px, 1.5vw, 22px)/1.5 var(--serif); letter-spacing: .08em; color: var(--mute); }
.b-proj-team { display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.b-proj-team i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }
.b-proj-text { margin-top: 16px; color: var(--ink-2); }

/* 角色设定 */
.b-char { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(24px, 5vw, 88px); align-items: start; }
.ch-body > .b-char { margin-top: clamp(110px, 13vw, 200px); }
.ch-body > .b-char:first-child { margin-top: clamp(90px, 10vw, 150px); }
.b-char.flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.b-char.flip .b-char-art { order: 2; }
.b-char-art { position: sticky; top: calc(var(--hd) + 12px); }
.b-char-art .fig-box { max-height: calc(100vh - var(--hd) - 32px); }
.b-char-name { display: flex; align-items: flex-start; gap: 18px; margin-top: 18px; font: 600 clamp(66px, 7.4vw, 120px)/1 var(--serif); letter-spacing: .08em; }
.b-char-name .seal { width: 40px; height: 40px; margin-top: .14em; font-size: 21px; letter-spacing: 0; }
.b-char-src { margin-top: 18px; font: 400 15px/1.6 var(--serif); color: var(--ink-2); }
.b-char-src span { margin-right: 14px; font: 500 11px/1 var(--latin); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.b-char-text { margin-top: 22px; }
.kw { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.kw li { padding: 5px 13px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; color: var(--ink-2); }
.pal { margin-top: 30px; }
.pal ul { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.pal i { display: block; aspect-ratio: 1; border-radius: 2px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); transition: transform .4s var(--ease); }
.pal li:hover i { transform: translateY(-4px); }
.pal span { display: block; margin-top: 6px; font: 500 9.5px/1 var(--latin); letter-spacing: .02em; color: var(--mute); }
.details { margin-top: 34px; border-top: 1px solid var(--line); }
.details li { display: grid; grid-template-columns: 112px 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.details .dn { font: 500 11px/1 var(--latin); letter-spacing: .12em; color: var(--acc); }
.details h4 { margin: 6px 0 4px; font: 600 17px/1.4 var(--serif); }
.details p:last-child { font-size: 13.5px; line-height: 1.75; color: var(--ink-2); }

/* 过程：草稿 → 成稿 */
.b-step { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 32px clamp(24px, 4vw, 64px); align-items: center; }
.st-stage { position: relative; aspect-ratio: var(--ar); max-height: 82vh; background: var(--paper); }
.st-img { position: absolute; inset: 0; background: var(--paper); opacity: 0; transition: opacity .55s ease; }
.st-img.on { opacity: 1; z-index: 1; }
.st-img .im { width: 100%; height: 100%; object-fit: contain; }
.st-count { font: 500 12px/1 var(--latin); letter-spacing: .1em; color: var(--mute); }
.st-count b { font-weight: 500; color: var(--ink); }
.st-bar { position: relative; display: block; height: 1px; margin: 14px 0 18px; background: var(--line); }
.st-bar b { position: absolute; inset: 0; background: var(--acc); transform-origin: left; transform: scaleX(0); transition: transform .6s var(--ease); }
.st-list li + li { border-top: 1px solid var(--line); }
.st-list button { display: grid; grid-template-columns: 34px 1fr 50px; align-items: center; gap: 12px; width: 100%; padding: 10px 0; text-align: left; color: var(--mute); transition: color .3s; }
.st-list .n { font: 500 11px/1 var(--latin); letter-spacing: .08em; transition: color .3s; }
.st-list .t { font: 600 18px/1.2 var(--serif); transition: transform .45s var(--ease); }
.st-list .th { width: 50px; height: 50px; overflow: hidden; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); opacity: .45; transition: opacity .3s; }
.st-list .th .im { width: 100%; height: 100%; object-fit: contain; }
.st-list button.done { color: var(--ink-2); }
.st-list button.on { color: var(--ink); }
.st-list button.on .n { color: var(--acc); }
.st-list button.on .t { transform: translateX(6px); }
.st-list button.on .th, .st-list button:hover .th { opacity: 1; }

/* 网格行 */
.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.g-labels { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); margin-bottom: 16px; }
.b-row.narrow { max-width: 980px; }
.b-img--mid { max-width: 1040px; }
.b-img--full .fig-box, .b-img--wide .fig-box { background: var(--bg, var(--paper-2)); }

.b-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(24px, 4vw, 64px); align-items: end; }
.b-split.wide { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.b-split-txt p:last-child { margin-top: 14px; color: var(--ink-2); }

/* 逐帧动画 */
.pl { position: relative; cursor: pointer; outline-offset: 4px; }
.pl-stage { position: relative; aspect-ratio: var(--ar); overflow: hidden; background: var(--paper-2); }
.pl-f { position: absolute; inset: 0; visibility: hidden; }
.pl-f.on { visibility: visible; }
.pl-f .im { width: 100%; height: 100%; object-fit: contain; }
.pl-bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12.5px; color: var(--mute); }
.pl-state { position: relative; width: 16px; height: 16px; flex: none; }
.pl-state::before, .pl-state::after { content: ""; position: absolute; top: 3px; width: 3px; height: 10px; background: var(--ink); }
.pl-state::before { left: 4px; }
.pl-state::after { left: 9px; }
.pl.paused .pl-state::before { left: 4px; width: 0; height: 0; background: none; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent var(--ink); }
.pl.paused .pl-state::after { display: none; }
.pl-lab { color: var(--ink); }
.pl-count { margin-left: auto; font: 500 11px/1 var(--latin); letter-spacing: .08em; }
.pl-count b { font-weight: 500; color: var(--ink); }

.b-anim { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(24px, 4vw, 64px); align-items: start; }
.b-anim-count { margin-top: 18px; font: 600 clamp(34px, 3.4vw, 50px)/1 var(--serif); }
.b-anim-text { margin-top: 16px; color: var(--ink-2); }
.pl-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 24px; }
.pl-strip button { display: block; width: 100%; opacity: .5; transition: opacity .25s; }
.pl-strip button .im { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--paper-2); }
.pl-strip span { display: block; margin-top: 4px; font: 500 10px/1 var(--latin); letter-spacing: .04em; color: var(--mute); }
.pl-strip button:hover, .pl-strip button.on { opacity: 1; }
.pl-strip button.on .im { outline: 1.5px solid var(--acc); outline-offset: 2px; }

.anims { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 36px); }
.anims.c2 { --n: 2; }
.anims.c3 { --n: 3; }
.anims.c4 { --n: 4; }
.b-anims.small .anims.c2 { max-width: 560px; }
.b-anims.small .anims.c4 { max-width: 920px; }
.anims-txt { margin-top: 14px; }
.anims-txt h4 { display: flex; align-items: baseline; gap: 12px; font: 600 18px/1.4 var(--serif); }
.anims-txt p { margin-top: 6px; font-size: 13.5px; color: var(--ink-2); }
.b-anims.small .anims-txt { margin-top: 2px; }
.b-anims.small .anims-txt h4 { font-size: 14px; }
.b-anims.small .pl-bar { display: none; }

/* AOVY 四幕 */
.b-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 5vw, 80px) clamp(20px, 3vw, 48px); }
.act header { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: baseline; margin-bottom: 16px; }
.act-no { grid-row: span 2; font: 500 11px/1 var(--latin); letter-spacing: .14em; color: var(--acc); }
.act h3 { font: 600 22px/1.35 var(--serif); }
.act-sub { font: 400 14px/1.5 var(--serif); color: var(--mute); }
.act-foot { display: grid; grid-template-columns: 36% 1fr; gap: 18px; margin-top: 18px; align-items: start; }
.act-foot p { font-size: 13.5px; color: var(--ink-2); }

/* 角色并排 */
.b-cast { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 40px); }
.cast-it h4 { margin-top: 16px; font: 600 22px/1.35 var(--serif); }
.cast-it p { max-width: 24em; margin-top: 6px; font-size: 13.5px; color: var(--ink-2); }
.b-cast.small { grid-template-columns: var(--cols-tpl, repeat(3, minmax(0, 1fr))); }
.b-cast.small h4 { font-size: 18px; }

/* Whispers 梦境三步 */
.b-steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.ch-body > .b-steps3 { margin-top: clamp(32px, 4vw, 56px); }
.b-steps3 li { position: relative; }
.s3-no { font: 600 clamp(40px, 4vw, 58px)/1 var(--serif); color: var(--acc); }
.b-steps3 h4 { margin: 12px 0 16px; font: 600 19px/1.35 var(--serif); }
.s3-text { margin-top: 14px; font-size: 13.5px; color: var(--ink-2); }
.b-steps3 li:not(:last-child)::after { content: "→"; position: absolute; top: 14px; right: calc(clamp(24px, 3vw, 48px) / -2 - 8px); font: 400 18px/1 var(--latin); color: var(--acc); }

.b-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(12px, 2vw, 28px); align-items: center; }
.pair-arrow { margin-bottom: 28px; font: 300 22px/1 var(--latin); color: var(--acc); }

.strip { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 20px; }
.strip-it .im { width: auto; max-width: none; height: var(--h); }

/* 像素 */
.b-pixrow { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(20px, 3vw, 44px); }
.px-it { max-width: 100%; }
.px-box { display: inline-block; max-width: 100%; padding: 18px; background: #19181d; }
.px-box .im { max-width: 100%; height: auto; }
.px-it figcaption { max-width: 30em; margin-top: 12px; }
.px-it figcaption p:last-child:not(.lab) { margin-top: 6px; font-size: 13.5px; color: var(--ink-2); }
.tg { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px 32px; }
.tg-box { display: grid; max-width: 100%; padding: 18px; box-sizing: content-box; background: #19181d; }
.tg-box > .im { grid-area: 1 / 1; width: 100%; }
.tg-box .tg-alt { opacity: 0; transition: opacity .18s; }
.tg-box.alt .tg-alt { opacity: 1; }
.tg-cap { display: flex; flex-direction: column; gap: 8px; }
.tg-cap button { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--mute); transition: color .3s; }
.tg-cap button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--mute); transition: background-color .3s, box-shadow .3s; }
.tg-cap button.on { color: var(--ink); }
.tg-cap button.on::before { background: var(--acc); box-shadow: none; }
.b-pixg .pxg { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.b-pixg .pxg:first-of-type { margin-top: 28px; border-top: 1px solid var(--line); }
.pxg-l h4 { font: 600 17px/1.4 var(--serif); }
.pxg-l .lab { margin-top: 6px; color: var(--acc); }
.pxg-items { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px 28px; }
.pxg-items li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pxg-items .im { max-width: none; }
.pxg-items span { font-size: 12px; color: var(--mute); white-space: nowrap; }

/* Graviturn 切换 */
.sw { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(24px, 3.4vw, 56px); align-items: start; }
.ch-body > .sw { margin-top: clamp(32px, 4vw, 56px); }
.sw-img { position: relative; aspect-ratio: 16 / 9; max-width: 840px; overflow: hidden; background: #1e2f3f; }
.sw-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .38s ease; }
.sw-layer.on { opacity: 1; }
.sw-layer .im { width: 100%; height: 100%; object-fit: cover; }
.sw-cap { display: flex; align-items: baseline; gap: 12px; margin-top: 12px; font-size: 13.5px; color: var(--ink-2); }
.sw-cap b { font: 600 16px/1 var(--serif); color: var(--ink); }
.sw-g + .sw-g { margin-top: 20px; }
.sw-gl { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.sw-gl b { font: 600 15px/1 var(--serif); }
.sw-g ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sw-g button { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; outline: 1.5px solid transparent; outline-offset: 2px; opacity: .55; transition: opacity .25s, outline-color .25s; }
.sw-g button .im { width: 100%; height: 100%; object-fit: cover; }
.sw-g button:hover { opacity: 1; }
.sw-g button.on { opacity: 1; outline-color: var(--acc); }

/* 桌游 */
.b-texts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(24px, 4vw, 64px); }
.ch-body > .b-texts { margin-top: clamp(40px, 5vw, 64px); }
.b-texts p:last-child { margin-top: 12px; color: var(--ink-2); }
.b-loop { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px clamp(24px, 4vw, 64px); align-items: center; padding: clamp(24px, 3vw, 40px); background: var(--paper-2); }
.b-loop-note { margin-top: 12px; font: 400 17px/1.6 var(--serif); }
.loop-svg { width: 100%; max-width: 640px; height: auto; overflow: visible; }
.loop-svg marker path { fill: var(--acc); }
.loop-svg .edge { fill: none; stroke: var(--acc); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s var(--ease); transition-delay: calc(var(--d, 0) * 160ms + 500ms); }
.loop-svg .edge.back { stroke-dasharray: 5 5; stroke-dashoffset: 0; opacity: 0; transition: opacity .8s ease 1.3s; }
.rv.in .loop-svg .edge { stroke-dashoffset: 0; }
.rv.in .loop-svg .edge.back { opacity: 1; }
.loop-svg .node { opacity: 0; transition: opacity .6s ease; transition-delay: calc(var(--d, 0) * 160ms + 300ms); }
.rv.in .loop-svg .node { opacity: 1; }
.loop-svg rect { fill: #fff; stroke: var(--acc); stroke-width: 1.2; }
.loop-svg .hl rect { fill: var(--acc); }
.loop-svg .t1 { font: 600 19px var(--serif); fill: var(--ink); text-anchor: middle; }
.loop-svg .t2 { font: 400 12.5px var(--sans); fill: var(--ink-2); text-anchor: middle; }
.loop-svg .hl .t1 { fill: #fff; }
.loop-svg .hl .t2 { fill: rgba(255, 255, 255, .85); }
.cardrow { display: flex; flex-wrap: wrap; gap: clamp(12px, 2vw, 28px); }
.gcard { width: clamp(150px, 17vw, 236px); overflow: hidden; border-radius: 8px; box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 14px 30px -20px rgba(50, 35, 20, .55); transition: transform .55s var(--ease), box-shadow .55s var(--ease); }
.gcard .im { width: 100%; }
.gcard:hover { transform: translateY(-8px) rotate(-1.2deg); box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 24px 40px -22px rgba(50, 35, 20, .6); }
.b-cards.small .gcard { width: clamp(104px, 11.5vw, 160px); border-radius: 6px; }

/* REQUIEM 立绘 */
.lineup { --H: clamp(220px, calc((min(100vw, var(--max)) - 2 * var(--gut)) / 3.9), 420px); display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; scrollbar-width: thin; }
.lineup li { flex: none; display: flex; flex-direction: column; align-items: center; transition: opacity .45s; }
.lu-fig { height: calc(var(--H) * var(--h)); aspect-ratio: var(--r); transition: transform .5s var(--ease); }
.lu-fig .im { width: 100%; height: 100%; object-fit: contain; }
.lu-n { margin-top: 14px; font: 600 15px/1.3 var(--serif); white-space: nowrap; }
.lu-f { font-size: 12px; color: var(--mute); white-space: nowrap; }
@media (hover: hover) {
  .lineup:hover li { opacity: .38; }
  .lineup li:hover { opacity: 1; }
  .lineup li:hover .lu-fig { transform: translateY(-6px); }
}

/* 长卷平移 */
.pan-hd { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px clamp(24px, 4vw, 64px); align-items: end; margin-bottom: 18px; }
.pan-hd p:last-child { color: var(--ink-2); }
.pan { position: relative; height: min(var(--h), 52vh); overflow: hidden; background: var(--paper-2); }
.pan-track { width: max-content; height: 100%; will-change: transform; }
.pan-track .im { width: auto; max-width: none; height: 100%; }
.pan.native { overflow-x: auto; }

/* 章节切换 */
.ch-nav { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(120px, 14vw, 210px); }
.cn { display: flex; flex-direction: column; gap: 14px; padding: clamp(32px, 4vw, 56px) 0 clamp(56px, 7vw, 100px); border-top: 1px solid var(--ink); }
.cn-next { align-items: flex-end; text-align: right; }
.cn + .cn { border-left: 1px solid var(--line); padding-left: 24px; }
.cn-t { font: 600 clamp(28px, 3.4vw, 52px)/1.15 var(--serif); transition: color .35s; }
.cn-t b { margin-right: 14px; font: 500 12px/1 var(--latin); letter-spacing: .12em; vertical-align: middle; color: var(--acc); }
.cn:hover .cn-t { color: var(--acc); }

/* ───────────── 页尾 ───────────── */
.ft { position: relative; overflow: hidden; background: #131313; color: #EDE9E2; }
.ft-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px; align-items: end; max-width: var(--max); margin: 0 auto; padding: clamp(80px, 10vw, 140px) var(--gut) 0; }
.ft-l { padding-bottom: clamp(48px, 6vw, 88px); }
.lab--light { color: rgba(237, 233, 226, .5); }
.ft-title { margin-top: 22px; font: 600 clamp(56px, 8vw, 124px)/1 var(--serif); letter-spacing: .08em; }
.ft-intent { margin-top: 22px; font: 400 17px/1.6 var(--serif); color: rgba(237, 233, 226, .72); }
.ft-contact { margin-top: clamp(36px, 5vw, 64px); border-top: 1px solid rgba(255, 255, 255, .14); }
.ft-contact div { display: grid; grid-template-columns: 64px 1fr; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.ft-contact dt { font-size: 13px; color: rgba(237, 233, 226, .5); }
.copy { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; text-align: left; font: 400 clamp(20px, 2.1vw, 30px)/1.35 var(--serif); transition: color .3s; }
.copy:hover { color: #fff; }
.copy-tip { font: 400 12px/1 var(--sans); color: rgba(237, 233, 226, .45); opacity: 0; transform: translateX(-6px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.copy:hover .copy-tip, .copy:focus-visible .copy-tip { opacity: 1; transform: none; }
.ft-art { width: 100%; max-width: 620px; justify-self: end; }
.ft-art .im { width: 100%; }
.ft-bot { display: flex; justify-content: space-between; gap: 16px; max-width: var(--max); margin: 0 auto; padding: 22px var(--gut) 28px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 12.5px; color: rgba(237, 233, 226, .45); }
.totop { transition: color .3s; }
.totop:hover { color: #fff; }

/* ───────────── 看大图 ───────────── */
.lb { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(15, 14, 13, .96); opacity: 0; transition: opacity .3s ease; }
.lb[hidden] { display: none; }
.lb.on { opacity: 1; }
.lb-fig { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 92vw; }
.lb-fig img { width: auto; height: auto; max-width: 90vw; max-height: 84vh; object-fit: contain; opacity: 0; transform: scale(.985); transition: opacity .35s ease, transform .5s var(--ease); }
.lb-fig img.px { max-width: none; max-height: none; }
.lb-fig img.ready { opacity: 1; transform: none; }
.lb-fig figcaption { font-size: 13px; color: rgba(237, 233, 226, .7); text-align: center; }
.lb-btn { position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; color: #EDE9E2; font-size: 18px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); transition: background-color .3s; }
.lb-btn:hover { background: rgba(255, 255, 255, .1); }
.lb-prev { left: 22px; }
.lb-next { right: 22px; }
.lb-close { position: absolute; top: 16px; right: 18px; padding: 10px 14px; font-size: 13px; letter-spacing: .1em; color: #EDE9E2; }
.lb-count { position: absolute; top: 26px; left: 26px; font: 500 12px/1 var(--latin); letter-spacing: .12em; color: rgba(237, 233, 226, .6); }

.toast { position: fixed; left: 50%; bottom: 28px; z-index: 120; padding: 12px 22px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 13.5px; opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: opacity .4s var(--ease), transform .4s var(--ease); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ───────────── 响应式 ───────────── */
@media (max-width: 1180px) {
  .hd-sub a:not(.hd-ch):not(.on) { display: none; }
}
@media (max-width: 1024px) {
  :root { --hd: 60px; }
  .hd-sub { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: calc(var(--hd) + 28px); }
  .hero-txt { order: 1; padding-bottom: 32px; }
  .hero-rail { order: 2; flex-direction: row; padding: 0 0 12px; }
  .hero-vert { writing-mode: horizontal-tb; letter-spacing: .3em; }
  .hero-names { flex-direction: row; gap: 18px; }
  .hero-names button { flex-direction: row; }
  .hero-names .hn { writing-mode: horizontal-tb; letter-spacing: .1em; }
  .hbar { width: 28px; height: 1px; }
  .hbar b { transform: scaleX(0); transform-origin: left; }
  .hero-names button.on .hbar b { transform: scaleX(1); }
  .hero-names button.run .hbar b { animation-name: hfillx; }
  .hero-stage { order: 3; height: 76svh; min-height: 420px; }
  .feat, .grp, .about, .ch-grid, .b-proj-grid, .b-head, .b-char, .b-char.flip, .b-step, .b-split, .b-split.wide, .b-anim, .sw, .b-loop, .pan-hd, .ft-in { grid-template-columns: minmax(0, 1fr); }
  .feat-dl { margin-top: 20px; padding-top: 0; }
  .b-char.flip .b-char-art { order: 0; }
  .b-char-art { position: static; }
  .st-side { order: -1; }
  .st-list { display: flex; gap: 6px 18px; flex-wrap: wrap; }
  .st-list li + li { border-top: 0; }
  .st-list button { display: flex; gap: 6px; padding: 4px 0; }
  .st-list .th { display: none; }
  .st-list button.on .t { transform: none; }
  .vert { display: none; }
  .ft-art { justify-self: center; max-width: 440px; }
}
@keyframes hfillx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 760px) {
  body { font-size: 15px; }
  .hd-en { display: none; }
  .hd-nav { gap: 20px; }
  .sec-hd { grid-template-columns: minmax(0, 1fr); }
  .sec-index { justify-content: flex-start; }
  .ccards.c3, .ccards.c4 { --n: 2; }
  .grid.c4, .grid.c5, .grid.c6 { --cols: 3 !important; }
  .grid.c4 { --cols: 2 !important; }
  .g-labels { display: none; }
  .about-cols, .b-texts, .b-acts, .b-cast, .b-steps3 { grid-template-columns: minmax(0, 1fr); }
  .b-steps3 li::after { display: none; }
  .b-pair { grid-template-columns: minmax(0, 1fr); }
  .pair-arrow { margin: 0; transform: rotate(90deg); justify-self: center; }
  .anims.c3, .anims.c4 { --n: 2; }
  .credits ul { grid-template-columns: minmax(0, 1fr); }
  .details li { grid-template-columns: 88px 1fr; }
  .b-pixg .pxg { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .lineup { --H: 260px; justify-content: flex-start; }
  .lb-btn { display: none; }
  .ch-nav { grid-template-columns: minmax(0, 1fr); }
  .cn + .cn { border-left: 0; padding-left: 0; }
  .ft-bot { flex-direction: column; }
}

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

/* 标题只在指定位置换行 */
.feat-title, .ch-title, .cn-t, .b-proj-title { word-break: keep-all; overflow-wrap: anywhere; }
.feat-title wbr, .ch-title wbr, .cn-t wbr { display: inline; }

/* 同色面板：一组素材共享的浅色底 */
.panel { background: var(--panel); padding: clamp(16px, 2.2vw, 32px); }
.panel .fig-box, .panel .pl-stage { background: var(--bg, var(--panel)); }
.panel .fig figcaption { margin-top: 8px; }
.grid .fig-box > .im { object-position: 50% 100%; }
.b-title, .b-proj-title small, .ch-lead { text-wrap: balance; }
.b-title { word-break: keep-all; overflow-wrap: anywhere; }

@media (max-width: 1024px) {
  .hero-vert, .hero-names .hn { white-space: nowrap; }
  .hero-rail { align-items: center; gap: 16px; }
}
@media (max-width: 760px) {
  .trio-cap p:not(.lab) { display: none; }
  .trio-cap h3 { font-size: 17px; }
  .hero-vert { display: none; }
  .hero-names { width: 100%; justify-content: space-between; }
}
@media (max-width: 760px) {
  .hero-stage { height: auto; min-height: 0; aspect-ratio: .92; margin-top: 8px; }
}

/* 统一对齐线：标题区右栏、两图对比的右图，都从页面中线 + 半个中缝开始 */
:root { --mid: clamp(40px, 4.5vw, 72px); }
.b-head, .pan-hd, .b-proj-grid, .ch-grid, .b-texts, .b-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--mid); }
.b-pair { position: relative; }
.b-pair .pair-arrow { position: absolute; left: 50%; top: calc((100% - 32px) / 2); margin: 0; transform: translate(-50%, -50%); }
@media (max-width: 1024px) {
  .b-head, .pan-hd, .b-proj-grid, .ch-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .b-texts, .b-pair { grid-template-columns: minmax(0, 1fr); }
  .b-pair { row-gap: 12px; }
  .b-pair .pair-arrow { position: static; justify-self: center; transform: rotate(90deg); }
}
@media (max-width: 760px) {
  .b-cast.small { grid-template-columns: minmax(0, 1fr); }
}

/* 像素分组：备注与副标题 */
.pxg-note { margin-top: 8px; font-size: 12px; color: var(--mute); }
.pxg-items em { margin-top: -4px; font-style: normal; font-size: 11px; color: var(--mute); white-space: nowrap; }
.pxg-items em { margin: 0; font-size: inherit; }
.pxg-items.cols { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 36px 28px; justify-items: center; align-items: end; }
.pxg-items.cols .im { max-width: 100%; height: auto; }

/* 桌游卡牌：带说明的卡、下注牌表格、等高照片行 */
.gc { margin: 0; }
.gc figcaption { margin-top: 10px; font-size: 12.5px; color: var(--mute); text-align: center; }
.cg { display: grid; grid-template-columns: 56px repeat(var(--n), minmax(0, 150px)); gap: 16px 20px; align-items: center; }
.cg-h { font: 500 11px/1 var(--latin); letter-spacing: .1em; color: var(--mute); text-align: center; }
.cg-l { font: 600 16px/1.3 var(--serif); }
.cg .gcard { width: 100%; }
.grid.fit-h { grid-template-columns: var(--cols-tpl); }
@media (max-width: 760px) {
  .cg { grid-template-columns: 36px repeat(var(--n), minmax(0, 1fr)); gap: 10px; }
  .grid.fit-h { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 760px) {
  .b-cards .cardrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .b-cards .gcard, .b-cards.small .gcard { width: 100%; }
}

/* 说明文字：1–3 栏 */
.b-texts { grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); }
.b-texts[style*="--n:1"] > div { max-width: 46em; }

/* 动画 5 段并排 */
.anims.c5 { --n: 5; }

/* REQUIEM 游戏内角色：正面 + 侧面 */
.turns { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 36px 44px; }
.turns li { display: flex; flex-direction: column; align-items: center; }
.tn-pics { display: flex; align-items: flex-end; gap: 6px; }
.tn-img .im { width: auto; max-width: none; height: 100%; }

/* Mom's Birthday 紫光灯机关 */
.b-lights > .lt { margin-top: 28px; }
.lt { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 20px clamp(24px, 4vw, 64px); align-items: center; }
.lt-box { position: relative; aspect-ratio: var(--ar); overflow: hidden; background: #1a1919; }
.lt-box .im { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.lt-box .lt-alt { opacity: 0; transition: opacity .7s ease; }
.lt.uv .lt-alt { opacity: 1; }
.lt-n { font: 500 11px/1 var(--latin); letter-spacing: .12em; color: var(--acc); }
.lt-txt h4 { margin: 8px 0 8px; font: 600 22px/1.3 var(--serif); }
.lt-d { color: var(--ink-2); font-size: 14.5px; }
.lt-state { display: flex; gap: 8px; margin-top: 18px; }
.lt-state button { padding: 6px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; color: var(--mute); transition: background-color .3s, color .3s, box-shadow .3s; }
.lt-state button.on { background: var(--ink); color: var(--paper); box-shadow: none; }
.lt.uv .lt-state button.on { background: #6a3fb0; }
@media (max-width: 1024px) { .lt { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .anims.c5 { --n: 2; }
  .turns { gap: 24px 28px; }
  .tn-img { max-height: 180px; }
}

/* 窄屏：横排素材不超出屏幕 */
.strip-it, .pxg-items li { max-width: 100%; }
.strip-it .im { max-width: 100%; object-fit: contain; }
.pxg-items .im { max-width: 100%; height: auto; }
@media (max-width: 760px) {
  .anims-txt h4 { flex-wrap: wrap; gap: 2px 10px; font-size: 15px; }
}

/* 游戏内角色：一整行铺满版心；角色高度 = (容器宽 - 间距) ÷ 总宽高比，最高 250px */
.b-turns { container-type: inline-size; }
.turns { --gap: 28px; --th: clamp(120px, calc((100cqw - (var(--n) - 1) * var(--gap) - var(--n) * 6px - 48px) / var(--k)), 250px);
  flex-wrap: nowrap; justify-content: space-between; gap: 24px var(--gap); }
.turns li { flex: none; }
.tn-img { height: calc(var(--th) * var(--hr)); }
@media (max-width: 760px) {
  .turns { --th: 170px; flex-wrap: wrap; justify-content: flex-start; gap: 24px 28px; }
}
@media (max-width: 1024px) {
  .turns { --th: 170px; flex-wrap: wrap; justify-content: flex-start; gap: 28px 32px; }
}

/* ───────────── 页眉“作品”下拉面板 ───────────── */
.hd-nav { align-items: center; }
.hd-works { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; }
.hd-works .chev { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .35s var(--ease); }
.hd-works[aria-expanded="true"] .chev { transform: translateY(1px) rotate(-135deg); }
.hd-works::after { content: ""; position: absolute; left: 0; right: 14px; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.hd-works:hover::after, .hd-works.on::after, .hd-works[aria-expanded="true"]::after { transform: scaleX(1); transform-origin: left; }

.wm { position: absolute; top: calc(100% + 1px); right: var(--gut); width: min(380px, calc(100vw - 2 * var(--gut))); max-height: calc(100vh - var(--hd) - 24px); overflow-y: auto; overscroll-behavior: contain;
  background: #171513; color: #EDE9E2; box-shadow: 0 30px 60px -24px rgba(20, 16, 12, .55);
  opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s ease, transform .4s var(--ease), visibility 0s linear .4s; }
.wm.open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .4s var(--ease), visibility 0s; }
.wm-in { padding: 6px 0; }
.wm-row-wrap { display: flex; align-items: stretch; }
.wm-item + .wm-item .wm-row-wrap, .wm-in > .wm-row-wrap + .wm-item .wm-row-wrap { border-top: 1px solid rgba(255, 255, 255, .08); }
.wm-row { position: relative; flex: 1; display: flex; align-items: baseline; gap: 14px; padding: 14px 24px; font-size: 15px; line-height: 1.4; transition: background-color .2s, color .2s; }
.wm-row:hover, .wm-row:focus-visible { background: rgba(255, 255, 255, .06); outline: none; }
.wm-row b { min-width: 18px; font: 500 11px/1 var(--latin); letter-spacing: .1em; color: rgba(237, 233, 226, .45); }
.wm-row .wm-en { margin-left: auto; font: 500 10.5px/1 var(--latin); letter-spacing: .16em; text-transform: uppercase; color: rgba(237, 233, 226, .4); }
.wm-row.on::before { content: ""; position: absolute; left: 10px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--acc); }
.wm-row.on b { color: var(--acc); }
.wm-exp { flex: none; width: 54px; display: grid; place-items: center; border-left: 1px solid rgba(255, 255, 255, .14); color: #EDE9E2; transition: background-color .2s; }
.wm-exp:hover { background: rgba(255, 255, 255, .06); }
.wm-chev { width: 8px; height: 8px; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .35s var(--ease); }
.wm-item.exp .wm-chev { transform: translateY(2px) rotate(-135deg); }
.wm-sub { display: grid; grid-template-rows: 0fr; background: #E9E5DD; color: var(--ink); transition: grid-template-rows .4s var(--ease); }
.wm-sub > div { overflow: hidden; }
.wm-item.exp .wm-sub { grid-template-rows: 1fr; }
.wm-sub a { display: block; margin-left: 50px; padding: 12px 24px 12px 0; border-bottom: 1px solid rgba(23, 21, 19, .22); font-size: 14px; transition: color .2s, padding-left .3s var(--ease); }
.wm-sub a:last-child { border-bottom: 0; }
.wm-sub a:hover, .wm-sub a:focus-visible { color: var(--acc); padding-left: 6px; outline: none; }
@media (max-width: 760px) {
  .wm { right: 0; width: 100vw; max-height: calc(100vh - var(--hd)); }
}

/* 作品面板贴紧屏幕右边缘 */
.wm { right: 0; width: min(400px, 100vw); }

/* 作品面板：按内容收窄，标题都保持一行 */
.wm { width: max-content; max-width: 100vw; }
.wm-row, .wm-sub a { white-space: nowrap; }
.wm-row .wm-en { padding-left: 24px; }
@media (max-width: 760px) { .wm { width: 100vw; } }

/* 页眉“返回”按钮：黑底胶囊，只在项目页出现，回到作品目录里这个项目的位置 */
.hd-back { display: none; }
.is-chapter .hd-back { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 15px 0 12px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 500 13px/1 var(--sans); letter-spacing: .14em; transition: background-color .3s; }
.hd-nav .hd-back::after { display: none; }
.hd-back svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.hd-back:hover { background: #000; }
.hd-back:hover svg { transform: translateX(-3px); }
.hd-back:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }