/* =============================================================
   岛风余火 · Minimalist Gallery
   色彩系统仅 5 个值：#fff / #000 / #2b2d30 / #a3a3a3 / 浅灰半透明
   状态：landing（首屏照片） / works（展开面板） / info
   ============================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x: clip（而非 hidden）：手机端 Chrome/Edge 上，hidden 挡不住「滑入动画
   期间内容横向伸出屏幕一倍宽」——浏览器会把整个版面撑大（innerWidth 变成约 2 倍），
   Info/碎碎念跳转后页面缩成一小条或白屏，必须捏合缩放才能恢复。
   clip 才能真正禁止视口横向扩展（2026-10-01 实测修复，电脑端视觉无变化） */
html { font-size: 62.5%; overflow-x: clip; }   /* 1rem = 10px */
body, h1, h2, h3, p, ul, li, figure, button { margin: 0; padding: 0; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; }
/* touch-action 去掉双击缩放/点击延迟；
   -webkit-tap-highlight-color 去掉手机端的点击高亮——翻页热区是覆盖左右半屏的按钮，
   手指按住/滑动时会闪一层半透明蓝色矩形，非常影响观感（2026-10-01 用户反馈） */
button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* 兜底：个别安卓浏览器对非交互元素也会画高亮，全站统一关掉 */
body, button, a, div, section { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

:root {
  --c-white: #ffffff;
  --c-black: #000000;
  --c-ink:   #2b2d30;   /* 正文主色 */
  --c-mute:  #a3a3a3;   /* 辅助文字 / 链接 */
  --c-place: hsla(0, 0%, 84%, .5);   /* 懒加载占位 */
  --ctrl-h: 52px;        /* 底部控制条高度 */
}

body {
  font-family: "Helvetica Neue", Helvetica, "Inter", -apple-system, BlinkMacSystemFont,
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  font-size: 1.4rem;                 /* 14px */
  line-height: 1.86;
  letter-spacing: .3px;
  font-weight: 400;
  color: var(--c-ink);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  padding: 0 0 var(--ctrl-h);
  overflow-x: clip;   /* 见 html 上的注释：手机端必须用 clip，hidden 会导致版面被撑大 */
}

::selection { background: var(--c-ink); color: var(--c-white); }

/* =============================================================
   1.1 开场：黑色全屏无声宣言
   ============================================================= */
.intro-container {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  background-color: #000;
  z-index: 999;
  display: flex; align-items: center;
  padding-left: 10%;
  transition: opacity .8s ease-out;
}
.intro-container.is-done { opacity: 0; pointer-events: none; }
.intro-inner { display: flex; flex-direction: column; }
.intro-line {
  display: block;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-white);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .9s ease-out, transform .9s ease-out;
}
.intro-line.is-in { opacity: 1; transform: none; }

/* =============================================================
   首屏 Hero：「梦」系列随机一张
   ============================================================= */
.hero {
  min-height: calc(100vh - var(--ctrl-h));
  display: flex; align-items: center; justify-content: center;
  padding: 48px 20px calc(var(--ctrl-h) + 24px);
}
.hero-frame {
  position: relative;              /* 左右翻页热区的定位基准 */
  width: min(92vw, 1200px);        /* 横构图尽量放大；竖构图由 JS 再按可用高度收窄 */
  overflow: hidden;                /* 换页时上移/下移的照片在框内被裁切 */
}
.lazy.lazy-hero { width: 100%; }

/* ---------- 首屏换页动画：旧图自下而上淡出 → 新图自上而下渐入 ---------- */
.hero-layer { will-change: transform, opacity; }
/* 新照片层：默认「卷起来」的状态——底部遮住 100%，即完全不可见。
   展开时把 bottom 值收到 0，画面就自上而下一点点显影（2026-10-01 定稿：
   用户要的是「像卷轴从上往下」，不是整张平移）
   ⚠️ 选择器必须写成 .lazy.hero-incoming（两级）：文件后部的 .lazy 规则会把
   position 改回 relative，导致本层高度为 0、整段展开动画什么都画不出来
   （2026-10-01 实测踩坑：computed style 在动但画面全白，录屏里新图"啪"一下直出） */
.lazy.hero-incoming {
  position: absolute; inset: 0;
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
  will-change: clip-path;
}
/* 只有带上 .is-anim 才允许过渡，便于「无动画瞬间归位」
   2026-10-01 四次调整：①放慢时长 ②曲线改柔和（起步速度为零）
   ③入场改为卷轴式遮罩展开（clip-path .9s，与 JS 的 IN_MS 900ms 对齐）
   ④退场放慢到 .6s（与 JS 的 OUT_MS 600ms 对齐）——原先旧图 340ms 就退完、
     新图紧接着展开，观感像旧图「被新图赶走」；现在旧图从容退完，再展开新图 */
.hero-layer.is-anim {
  transition: clip-path .9s cubic-bezier(.4, 0, .2, 1),
              transform .6s cubic-bezier(.4, 0, .2, 1),
              opacity   .6s cubic-bezier(.4, 0, .6, 1);
}
.hero-layer.is-out { transform: translateY(-14%); opacity: 0; }   /* 旧图：向上退出 */
.hero-incoming.is-in { clip-path: inset(0 0 0 0); }               /* 新图：卷轴展开到位 */
.hero-layer.no-anim { transition: none !important; }
/* 跨系列（2026-09-30）：不滑动，改为原地淡出 → 整屏留白停顿 → 淡淡浮现。
   与系列内翻页的上下位移明显不同，访客不看文字也能感觉到换系列了 */
.hero-layer.is-out-fade { opacity: 0; transform: none; }
.hero-incoming.is-in-fade { opacity: 1; transform: none; }
/* 跨系列：淡出 .32s / 浮现 .56s（与 JS 的 OUT_FADE_MS / IN_FADE_MS 对齐）
   同样改用对称柔和曲线，避免「一上来就亮」 */
.hero-layer.is-anim.is-out-fade      { transition: opacity .32s cubic-bezier(.4, 0, .6, 1); }
/* 跨系列是「淡入」不是卷轴：遮罩瞬间全开（不走 clip-path），透明度用关键帧从 0 上来
   ——注意现在 .hero-incoming 默认 opacity 是 1（卷轴态靠遮罩隐藏），
     所以淡入必须用 animation 而不能靠 transition，否则会直接整张出现 */
.hero-incoming.is-in-fade { clip-path: inset(0 0 0 0); }
.hero-incoming.is-anim.is-in-fade { animation: fadeInOnly .56s cubic-bezier(.4, 0, .6, 1) both; }

/* 翻页热区 = 整个页面左右两半（z 150，低于底部 Index/Thumbs 的 z 200，不遮挡按钮） */
.hero-zone {
  position: fixed; top: 0; bottom: 0; width: 50%;
  z-index: 150;
  border: 0; background: none; padding: 0;
}
.hero-prev { left: 0; }
.hero-next { right: 0; }

/* 展开状态：左侧深灰面板 + 右侧内容（不显示照片）。
   内容从右侧推入，面板从左侧推入（display 切换会自动重放动画） */
body:not([data-state="landing"]) .split-left {
  display: block;
  position: fixed; top: 0; bottom: 0; left: 0;
  width: 50%;
  background: #222222;   /* 深灰 */
  z-index: 10;
  cursor: pointer;       /* 点击返回首屏 */
  animation: slideFromLeft .55s cubic-bezier(.22, .61, .36, 1) both;
}
body:not([data-state="landing"]) .panel,
body:not([data-state="landing"]) .view-info {
  margin-left: 50%;
  width: 50%;
  animation: slideFromRight .55s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes slideFromLeft  { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes slideFromRight { from { transform: translateX(100%);  } to { transform: none; } }

/* 返回首屏：反向滑出（选择器加 [data-state] 提升优先级，确保覆盖入场动画） */
body.is-leaving[data-state] .panel,
body.is-leaving[data-state] .view-info {
  animation: slideOutRight .42s cubic-bezier(.4, 0, .2, 1) forwards;
}
body.is-leaving[data-state] .split-left {
  animation: slideOutLeft .42s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes slideOutRight { from { transform: none; } to { transform: translateX(100%); } }
@keyframes slideOutLeft  { from { transform: none; } to { transform: translateX(-100%); } }

/* =============================================================
   底部居中控制条：Index / Thumbs
   ============================================================= */
.home-controls {
  position: fixed; left: 0; right: 0; bottom: env(safe-area-inset-bottom, 0px);
  height: var(--ctrl-h);
  display: flex; align-items: center; justify-content: center;
  gap: 26px;
  /* z 600：高于看图器（z 500）——看图器里也用同一条 Index/Thumbs（2026-09-30） */
  z-index: 600;
  mix-blend-mode: difference;
  pointer-events: none;
}
.control-button {
  pointer-events: auto;
  font-size: 1.2rem;
  letter-spacing: .3px;
  font-weight: 400;
  color: var(--c-white);
  opacity: .75;
  transition: opacity .25s ease-out;
}
.control-button:hover { opacity: 1; }
.control-button.is-active { font-weight: 500; opacity: 1; }

/* 2026-10-02：Info 页把「Index / Thumbs + 版权」改成排在内容最末尾（用户反馈：
   固定在视口底部会压住正文文字）。滚到底才看到，和正文同列对齐；其它界面保持固定浮层不变。
   注意：只能改定位与盒模型，不能动颜色——控件仍是 mix-blend-mode: difference 白字，
   落在 Info 的白底上会自动反成深色，正好与正文同调 */
body[data-state="info"] .home-controls,
body[data-state="info"] .copyright {
  position: static;
  inset: auto;
  height: auto;
  margin-left: 50%;          /* 与 .view-info 同列（右侧半栏） */
  width: 50%;
  padding: 20px 20px 0;
}
body[data-state="info"] .home-controls { justify-content: center; gap: 26px; }
body[data-state="info"] .copyright     { padding: 6px 20px 34px; }

/* 版权：展开后出现在左下角 */
.copyright {
  position: fixed; left: 20px; bottom: env(safe-area-inset-bottom, 0px);
  height: var(--ctrl-h);
  display: flex; align-items: center;
  font-size: 1.2rem; color: var(--c-mute);
  z-index: 190;
  pointer-events: none;
}

/* =============================================================
   Works 面板（点 Index / Thumbs 后展开）
   ============================================================= */
.panel-nav { display: flex; gap: 22px; margin-bottom: 34px; }
.panel-nav-button {
  font-size: 1.2rem; letter-spacing: .3px;
  color: var(--c-mute);
  opacity: .85;
  transition: color .25s ease-out, opacity .25s ease-out;
}
.panel-nav-button:hover { opacity: 1; }
.panel-nav-button.is-active { color: var(--c-ink); font-weight: 500; opacity: 1; }

/* =============================================================
   2.2 Index 视图 · 右侧竖排列表，张数右对齐到最右
   ============================================================= */
.panel { padding: 42px 34px calc(var(--ctrl-h) + 40px); }

.index-list-wrapper {
  max-width: none;
  margin: 0;
}
.index-col { margin-bottom: 38px; }
.index-col:last-child { margin-bottom: 0; }
.index-col-title {
  font-size: 1.2rem; font-weight: 500; color: var(--c-ink);
  margin-bottom: 6px;
}
.index-col-hint {
  font-size: 1.2rem; color: var(--c-mute); margin-bottom: 18px; line-height: 1.6;
}

.index-list-wrapper ul li {
  cursor: pointer;
  transform: skewX(0);
  transition: transform .22s ease-out;
  transform-origin: left center;
}
.index-list-wrapper ul li:hover { transform: skewX(-10deg); }

.index-item {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px;
  font-size: 1.4rem;
  line-height: 1.86;
  color: var(--c-ink);
  width: 100%;
  text-align: left;
}
.index-item-length { color: var(--c-mute); font-size: 1.2rem; flex: none; }

/* =============================================================
   2.2 Thumbs 视图 · 瀑布流密排小图，逐张浮起（2026-09-30 由网格改为瀑布流）
   column-width 自适应列数，图片按各自比例向下堆叠，行间不再有空洞
   ============================================================= */
.thumbs-wrapper {
  column-width: 150px;     /* 大图瀑布流：桌面约 7 列（2026-09-30，由 96px 放大） */
  column-gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
}

/* Thumbs 模式：隐藏左灰面板，内容全屏白底，不做推入动画（由小图浮起代替） */
body[data-mode="thumbs"] .split-left { display: none !important; }
body[data-mode="thumbs"] .panel {
  margin-left: 0; width: 100%;
  animation: none;
  padding-top: 48px;
}
/* 解除隐身：图片原本就在那里，只是从自身中心开始显现（无位移、无缩放、无模糊） */
.thumb-cell {
  break-inside: avoid;          /* 瀑布流：单张不被拆到两列 */
  margin-bottom: 20px;          /* 纵向间距（横向由 column-gap 管） */
  cursor: pointer;
  opacity: 0;
  clip-path: inset(var(--clip, 42%) var(--clip, 42%));
  animation: thumbReveal var(--dur, .8s) cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: var(--d, 0ms);
  will-change: opacity, clip-path;
}
@keyframes thumbReveal {
  0%   { opacity: 0; clip-path: inset(var(--clip, 42%) var(--clip, 42%)); }
  35%  { opacity: 1; }
  100% { opacity: 1; clip-path: inset(0% 0%); }
}

/* 切到 Thumbs 时：当前画面淡出，屏幕短暂空白 */
#main { transition: opacity .26s ease-out; }
body.is-blank #main { opacity: 0; }
.thumb-caption {
  display: flex; justify-content: space-between;
  font-size: 1.2rem; color: var(--c-mute); margin-top: 6px;
}
.thumb-caption strong { font-weight: 400; color: var(--c-ink); }

/* =============================================================
   4.2 懒加载
   ============================================================= */
.lazy, .lazy-thumb {
  position: relative;
  width: 100%;
  background-color: var(--c-place);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.lazy-thumb.show { opacity: 1; transition: opacity .6s ease-out; }
.lazy-thumb.show:hover { opacity: .75; }
.lazy .mask {
  position: absolute; inset: 0;
  background: var(--c-place);
  opacity: 1; transition: opacity .6s ease-out;
}
.lazy.is-loaded .mask { opacity: 0; }
.lazy-container { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease-out; }
.lazy.is-loaded .lazy-container { opacity: 1; }
.lazy-container img { width: 100%; height: 100%; object-fit: cover; }
.lazy.is-failed { background-image: none !important; }
.lazy.is-failed::after,
.lazy-thumb.is-failed::after {
  content: attr(data-placeholder-label);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: #6b6b6b; letter-spacing: .3px;
  background: var(--c-place);
}

/* =============================================================
   3.1 Info 页
   ============================================================= */
.view-info { padding: 8px 20px calc(var(--ctrl-h) + 40px); }
.info-inner { max-width: 900px; margin: 0 auto; }
.info-head { display: flex; gap: 36px; align-items: flex-start; flex-wrap: wrap; margin-top: 10px; }
.info-portrait { width: 280px; flex: none; }
.lazy-portrait { border-radius: 50%; }
.info-text { flex: 1 1 320px; }
.info-lead { font-size: 1.5rem; line-height: 1.86; margin-bottom: 14px; }
.info-bio p { color: var(--c-ink); margin-bottom: 10px; }

.info-contact { margin-top: 34px; }
.info-contact dl { display: grid; grid-template-columns: 90px 1fr; row-gap: 4px; }
.info-contact dt { color: var(--c-mute); font-size: 1.2rem; line-height: 1.86; }
.info-contact dd { font-size: 1.4rem; }
.info-contact a { color: var(--c-ink); text-decoration: none; border-bottom: 1px solid var(--c-mute); }
.info-contact a:hover { color: var(--c-mute); }

.info-notes { margin-top: 44px; border-top: 1px solid #eaeaea; padding-top: 26px; }
.info-note-block { margin-bottom: 34px; }
.info-note-block h2 { font-size: 1.5rem; font-weight: 500; margin-bottom: 8px; }
.info-note-block p { margin-bottom: 10px; }

/* =============================================================
   作品详情 · 全屏单图浏览
   ============================================================= */
/* 看图器：保持白底，避免白→黑的突兀切换；只做极短淡入，不做缩放 */
.viewer {
  position: fixed; inset: 0; z-index: 500;
  background: var(--c-white);
  touch-action: none; -ms-touch-action: none;
  opacity: 0;
  transition: opacity .22s ease-out;
}
.viewer.is-open { opacity: 1; }
.viewer[hidden] { display: none; }
.viewer-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 60px 40px;
}
.viewer-img {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.viewer-img img {
  width: auto; height: auto;
  max-width: calc(100vw - 80px);
  max-height: calc(100vh - 120px);
  object-fit: contain;
  opacity: .35;
  transition: opacity .6s ease-out;
}
.viewer-img.is-loaded img { opacity: 1; }

/* 看图器换页：与首屏同一套方向语言——旧图上移淡出，新图「卷轴式」自上而下展开
   （2026-10-01：与首屏同步改为 clip-path 遮罩展开，0.9s；不再整张平移下滑） */
.viewer-img.is-in { animation: none; }
/* 延迟 .6s：等旧图先退完（与首屏同一节奏），新图才开始卷轴展开 */
.viewer-img.is-in img { animation: revealDown .9s cubic-bezier(.4, 0, .2, 1) .6s both; }
/* 卷轴展开：遮罩下边缘从顶部一路走到底部（inset 的 bottom 值 100% → 0） */
@keyframes revealDown {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.viewer-img.is-out {
  position: absolute; inset: 0; padding: inherit;   /* 脱离流式布局，避免与新图并排 */
  pointer-events: none;
  animation: slideOutUp .6s cubic-bezier(.4, 0, .6, 1) forwards;   /* 2026-10-01 与首屏同步放慢 */
}
@keyframes slideInDown {
  from { transform: translateY(-12%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes slideOutUp {
  from { transform: none; opacity: 1; }
  to   { transform: translateY(-12%); opacity: 0; }
}
/* 跨系列（2026-09-30）：淡出 → 留白停顿（由 JS 设 animation-delay）→ 淡入 */
.viewer-img.is-out-fade {
  position: absolute; inset: 0; padding: inherit;
  pointer-events: none;
  animation: fadeOutOnly .32s cubic-bezier(.4, 0, .6, 1) forwards;
}
.viewer-img.is-in-fade { animation: fadeInOnly .56s cubic-bezier(.4, 0, .6, 1) both; }
@keyframes fadeOutOnly { from { opacity: 1; } to { opacity: 0; } }
@keyframes fadeInOnly  { from { opacity: 0; } to { opacity: 1; } }

/* 手机端「系列名 N/总数」标签的淡出/淡入（2026-10-02，与翻页照片同步） */
@keyframes metaFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes metaFadeIn  { from { opacity: 0; } to { opacity: 1; } }

/* 左下角系列名/张数与右上角 Close 已按 2026-09-30 定稿移除（信息只保留在自定义光标上） */

/* 左半屏上一张 / 右半屏下一张 */
/* 手机端系列信息（2026-09-30）：默认隐藏，仅触屏/粗指针设备显示；
   位置由 JS 按当前照片底边计算（照片下方 14px、左右居中） */
.mobile-series-meta {
  display: none;
}
@media (hover: none), (pointer: coarse) {
  .mobile-series-meta {
    display: block;
    position: fixed; left: 50%;
    transform: translateX(-50%);
    z-index: 650;
    pointer-events: none;
    font-size: 1.2rem;
    letter-spacing: .3px;
    color: var(--c-mute);
    opacity: 0;
    transition: opacity .2s ease-out;
    white-space: nowrap;
  }
  /* 2026-10-02：标签跟随照片节奏——翻页先随旧图淡出（.6s，与退场同曲线），
     等新图开始显现才淡入，时长与照片展开/浮现一致（系列内 .9s / 跨系列 .56s）。
     用 animation 而非 transition：animation 的优先级高于 JS 写的内联 opacity */
  .mobile-series-meta.is-leaving        { transition: none; animation: metaFadeOut .6s cubic-bezier(.4, 0, .6, 1) both; }
  .mobile-series-meta.is-entering       { transition: none; animation: metaFadeIn  .9s cubic-bezier(.4, 0, .2, 1) both; }
  .mobile-series-meta.is-entering-fade  { transition: none; animation: metaFadeIn  .56s cubic-bezier(.4, 0, .6, 1) both; }
}
.viewer-nav {
  position: absolute; top: 0; bottom: 0; width: 50%; z-index: 2; cursor: pointer;
}
.viewer-prev { left: 0; } .viewer-next { right: 0; }

.noscript-note { padding: 40px 20px; font-size: 1.4rem; }

/* =============================================================
   4.3 自定义光标（仅精确指针设备）
   ============================================================= */
.custom-cursor { display: none; }   /* 触屏/粗指针设备不显示 */
@media (hover: hover) and (pointer: fine) {
  body.has-cursor, body.has-cursor * { cursor: none; }
  body.has-cursor a, body.has-cursor button { cursor: none; }
  /* 2026-09-30：光标本体即 body 的直接子元素（不再套 .custom-cursor-container）；
     外面包一层带 z-index 的容器会隔离合成层，mix-blend 就失去作用 */
  .custom-cursor {
    display: block;
    position: fixed; top: 0; left: 0; z-index: 900; pointer-events: none;
    width: 10px; height: 10px; margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: var(--c-white);
    mix-blend-mode: difference;
    transform: translate3d(-100px, -100px, 0);
    transition: width .18s ease-out, height .18s ease-out, margin .18s ease-out, border-radius .18s ease-out;
  }
  /* 放大态（2026-09-30 定稿）：无白底、刚好包住文字的长方形；字号仍为 1.3rem。
     颜色改为显式指定（关掉 difference）：压在照片上=白色字，压在白底上=深色细字 */
  .custom-cursor.is-big {
    height: 18px; margin-top: -9px;
    background: transparent;
    mix-blend-mode: normal;   /* 文字用显式颜色，不再反色；小圆点态仍保留 difference */
    transition: width .18s ease-out, height .18s ease-out, margin .18s ease-out,
                border-radius .18s ease-out, background .18s ease-out;
  }
  .custom-cursor-label {
    display: none; font-size: 1.3rem; color: var(--c-white);
    position: absolute; inset: 0; align-items: center; justify-content: center;
    white-space: nowrap; line-height: 1; letter-spacing: .5px;
  }
  /* 白底：深色（字重与照片上的白字一致，均为 400）；照片：白色 */
  .custom-cursor.is-big.is-onwhite .custom-cursor-label { color: var(--c-ink); font-weight: 400; }
  .custom-cursor.is-big.is-onphoto .custom-cursor-label { color: var(--c-white); font-weight: 400; }
  /* 只有 Index 列表界面（works + index 模式）用系统食指指针；
     首屏/Thumbs/看图器/Info 等其余界面一律自定义光标 */
  body.has-cursor[data-mode="index"] .panel,
  body.has-cursor[data-mode="index"] .panel * { cursor: auto !important; }
  body.has-cursor[data-mode="index"] .panel button { cursor: pointer !important; }
  .custom-cursor.is-big .custom-cursor-label { display: flex; }
}

/* =============================================================
   4.1 响应式断点
   ============================================================= */
/* ≤768px：取消左右分栏，内容全宽（左黑面板隐藏） */
@media (max-width: 768px) {
  body:not([data-state="landing"]) .split-left { display: none; }
  body:not([data-state="landing"]) .panel,
  body:not([data-state="landing"]) .view-info { margin-left: 0; width: 100%; }
  /* 手机/窄屏：Info 页内容全宽，底部控件也随之全宽（2026-10-02） */
  body[data-state="info"] .home-controls,
  body[data-state="info"] .copyright { margin-left: 0; width: 100%; }
  .panel { padding: 28px 20px calc(var(--ctrl-h) + 30px); }
  .thumbs-wrapper { column-width: 120px; column-gap: 14px; }   /* 平板/窄屏：约 4–5 列 */
}
/* 769–1024px：约 5 列，避免只有 4 列时单张过大 */
@media (min-width: 769px) and (max-width: 1024px) {
  .thumbs-wrapper { column-width: 118px; column-gap: 16px; }
}
@media (max-width: 800px) and (orientation: landscape) {
  :root { --ctrl-h: 40px; }
  .home-controls { height: 40px; }
  .copyright { height: 40px; }
  .hero { padding: 24px 14px calc(var(--ctrl-h) + 16px); }
  .panel { padding: 24px 14px calc(var(--ctrl-h) + 24px); }
  .view-info { padding: 24px 14px calc(var(--ctrl-h) + 24px); }
}

/* ---------- ≤575px 中等手机 ---------- */
@media (max-width: 575px) {
  .info-head { gap: 22px; }
  .info-portrait { width: 160px; }
  /* 2026-10-01：手机端照片离屏幕左右边太近，统一加宽到左右各 28px（电脑端不受影响） */
  .viewer-stage { padding: 56px 28px; }
  .viewer-img img { max-width: calc(100vw - 56px); max-height: calc(100vh - 110px); }
  .hero-frame { width: calc(100vw - 56px); }
}

/* ---------- ≤480px 小屏手机 ---------- */
@media (max-width: 480px) {
  .intro-container { padding-left: 8%; }
  .intro-inner { flex-direction: row; gap: 10px; align-items: baseline; }
  .intro-line { font-size: 15px; }

  .hero { min-height: calc(100vh - var(--ctrl-h)); padding: 32px 16px calc(var(--ctrl-h) + 20px); }
  .hero-frame { width: calc(100vw - 56px); }   /* 与 ≤575px 一致：左右各留 28px */

  .panel { padding: 24px 16px calc(var(--ctrl-h) + 30px); }
  .view-info { padding: 24px 16px calc(var(--ctrl-h) + 30px); }

  .thumbs-wrapper { column-width: 96px; column-gap: 10px; }
  .thumb-cell { margin-bottom: 14px; }

  .info-contact dl { grid-template-columns: 74px 1fr; }
  .copyright { left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .index-list-wrapper ul li:hover { transform: none; }
}