/* ==========================================================================
   毕钰涵 · 电商设计作品集 2026
   页面本身只有「导航」和「热区」两层，作品画面 1:1 原样呈现，不加任何遮挡。
   ========================================================================== */

:root{
  --accent:      #FFBA00;   /* 取自封面黄色标签 */
  --accent-deep: #E8A600;
  --accent-soft: rgba(255,186,0,.12);
  --bg:          #FEFAF1;   /* 取自内页米白底 */
  --ink:         #111111;
  --ink-2:       #6E6A61;
  --line:        rgba(17,17,17,.10);
  --col:         1220px;
  --top-h:       54px;
  --rail-bp:     1300px;
  --ease:        cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  background:var(--bg);
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 15px/1.7 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB",
       "Microsoft YaHei","Noto Sans SC",sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

/* ---------------------------------------------------------------- 滚动进度 */
.progress{
  position:fixed;left:0;right:0;top:0;height:2px;z-index:90;
  background:transparent;pointer-events:none;
}
.progress i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--accent),#FFD75E);
  box-shadow:0 0 10px rgba(255,186,0,.7);
}

/* ------------------------------------------------------------------- 顶栏 */
.top{
  position:fixed;left:0;right:0;top:0;height:var(--top-h);z-index:80;
  display:flex;align-items:center;gap:14px;
  padding:0 clamp(14px,2.4vw,28px);
  background:rgba(254,250,241,.82);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--line);
  transform:translateY(0);
  transition:transform .38s var(--ease),background .3s;
}
.top.is-hidden{transform:translateY(-102%)}
.top:hover{transform:translateY(0)}

.brand{display:flex;align-items:baseline;gap:9px;flex:none}
.brand b{font-size:16px;letter-spacing:.06em;font-weight:800}
.brand i{
  font-style:normal;font-size:11px;letter-spacing:.14em;
  color:var(--ink-2);text-transform:uppercase;
}
.brand::after{
  content:"";position:absolute;display:none;
}

.crumb{
  margin:0;flex:1 1 auto;min-width:0;
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--ink-2);
  overflow:hidden;white-space:nowrap;
}
.crumb .c-sec{
  color:var(--ink);font-weight:600;
  padding-left:14px;border-left:1px solid var(--line);
}
.crumb .c-sub{color:var(--accent-deep);font-weight:600}
.crumb .c-act{
  font-size:11px;letter-spacing:.08em;color:var(--ink-2);
  border:1px solid var(--line);border-radius:99px;padding:1px 8px;
}

.tools{display:flex;align-items:center;gap:8px;flex:none}
.tool{
  display:inline-flex;align-items:center;gap:7px;
  height:32px;padding:0 13px;
  background:#fff;border:1px solid var(--line);border-radius:99px;
  font-size:12.5px;letter-spacing:.02em;cursor:pointer;
  transition:border-color .18s,color .18s,background .18s,box-shadow .18s;
}
.tool:hover{border-color:rgba(255,186,0,.9);box-shadow:0 6px 18px -10px rgba(232,166,0,.9)}
.tool .ico{
  width:11px;height:11px;border-radius:3px;flex:none;
  border:1.5px dashed var(--accent-deep);
}
.tool[aria-pressed="false"] .ico{border-style:solid;border-color:#cfcbc2}
.tool[aria-pressed="false"]{color:var(--ink-2)}
.t-mail .ico{
  border:none;border-radius:2px;
  background:
    linear-gradient(var(--accent),var(--accent)) center/100% 1.4px no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/1.4px 100% no-repeat;
}
.t-mail.is-done{background:var(--accent);border-color:var(--accent);color:#111}

/* ------------------------------------------------------------------ 侧栏 */
.rail{display:none}
@media (min-width:1300px){
  .rail{
    display:block;position:fixed;left:0;top:0;height:100vh;width:66px;z-index:70;
  }
}

.rail-dots{
  position:absolute;left:23px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:10px;align-items:flex-start;
  transition:opacity .2s;
}
.rail-dots span{
  display:block;width:12px;height:2px;border-radius:2px;
  background:rgba(17,17,17,.20);
  transition:width .3s var(--ease),background .3s;
}
.rail-dots span.on{width:22px;background:var(--accent)}
body.no-hot .rail-dots span{background:rgba(17,17,17,.28)}
/* 封面是整块黑底，深色小点会在上面消失 —— 压到黑底时翻成浅色 */
body.rail-dark .rail-dots span{background:rgba(255,255,255,.34)}
body.rail-dark.no-hot .rail-dots span{background:rgba(255,255,255,.46)}

.rail-panel{
  position:absolute;left:14px;top:50%;
  width:262px;max-height:80vh;overflow:auto;overscroll-behavior:contain;
  padding:18px 10px 14px 16px;
  background:rgba(254,250,241,.92);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--line);border-radius:18px;
  box-shadow:0 30px 70px -34px rgba(17,17,17,.45),0 2px 8px rgba(17,17,17,.05);
  opacity:0;pointer-events:none;
  transform:translateY(-50%) translateX(-14px) scale(.98);
  transition:opacity .2s,transform .3s var(--ease);
  scrollbar-width:thin;
}
.rail:hover .rail-panel,
.rail:focus-within .rail-panel{
  opacity:1;pointer-events:auto;
  transform:translateY(-50%) translateX(0) scale(1);
}
.rail:hover .rail-dots,
.rail:focus-within .rail-dots{opacity:0}

.rail-head{display:flex;align-items:baseline;gap:8px;padding:0 0 12px}
.rail-head b{font-size:14px;letter-spacing:.14em}
.rail-head i{font-style:normal;font-size:9.5px;letter-spacing:.16em;color:var(--ink-2)}

.nav-list{list-style:none;margin:0;padding:0}
.nav-sec > .nav-link{
  display:flex;align-items:center;gap:10px;
  padding:7px 8px;border-radius:9px;
  font-size:13.5px;font-weight:600;
  transition:background .16s,color .16s;
}
.nav-link em{
  font-style:normal;font-size:10.5px;letter-spacing:.04em;
  color:var(--ink-2);min-width:15px;
  font-variant-numeric:tabular-nums;
}
.nav-sec:hover > .nav-link{background:rgba(255,186,0,.20)}
.nav-sec.on > .nav-link{background:var(--accent);color:#111}
.nav-sec.on > .nav-link em{color:rgba(17,17,17,.6)}

.nav-sub{list-style:none;margin:1px 0 6px;padding:0 0 0 25px;display:none}
.nav-sec.on .nav-sub{display:block}
.nav-sub > li > a{
  display:block;padding:4px 8px;border-radius:7px;
  font-size:12.5px;color:var(--ink-2);
  transition:color .16s,background .16s;
}
.nav-sub > li:hover > a{color:var(--ink);background:rgba(255,186,0,.14)}
.nav-sub > li.on > a{color:#111;font-weight:600;background:rgba(255,186,0,.22)}

.nav-sub2{list-style:none;margin:0;padding:0 0 4px 12px;display:none;
  border-left:1px dashed var(--line);margin-left:8px}
.nav-sub > li.on .nav-sub2{display:block}
.nav-sub2 a{
  display:block;padding:3px 8px;border-radius:6px;
  font-size:11.5px;color:var(--ink-2);
}
.nav-sub2 li:hover a{color:var(--ink);background:rgba(255,186,0,.12)}
.nav-sub2 li.on a{color:#111;font-weight:600}
.nav-sub2 li.on a::before{content:"· ";color:var(--accent-deep)}

.rail-foot{margin-top:12px;padding:12px 8px 0;border-top:1px solid var(--line)}
.rail-foot a{font-size:11.5px;letter-spacing:.02em;color:var(--ink-2)}
.rail-foot a:hover{color:var(--accent-deep)}

/* ------------------------------------------------------------------ 版面 */
main{display:block;padding-top:0}

.sheet-wrap{
  position:relative;
  width:100%;max-width:var(--col);
  margin-left:auto;margin-right:auto;
}

/* 横版页（封面 / 简历 / 目录 / 结尾）：浮在米白底上的卡片 */
.card{padding:0 clamp(10px,3vw,26px)}
.card .sheet{
  border-radius:16px;overflow:hidden;
  box-shadow:0 26px 64px -34px rgba(17,17,17,.42),0 1px 2px rgba(17,17,17,.05);
}
.card + .card{margin-top:clamp(22px,4vw,52px)}
.card + .doc{margin-top:clamp(30px,6vw,80px)}
.doc + .card{margin-top:clamp(30px,6vw,80px)}

/* 长页：与页面底色同色，首尾相接、无缝续接，画面不做任何裁切或重排 */
.doc .sheet{border-radius:0;overflow:visible}

#cover{padding:0}
#cover.card{
  max-width:none;margin:0;background:#000;
  padding:calc(var(--top-h) + 10px) clamp(10px,3vw,26px) clamp(26px,5vw,64px);
}
#cover .sheet{max-width:var(--col);margin:0 auto;border-radius:0;box-shadow:none}
#cover + .card{margin-top:clamp(30px,6vw,80px)}

.cover-foot{
  max-width:var(--col);margin:clamp(18px,3vw,34px) auto 0;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  color:rgba(255,255,255,.52);font-size:12px;letter-spacing:.04em;
}
.cover-foot b{color:var(--accent);font-weight:600}
.cover-foot .cf-r{display:flex;align-items:center;gap:8px}
.cover-foot .cf-r::after{
  content:"";width:26px;height:1px;background:rgba(255,255,255,.32);
}

.sheet{
  position:relative;margin:0;display:block;
  font-size:0;line-height:0;
  background:var(--bg);
}
.sheet img{
  display:block;width:100%;height:auto;
  -webkit-user-drag:none;user-select:none;
}
.doc .sheet img{background:var(--bg)}

/* 入场：只对卡片做很轻的上浮；长页不做动画，避免滚动时闪。
   用 html.js 兜底：JS 不可用时内容直接可见，不会白屏。 */
html.js .card .sheet{opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease),transform .8s var(--ease)}
html.js .card.in .sheet{opacity:1;transform:none}
/* 兜底：JS 判卡住了就直接显形，不再等过渡 */
html.reveal-now .card .sheet{opacity:1!important;transform:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  html.js .card .sheet{opacity:1;transform:none;transition:none}
}

/* ------------------------------------------------------------------ 热区 */
.hot{
  position:absolute;
  left:var(--x);top:var(--y);width:var(--w);height:var(--h);
  margin:0;padding:0;border:0;background:transparent;
  border-radius:12px;cursor:pointer;
  outline:1px dashed rgba(232,166,0,.34);outline-offset:-1px;
  -webkit-tap-highlight-color:transparent;
  transition:outline-color .18s,background-color .18s,box-shadow .18s;
  animation:hotBreathe 4.2s ease-in-out infinite;
}
@keyframes hotBreathe{
  0%,100%{outline-color:rgba(232,166,0,.26)}
  50%    {outline-color:rgba(232,166,0,.62)}
}
@media (prefers-reduced-motion:reduce){ .hot{animation:none} }

.hot:hover,.hot:focus-visible{
  outline:1.5px solid var(--accent);
  background:rgba(255,186,0,.10);
  box-shadow:0 0 0 4px rgba(255,186,0,.13);
  animation:none;
}
.hot:focus-visible{outline-color:var(--ink)}
.hot:active{background:rgba(255,186,0,.18)}

body.no-hot .hot{outline-color:transparent;animation:none}
body.no-hot .hot:hover,
body.no-hot .hot:focus-visible{outline-color:var(--accent)}

.anc{
  position:absolute;left:0;top:var(--y);
  width:1px;height:1px;pointer-events:none;
}

/* ------------------------------------------------------------------ 页脚 */
.foot{
  max-width:var(--col);margin:clamp(34px,6vw,86px) auto clamp(30px,5vw,60px);
  padding:26px clamp(14px,3vw,26px) 0;
  border-top:1px solid var(--line);
}
.foot-in{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 20px}
.foot-name b{font-size:20px;letter-spacing:.06em;font-weight:800;margin-right:10px}
.foot-name i{font-style:normal;font-size:12.5px;color:var(--ink-2)}
.foot-mail{
  margin-left:auto;font-size:15px;font-weight:600;
  border-bottom:2px solid var(--accent);padding-bottom:2px;
}
.foot-mail:hover{color:var(--accent-deep)}
.foot-tip{
  flex:1 0 100%;margin:10px 0 0;font-size:12px;color:var(--ink-2);
}

/* -------------------------------------------------------------- 移动目录 */
.menu{
  position:fixed;inset:0;z-index:100;background:var(--bg);
  display:flex;flex-direction:column;
  animation:menuIn .26s var(--ease);
}
@keyframes menuIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.menu[hidden]{display:none!important}
.menu-bar{
  flex:none;display:flex;align-items:center;justify-content:space-between;
  height:var(--top-h);padding:0 18px;border-bottom:1px solid var(--line);
}
.menu-bar b{font-size:14px;letter-spacing:.14em}
.menu-x{
  background:none;border:1px solid var(--line);border-radius:99px;
  height:30px;padding:0 14px;font-size:12.5px;cursor:pointer;
}
.menu-body{flex:1;overflow:auto;padding:14px 14px 40px;overscroll-behavior:contain}
.menu-body .nav-sec > .nav-link{font-size:16px;padding:11px 10px}
.menu-body .nav-sub{display:block;padding-left:30px}
.menu-body .nav-sub > li > a{font-size:14px;padding:7px 10px}
.menu-body .nav-sub2{display:block;padding-left:14px}
.menu-body .nav-sub2 a{font-size:13px;padding:6px 10px}

/* ------------------------------------------------------------------ 提示 */
.toast{
  position:fixed;left:50%;bottom:26px;z-index:110;
  transform:translate(-50%,14px);
  padding:9px 18px;border-radius:99px;
  background:rgba(17,17,17,.88);color:#fff;
  font-size:12.5px;letter-spacing:.03em;white-space:nowrap;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;
  transition:opacity .22s,transform .3s var(--ease);
}
.toast.on{opacity:1;transform:translate(-50%,0)}

.totop{
  position:fixed;right:20px;bottom:24px;z-index:75;
  width:42px;height:42px;border-radius:50%;
  background:#fff;border:1px solid var(--line);cursor:pointer;
  display:grid;place-items:center;
  box-shadow:0 14px 34px -18px rgba(17,17,17,.5);
  transition:transform .2s var(--ease),border-color .2s;
}
.totop:hover{transform:translateY(-3px);border-color:var(--accent)}
.totop[hidden]{display:none}
.totop svg{width:19px;height:19px;fill:var(--ink)}

/* ------------------------------------------------------------------ 窄屏 */
.only-narrow{display:inline-flex}
@media (min-width:1300px){ .only-narrow{display:none} }

@media (max-width:760px){
  :root{--top-h:52px}
  .brand i{display:none}
  .crumb .c-sub{display:none}
  .t-mail .t-txt{display:none}
  .t-mail{padding:0 12px}
  .t-hot{padding:0 11px}
  .t-hot .ico{width:10px;height:10px}
  .hot{border-radius:9px}
  .cover-foot{flex-direction:column;align-items:flex-start;gap:6px}
  .foot-mail{margin-left:0;flex:1 0 100%}
}

@media print{
  .top,.rail,.progress,.toast,.totop,.menu{display:none!important}
}