/* ==========================================================================
   SHE YIN · 摄隐 — personal photography site
   参考 yoshihikoueda.com 的气质:极简、胶片、整页即一张大照片
   现代化改进:hash 路由、响应式、无障碍、prefers-reduced-motion
   ========================================================================== */

:root{
  --bg:#000;
  --ink:#e7e7e7;
  --dim:#a7a7a7;
  --faint:#777;
  --line:rgba(255,255,255,.14);
  --paper:#4b4b4b;
  --sans:"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --serif:"Songti SC","STSong","Noto Serif CJK SC","Source Han Serif SC",Georgia,"Times New Roman",serif;
  --ease:cubic-bezier(.22,.61,.21,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{background:#000;-webkit-text-size-adjust:100%}
html,body{height:100%}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:opacity .7s var(--ease);
}
body.is-loading{opacity:0}
body.v-works{--bg:var(--paper);--ink:#dcdcdc;--dim:#8f8f8f;--faint:#6b6b6b;--line:rgba(255,255,255,.16)}
body.v-work{--bg:#000;--ink:#c2c2c2;--dim:#8a8a8a}
body.v-about{--bg:#0c0c0c}

::selection{background:rgba(190,190,190,.85);color:#000}
a{color:inherit;text-decoration:none}
button{background:none;border:0;color:inherit;font:inherit;cursor:pointer}
img{display:block}
.serif{font-family:var(--serif)}

/* —— 胶片颗粒罩层 —— */
#grain{
  position:fixed;inset:0;z-index:180;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.8'/></svg>");
}

/* —— 路由遮罩 —— */
#fx{position:fixed;inset:0;z-index:300;background:#000;opacity:0;pointer-events:none;transition:opacity .42s ease}
#fx.on{opacity:1;pointer-events:auto;transition:opacity .08s ease}

/* —— 顶部标识与导航 —— */
#mast{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:18px 22px 0;pointer-events:none;
}
#mast a,#mast button{pointer-events:auto}
.brand{display:flex;flex-direction:row;align-items:center;gap:13px;font-weight:700;transition:opacity .3s}
.brand:hover{opacity:.85}
.brand .avatar{
  width:48px;height:48px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.4);background:#1c1c1c;
  box-shadow:0 1px 10px rgba(0,0,0,.4);
}
.brand .avatar img{width:100%;height:100%;object-fit:cover;display:block}
/* 字标:设计师给的 logo.png(白字、透明底,已按字身裁切,
   所以 CSS 里的 height 就是字身高度,和 48px 头像并排是"字标略矮于头像") */
.brand-logo{display:block;height:32px;width:auto;flex:0 0 auto}
#gnav{display:flex;align-items:center;gap:20px}
#gnav a,#gnav button{
  font-size:10.5px;letter-spacing:.24em;color:var(--dim);
  padding:6px 2px;position:relative;white-space:nowrap;transition:color .3s;
}
#gnav a::after,#gnav button::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
#gnav a:hover,#gnav button:hover,#gnav a.on,#gnav button.on{color:var(--ink)}
#gnav a:hover::after,#gnav button:hover::after,#gnav a.on::after,#gnav button.on::after{transform:scaleX(1);transform-origin:left}
#gnav .divider{width:1px;height:12px;background:var(--line)}

/* 深色暗房中隐藏全局顶栏,只保留极简返回 */
body.v-work #mast{opacity:0;pointer-events:none;transition:opacity .5s ease}
/* 顶栏整体透明后,里面的链接仍会拦住点击(会挡住大图页左上角的"返回作品集"),
   所以整个顶栏在这时彻底不接收鼠标事件 */
body.v-work #mast a,body.v-work #mast button{pointer-events:none}

/* ============ 视图切换 ============ */
.view{display:none;min-height:100vh}
.view.active{display:block;animation:viewIn .6s var(--ease)}
@keyframes viewIn{from{opacity:0}to{opacity:1}}

/* ============ 首页:一张大照片 ============ */
#view-home{position:relative;height:100vh;overflow:hidden;background:#000}
#home-ph{position:absolute;inset:0}
#home-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 2.2s ease;transform:scale(1.001)}
#home-ph img.show{opacity:1}
#home-ph .shade{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 30% 42%, rgba(0,0,0,.18) 0%, rgba(0,0,0,.62) 78%, rgba(0,0,0,.82) 100%);
}
@keyframes homeDrift{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.06) translate3d(0,-.6%,0)}}
#home-ph img.drift{animation:homeDrift 9s var(--ease) forwards}

.home-txt{
  position:absolute;left:6vw;bottom:16vh;max-width:86vw;z-index:5;
}
.home-txt .lead{font-size:11px;letter-spacing:.5em;color:var(--dim);margin-bottom:22px}
.home-txt h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(64px,13vw,196px);line-height:.98;letter-spacing:.06em;
  color:#f2f2f2;text-shadow:0 2px 60px rgba(0,0,0,.6);
}
.home-txt h1 .latin{
  font-size:.6em;letter-spacing:.03em;opacity:.92;
}
/* 中英之间的间隔点:自己画的小圆点 —— 直径、位置、两侧间距都在这里调。
   点比中文字小得多才像排版符号,大了就变成一个"字"了。 */
.home-txt h1 .dot{
  display:inline-block;width:.068em;height:.068em;border-radius:50%;
  background:currentColor;opacity:.6;letter-spacing:0;
  vertical-align:.33em;              /* 相对中文基线抬高,落在两种字的视觉中线上 */
  margin:0 .105em;                   /* 两侧留白相等,点才是"居中"的 */
}
.home-tag{font-size:11.5px;letter-spacing:.34em;color:#d8d8d8;margin-top:26px}
.home-tag small{display:block;color:var(--dim);margin-top:8px;letter-spacing:.22em}
/* 按钮上的中英对照小字(与顶栏「首页 HOME」「全屏 FULLSCREEN」同一套做法) */
.bi-en{margin-left:.55em;font-size:.82em;letter-spacing:.24em;opacity:.72}
.home-cue .bi-en{margin-left:0}   /* 这里父级是 flex,gap 已经在管间距 */

.home-cue{margin-top:44px}
.home-cue a{
  display:inline-flex;align-items:center;gap:12px;
  font-size:11px;letter-spacing:.42em;color:#cfcfcf;
  padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.4);
  transition:color .35s,gap .35s;
}
.home-cue a:hover{color:#fff;gap:20px}
.home-cue .ar{font-size:13px}
.home-foot{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 24px;color:var(--dim);font-size:9.5px;letter-spacing:.28em;
}
/* 右下角:版权 + 备案(内容来自 data.js 的 legal;备案号留空就只剩版权那一句) */
.home-foot .legal{
  display:flex;align-items:center;gap:20px;
  letter-spacing:.16em;color:var(--faint);
}
.home-foot .legal a{color:inherit;transition:color .3s}
.home-foot .legal a:hover{color:#dcdcdc}
.home-foot .legal .cp{color:var(--dim)}

/* ============ 作品列表 ============ */
#view-works{position:relative;padding:84px 0 0}
.view-title{
  padding:0 26px 26px;font-size:10.5px;font-weight:400;letter-spacing:.46em;color:var(--dim);
  display:flex;gap:14px;align-items:baseline;text-transform:uppercase;
}
.view-title em{font-style:normal;font-family:var(--serif);letter-spacing:.4em;color:var(--faint)}
#sheet{padding-bottom:60px}

.row{
  --fh:118px;                       /* 一行胶片的高度 */
  --sh:var(--fh);                   /* 胶片画面高度:参考站 SP 把 .images 缩到 .91 */
  position:relative;height:var(--fh);margin-bottom:9px;
  background:#232323;
}
.beltbox{position:absolute;inset:0;overflow:hidden}
.belt{position:absolute;top:0;left:0;height:100%;display:flex;will-change:transform;transform:translate3d(0,0,0)}
.seq{display:flex;height:100%;flex:0 0 auto}
.fr{
  display:block;height:var(--sh);position:relative;flex:0 0 auto;outline:none;overflow:hidden;
}
/* 每帧 = 一扇窗 + 上下叠放的两张同图
   (同参考站雪碧图的竖直平铺:图高 = 帧高,所以向下平移正好一帧又完全重合) */
.fr .win{position:relative;display:block;height:var(--sh);overflow:hidden}
.fr .stack{display:block;height:calc(var(--sh) * 2);will-change:transform}
.fr .stack img{display:block;height:var(--sh);width:auto;max-width:none}
.fr .cap{
  position:absolute;left:8px;bottom:6px;z-index:3;display:none;
  font-size:9px;letter-spacing:.2em;color:#fff;text-shadow:0 1px 4px #000;
}
/* 悬停单张照片:整幅向上滚动一帧高度(参考站 a.over 的 background-position-y 0→100px),
   transitionend 后瞬间归位——因为 -100% 与 0 画面完全相同,肉眼看不到接缝 */
.fr.over .stack{
  -webkit-transform:translate3d(0,calc(var(--sh) * -1),0);
  transform:translate3d(0,calc(var(--sh) * -1),0);
  -webkit-transition:-webkit-transform .6s cubic-bezier(.3,.2,.3,1);
  transition:transform .6s cubic-bezier(.3,.2,.3,1);
}

/* 标题遮罩(悬停胶片条时出现) */
.veil{
  position:absolute;inset:0;z-index:5;pointer-events:none;
  display:flex;flex-direction:column;justify-content:center;gap:7px;
  padding:0 28px;opacity:0;transition:opacity 1s;
  background:linear-gradient(90deg, rgba(12,12,12,.9) 0%, rgba(12,12,12,.72) 42%, rgba(12,12,12,.42) 70%, rgba(12,12,12,.05) 100%);
}
.row.hov-veil .veil{opacity:1;transition:opacity .8s ease-out .5s}
.row.forcehide .veil{opacity:0!important;transition:opacity 1s}
.veil .no{font-size:9px;letter-spacing:.4em;color:#9a9a9a}
.veil .t{
  font-size:34px;font-weight:700;letter-spacing:.06em;line-height:1;color:#ececec;
  text-transform:uppercase;
}
.veil .tz{font-size:11px;letter-spacing:.26em;color:#b3b3b3;margin-top:2px}
.veil .tz em{font-family:var(--serif);font-style:normal;margin-right:12px;color:#cfcfcf}

/* 进入详情时淡出整版 */
#view-works.leaving #sheet{opacity:0;filter:blur(6px) brightness(.2);transition:opacity .55s ease,filter .55s ease}

.sheet-foot{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;justify-content:center;padding:10px;
  font-size:9px;letter-spacing:.34em;color:var(--faint);
  background:linear-gradient(transparent, rgba(0,0,0,.55));
}

/* ============ 系列大图 ============ */
#view-work{position:relative;height:100vh;overflow:hidden;background:#000}
#w-top{
  position:absolute;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:flex-start;gap:18px;padding:20px 24px 0;
  pointer-events:none;
  opacity:1;transition:opacity 1s;
}

/* ---- 打开一个系列:先只出现这组照片的标题(参考站 .detail.initial > h1) ----
   标题淡入 1.5s → 停 1.5s → 淡出 1s → 照片从纯黑里亮起来 */
#w-intro{
  display:none;position:absolute;top:50%;left:50%;z-index:2;
  -webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);
  text-align:center;white-space:nowrap;
  font-size:40px;font-weight:400;line-height:1.1;color:#666;
  opacity:0;pointer-events:none;cursor:default;user-select:none;-webkit-user-select:none;
}
#view-work.initial #w-intro{display:block}
#w-intro.show{opacity:1;transition:opacity 1.5s}
#w-intro.hide{opacity:0;transition:opacity 1s}
#w-intro .zh{display:block;letter-spacing:.14em}
#w-intro .en{display:block;margin-top:16px;font-size:10px;letter-spacing:.42em;color:#4d4d4d}

/* 开场期间:顶栏、图注、照片全部藏起来 */
#view-work.initial #w-top{opacity:0;transition:none}
#view-work.initial #ph-img{opacity:0;filter:brightness(0)}
/* 标题退场后:照片从纯黑亮起(参考站 li.show.anim 的 brightness/opacity) */
#ph.reveal #ph-img{opacity:1;filter:brightness(1);transition:opacity 2s,filter 1.8s ease-out}
#w-top a{pointer-events:auto;font-size:10.5px;letter-spacing:.26em;color:var(--dim);transition:color .3s}
#w-top a:hover{color:#fff}
.w-titles{display:flex;flex-direction:column;gap:5px;margin-left:10px;text-align:center}
.w-titles .zh{font-size:15px;color:#e6e6e6;letter-spacing:.34em}
.w-titles .en{font-size:9px;letter-spacing:.3em;color:var(--dim)}
#w-top .spacer{flex:1}

#ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
#ph-stage{max-width:min(88vw,1500px);max-height:84vh}
#ph-img{
  max-width:min(88vw,1500px);max-height:82vh;width:auto;height:auto;
}
#ph.entering #ph-img{opacity:0;transform:scale(1.03) blur(8px)}
#ph-img{opacity:1;transform:scale(1);transition:opacity .85s ease,transform 1.6s var(--ease)}
#ph.still #ph-img{transform:none}

#ph figcaption{
  position:absolute;left:0;right:0;bottom:26px;z-index:10;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--dim);font-size:10px;letter-spacing:.3em;
  opacity:0;transition:opacity .5s;      /* 与 .arrow 同一条 transition:一起亮、一起灭 */
}
/* 鼠标一动图注(系列名·页码 + 小圆点)跟着箭头一起亮;箭头先淡出,它再多留 3 秒才退。
   淡出时长和箭头一样是 .5s,只是起点晚 —— 节奏详见 site.js 的 UI_LINGER_MS */
#view-work.ui #ph figcaption{opacity:1}
/* 开场标题期间图注必须藏着,这条要压过上面的 .ui,所以写在它后面 */
#view-work.initial #ph figcaption{opacity:0;transition:none}
#ph-caption .zh{color:#d5d5d5;font-family:var(--serif);letter-spacing:.5em;font-size:13px}
#ph-caption{display:flex;flex-direction:column;align-items:center;gap:6px}
#ph-dots{display:flex;gap:6px}
#ph-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.22);transition:background .3s}
#ph-dots i.on{background:#c9c9c9}

/* 左右切换箭头 —— 参考站同款:一个箭头跟着光标走,左半屏整体翻转 180° */
.arrow{
  position:fixed;top:0;left:0;z-index:16;
  font-size:30px;line-height:1;color:rgba(255,255,255,.5);
  -webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);
  -webkit-transition:opacity .5s;transition:opacity .5s;
  opacity:0;pointer-events:none;user-select:none;-webkit-user-select:none;
}
.arrow.left{-webkit-transform:translate(-50%,-50%) rotate(180deg);transform:translate(-50%,-50%) rotate(180deg)}
.arrow.show{opacity:1}
/* 参考站同款:看大图时连系统光标一起隐藏 */
#ph.nomouse,#ph.nomouse *{cursor:none}

/* 音效解锁提示(首次点击后自动消失) */
.sound-hint{
  font-size:9.5px;letter-spacing:.2em;color:var(--dim);
  white-space:nowrap;pointer-events:none;
  animation:hintIn 1.6s var(--ease) .8s backwards;
}
.sound-hint::before{content:"";display:inline-block;width:5px;height:5px;margin-right:8px;
  border-radius:50%;background:currentColor;vertical-align:middle;opacity:.75}
@keyframes hintIn{from{opacity:0}to{opacity:1}}
.sound-hint.hide{display:none}

#w-enter{
  position:absolute;right:24px;bottom:24px;z-index:18;text-align:right;
  color:var(--faint);font-size:9px;letter-spacing:.22em;line-height:2;pointer-events:none;
  opacity:0;transition:opacity .8s ease 1.4s;
}
#view-work.ready #w-enter{opacity:1}

/* ============ 关于 ============ */
#view-about{background:
  radial-gradient(90% 120% at 80% 0%, rgba(120,120,120,.10), transparent 60%),
  #0c0c0c;
}
.about-wrap{max-width:880px;margin:0 auto;padding:130px 30px 100px}
.bio{
  font-size:21px;line-height:2.05;color:#d9d9d9;letter-spacing:.05em;
  text-align:justify;
}
.bio p{margin-bottom:1.4em}
.bio-en{
  margin-top:46px;font-size:11px;line-height:1.9;letter-spacing:.12em;color:#8f8f8f;
  max-width:560px;
}
/* 关于页是要滚动的,顶栏下面压一层极淡的暗场,免得正文从导航文字底下穿过去 */
body.v-about #mast{
  padding-bottom:26px;
  background:linear-gradient(180deg, #0c0c0c 0%, rgba(12,12,12,.92) 52%, rgba(12,12,12,0) 100%);
}

/* —— 左下角快捷按钮(参考站 nav#inav)——
   与参考站同一套做法:每个小节一个 20px 宽的长条,英文名竖排(文字旋转 90°),
   整块贴在下角、按列排布,当前小节左侧一道 1px 细线;点一下滚到那一节。 */
#inav{display:none}
body.v-about #inav{display:block}
#inav ul{
  position:fixed;bottom:26px;left:max(34px, calc(50% - 620px));z-index:60;
  display:flex;flex-direction:column;flex-wrap:wrap;justify-content:flex-end;
  height:250px;gap:11px 16px;
  list-style:none;
}
#inav li{position:relative;padding-left:10px;opacity:0;transition:opacity .2s}
#inav.on li{opacity:1;transition:opacity 1s}
#inav.on li:nth-child(2){transition-delay:.06s}
#inav.on li:nth-child(3){transition-delay:.12s}
#inav.on li:nth-child(4){transition-delay:.18s}
#inav.on li:nth-child(5){transition-delay:.24s}
#inav.on li:nth-child(6){transition-delay:.3s}
/* 每条 = 中英两列竖排:英文(旋转 90°,同参考站那条 20px 长条)+ 中文(正立) */
#inav button{
  display:flex;flex-direction:row;align-items:flex-start;gap:7px;
  padding:0;border:0;background:none;cursor:pointer;
}
#inav button span{
  display:block;white-space:nowrap;   /* 竖排时盒子一窄就会折成两列,必须禁止换行 */
  -webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;
  font-size:9.5px;letter-spacing:.22em;color:#6d6d6d;
  transition:color .3s;
}
#inav button span.zh{
  font-family:var(--serif);letter-spacing:.3em;color:#5e5e5e;
}
#inav button:hover span,
#inav button:hover span.zh{color:#e7e7e7}
#inav li.selected::after{
  content:"";position:absolute;left:0;top:5px;height:calc(100% - 10px);
  width:1px;background:#737373;
}
#inav li.selected button span,
#inav li.selected button span.zh{color:#cfcfcf}
/* 侧栏放不下时整块隐藏(参考站 SP 也是 display:none) */
html.sp #inav{display:none}
/* 窄窗口的电脑端(≤1139px):关于页的左下角快捷按钮先收掉,
   字标同时缩一档、顶栏导航间距收紧 —— 32px 字标只属于宽屏,
   否则 900px 上下时字标会和「首页 / 作品 / 关于 / 全屏 FULLSCREEN」挤到一起 */
@media (max-width:1139px){
  body.v-about #inav{display:none}
  .brand-logo{height:26px}
  #gnav{gap:14px}
}

/* 简介:左边一张摄影师照片,右边文字 */
.bio-wrap{display:flex;gap:42px;align-items:flex-start}
.bio-photo{flex:0 0 264px;margin:0}
/* aspect-ratio 是给"后取图"留位用的:照片 900×1200,先占好 3:4 的位置,
   图片到位时不会把右边的简介文字顶下去(layout shift) */
.bio-photo img{display:block;width:100%;height:auto;aspect-ratio:3 / 4;background:#161616}
.bio-photo figcaption{margin-top:11px;font-size:9.5px;letter-spacing:.24em;color:#6d6d6d}
.bio-col{flex:1;min-width:0}
.bio-col .bio{font-size:19px;line-height:2}

/* 关于页的标题与下面的小节左对齐(作品页那种缩进在这里没有对应物) */
#view-about .view-title{padding-left:0;padding-right:0}

/* —— 关于的小节(参考站 information 的分节:一道 1px 线 + 小标题) —— */
.about-wrap ul{list-style:none}
.sec{margin-top:58px}
.sec:first-child{margin-top:0}
.sec-h{
  display:flex;align-items:baseline;gap:12px;
  padding-bottom:12px;margin-bottom:22px;
  border-bottom:1px solid rgba(255,255,255,.13);
}
.sec-h .en{font-size:9.5px;letter-spacing:.38em;color:#6d6d6d;text-transform:uppercase}
.sec-h .zh{font-family:var(--serif);font-size:10.5px;letter-spacing:.32em;color:#a9a9a9}

.about-list li{
  display:flex;align-items:baseline;gap:18px;padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.055);
}
.about-list li:last-child{border-bottom:0}
.about-list .t{flex:0 0 170px;font-size:13px;letter-spacing:.06em;color:#d2d2d2}
.about-list .d{font-size:12.5px;line-height:1.85;color:#8f8f8f}

.about-series li{border-bottom:1px solid rgba(255,255,255,.055)}
.about-series li:last-child{border-bottom:0}
.about-series a{display:flex;align-items:baseline;gap:14px;padding:11px 0;transition:color .3s}
.about-series .no{font-size:9px;letter-spacing:.3em;color:#5f5f5f;transition:color .3s}
.about-series .t{font-size:14.5px;letter-spacing:.06em;color:#d6d6d6;transition:color .3s}
.about-series .n{margin-left:auto;font-size:9.5px;letter-spacing:.24em;color:#6d6d6d}
.about-series a:hover .t,
.about-series a:hover .no{color:#fff}

.about-contact li{display:flex;align-items:baseline;gap:18px;padding:10px 0}
.about-contact .k{flex:0 0 138px;font-size:9.5px;letter-spacing:.26em;color:#6d6d6d}
.about-contact .v{font-size:13px;letter-spacing:.04em;color:#dedede}
.about-contact a.v{
  border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px;
  transition:border-color .3s,color .3s;
}
.about-contact a.v:hover{color:#fff;border-color:#fff}

/* ============ 提示 ============ */
.noscript{display:none}
html.no-js .noscript{display:block;position:fixed;inset:0;background:#000;color:#eee;display:flex;align-items:center;justify-content:center}

/* ============ 移动端(参考站 html.sp) ============
   参考站用 UA 判定后给 <html> 加 sp,移动端样式一律挂在 html.sp 下;
   这里沿用同一套类名,判定见 index.html 顶部脚本与 site.js 的 applyDeviceClass()。
   与参考站 SP 对齐的几件事:
   —— 顶栏只留头像标,导航收进右上角菜单键 + 全屏菜单(参考站 .menubutton / nav#menu);
   —— 作品条照样跑马灯(参考站 SP 也是同一条 rAF),行高收到 91px,按下可左右拖;
   —— 大图页没有光标箭头,改为点按左右半屏 / 左右滑动,首次由两个提示箭头引导;
   —— 100dvh + 安全区,免得 iOS 地址栏、刘海挡住画面。
   ================================================ */
html.sp *{-webkit-tap-highlight-color:transparent}
html.sp a,html.sp button{touch-action:manipulation}

/* —— 顶栏 —— */
html.sp #mast{padding:calc(12px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 0 calc(14px + env(safe-area-inset-left))}
html.sp .brand{gap:10px}
html.sp .brand .avatar{width:40px;height:40px}
html.sp .brand-logo{height:25px}
/* 导航文字全部收进菜单,只把音效提示留在右下角 */
html.sp #gnav{position:fixed;right:calc(14px + env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));left:auto;gap:0}
html.sp #gnav a,html.sp #gnav button,html.sp #gnav .divider{display:none}
html.sp .sound-hint{font-size:9px}

/* —— 菜单键(参考站 .menubutton 的三根 1px 细线,宽度错落;这里挪到右上角,
     与菜单里的关闭叉号同坐标,点开时细线收没、叉号在原处淡出) —— */
.menubutton{display:none}
html.sp .menubutton{
  display:block;position:fixed;
  right:calc(10px + env(safe-area-inset-right));top:calc(13px + env(safe-area-inset-top));
  width:34px;height:35px;z-index:160;padding:0;border:0;background:none;
}
html.sp .menubutton .mb-top,
html.sp .menubutton .mb-center,
html.sp .menubutton .mb-bottom{
  position:absolute;left:10px;display:block;height:1px;background:#9a9a9a;
  transition:width .5s cubic-bezier(0,.5,.5,1);
}
html.sp .menubutton .mb-top{top:10px;width:14px;transition-delay:0s}
html.sp .menubutton .mb-center{top:17px;width:11px;transition-delay:.1s}
html.sp .menubutton .mb-bottom{bottom:10px;width:14px;transition-delay:.2s}
html.sp.menu-open .menubutton .mb-top,
html.sp.menu-open .menubutton .mb-center,
html.sp.menu-open .menubutton .mb-bottom{width:0}

/* —— 全屏菜单(参考站 nav#menu:#4d4d4d 铺满,条目落在左下,logo 左上、关闭右上) —— */
#menu{display:none}
html.sp #menu{
  display:flex;flex-direction:column;justify-content:flex-end;position:fixed;inset:0;z-index:150;
  background:#4d4d4d;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s linear .4s;
}
html.sp #menu.on{opacity:1;visibility:visible;transition:opacity .4s}
html.sp #menu .menu-logo{position:absolute;left:calc(12px + env(safe-area-inset-left));top:calc(14px + env(safe-area-inset-top));opacity:0;transition:opacity .4s linear .2s}
html.sp #menu .menu-logo a{display:flex;align-items:center;gap:9px}
html.sp #menu .menu-logo .avatar{display:block;width:34px;height:34px;border-radius:50%;overflow:hidden;border:1px solid rgba(255,255,255,.45)}
html.sp #menu .menu-logo .avatar img{display:block;width:100%;height:100%;object-fit:cover}
html.sp #menu .menu-logo-img{display:block;height:17px;width:auto;flex:0 0 auto}
html.sp #menu .menu-close{
  position:absolute;right:calc(10px + env(safe-area-inset-right));top:calc(13px + env(safe-area-inset-top));
  width:34px;height:34px;padding:0;border:0;background:none;
  opacity:0;transition:opacity .4s linear .2s;
}
html.sp #menu .menu-close:before,
html.sp #menu .menu-close:after{
  content:"";position:absolute;right:0;width:18.2px;height:1px;background:#c9c9c9;transform-origin:right .5px;
}
html.sp #menu .menu-close:before{top:0;transform:translate(-10px,10px) rotate(-45deg)}
html.sp #menu .menu-close:after{bottom:0;transform:translate(-10px,-10px) rotate(45deg)}
html.sp #menu section{margin-left:calc(14px + env(safe-area-inset-left));padding-bottom:34px}
/* 条目与电脑端顶栏 #gnav 同一套规格:10.5px / .24em 字距 / 暗灰,
   悬停与当前页同一条 1px 下划线,由右向左展开 —— 只是把那一行竖过来 */
html.sp #menu section ul{display:flex;flex-direction:column;align-items:flex-start;gap:15px;list-style:none}
html.sp #menu section ul li{opacity:0}
html.sp #menu section ul li a,
html.sp #menu section ul li button{
  display:inline-block;position:relative;padding:5px 2px;
  font-size:10.5px;font-weight:400;letter-spacing:.24em;color:var(--dim);
  white-space:nowrap;text-align:left;transition:color .3s;
}
html.sp #menu section ul li a::after,
html.sp #menu section ul li button::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
html.sp #menu section ul li a.on,
html.sp #menu section ul li button.on{color:var(--ink)}
html.sp #menu section ul li a.on::after,
html.sp #menu section ul li button.on::after{transform:scaleX(1);transform-origin:left}
html.sp #menu section ul li.mdiv{width:12px;height:1px;background:var(--line)}
html.sp #menu.on .menu-logo,html.sp #menu.on .menu-close{opacity:1}
html.sp #menu.on section ul li{opacity:1;transition:opacity .6s linear .25s}
html.sp #menu.on section ul li:nth-child(2){transition-delay:.27s}
html.sp #menu.on section ul li:nth-child(3){transition-delay:.31s}
html.sp #menu.on section ul li:nth-child(4){transition-delay:.33s}
html.sp #menu.on section ul li:nth-child(5){transition-delay:.35s}

/* —— 首页:一张大照片 —— */
html.sp #view-home,html.sp #view-work{height:100vh;height:100dvh}
html.sp #view-works{min-height:100vh;min-height:100dvh}
html.sp #home-ph .shade{background:radial-gradient(150% 100% at 30% 60%, rgba(0,0,0,.25), rgba(0,0,0,.72) 80%)}
html.sp .home-txt{left:26px;right:26px;bottom:22vh;max-width:none}
html.sp .home-txt h1{font-size:clamp(46px,16vw,96px);letter-spacing:.1em}
html.sp .home-tag{font-size:10.5px;letter-spacing:.28em;margin-top:18px}
html.sp .home-cue{margin-top:30px}
html.sp .home-cue a{padding:16px 0 15px;letter-spacing:.34em}
/* 手机端只留版权与备案那一行(作品集名在手机上太挤,不要了) */
html.sp .home-foot{padding:0 20px calc(14px + env(safe-area-inset-bottom));justify-content:flex-end}
html.sp .home-foot .idx{display:none}
html.sp .home-foot .legal{gap:12px;font-size:8.5px;letter-spacing:.1em;text-shadow:0 1px 8px rgba(0,0,0,.9)}

/* —— 作品条:同一条跑马灯,行高按参考站 SP 收到 91px,
     画面再按参考站 .images{transform:scale(.91)} 收到 91%;
     整幅铺满、不留左侧白边(与电脑端一致,靠行高与画面比例自适应) —— */
html.sp #view-works{padding:64px 0 0}
html.sp #sheet{padding-left:0;padding-bottom:26px}
html.sp .row{--fh:91px;--sh:calc(var(--fh) * .91);margin-bottom:6px}
html.sp .view-title{padding:0 20px 20px;font-size:9.5px}
html.sp .sheet-foot{display:none}
html.sp .veil{padding:5px 20px 0 20px;gap:4px}
html.sp .row.hov-veil .veil{transition:opacity .6s ease-out .2s}
html.sp .veil .no{display:none}
html.sp .veil .t{font-size:15px;line-height:18px;font-weight:400;letter-spacing:.06em;text-transform:none}
html.sp .veil .tz{font-size:10px;letter-spacing:.2em;margin-top:0}
/* 帧号与电脑端一致:始终不显示(手机端以前把它打开了,数字会压在照片上) */

/* —— 关于 —— */
html.sp .about-wrap{padding:92px 22px calc(90px + env(safe-area-inset-bottom))}
html.sp .view-title{padding:0 22px 20px}
html.sp .bio{font-size:16.5px;line-height:1.95}
html.sp .bio-en{font-size:10.5px}
html.sp .bio-wrap{flex-direction:column;gap:24px}
html.sp .bio-photo{flex:none;width:min(62%,232px)}
html.sp .bio-col .bio{font-size:16.5px;line-height:1.95}
html.sp .sec{margin-top:42px}
html.sp .sec-h{padding-bottom:10px;margin-bottom:16px}
html.sp .sec-h .en{font-size:9px;letter-spacing:.32em}
html.sp .sec-h .zh{font-size:10px}
html.sp .about-list li{flex-direction:column;gap:5px;padding:11px 0}
html.sp .about-list .t{flex:none;font-size:13.5px;white-space:nowrap}
html.sp .about-list .d{font-size:12.5px;line-height:1.8}
html.sp .about-series a{gap:11px;padding:12px 0}
html.sp .about-series .t{font-size:15px}
html.sp .about-contact li{flex-direction:column;gap:6px;padding:12px 0}
html.sp .about-contact .k{flex:none}
html.sp .about-contact .v{font-size:13.5px}

/* —— 大图页:没有光标箭头;图注常显在右下角(参考站 SP footer.right 的位置) —— */
html.sp body.v-work{overflow:hidden;overscroll-behavior:none}
/* 手机上跟着光标走的那支不要了,换成左右各一支固定箭头 ——
   图形、字号、颜色、透明度、淡入淡出时长全部沿用电脑端 .arrow 这一套 */
html.sp #ph-arrow{display:none}
.spnav{display:none}
html.sp .arrow.spnav{
  display:block;position:fixed;top:50%;left:26px;
  -webkit-transform:translate(0,-50%);transform:translate(0,-50%);
  pointer-events:auto;cursor:pointer;padding:0;background:none;border:0;
}
html.sp .arrow.spnav.left{-webkit-transform:translate(0,-50%) rotate(180deg);transform:translate(0,-50%) rotate(180deg)}
html.sp #ph-next{left:auto;right:26px}
html.sp #w-top{flex-direction:column;padding:14px 16px 0}
html.sp #w-top .w-titles{display:none}
html.sp #w-top .back{font-size:10px;letter-spacing:.2em}
html.sp #w-enter{display:none}
html.sp #w-intro{font-size:18px;line-height:22px;white-space:normal;max-width:calc(100vw - 138px)}
html.sp #w-intro .en{font-size:9px;letter-spacing:.34em;margin-top:12px}
/* 参考站 SP 的取景框:上下留 82/375 个屏宽,左右留 107/375 个屏宽 */
html.sp #ph-stage{max-width:calc(100vw - 100vw*107/375);max-height:none}
html.sp #ph-img{
  max-width:calc(100vw - 100vw*107/375);
  max-height:min(calc(100vw - 100vw*82/375), 72vh);   /* 横屏手机兜底:高度不超过屏高的 72% */
}
html.sp #ph figcaption{
  left:auto;right:21px;bottom:calc(22px + env(safe-area-inset-bottom));
  align-items:flex-end;
  color:#8f8f8f;font-size:9px;letter-spacing:.24em;
}
html.sp #ph-caption{flex-direction:row;align-items:baseline;gap:8px}
html.sp #ph-caption .zh{font-size:9px;letter-spacing:.24em;color:#8f8f8f}
html.sp #ph-caption .en{display:none}
html.sp #ph-dots{display:none}
/* (原先手机上首次进入会浮出两个 25×25 的提示箭头,现在改成常驻的左右按钮,
   这段提示不再需要) */

/* 减少动态偏好 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .home-txt h1{text-shadow:none}
}