/* ============================================================
   PORTFOLIO — 纸感画廊（亮色）
   ------------------------------------------------------------
   两条铁律，改这个文件时必须守住：
   1) 可见性不能依赖 JS。开场退场、标题入场全部走 CSS animation。
      滚动渐显用 html.js 前缀 —— JS 不打标记时内容默认可见。
   2) 全部 ES5 友好的写法（本文件不涉及 JS，但配色变量改动时
      记得同步 assets/js/site.js 里的类别色）。
   ============================================================ */

:root{
  --paper:     #faf9f6;
  --paper-2:   #f3f1eb;
  --paper-3:   #e9e6de;
  --card:      #ffffff;
  --ink:       #17171b;
  --ink-mid:   #5b5952;
  --ink-dim:   #918d84;
  --accent:    #a4703a;
  --accent-2:  #c9a45c;
  --line:      rgba(23,23,27,.13);
  --line-soft: rgba(23,23,27,.07);
  --shadow-sm: 0 1px 2px rgba(23,23,27,.05);
  --shadow:    0 2px 4px rgba(23,23,27,.04), 0 18px 40px -18px rgba(23,23,27,.18);

  --serif: "Songti SC", "SimSun", Georgia, "Times New Roman", serif;
  --sans: -apple-system, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", Consolas, "Courier New", monospace;

  --nav-h: 68px;
  --pad: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(.19,1,.22,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:300; line-height:1.75;
  letter-spacing:.02em; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{ overflow:hidden; }
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-weight:300; }
p{ margin:0; }
ul,dl{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--ink); color:var(--paper); }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--paper-2); }
::-webkit-scrollbar-thumb{ background:#cfcbc1; border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:var(--accent); }

.wrap{ max-width:1240px; margin:0 auto; }

/* 锚点跳转时给固定导航留出空间，否则标题会被压在导航底下 */
section[id], footer[id]{ scroll-margin-top: var(--nav-h); }

/* ============ 纸面颗粒 ============ */
.grain{
  position:fixed; inset:-120px; z-index:9000; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}         20%{transform:translate(-14px,8px)}
  40%{transform:translate(10px,-12px)} 60%{transform:translate(-8px,-6px)}
  80%{transform:translate(12px,10px)}  100%{transform:translate(0,0)}
}

/* ============ 开场（纯 CSS 退场） ============ */
.boot{
  position:fixed; inset:0; z-index:9500; background:var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  animation:bootOut .8s var(--ease) 1.15s forwards;
}
@keyframes bootOut{ to{ opacity:0; visibility:hidden; } }
.boot-inner{ display:flex; align-items:center; gap:12px; }
.boot-mark{ color:var(--accent); font-size:11px; }
.boot-txt{
  font-family:var(--mono); font-size:11px; letter-spacing:.42em;
  color:var(--ink-dim); text-transform:uppercase;
}
.boot-bar{ width:min(260px,48vw); height:1px; background:var(--line); overflow:hidden; }
.boot-bar i{
  display:block; height:100%; width:0%; background:var(--accent);
  animation:bootFill 1.15s cubic-bezier(.25,.8,.3,1) forwards;
}
@keyframes bootFill{ from{width:0} to{width:100%} }
.boot-count{
  position:absolute; bottom:12vh; right:var(--pad);
  font-family:var(--mono); font-size:clamp(34px,7vw,62px);
  color:rgba(23,23,27,.07);
}

/* ============ 顶部导航（固定，不随滚动离开） ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:8000;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:0 var(--pad);
  background:rgba(250,249,246,.82);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-soft);
}
.nav-me{ display:flex; align-items:baseline; gap:10px; letter-spacing:.04em; white-space:nowrap; }
.nav-me b{ font-weight:500; font-size:15px; }
.nav-me em{
  font-style:normal; font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; color:var(--ink-dim); text-transform:uppercase;
}
.nav-links{ display:flex; align-items:center; gap:clamp(6px,1.6vw,22px); }
.nav-links a{
  position:relative; display:flex; flex-direction:column; align-items:center;
  font-size:13px; letter-spacing:.1em; color:var(--ink-mid);
  padding:6px 4px; transition:color .35s;
}
.nav-links a b{
  font-weight:400; font-family:var(--mono); font-size:8.5px;
  letter-spacing:.2em; color:var(--ink-dim); margin-top:1px;
  transition:color .35s;
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--accent); transform:scaleX(0); transform-origin:center;
  transition:transform .45s var(--ease);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a.on{ color:var(--ink); }
.nav-links a.on b{ color:var(--accent); }
.nav-links a.on::after{ transform:scaleX(1); }

/* 当前浏览模块提示 */
.nav-now{
  display:flex; align-items:center; gap:8px; white-space:nowrap;
  font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  color:var(--ink-dim); text-transform:uppercase;
}
.nav-now i{
  width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px rgba(164,112,58,.14);
}
.progress{ position:fixed; top:var(--nav-h); left:0; right:0; height:2px; z-index:8000; }
.progress i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width .1s linear;
}

/* ============ 首屏 ============ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--nav-h) + 4vh) var(--pad) 28px; overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden;
  background:linear-gradient(170deg,#fdfcfa 0%, var(--paper) 46%, var(--paper-2) 100%); }
.orb{
  position:absolute; border-radius:50%; filter:blur(80px); opacity:.55;
  will-change:transform;
}
.orb.o1{
  width:58vw; height:58vw; left:-10vw; top:-14vw;
  background:radial-gradient(circle,rgba(214,168,102,.5) 0%, transparent 66%);
  animation:orbA 26s ease-in-out infinite alternate;
}
.orb.o2{
  width:48vw; height:48vw; right:-8vw; bottom:-16vw;
  background:radial-gradient(circle,rgba(126,160,214,.42) 0%, transparent 68%);
  animation:orbB 33s ease-in-out infinite alternate;
}
.orb.o3{
  width:38vw; height:38vw; left:36%; top:14%;
  background:radial-gradient(circle,rgba(214,146,140,.34) 0%, transparent 66%);
  animation:orbC 21s ease-in-out infinite alternate;
}
@keyframes orbA{
  0%{transform:translate(0,0) scale(1)} 50%{transform:translate(13vw,7vh) scale(1.14)}
  100%{transform:translate(3vw,-6vh) scale(.93)}
}
@keyframes orbB{
  0%{transform:translate(0,0) scale(1.05)} 50%{transform:translate(-11vw,-8vh) scale(.88)}
  100%{transform:translate(-3vw,5vh) scale(1.18)}
}
@keyframes orbC{
  0%{transform:translate(0,0) scale(.92)} 100%{transform:translate(-8vw,10vh) scale(1.22)}
}
.flow{
  position:absolute; inset:-40% -70%; will-change:transform;
  background:linear-gradient(104deg,
    transparent 40%, rgba(164,112,58,.055) 48%, rgba(164,112,58,.09) 50%,
    rgba(164,112,58,.055) 52%, transparent 60%);
  animation:sweep 13s linear infinite;
}
@keyframes sweep{ 0%{transform:translateX(-40%)} 100%{transform:translateX(40%)} }

/* 首屏装饰动效的成本控制：滚出首屏后（html.hero-live）暂停那三个 80px 模糊光晕、
   扫光、颗粒的无限动画。模糊大图层逐帧重绘是手机上最贵的一笔，
   而在作品区根本看不到首屏——停掉它是纯赚。回到首屏自动恢复。 */
.hero-live .orb,
.hero-live .flow,
.hero-live .grain{ animation-play-state:paused; }
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, transparent 0 79px, rgba(23,23,27,.045) 79px 80px);
  mask-image:linear-gradient(180deg, transparent, #000 45%, transparent);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 45%, transparent);
}
/* 首屏换成自己的 reel 时：视频压暗一点，保证文字压得住 */
.hero-bg.has-video video{
  width:100%; height:100%; object-fit:cover;
  opacity:.55; filter:saturate(.95);
}
.hero-bg.has-video::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(250,249,246,.72) 0%,rgba(250,249,246,.42) 42%,rgba(250,249,246,.9) 100%);
}

.hero-wrap{ position:relative; z-index:2; max-width:1240px; margin:0 auto; width:100%; }

.hero-name{
  display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:clamp(20px,3.4vh,34px);
  font-family:var(--mono); font-size:11px; letter-spacing:.34em;
  color:var(--accent); text-transform:uppercase;
  animation:fadeUp .9s var(--ease) 1.28s both;
}
.hero-name::before{ content:''; width:clamp(26px,5vw,58px); height:1px; background:var(--accent); }

/* 首屏标题：第一行中文主标（一行），第二行英文副题（小字）；整块居中 */
.hero-head{
  font-size:clamp(1.5rem, 6.4vw, 5.8rem); line-height:1.08; font-weight:200;
  letter-spacing:-.01em; margin-bottom:clamp(20px,3.2vh,34px);
  text-align:center;
}
.hero-line{ display:block; overflow:hidden; }
.hero-line > span{
  display:block;
  animation:heroIn 1.2s var(--ease) 1.4s both;
}
.hero-line:nth-child(2) > span{ animation-delay:1.5s; }
/* 第二行＝英文副题：小字、宽字距 */
.hero-head .hero-line:nth-child(2){
  font-family:var(--mono); font-size:clamp(.68rem, 1.5vw, 1.15rem);
  font-weight:400; letter-spacing:.34em; line-height:1.6;
  color:var(--ink-mid); margin-top:clamp(12px,1.8vh,22px);
}
@keyframes heroIn{ from{transform:translateY(112%)} to{transform:translateY(0)} }
@keyframes fadeUp{ from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }

.hero-tag{
  max-width:50ch; font-size:clamp(14px,1.3vw,17px); color:var(--ink-mid);
  line-height:1.9; margin:0 auto clamp(24px,3.4vh,36px); text-align:center;
  animation:fadeUp 1s var(--ease) 1.7s both;
}
.hero-cats{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:clamp(30px,4.4vh,46px);
  animation:fadeUp 1s var(--ease) 1.82s both;
}
.hero-cats li{
  font-size:11.5px; letter-spacing:.14em; color:var(--ink-mid);
  border:1px solid var(--line); border-radius:100px; padding:6px 15px;
  background:rgba(255,255,255,.6);
}
.hero-cta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:18px;
  animation:fadeUp 1s var(--ease) 1.94s both;
}

/* 主按钮：导图要求"大一点明显一点" */
.btn-major{
  display:inline-flex; align-items:center; gap:14px;
  padding:17px 34px; border-radius:100px;
  background:var(--ink); color:var(--paper);
  font-size:15px; letter-spacing:.14em;
  box-shadow:var(--shadow);
  transition:transform .45s var(--ease), background .45s, box-shadow .45s;
}
.btn-major i{ font-style:normal; transition:transform .45s var(--ease); }
.btn-major:hover{ background:var(--accent); transform:translateY(-2px); }
.btn-major:hover i{ transform:translateX(5px); }
.btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; letter-spacing:.1em; color:var(--ink-mid);
  padding:6px 2px; border-bottom:1px solid var(--line);
  transition:color .4s, border-color .4s;
}
.btn-ghost:hover{ color:var(--ink); border-color:var(--accent); }
.btn-line{
  display:inline-flex; align-items:center; gap:11px;
  padding:15px 28px; border-radius:100px;
  border:1px solid var(--line); color:var(--ink);
  font-size:14px; letter-spacing:.12em; background:rgba(255,255,255,.6);
  transition:border-color .45s, background .45s, transform .45s var(--ease);
}
.btn-line:hover{ border-color:var(--accent); background:#fff; transform:translateY(-2px); }

.hero-foot{
  position:relative; z-index:2; max-width:1240px; width:100%; margin:clamp(34px,6vh,70px) auto 0;
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  border-top:1px solid var(--line-soft); padding-top:16px;
  animation:fadeUp 1s var(--ease) 2.06s both;
}
.scroll-cue{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10px; letter-spacing:.34em; color:var(--ink-dim);
}
.scroll-cue i{
  display:block; width:1px; height:32px;
  background:linear-gradient(180deg,var(--accent),transparent);
  animation:cueDrop 2.1s var(--ease-io) infinite;
}
@keyframes cueDrop{
  0%{transform:scaleY(.2);transform-origin:top} 55%{transform:scaleY(1);transform-origin:top}
  56%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(.1);transform-origin:bottom}
}
.hero-meta{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.hero-meta span{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  color:var(--ink-dim); border:1px solid var(--line-soft);
  border-radius:100px; padding:5px 12px; background:rgba(255,255,255,.5);
}

/* ============ 通用区块 ============ */
.sec-label{
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.34em;
  color:var(--ink-dim); text-transform:uppercase;
  margin-bottom:clamp(28px,4.6vh,48px);
}
.sec-label i{ font-style:normal; color:var(--accent); font-size:11px; }
.sec-label::after{ content:''; flex:1; height:1px; background:var(--line-soft); }

/* 滚动渐显：默认可见，只有 html.js 存在时才隐藏等待 JS 唤出 */
html.js .rise{ opacity:0; transform:translateY(34px);
  transition:opacity 1s var(--ease), transform 1s var(--ease); }
html.js .rise.in{ opacity:1; transform:none; }

/* ============ 第二屏：自我介绍 ============ */
.about{
  padding:clamp(80px,13vh,150px) var(--pad);
  background:linear-gradient(180deg,transparent,var(--paper-2) 18%,var(--paper-2) 82%,transparent);
}
.about-top{
  display:grid; grid-template-columns:1.4fr .6fr;
  gap:clamp(28px,5vw,72px); align-items:start;
  margin-bottom:clamp(46px,7vh,82px);
}
.about-lead{ display:flex; flex-direction:column; gap:clamp(20px,2.6vw,30px); }
.about-say{
  font-size:clamp(1.5rem,3.5vw,2.8rem); line-height:1.45;
  letter-spacing:.01em; font-weight:200;
}
.about-say em{ font-style:normal; color:var(--accent); }

.about-photo{ margin:0; }
.about-photo img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  background:var(--paper-3); border:1px solid var(--line-soft);
  border-radius:2px;
}
.about-photo.img-missing img{ display:none; }
.about-photo.img-missing::before{
  content:''; display:block; width:100%; aspect-ratio:4/5;
  background:
    repeating-linear-gradient(45deg, transparent 0 11px, rgba(23,23,27,.05) 11px 12px),
    linear-gradient(160deg,#fff, var(--paper-3));
  border:1px dashed var(--line); border-radius:2px;
}
.about-photo figcaption{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  color:var(--ink-dim); padding-top:10px; text-transform:uppercase;
}
.about-photo figcaption:empty{ display:none; }

.about-cols{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(26px,4vw,56px);
}
.col-h{
  font-size:12px; letter-spacing:.24em; color:var(--accent);
  text-transform:uppercase; font-weight:400;
  padding-bottom:14px; margin-bottom:18px;
  border-bottom:1px solid var(--line-soft);
}
.about-body p{ color:var(--ink-mid); font-size:14.5px; line-height:2.05; }
.about-body p + p{ margin-top:18px; }
.skill-list li{
  position:relative; padding:11px 0 11px 20px;
  font-size:14px; color:var(--ink-mid); line-height:1.7;
  border-bottom:1px solid var(--line-soft);
}
.skill-list li::before{
  content:''; position:absolute; left:0; top:20px;
  width:6px; height:1px; background:var(--accent);
}
.skill-list li b{ font-weight:500; color:var(--ink); }

/* ============ 第三屏：作品 ============ */
.works{ padding:clamp(80px,13vh,150px) var(--pad) clamp(60px,9vh,110px); }
.works-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-bottom:clamp(24px,3.6vh,38px);
}
.works-head h2{ font-size:clamp(1.9rem,4.4vw,3.4rem); font-weight:200; letter-spacing:.02em; }

.filters{ display:flex; flex-direction:column; gap:11px; margin-bottom:clamp(34px,5vh,56px); }
.fg{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.fg-label{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.28em;
  color:var(--ink-dim); margin-right:4px;
}
.fg button{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  color:var(--ink-mid); padding:8px 15px;
  border:1px solid var(--line-soft); border-radius:100px;
  background:rgba(255,255,255,.55);
  transition:color .35s, border-color .35s, background .35s;
}
.fg button b{ font-weight:400; font-size:9px; opacity:.55; margin-left:5px; }
.fg button:hover{ border-color:var(--line); color:var(--ink); }
.fg button.on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.fg button.on b{ opacity:.7; }
.fg-sub button{ font-size:10px; padding:6px 13px; }
.fg-sub button.on{ background:var(--accent); border-color:var(--accent); }

.grid{
  display:grid; grid-template-columns:repeat(2,1fr); align-items:start;
  gap:clamp(22px,3.2vw,54px) clamp(18px,2.6vw,42px);
}
.grid .card.hide{ display:none; }

/* 短剧模块：三列一行，5 件正好 3 + 2。
   短剧卡在 data.js 里写 layout:'wide'（保留 16:9 宽幅画幅），
   但不再占用整行——「全部」等视图里短剧卡也按普通格子在 2 列网格里平铺，
   观感与短剧模块统一。此前 .card.wide 走 grid-column:1/-1 占满整行，已去掉。 */
.grid.is-drama{ grid-template-columns:repeat(3,1fr); }
.grid-empty{
  padding:70px 0; text-align:center; color:var(--ink-dim);
  font-family:var(--mono); font-size:12px; letter-spacing:.2em;
}
.works-tip{
  margin-top:clamp(30px,4.6vh,48px); text-align:center;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--ink-dim);
}

/* 作品卡 */
.card{ display:block; width:100%; text-align:left; cursor:pointer; }
.card-media{
  position:relative; overflow:hidden; border-radius:2px;
  aspect-ratio:var(--ar,16/9);
  background:var(--paper-3); border:1px solid var(--line-soft);
  transition:box-shadow .55s var(--ease), border-color .55s, transform .55s var(--ease);
}
/* 半宽卡统一画幅：横屏竖屏混排时每行两张等高、成行对齐，不留空 */
.grid .card.half .card-media{ aspect-ratio:1 / 1; }
/* 统一亮底：图片完整显示（不裁切），四周用浅纸底填满。
   旧版是「用封面自身做模糊补底」——深色封面会把整张卡压成黑底
   （敲门2.0 夜雨暗调封面就是黑底，清洁工是明亮金调所以显浅），
   现按强哥要求统一成与白卡一致的浅纸底，横竖屏混排不再出现黑块。
   需要深底的作品在 data.js 单条写 plate:'dark'。 */
.card-media::before{
  content:''; position:absolute; inset:0; z-index:0;
  background-image:linear-gradient(165deg,#ffffff 0%, var(--paper-2) 100%);
}
.card-media.plate-dark::before{
  background-image:linear-gradient(165deg,#1c1c24 0%, #12121a 100%);
}
.card:hover .card-media{
  box-shadow:var(--shadow); transform:translateY(-3px);
  border-color:rgba(164,112,58,.34);
}
.card-media > img,.card-media > video{
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.3s var(--ease);
}
.card:hover .card-media > img,
.card:hover .card-media > video{ transform:scale(1.045); }

/* 亮底 / 暗底：白底产品图必须浅底，影像走深底形成节奏对比 */
.card-media.plate-light{ background:#fff; border-color:rgba(23,23,27,.09); }
.card-media.plate-dark { background:#14141a; border-color:rgba(23,23,27,.14); }
.card-media.fit-contain > img,
.card-media.fit-contain > video{ object-fit:contain; padding:4.5%; }
.card:hover .card-media.fit-contain > img,
.card:hover .card-media.fit-contain > video{ transform:scale(1.025); }

.card-num{
  position:absolute; top:13px; left:15px; z-index:3;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  color:var(--accent);
}
.card-kind{
  position:absolute; top:13px; right:15px; z-index:3;
  display:flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em;
  color:var(--ink-mid);
}
.card-kind i{ width:5px; height:5px; border-radius:50%; background:var(--accent); }
.ln-ecom   i{ background:#a4703a; }
.ln-ip     i{ background:#6f61c2; }
.ln-drama  i{ background:#c25337; }
.ln-film   i{ background:#357fa6; }
.ln-visual i{ background:#5d7f57; }

.card-mkt{
  position:absolute; bottom:13px; right:14px; z-index:3;
  font-family:var(--mono); font-size:9px; letter-spacing:.2em;
  padding:4px 10px; border-radius:100px;
  background:rgba(255,255,255,.86); border:1px solid var(--line);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:var(--ink-mid);
}
.mk-global{ color:#2f5f85; }
.mk-cn{ color:#8a5a24; }
.mk-both{ color:#4c4270; }

/* 深色底片上的角标转浅 */
.plate-dark .card-num{ color:var(--accent-2); }
.plate-dark .card-kind{ color:rgba(255,255,255,.62); }
.plate-dark .card-mkt{
  background:rgba(20,20,26,.6); border-color:rgba(255,255,255,.22); color:rgba(255,255,255,.85);
}

.card-play{
  position:absolute; inset:0; z-index:2; display:flex;
  align-items:center; justify-content:center;
  opacity:0; transition:opacity .5s var(--ease); pointer-events:none;
}
.card:hover .card-play{ opacity:1; }
.card-play b{
  width:clamp(54px,5.6vw,70px); height:clamp(54px,5.6vw,70px);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:rgba(255,255,255,.82);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background .5s, border-color .5s;
}
.card-play b::before{
  content:''; width:0; height:0; margin-left:4px;
  border-left:10px solid var(--ink);
  border-top:6.5px solid transparent; border-bottom:6.5px solid transparent;
}
.card:hover .card-play b{ background:#fff; border-color:var(--accent); }
.plate-dark .card-play b{
  background:rgba(20,20,26,.55); border-color:rgba(255,255,255,.3);
}
.plate-dark .card-play b::before{ border-left-color:#fff; }

.card-foot{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; padding-top:15px; margin-top:15px;
  border-top:1px solid var(--line-soft); transition:border-color .5s;
}
.card:hover .card-foot{ border-color:rgba(164,112,58,.34); }
.card-t{ font-size:clamp(15px,1.4vw,18px); letter-spacing:.02em; }
.card-t em{
  display:block; font-style:normal; font-family:var(--mono);
  font-size:9.5px; letter-spacing:.2em; color:var(--ink-dim); margin-top:5px;
}
.card-c{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  color:var(--ink-dim); white-space:nowrap;
}

/* 占位"片头卡" */
.slate{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.slate-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(130% 100% at 82% 8%, rgba(164,112,58,.14) 0%, transparent 58%),
    linear-gradient(150deg,#fdfcfa 0%, #f1eee7 52%, #e8e4da 100%);
}
.slate-grid{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, transparent 0 49px, rgba(23,23,27,.045) 49px 50px),
    repeating-linear-gradient(0deg,  transparent 0 49px, rgba(23,23,27,.045) 49px 50px);
}
.slate-cross::before,.slate-cross::after{ content:''; position:absolute; background:rgba(23,23,27,.07); }
.slate-cross::before{ left:50%; top:0; bottom:0; width:1px; }
.slate-cross::after{ top:50%; left:0; right:0; height:1px; }
.slate-num{
  position:absolute; left:4%; bottom:-4%; font-family:var(--mono);
  font-size:clamp(84px,16vw,200px); font-weight:200; line-height:.8;
  color:rgba(23,23,27,.055); letter-spacing:-.04em;
  transition:color .8s;
}
.card:hover .slate-num{ color:rgba(164,112,58,.13); }
.slate-tag{
  position:absolute; left:6%; bottom:12%; display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.24em; color:var(--ink-dim);
}
.slate-tag i{ width:16px; height:1px; background:var(--accent); }

/* 深底占位卡 */
.plate-dark .slate-bg{
  background:
    radial-gradient(130% 100% at 82% 8%, rgba(200,164,92,.14) 0%, transparent 58%),
    linear-gradient(150deg,#17171e 0%, #101015 52%, #14120f 100%);
}
.plate-dark .slate-grid{
  background:
    repeating-linear-gradient(90deg, transparent 0 49px, rgba(255,255,255,.04) 49px 50px),
    repeating-linear-gradient(0deg,  transparent 0 49px, rgba(255,255,255,.04) 49px 50px);
}
.plate-dark .slate-cross::before,
.plate-dark .slate-cross::after{ background:rgba(255,255,255,.08); }
.plate-dark .slate-num{ color:rgba(255,255,255,.05); }
.plate-dark .slate-tag{ color:rgba(255,255,255,.42); }

/* ============ 第四屏：经历 / 简历 / PPT ============ */
.resume{
  padding:clamp(80px,13vh,150px) var(--pad);
  background:linear-gradient(180deg,transparent,var(--paper-2) 16%,var(--paper-2) 84%,transparent);
}
.resume-h{
  font-size:clamp(1.7rem,3.6vw,2.7rem); font-weight:200;
  margin-bottom:clamp(32px,5vh,54px);
}
.exp li{
  display:grid; grid-template-columns:190px 1fr;
  gap:clamp(18px,3vw,44px);
  padding:clamp(20px,3vh,30px) 0;
  border-top:1px solid var(--line-soft);
}
.exp li:last-child{ border-bottom:1px solid var(--line-soft); }
.exp .e-date{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em;
  color:var(--accent); padding-top:3px;
}
.exp .e-org{ font-size:clamp(16px,1.6vw,19px); letter-spacing:.02em; }
.exp .e-role{
  display:block; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.18em; color:var(--ink-dim); margin-top:7px;
}
.exp .e-desc{ margin-top:12px; font-size:14px; line-height:1.95; color:var(--ink-mid); }

.dl-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  margin-top:clamp(36px,5.4vh,58px);
}
.dl-hint{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  color:var(--ink-dim);
}

/* ============ 尾屏 ============ */
.contact{ padding:clamp(80px,13vh,150px) var(--pad) clamp(40px,6vh,64px); }
.contact-h{
  font-size:clamp(2rem,6.4vw,4.6rem); font-weight:200;
  line-height:1.08; margin-bottom:clamp(38px,5.6vh,66px);
}
.contact-grid{
  display:grid; grid-template-columns:1fr auto;
  gap:clamp(30px,5vw,80px); align-items:start;
}
.contact-list li{ padding:19px 0; border-top:1px solid var(--line-soft); }
.contact-list li:last-child{ border-bottom:1px solid var(--line-soft); }
.contact-list b{
  display:block; font-weight:400; font-family:var(--mono);
  font-size:10px; letter-spacing:.28em; color:var(--ink-dim); margin-bottom:11px;
}
.contact-list a,.contact-list span.v{
  display:block; font-size:clamp(16px,1.9vw,22px);
  letter-spacing:.03em; transition:color .4s;
}
.contact-list a:hover{ color:var(--accent); }
.qr{ margin:0; }
.qr-box{
  width:clamp(140px,17vw,190px); aspect-ratio:1;
  display:flex; align-items:center; justify-content:center; text-align:center;
  border:1px dashed var(--line); border-radius:2px;
  background:repeating-linear-gradient(45deg, transparent 0 10px, rgba(23,23,27,.03) 10px 11px), #fff;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  color:var(--ink-dim); line-height:2; overflow:hidden;
}
.qr-box img{ width:100%; height:100%; object-fit:contain; }
.qr figcaption{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  color:var(--ink-dim); padding-top:12px; text-transform:uppercase;
}
.foot-line{
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin-top:clamp(52px,9vh,110px); padding-top:22px;
  border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--ink-dim);
}
/* 备案号：硬性要求展示，且必须链到工信部备案系统 */
.foot-icp{
  margin-top:12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--ink-dim);
}
.foot-icp a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line-soft); }
.foot-icp a:hover{ color:var(--ink); border-bottom-color:var(--ink); }

/* ============ 作品二级页面 ============ */
.viewer{
  position:fixed; inset:0; z-index:9200;
  opacity:0; visibility:hidden;
  transition:opacity .55s var(--ease), visibility .55s;
}
.viewer.on{ opacity:1; visibility:visible; }
.vw-bg{
  position:absolute; inset:-8%;
  background-size:cover; background-position:center;
  filter:blur(72px) saturate(1.35);
  transform:scale(1.15);
}
.vw-veil{
  position:absolute; inset:0;
  background:rgba(250,249,246,.86);
  backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px);
}
.vw-bar{
  position:absolute; top:0; left:0; right:0; z-index:6;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--pad);
  background:linear-gradient(180deg,rgba(250,249,246,.94),rgba(250,249,246,.5) 70%,transparent);
}
.vw-back,.vw-close{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 17px; border-radius:100px;
  border:1px solid var(--line); background:rgba(255,255,255,.8);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  color:var(--ink-mid);
  transition:color .4s, border-color .4s, background .4s;
}
.vw-back i,.vw-close i{ font-style:normal; }
.vw-back:hover,.vw-close:hover{ color:var(--ink); border-color:var(--accent); background:#fff; }

.vw-scroll{
  position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.vw-inner{
  max-width:1180px; margin:0 auto;
  padding:clamp(74px,11vh,116px) var(--pad) clamp(56px,9vh,96px);
}
.vw-head{ padding-bottom:clamp(24px,3.6vh,40px); border-bottom:1px solid var(--line-soft); }
.vw-idx{
  font-family:var(--mono); font-size:11px; letter-spacing:.34em;
  color:var(--accent); margin-bottom:15px;
}
.vw-head h2{ font-size:clamp(1.9rem,5.2vw,3.4rem); font-weight:200; line-height:1.15; }
.vw-en{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  color:var(--ink-dim); margin-top:12px; text-transform:uppercase;
}
.vw-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.vw-tags li{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  color:var(--ink-mid); border:1px solid var(--line-soft);
  border-radius:100px; padding:5px 13px; background:rgba(255,255,255,.6);
}

.vw-intro{
  margin-top:clamp(26px,4vh,44px); padding:clamp(22px,3.4vw,36px);
  background:rgba(255,255,255,.82); border:1px solid var(--line-soft);
  border-radius:2px; box-shadow:var(--shadow-sm);
}
.vw-intro h3{
  font-size:11.5px; letter-spacing:.26em; color:var(--accent);
  text-transform:uppercase; font-weight:400; margin-bottom:16px;
}
.vw-intro p{ font-size:clamp(14px,1.2vw,15.5px); line-height:2; color:var(--ink-mid); }
.vw-intro p + p{ margin-top:14px; }
.vw-facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:16px 26px; margin-top:26px; padding-top:22px;
  border-top:1px solid var(--line-soft);
}
.vw-facts dt{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.24em;
  color:var(--ink-dim); margin-bottom:7px; text-transform:uppercase;
}
.vw-facts dd{ margin:0; font-size:14px; color:var(--ink); }

.vw-stage{ margin-top:clamp(30px,4.6vh,54px); }
.stage-frame{
  position:relative; display:flex; align-items:center; justify-content:center;
  min-height:min(64vh,560px); padding:clamp(14px,2.4vw,34px);
  background:#fff; border:1px solid var(--line-soft); border-radius:2px;
  box-shadow:var(--shadow); overflow:hidden;
}
.stage-item{ width:100%; display:flex; align-items:center; justify-content:center; }
.stage-item img{
  max-width:100%; max-height:70vh; width:auto; height:auto;
  margin:0 auto; border-radius:1px;
  user-select:none; -webkit-user-select:none; -webkit-user-drag:none;
}
.stage-item video{
  max-width:100%; max-height:70vh; width:auto; margin:0 auto;
  background:#000; border-radius:1px;
}
.stage-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; width:100%; min-height:min(50vh,420px); text-align:center;
  border:1px dashed var(--line); border-radius:2px;
}
.stage-empty i{ font-style:normal; font-size:24px; color:rgba(164,112,58,.55); }
.stage-empty span{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.24em; color:var(--ink-dim);
}
.stage-empty small{ font-size:12px; color:var(--ink-dim); max-width:36ch; line-height:1.85; }

.stage-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:rgba(255,255,255,.9);
  color:var(--ink); font-size:16px;
  box-shadow:var(--shadow-sm);
  transition:background .4s, border-color .4s, opacity .4s;
}
.stage-arrow:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.stage-arrow.prev{ left:clamp(10px,1.6vw,22px); }
.stage-arrow.next{ right:clamp(10px,1.6vw,22px); }
.stage-arrow[disabled]{ opacity:.3; pointer-events:none; }

.stage-count,.stage-cap{
  position:absolute; bottom:14px;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--ink-dim);
}
.stage-count{ right:clamp(14px,2vw,26px); }
.stage-cap{ left:clamp(14px,2vw,26px); }

/* 黑色操作提示条 —— 亮底上唯一的深色块，视线自然落上去 */
.hintbar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:8px 12px; margin-top:16px; padding:11px 20px;
  background:var(--ink); color:rgba(250,249,246,.9);
  border-radius:100px;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
}
.hintbar em{ font-style:normal; color:rgba(250,249,246,.35); }
.hb-dot{
  width:6px; height:6px; border-radius:50%; background:var(--accent-2);
  animation:blink 1.8s ease-in-out infinite;
}
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.28} }

.thumbs{
  display:flex; gap:9px; overflow-x:auto; padding:18px 2px 6px;
}
.thumbs button{
  flex:0 0 auto; width:76px; height:56px; overflow:hidden;
  border:1px solid var(--line-soft); border-radius:2px; background:#fff;
  opacity:.6; transition:opacity .4s, border-color .4s, transform .4s var(--ease);
}
.thumbs button img{ width:100%; height:100%; object-fit:cover; }
.thumbs button:hover{ opacity:1; transform:translateY(-2px); }
.thumbs button.on{ opacity:1; border-color:var(--accent); border-width:2px; }
.thumbs button.thumb-video{ display:flex; align-items:center; justify-content:center; background:#2a2733; }
.thumbs button.thumb-video b{ width:0; height:0; border-left:11px solid #fff; border-top:7px solid transparent; border-bottom:7px solid transparent; margin-left:2px; }
.thumbs button.thumb-video.on{ border-color:var(--accent); }

.vw-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  margin-top:clamp(34px,5vh,58px); padding-top:26px;
  border-top:1px solid var(--line-soft);
}
.vw-nav{ display:flex; gap:12px; flex-wrap:wrap; }
.vw-nav button{
  display:inline-flex; align-items:center; gap:11px;
  padding:13px 24px; border-radius:100px;
  border:1px solid var(--line); background:rgba(255,255,255,.7);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--ink-mid);
  transition:color .4s, border-color .4s, background .4s, transform .4s var(--ease);
}
.vw-nav button:hover{ color:var(--ink); border-color:var(--accent); background:#fff; }
.vw-nav button[disabled]{ opacity:.32; pointer-events:none; }
.vw-foot .btn-line{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; }
.vw-foot .btn-line i{ font-style:normal; }

/* ============ 响应式 ============ */
@media (max-width:1080px){
  .about-top{ grid-template-columns:1fr; }
  .about-photo{ max-width:300px; }
  .about-cols{ grid-template-columns:1fr 1fr; }
  .exp li{ grid-template-columns:150px 1fr; }
}
@media (max-width:820px){
  :root{ --nav-h:60px; }
  .nav-links a b{ display:none; }
  .nav-now{ display:none; }
  .contact-grid{ grid-template-columns:1fr; }
  .qr-box{ width:150px; }
  .about-cols{ grid-template-columns:1fr; }
  .exp li{ grid-template-columns:1fr; gap:10px; }
  .stage-arrow{ width:40px; height:40px; }
  .grid.is-drama{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .grid{ grid-template-columns:1fr; gap:32px; }
  .grid.is-drama{ grid-template-columns:1fr; }
  .nav{ padding:0 16px; }
  .nav-me em{ display:none; }
  .nav-links{ gap:2px; }
  .nav-links a{ font-size:12px; padding:6px 3px; }
  .hero-foot{ flex-direction:column; align-items:flex-start; gap:14px; }
  .hero-meta{ justify-content:flex-start; }
  .btn-major{ padding:15px 26px; font-size:14px; }
  .vw-bar{ padding:12px 16px; }
  .vw-back span,.vw-close span{ display:none; }
  .hintbar{ font-size:9.5px; padding:10px 14px; }
  .thumbs button{ width:62px; height:46px; }
  .vw-foot{ flex-direction:column; align-items:stretch; }
  .vw-foot .btn-line,.vw-nav button{ justify-content:center; }
  .vw-nav{ flex-direction:column; }
}

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

/* ---------- 作品卡片：查看详情入口 ---------- */
.card-go{
  display:inline-block;
  margin-top:8px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  color:#a4703a;
  transition:transform .25s ease, opacity .25s ease;
}
.card:hover .card-go{ transform:translateX(4px); }
.card-media.plate-dark ~ .card-foot .card-go{ color:#c79a6a; }

/* ---------- 简历：基本信息块 ---------- */
.basic{ margin-top:30px; }
.basic .col-h{ margin-bottom:14px; }
.basic-list{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:12px 30px;
}
.basic-list li{ display:flex; gap:12px; font-size:15px; line-height:1.5; }
.basic-list li b{
  color:#8a8175; font-weight:600; min-width:72px; flex:none;
}
.basic-list li span{ color:#17171b; }
.basic-list li.ph{ color:#b3a892; }