/* Sherly 作品集 · 纯 CSS，无外部字体与依赖 */

/* ========== 基础 ========== */
:root {
  --paper: #f4f1eb;
  --stage: #e6e1d6;
  --ink: #151515;
  --ink-2: #5a564f;
  --line: #d8d2c6;
  --accent: #d63a28;
  --sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --latin: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1200px;
  /* 撕纸边（页脚顶边、手机首屏的介绍纸） */
  --torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28L0 14 12 9 25 16 38 7 52 13 61 5 77 15 90 10 104 18 118 8 131 12 140 4 157 14 170 9 184 17 197 11 210 6 226 15 239 10 250 19 266 8 279 13 291 5 306 16 320 10 333 14 347 6 361 15 375 9 388 13 400 14 400 28Z'/%3E%3C/svg%3E");
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
/* 平滑滚动等页面加载完再开（由 JS 加 .smooth），否则从别的页跳到 #锚点 时不会定位 */
html.smooth { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink); font: 16px/1.75 var(--sans); overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: #fff; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow { font: 500 12px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }

/* 待补充的信息：上线前搜索「待补充」逐个替换 */
.todo { padding: 0 .35em; border: 1px dashed #a07d00; background: #fff1a8; color: #151515; font-style: normal; font-weight: 400; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 8px 14px; background: var(--ink); color: var(--paper); text-decoration: none; }
.skip:focus { top: 12px; }

/* 滚动进度条：纯 CSS 滚动驱动动画，不支持的浏览器直接不显示 */
.progress { display: none; }
@supports (animation-timeline: scroll()) {
  .progress { display: block; position: fixed; inset: 0 0 auto; z-index: 40; height: 3px; background: var(--accent); transform-origin: 0 50%; animation: progress linear both; animation-timeline: scroll(root); }
  @keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* 跨页面过渡：项目缩略图会「飞」成详情页大图（Chrome / Edge / Safari 新版） */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .6s; animation-timing-function: var(--ease); }
.site-head { view-transition-name: site-head; }

/* ========== 进场动效（JS 加上 .js 后才隐藏，脚本失败也能看到内容） ========== */
.js .reveal { opacity: 0; translate: 0 28px; transition: opacity .9s var(--ease) var(--d, 0s), translate .9s var(--ease) var(--d, 0s); }
.js .reveal.in { opacity: 1; translate: none; }
.js .wipe { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1) var(--d, 0s); }
.js .wipe.in { clip-path: inset(0); }
/* 后退返回时不重播进场动画：否则浏览器以还在动画中的元素为参照恢复滚动，会停错位置 */
.no-intro .hero-word span, .no-intro .hero-head > *, .no-intro .hero-text > *, .no-intro .card, .no-intro .stamp { animation: none; }
.no-intro .reveal { opacity: 1; translate: none; }
.no-intro .wipe { clip-path: none; }

/* 网点「印」出图片：一格格网点从无到大、连成完整画面（呼应作品里的半调网点）。
   不支持 @property 的浏览器直接显示，不影响看图 */
@property --dot { syntax: "<length>"; inherits: false; initial-value: 0px; }
.js .print { --dot: 0px; -webkit-mask: radial-gradient(circle, #000 var(--dot), transparent calc(var(--dot) + .8px)) 0 0 / 9px 9px; mask: radial-gradient(circle, #000 var(--dot), transparent calc(var(--dot) + .8px)) 0 0 / 9px 9px; transition: --dot 1.3s cubic-bezier(.45, 0, .25, 1) var(--d, 0s); }
.js .print.in { --dot: 7px; }
.js .print.printed, .no-intro .print { -webkit-mask: none; mask: none; }

/* ========== 顶栏 ========== */
.site-head { position: sticky; top: 0; z-index: 20; background: rgba(244, 241, 235, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; }
.logo { display: flex; align-items: baseline; gap: 12px; text-decoration: none; }
.logo b { font: 700 21px/1 var(--latin); letter-spacing: -.02em; }
.logo b i { font-style: normal; color: var(--accent); }
.logo span { font-size: 13px; color: var(--ink-2); }
.nav { display: flex; gap: clamp(18px, 3vw, 36px); }
.nav a { position: relative; padding: 8px 0; font-size: 15px; text-decoration: none; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 600px) {
  .logo span { display: none; }
  .nav a { font-size: 14px; }
}

/* ========== 按钮 ========== */
.btn { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px; border: 1.5px solid var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; overflow: hidden; isolation: isolate; transition: color .35s var(--ease), border-color .35s; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateY(101%); transition: transform .45s var(--ease); }
.btn:hover { color: var(--paper); }
.btn:hover::before { transform: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { border-color: var(--ink); }

/* ========== 首屏：超大字被海报压住（就是作品里「字被人物遮挡」的手法） ========== */
/* 电脑：网格排版——大字占满第一行，左边标题和介绍，右边三张海报往上压住大字 */
.hero {
  --hgap: clamp(32px, 5vw, 72px);
  --cw: calc(min(var(--max), 100%) - 2 * var(--gutter));
  position: relative; display: grid; align-items: start; overflow: hidden;
  grid-template-columns: 1fr calc((var(--cw) - var(--hgap)) * 5 / 11) var(--hgap) calc((var(--cw) - var(--hgap)) * 6 / 11) 1fr;
  grid-template-rows: auto auto auto 1fr;
  padding-bottom: clamp(48px, 7vw, 96px);
}
.hero-stage { display: contents; }
.hero-word { grid-column: 1 / -1; grid-row: 1; display: flex; padding: clamp(18px, 2.5vw, 32px) var(--gutter) 0; font: 700 25vw/.8 var(--latin); letter-spacing: -.05em; white-space: nowrap; overflow: hidden; user-select: none; }
.hero-word span { display: inline-block; padding-top: .04em; animation: rise 1s var(--ease) both; animation-delay: calc(.1s + var(--i) * .07s); }
@keyframes rise { from { transform: translateY(120%); } }
/* 手机「排版」叙事里每个字母一开始歪着的量 */
.hero-word span:nth-child(1) { --jx: -.03em; --jy: -.05em; --jr: -10deg; }
.hero-word span:nth-child(2) { --jx: .02em; --jy: .06em; --jr: 7deg; }
.hero-word span:nth-child(3) { --jx: -.01em; --jy: -.08em; --jr: -5deg; }
.hero-word span:nth-child(4) { --jx: .02em; --jy: .04em; --jr: 12deg; }
.hero-word span:nth-child(5) { --jx: -.02em; --jy: -.03em; --jr: -8deg; }
.hero-word span:nth-child(6) { --jx: .03em; --jy: .07em; --jr: 9deg; }

.hero-head { grid-column: 2; grid-row: 2; position: relative; z-index: 3; padding-top: clamp(24px, 3vw, 44px); }
.hero-text { grid-column: 2; grid-row: 3; position: relative; z-index: 3; }
.hero-head > *, .hero-text > * { animation: up .9s var(--ease) both; }
.hero-head > :nth-child(1) { animation-delay: .45s; }
.hero-head > :nth-child(2) { animation-delay: .55s; }
.hero-text > :nth-child(1) { animation-delay: .65s; }
.hero-text > :nth-child(2) { animation-delay: .75s; }
.hero-text > :nth-child(3) { animation-delay: .85s; }
@keyframes up { from { opacity: 0; transform: translateY(24px); } }
.hero-spacer, .story-status { display: none; }
.hero h1 { margin: 14px 0 0; font-size: clamp(34px, 4.4vw, 62px); line-height: 1.18; font-weight: 700; letter-spacing: .01em; }
.hero h1 em { font-style: normal; color: var(--accent); }
.intro { max-width: 30em; margin-top: 20px; font-size: clamp(15px, 1.25vw, 17px); color: var(--ink-2); }
.facts { display: grid; grid-template-columns: 5.5em 1fr; gap: 8px 16px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 15px; }
.facts dt { color: var(--ink-2); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* 三张海报叠放，带一点倾斜和鼠标视差 */
.pile { grid-column: 4; grid-row: 2 / 5; position: relative; z-index: 2; aspect-ratio: 1; margin-top: -13vw; }
.card { position: absolute; display: block; background: var(--stage); text-decoration: none; box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .05); rotate: var(--rot); translate: calc(var(--px, 0) * var(--z) * 1px) calc(var(--py, 0) * var(--z) * 1px); transition: rotate .6s var(--ease), translate .4s ease-out, box-shadow .6s; animation: drop 1.1s var(--ease) both; animation-delay: var(--delay); }
.card:hover { z-index: 5; rotate: 0deg; box-shadow: 0 44px 70px -24px rgba(0, 0, 0, .55); }
.card img { width: 100%; }
.card span { position: absolute; left: 0; bottom: 0; padding: 3px 10px; background: var(--paper); font-size: 12px; line-height: 1.6; }
.card span b { margin-right: 6px; font: 700 12px var(--mono); color: var(--accent); }
/* --sx / --sy / --srot / --ssc：手机叙事开始时，海报「摊在桌上」的偏移、多转的角度和放大量 */
.c-album { top: 0; right: 0; width: 70%; --rot: 4deg; --z: 14; --delay: .5s; --sx: 20vw; --sy: -1vw; --srot: 8deg; --ssc: .08; }
.c-qq { right: 5%; bottom: 2%; width: 60%; --rot: -2.5deg; --z: 22; --delay: .65s; --sx: 22vw; --sy: -2vw; --srot: -9deg; --ssc: .04; }
.c-nina { top: 22%; left: 0; width: 42%; --rot: -5deg; --z: 32; --delay: .8s; --sx: -18vw; --sy: 1vw; --srot: -12deg; --ssc: .1; }
/* Photoshop 的「自由变换」框：叙事里正在被摆放的那张海报带着它 */
.tbox {
  position: absolute; inset: -6px; z-index: 2; border: 1px solid var(--accent); pointer-events: none; opacity: 0; transition: opacity .3s;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 0 / 7px 7px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 50% 0 / 7px 7px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 0 / 7px 7px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 50% / 7px 7px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 50% / 7px 7px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 100% / 7px 7px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 50% 100% / 7px 7px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 100% / 7px 7px no-repeat;
}
.tbox::after { content: "Ctrl + T"; position: absolute; left: -1px; bottom: 100%; margin-bottom: 4px; padding: 0 6px; background: var(--accent); color: #fff; font: 600 10px/1.7 var(--mono); white-space: nowrap; }
@keyframes drop { from { opacity: 0; transform: translateY(90px) scale(.92); } }

/* 旋转印章 */
.stamp { position: absolute; left: -3%; bottom: -3%; z-index: 6; display: grid; place-items: center; width: clamp(92px, 10vw, 132px); aspect-ratio: 1; border-radius: 50%; background: var(--accent); color: #fff; text-decoration: none; animation: pop .7s 1.3s cubic-bezier(.3, 1.6, .5, 1) both; }
.stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; }
.stamp text { font: 700 8.6px var(--latin); letter-spacing: .12em; fill: #fff; }
.stamp b { font-size: clamp(20px, 2.2vw, 28px); transition: transform .35s var(--ease); }
.stamp:hover b { transform: translateY(5px); }
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes pop { from { transform: scale(0) rotate(-90deg); } }

/* 手机：大字 → 海报 → 标题 → 介绍，从上往下排 */
@media (max-width: 860px) {
  .hero { display: block; padding-bottom: 48px; }
  .hero-stage { display: flex; flex-direction: column; }
  .pile { order: 1; width: min(100% - 2 * var(--gutter), 520px); margin: -4vw auto 8px; }
  .hero-head { order: 2; padding: 8px var(--gutter) 0; }
  .hero-text { padding-inline: var(--gutter); }
  .stamp { left: 0; bottom: -2%; width: 84px; }
}

/* ========== 手机「拼海报」滚动叙事（nav.js 判断是触屏手机时给 <html> 加 .story） ==========
   首屏钉住，手指往上滑：歪着的字母一个个排正，摊开的海报叠回原位，最后印章「盖」下来。
   进度由 site.js 写进 --a（0 → 1） */
.story .hero { --a: 0; overflow: visible; padding-bottom: 0; }
.story .hero-stage { position: sticky; top: 60px; height: calc(100vh - 60px); height: calc(100svh - 60px); justify-content: center; overflow: hidden; }
.story .hero-word { padding-bottom: .12em; margin-bottom: -.12em; }
.story .hero-word span { translate: calc(var(--jx) * (1 - var(--a))) calc(var(--jy) * (1 - var(--a))); rotate: calc(var(--jr) * (1 - var(--a))); }
.story .pile { width: min(100% - 2 * var(--gutter), 460px, 100svh - 380px); }
.story .card { transition: box-shadow .6s; translate: calc(var(--sx) * (1 - var(--a))) calc(var(--sy) * (1 - var(--a))); rotate: calc(var(--rot) + var(--srot) * (1 - var(--a))); scale: calc(1 + var(--ssc) * (1 - var(--a))); }
.story .hero:not(.placed) .tbox { opacity: 1; }
.story .stamp { animation: none; opacity: 0; }
.story .stamped .pile { animation: thud .4s ease-out; }
@keyframes thud { 30% { transform: translateY(4px) rotate(.4deg); } 60% { transform: translateY(-2px); } }
.story .story-status { order: 3; display: flex; align-items: center; gap: 8px; align-self: center; margin-top: 16px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fbfaf7; font: 600 12px/1.6 var(--mono); color: var(--ink-2); }
.story .story-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: blink 1s steps(2) infinite; }
.story .stamped .story-status i { background: #2f9e5b; animation: none; }
@keyframes blink { 50% { opacity: .2; } }
/* 首屏钉住的这段滚动距离 */
.story .hero-spacer { display: block; height: 70vh; height: 70svh; }
/* 介绍像一张撕边的纸，从下面盖上来 */
.story .hero-text { z-index: 5; padding-top: 28px; padding-bottom: 56px; background: var(--paper); filter: drop-shadow(0 -10px 14px rgba(0, 0, 0, .08)); }
.story .hero-text::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px; background: var(--paper); -webkit-mask: var(--torn) 0 100% / 400px 28px repeat-x; mask: var(--torn) 0 100% / 400px 28px repeat-x; }

/* ========== 跑马灯：滚动越快转得越快，往回滚会倒转 ========== */
.band-wrap { overflow: hidden; padding-block: clamp(24px, 4vw, 48px); }
.band { width: 110%; margin-left: -5%; overflow: hidden; background: var(--accent); color: #fff; rotate: -2deg; }
.band-track { --bs: clamp(28px, 4.2vw, 60px); display: flex; align-items: center; width: max-content; will-change: transform; }
.band-track span { padding: .2em .45em; font: 700 calc(var(--bs) * var(--k, 1))/1.15 var(--latin); letter-spacing: -.01em; white-space: nowrap; }
.band-track .o { color: transparent; -webkit-text-stroke: 1.5px #fff; }
.band-track i { font-style: normal; font-size: clamp(16px, 2vw, 28px); }

/* 跑马灯每个词一种字体：8 个开源字体（SIL OFL）裁剪到只剩这几个字，合计约 21KB，授权见 fonts/licenses。
   改了跑马灯里的字就要重新裁剪，否则新字会回退成默认字体。--k 用来把各字体的视觉大小拉齐 */
@font-face { font-family: "Sherly Band Poster"; src: url("../fonts/band-poster.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Sherly Band Layout"; src: url("../fonts/band-layout.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Sherly Band Typography"; src: url("../fonts/band-typography.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Sherly Band Color"; src: url("../fonts/band-color.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Sherly Band Haibao"; src: url("../fonts/band-haibao.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Sherly Band Banshi"; src: url("../fonts/band-banshi.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Sherly Band Ziti"; src: url("../fonts/band-ziti.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Sherly Band Secai"; src: url("../fonts/band-secai.woff2") format("woff2"); font-display: block; }
.band-track .fx { font-weight: 400; font-synthesis: none; }
.band-track .f-poster { --k: 1.3; font-family: "Sherly Band Poster", var(--latin); letter-spacing: .02em; }
.band-track .f-layout { --k: 1.02; font-family: "Sherly Band Layout", var(--latin); }
.band-track .f-typo { --k: .78; font-family: "Sherly Band Typography", var(--mono); letter-spacing: -.03em; }
.band-track .f-color { --k: .95; font-family: "Sherly Band Color", var(--latin); padding-bottom: .32em; }
.band-track .f-haibao { --k: 1; font-family: "Sherly Band Haibao", var(--sans); }
.band-track .f-banshi { --k: 1.02; font-family: "Sherly Band Banshi", var(--sans); }
.band-track .f-ziti { --k: 1.12; font-family: "Sherly Band Ziti", var(--sans); }
.band-track .f-secai { --k: 1; font-family: "Sherly Band Secai", var(--sans); }

/* ========== 通用区块 ========== */
.section { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(64px, 9vw, 128px); border-top: 1px solid var(--line); }
.band-wrap + .section { border-top: 0; }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 40px; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head h2 { margin-top: 8px; font-size: clamp(30px, 3.8vw, 48px); line-height: 1.2; font-weight: 700; }
.sec-head > p { max-width: 28em; color: var(--ink-2); }
/* 背景里的轮廓大字，随滚动横移 */
.ghost { position: absolute; top: clamp(12px, 2vw, 32px); left: 30%; z-index: -1; font: 700 clamp(88px, 17vw, 250px)/1 var(--latin); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px #ddd6c9; white-space: nowrap; pointer-events: none; user-select: none; translate: calc(var(--gx, 0) * 1px) 0; }

/* ========== 项目 ========== */
.proj { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 40px); align-items: center; }
.proj + .proj { margin-top: clamp(64px, 9vw, 120px); }
/* 灰卡纸「展台」：不同比例的海报都完整放进同一尺寸的框里 */
.proj-stage { grid-column: 1 / span 7; grid-row: 1; position: relative; isolation: isolate; display: block; aspect-ratio: 4 / 3; background: var(--stage); overflow: hidden; }
/* 悬停时铺开一层半调网点（呼应作品里的网点质感） */
.proj-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle, var(--accent) 1.3px, transparent 1.9px) 0 0 / 11px 11px; opacity: .5; clip-path: inset(0 100% 0 0); transition: clip-path .8s cubic-bezier(.7, 0, .2, 1); }
.proj-stage:hover::before { clip-path: inset(0); }
.proj-stage > img { position: absolute; left: 8%; top: 8%; width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .22)); transform: perspective(1000px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)) translateY(var(--lift, 0px)); transition: transform .5s var(--ease); }
.proj-stage:hover > img { --lift: -10px; }
/* 手机叙事里，NINA 展台换成 4 个图层，滚到屏幕中间时拆开、离开时合上（--e 由 site.js 写） */
.mini-layers { display: none; }
.story .mini-layers { position: absolute; left: 50%; top: 50%; display: block; width: 58%; aspect-ratio: 1080 / 1439; translate: -50% -50%; perspective: 1400px; }
.story .mini-layers + img { display: none; }
.mini-inner { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateY(calc(10% * var(--e, 0))) rotateX(calc(56deg * var(--e, 0))) rotateZ(calc(-34deg * var(--e, 0))) scale(calc(1 - .18 * var(--e, 0))); }
.mini-inner img { position: absolute; inset: 0; width: 100%; height: 100%; transform: translateZ(calc(var(--i) * 46px * var(--e, 0))); box-shadow: 0 0 0 1px rgba(21, 21, 21, calc(.22 * var(--e, 0))); }
.mini-inner img:first-child { box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .3); }
.proj-info { grid-column: 9 / span 4; grid-row: 1; }
.projects > .proj:nth-child(even) .proj-stage { grid-column: 6 / span 7; }
.projects > .proj:nth-child(even) .proj-info { grid-column: 1 / span 4; }
.proj .num { font: 700 clamp(56px, 6.5vw, 96px)/.9 var(--latin); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--accent); transition: color .5s; }
.proj:hover .num { color: var(--accent); }
.proj h3 { margin: 18px 0 12px; font-size: clamp(22px, 2.1vw, 28px); line-height: 1.35; font-weight: 700; }
.proj h3 a { text-decoration: none; }
.proj h3 a:hover { color: var(--accent); }
.proj-info > p { color: var(--ink-2); }
.spec { margin-top: 22px; border-top: 1px solid var(--line); font-size: 14px; }
.spec div { display: grid; grid-template-columns: 3.5em 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.spec dt { color: var(--ink-2); }
.more { display: inline-flex; gap: 8px; margin-top: 24px; padding-bottom: 3px; border-bottom: 2px solid var(--accent); font-weight: 600; text-decoration: none; }
.more span { transition: transform .35s var(--ease); }
.more:hover { color: var(--accent); }
.more:hover span { transform: translateX(5px); }
@media (max-width: 860px) {
  .proj { display: block; }
  .proj-info { margin-top: 24px; }
  /* 竖版海报用竖框（--sr 写在 HTML 上），不再缩在横框中间 */
  .proj-stage { aspect-ratio: var(--sr, 4 / 3); max-height: 80vh; }
  .proj-stage > img { left: 6%; top: 6%; width: 88%; height: 88%; }
}
/* 触屏没有悬停：展台滚进屏幕时自动铺网点、海报浮起、编号填色；倾斜改由滚动驱动（site.js） */
@media (hover: none) {
  .proj-stage > img { transition: transform .25s linear; }
  .proj-stage.in::before { clip-path: inset(0); transition-delay: .6s; }
  .proj-stage.in > img { --lift: -8px; }
  .proj-info.in .num { color: var(--accent); transition-delay: .5s; }
  .card { transition: rotate .6s var(--ease), translate .15s linear, box-shadow .6s; }
}

/* ========== 练习墙：等高排版，每张图按自身比例分宽度，不裁切 ========== */
.gallery { --h: 260px; display: flex; flex-wrap: wrap; gap: 28px 16px; }
.gallery::after { content: ""; flex: 3 1 0; }
.gallery figure { flex: var(--r) 1 calc(var(--r) * var(--h)); min-width: 0; }
.gallery a { display: block; overflow: hidden; background: var(--stage); cursor: zoom-in; }
.gallery img { width: 100%; transition: transform .7s var(--ease); }
.gallery a:hover img { transform: scale(1.04); }
.gallery figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; }
.gallery figcaption b { display: block; font-weight: 600; }
.gallery figcaption span { font-size: 13px; color: var(--ink-2); }
.note { max-width: 46em; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.gallery-meter { display: none; }
@media (max-width: 900px) { .gallery { --h: 200px; } }
/* 手机：练习墙改成左右滑的卡片，每张等高、完整不裁切 */
@media (max-width: 600px) {
  .gallery { flex-wrap: nowrap; gap: 10px; margin-inline: calc(var(--gutter) * -1); padding: 8px 14vw 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 14vw; scrollbar-width: none; overscroll-behavior-x: contain; }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery::after { content: ""; flex: 0 0 1px; }
  /* 3D 卡片流：正中那张正对着你，两边的往后转、变小、变淡（--d 是离中心的距离，site.js 写） */
  .gallery figure { flex: 0 0 auto; width: min(calc(var(--r) * 240px), 72vw); scroll-snap-align: center; transform: perspective(700px) rotateY(calc(var(--d, 0) * -42deg)) scale(calc(1 - var(--ad, 0) * .16)); }
  .gallery a { position: relative; display: grid; height: 240px; background: none; }
  .gallery a::after { content: ""; position: absolute; inset: 0; background: var(--paper); opacity: calc(var(--ad, 0) * .6); pointer-events: none; }
  .gallery img { height: 100%; object-fit: contain; object-position: center bottom; }
  .gallery figcaption { opacity: calc(1 - var(--ad, 0) * .7); }
  .gallery-meter { display: flex; align-items: center; gap: 14px; margin-top: 18px; font: 600 12px/1 var(--mono); color: var(--ink-2); }
  .gallery-meter i { position: relative; flex: 1; height: 2px; background: var(--line); }
  .gallery-meter b { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; transform: scaleX(.12); transition: transform .15s linear; }
}

/* ========== 关于 ========== */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.about-lead { font-size: clamp(19px, 1.9vw, 24px); line-height: 1.7; font-weight: 500; }
.rows > div { display: grid; grid-template-columns: 5em 1fr; gap: 6px 24px; padding: 20px 0; border-top: 1px solid var(--line); }
.rows > div:last-child { border-bottom: 1px solid var(--line); }
.rows h3 { font-size: 15px; line-height: 1.75; font-weight: 600; }
.rows .muted { color: var(--ink-2); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { padding: 1px 12px; border: 1px solid var(--line); background: #fbfaf7; font-size: 14px; }
.how li { display: grid; grid-template-columns: 2.4em 1fr; }
.how li + li { margin-top: 6px; }
.how b { font: 700 13px/1.75rem var(--mono); color: var(--accent); }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .rows > div { grid-template-columns: 1fr; } }

/* ========== 联系（页脚），顶边是撕纸 ========== */
.contact { position: relative; margin-top: 30px; padding-block: clamp(64px, 9vw, 128px) 40px; background: var(--ink); color: var(--paper); }
.contact::before, .contact::after { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px; -webkit-mask: var(--torn) 0 100% / 400px 28px repeat-x; mask: var(--torn) 0 100% / 400px 28px repeat-x; }
.contact::before { background: #fdfcf9; translate: 0 -3px; -webkit-mask-position: 160px 100%; mask-position: 160px 100%; }
.contact::after { background: var(--ink); margin-bottom: -1px; }
.contact .eyebrow { color: #a8a298; }
.contact h2 { margin-top: 12px; font-size: clamp(36px, 6vw, 80px); line-height: 1.12; font-weight: 700; }
.contact h2 em { font-style: normal; color: var(--accent); }
.contact .sub { max-width: 30em; margin-top: 18px; color: #c9c3b8; }
.channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-top: 48px; }
.channels div { padding: 20px 0; border-top: 1px solid #3a3733; }
.channels dt { font: 500 12px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #a8a298; }
.channels dd { margin-top: 6px; font-size: clamp(17px, 1.6vw, 20px); font-weight: 600; }
.channels a { text-decoration-color: var(--accent); text-underline-offset: 4px; }
/* 点一下复制 */
.copy { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: copy; }
.copy small { font: 500 11px/1.5 var(--mono); letter-spacing: .06em; color: #a8a298; }
.copy:hover small { color: var(--accent); }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 110; max-width: calc(100vw - 32px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 10px 18px; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 600; box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .45); opacity: 0; translate: -50% 12px; pointer-events: none; transition: opacity .25s, translate .35s var(--ease); }
.toast.on { opacity: 1; translate: -50% 0; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: clamp(64px, 8vw, 112px); padding-top: 24px; border-top: 1px solid #3a3733; font-size: 13px; color: #a8a298; }
.foot p { max-width: 44em; }
@media (max-width: 760px) { .channels { grid-template-columns: 1fr; } }

/* ========== 项目详情页 ========== */
.case-head { padding-block: clamp(28px, 4vw, 48px); }
.back { display: inline-flex; gap: 8px; font-size: 14px; color: var(--ink-2); text-decoration: none; }
.back:hover { color: var(--accent); }
.case-head .eyebrow { margin-top: clamp(28px, 4vw, 48px); }
.case-head h1 { margin: 12px 0 16px; font-size: clamp(30px, 4.6vw, 58px); line-height: 1.2; font-weight: 700; }
.case-head .lead { max-width: 34em; font-size: clamp(16px, 1.5vw, 19px); color: var(--ink-2); }
.meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px 24px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.meta dt { font: 500 12px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.meta dd { margin-top: 4px; font-size: 15px; }

.cover { padding: clamp(16px, 5vw, 72px); background: var(--stage); }
.cover a { display: block; max-width: var(--cw, 100%); margin-inline: auto; box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .35); cursor: zoom-in; }
.cover img { width: 100%; }
.cover figcaption { margin-top: 14px; text-align: center; font-size: 13px; color: var(--ink-2); }

.case-body { padding-top: clamp(24px, 4vw, 48px); }
.block { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 12px 48px; padding-block: clamp(32px, 5vw, 56px); border-top: 1px solid var(--line); }
.block:first-child { border-top: 0; }
.block h2 { font-size: 20px; line-height: 1.4; font-weight: 700; }
.block h2 small { display: block; margin-bottom: 4px; font: 500 12px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.prose > p, .prose > ul { max-width: 40em; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: 1em; }
.prose > ul > li { position: relative; padding-left: 1.3em; }
.prose > ul > li + li { margin-top: .6em; }
.prose > ul > li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; background: var(--accent); }
.prose strong { font-weight: 700; }
@media (max-width: 760px) { .block { grid-template-columns: 1fr; } }

/* NINA：把 PSD 拆成 4 个图层，可在 3D 拆解和合成之间切换 */
.steps { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 56px); margin-top: clamp(56px, 7vw, 96px); align-items: center; }
.layers-col { display: grid; justify-items: center; gap: 20px; }
.layers { position: relative; width: 100%; max-width: 380px; aspect-ratio: 1080 / 1439; perspective: 2000px; }
.layers-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1.2s var(--ease); }
.plane { position: absolute; inset: 0; transform: translateZ(0); transition: transform 1.2s var(--ease), opacity .45s, box-shadow .45s; }
.plane img { width: 100%; height: 100%; }
.plane.base { box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .35); }
.plane.off { opacity: 0; }
.plane-tag { position: absolute; top: 0; left: 0; padding: 1px 8px; background: var(--ink); color: #fff; font: 600 12px/1.7 var(--mono); white-space: nowrap; opacity: 0; translate: 0 -100%; transition: opacity .45s, background-color .3s; }
.is-3d .layers-inner { transform: translateY(18%) rotateX(58deg) rotateZ(-36deg) scale(.76); }
.is-3d .plane { transform: translateZ(calc(var(--i) * var(--gap, 72px))); box-shadow: 0 0 0 1px rgba(21, 21, 21, .22); }
.is-3d .plane.base { box-shadow: 0 0 0 1px rgba(21, 21, 21, .22), 0 40px 60px -10px rgba(0, 0, 0, .3); }
.is-3d .plane.cur { transform: translateZ(calc(var(--i) * var(--gap, 72px) + 32px)); box-shadow: 0 0 0 2px var(--accent); }
.is-3d .plane.off { opacity: .1; }
.is-3d .plane-tag { opacity: 1; }
.is-3d .plane.cur .plane-tag { background: var(--accent); }
.layers-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px; border: 1.5px solid var(--ink); background: transparent; font-size: 14px; font-weight: 600; cursor: pointer; }
.layers-toggle::before { content: ""; width: 28px; height: 16px; border-radius: 8px; background: var(--line) radial-gradient(circle at 8px 50%, #fff 5px, transparent 5.5px); transition: background .3s; }
.layers-toggle[aria-pressed="true"]::before { background: var(--accent) radial-gradient(circle at 20px 50%, #fff 5px, transparent 5.5px); }
.step-list { display: grid; gap: 8px; }
.step-list button { display: grid; grid-template-columns: 2.4em 1fr; width: 100%; padding: 14px 16px; border: 1px solid var(--line); background: transparent; text-align: left; font-size: 14px; line-height: 1.65; color: var(--ink-2); cursor: pointer; transition: border-color .2s, background-color .2s, color .2s, translate .35s var(--ease); }
.step-list button b { display: block; font-size: 15px; color: var(--ink); }
.step-list button i { font: 700 13px/1.65rem var(--mono); font-style: normal; }
.step-list button:hover { border-color: var(--ink-2); }
.step-list button[aria-pressed="true"] { border-color: var(--ink); background: #fbfaf7; color: var(--ink); translate: 6px 0; }
.step-list button[aria-pressed="true"] i { color: var(--accent); }
@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; }
  .layers { --gap: 52px; max-width: 280px; margin-block: 24px 8px; }
  .step-list button[aria-pressed="true"] { translate: none; }
}
/* 手机叙事：图层钉在上面，下面的步骤滚过时逐层点亮；拆开的程度 --e 跟着手指走（site.js 写） */
.story .steps { display: block; margin-top: 32px; }
.story .layers-col { position: sticky; top: 60px; z-index: 2; padding: 18px 0 30px; background: linear-gradient(var(--paper) 86%, rgba(244, 241, 235, 0)); }
.story .layers { --gap: 50px; max-width: min(240px, 40svh); margin: 10px auto 0; }
.story .layers-toggle { display: none; }
.story .step-list { position: relative; z-index: 1; display: block; padding-bottom: 24svh; }
.story .step-list li { display: flex; align-items: center; min-height: 34svh; }
.story .step-list button[aria-pressed="true"] { translate: none; }
.story .steps .layers-inner { transition: none; transform: translateY(calc(16% * var(--e, 0))) rotateX(calc(58deg * var(--e, 0))) rotateZ(calc(-36deg * var(--e, 0))) scale(calc(1 - .22 * var(--e, 0))); }
.story .steps .plane { transition: opacity .45s, box-shadow .45s; transform: translateZ(calc(var(--i) * var(--gap) * var(--e, 0))); }
.story .steps .plane.cur { transform: translateZ(calc((var(--i) * var(--gap) + 30px) * var(--e, 0))); }

.case-nav { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(24px, 4vw, 48px); border-block: 1px solid var(--line); }
.case-nav a { display: block; padding: clamp(24px, 4vw, 40px) 24px clamp(24px, 4vw, 40px) 0; text-decoration: none; }
.case-nav a + a { padding: clamp(24px, 4vw, 40px) 0 clamp(24px, 4vw, 40px) 24px; border-left: 1px solid var(--line); text-align: right; }
.case-nav small { display: block; font: 500 12px/1.5 var(--mono); letter-spacing: .08em; color: var(--ink-2); }
.case-nav span { display: block; margin-top: 8px; font-size: clamp(17px, 2.4vw, 26px); line-height: 1.35; font-weight: 700; transition: color .3s, translate .4s var(--ease); }
.case-nav a:hover span { color: var(--accent); translate: -6px 0; }
.case-nav a + a:hover span { translate: 6px 0; }

.site-foot { padding-block: 32px 40px; font-size: 13px; color: var(--ink-2); }
.site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; }
.site-foot p { max-width: 44em; }
.site-foot a { color: var(--ink); font-weight: 600; text-decoration: none; }
.site-foot a:hover { color: var(--accent); }

/* ========== 404 ========== */
.lost { min-height: 70vh; display: grid; place-content: center; justify-items: center; gap: 20px; padding-block: 64px; text-align: center; }
.lost b { font: 700 clamp(96px, 20vw, 220px)/.9 var(--latin); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 2px var(--accent); }

/* ========== 光标跟随（仅鼠标设备） ========== */
.cursor { position: fixed; top: 0; left: 0; z-index: 90; display: grid; place-items: center; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.5px solid #fff; border-radius: 50%; mix-blend-mode: difference; pointer-events: none; opacity: 0; transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background-color .3s, border-color .3s, opacity .3s; }
.cursor span { font-size: 13px; font-weight: 700; color: #fff; opacity: 0; transition: opacity .2s; }
.cursor.on { opacity: 1; }
.cursor.big { width: 78px; height: 78px; margin: -39px 0 0 -39px; border-color: var(--accent); background: var(--accent); mix-blend-mode: normal; }
.cursor.big span { opacity: 1; }
.lb-lock .cursor { opacity: 0; }

/* ========== 灯箱 ========== */
.lb { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 64px 72px 24px; background: rgba(17, 16, 15, .95); color: #f4f1eb; }
.lb.open { display: flex; animation: fade .3s ease both; }
.lb.open figure { animation: zoom .5s var(--ease) both; }
@keyframes fade { from { opacity: 0; } }
@keyframes zoom { from { opacity: 0; transform: scale(.95); } }
.lb figure { display: flex; flex-direction: column; align-items: center; max-width: 100%; }
.lb img { width: auto; max-width: 100%; max-height: calc(100vh - 190px); }
@supports (height: 100dvh) { .lb img { max-height: calc(100dvh - 190px); } }
.lb figcaption { max-width: 40em; margin-top: 16px; text-align: center; font-size: 14px; line-height: 1.6; }
.lb figcaption b { display: block; font-size: 16px; }
.lb figcaption span { color: #b9b3a8; }
.lb button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .35); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.lb button:hover { border-color: var(--accent); background: var(--accent); }
.lb [hidden] { display: none; }
.lb-close { top: 12px; right: 12px; }
.lb-prev, .lb-next { top: 50%; margin-top: -24px; }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
.lb-count { position: absolute; top: 24px; left: 20px; font: 13px var(--mono); color: #b9b3a8; }
html.lb-lock { overflow: hidden; }
@media (max-width: 600px) {
  .lb { padding: 64px 12px 84px; }
  .lb img { max-height: calc(100vh - 240px); }
  .lb-prev, .lb-next { top: auto; bottom: 16px; margin: 0; }
}

/* ========== 系统开了「减少动态效果」时，全部静止 ========== */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html.smooth { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; translate: none; }
  .js .wipe { clip-path: none; }
  .js .print { -webkit-mask: none; mask: none; }
}