@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500&family=Gaegu:wght@400;500;700&family=Inter:wght@300;400;500&family=Noto+Sans+SC:wght@300;400;500&family=Noto+Serif+SC:wght@400;500&display=swap');

/* 福芦灵感喝茶体 —— 本地打包，用于标题/署名 */
@font-face {
  font-family: "FuLu HeCha";
  src: local("fululingganhechati"),
       local("福芦灵感喝茶体"),
       url("assets/fonts/FuLuLingGanHeChaTi.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   个人作品集 — 铅笔灰 / 米白 · 简约拙趣手绘线条风
   配色: 纸白 #FAF9F5 / 深纸白 #F2F1EB / 铅笔灰 #4B4B4B / 淡灰线 #C9C9C2
   字体: 标题用福芦灵感喝茶体，正文用无衬线，回退系统字体
   ============================================================ */

:root {
  --paper:        #FAF9F5;
  --paper-deep:   #F2F1EB;
  --paper-edge:   #ECEAE2;
  --ink:          #4B4B4B;
  --ink-soft:     #6E6E6A;
  --ink-faint:    #9A9A93;
  --line:         #C9C9C2;
  --line-soft:    #DCDBD3;
  --accent:       #4B4B4B;   /* 铅笔灰即主色，无额外强调色 */
  --shadow:       0 2px 0 rgba(75,75,75,.06);
  --maxw:         1180px;
  --ease:         cubic-bezier(.62,.05,.27,.99);
  /* 字体栈 */
  --display: "FuLu HeCha", "Gaegu", "Noto Serif SC", "Songti SC", serif;   /* 标题：喝茶体 */
  --hand:    "Caveat", "Gaegu", "Noto Serif SC", "Songti SC", "STSong", serif;   /* 手写感（页码/序号等装饰） */
  --sans:    "Inter", "Noto Sans SC", -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;  /* 简约无衬线 */
}

/* ---------- 基础重置 ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);   /* 默认无衬线（正文/目录），标题用手写体覆盖 */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  overflow: hidden;          /* 锁定 body 滚动，由容器翻页 */
}

img { display: block; max-width: 100%; }

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

/* ---------- 纸张纹理（极淡的颗粒） ---------- */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(75,75,75,.025) 1px, transparent 1px),
    radial-gradient(rgba(75,75,75,.018) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  z-index: 1;
  opacity: .6;
}

/* ============================================================
   翻页容器
   ============================================================ */
.deck {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.track {
  position: absolute;
  inset: 0;
  transition: transform 900ms var(--ease);
  will-change: transform;
}

/* ============================================================
   单页
   ============================================================ */
.page {
  position: relative;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  padding: clamp(28px, 6vh, 64px) clamp(28px, 6vw, 96px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ============================================================
   首页 · Cover
   ============================================================ */
.cover {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}
.cover__title {
  font-family: var(--display);
  font-size: clamp(44px, 9vw, 120px);
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
  letter-spacing: 1px;
}
/* 四个页面标题快捷入口 */
.cover__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 3vw, 40px);
  margin-top: clamp(40px, 8vh, 80px);
}
.cover__link {
  font-family: var(--sans);
  font-size: clamp(15px, 1.9vw, 22px);
  font-weight: 300;
  color: var(--ink-soft);
  text-decoration: none;
  letter-spacing: 1px;
  position: relative;
  padding: 2px 4px;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 250ms;
}
.cover__link::after {
  content: "";
  position: absolute;
  left: 4px; right: 4px; bottom: 0;
  height: 1.5px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--ease);
}
.cover__link:hover { color: var(--ink); }
.cover__link:hover::after { transform: scaleX(1); }
/* 底部署名 */
.cover__foot {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  font-family: "Noto Serif SC", "Source Han Serif SC", "思源宋体", "SimSun", "Songti SC", "STSong", serif;
  font-size: clamp(15px, 1.8vw, 22px);
  font-weight: 400;
  color: var(--ink-faint);
  letter-spacing: 1px;
}
.cover__foot a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--line);
}

/* 页眉：页码 + 小标题，手写感 */
.page__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex: 0 0 auto;
  z-index: 3;
}
.page__num {
  font-family: "Caveat", cursive;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1;
  color: var(--ink-faint);
  letter-spacing: 1px;
}
.page__tag {
  font-size: clamp(13px, 1.5vw, 16px);
  color: var(--ink-faint);
  letter-spacing: 4px;
  text-transform: uppercase;
}
.page__title {
  font-family: var(--display);
  font-size: clamp(30px, 4.4vw, 58px);
  font-weight: 400;
  line-height: 1.1;
  margin-top: 6px;
  color: var(--ink);
}
.page__title .en {
  display: block;
  font-family: var(--display);
  font-size: .55em;
  color: var(--ink-soft);
  letter-spacing: 2px;
  margin-top: 2px;
}

.page__body {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: clamp(16px, 3vh, 34px);
  position: relative;
}

/* ============================================================
   页面一 · About me
   上：横向画廊   下：自我介绍文字
   ============================================================ */
.about {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* 画廊舞台（与美工设计共用 .gallery 结构） */
.about__stage {
  flex: 1.4 1 0;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* 文字区 */
.about__text {
  flex: 0 0 auto;
  padding-top: clamp(14px, 2.4vh, 26px);
  border-top: 1px solid var(--line-soft);
  margin-top: clamp(14px, 2.4vh, 26px);
  max-width: var(--maxw);
}
.about__name {
  font-family: "SimSun", "Songti SC", "STSong", serif;
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 4px;
}
.about__tags {
  font-family: var(--sans);
  font-size: clamp(13px, 1.5vw, 17px);
  font-weight: 300;
  color: var(--ink-soft);
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.about__text p {
  font-size: clamp(15px, 1.7vw, 19px);
  line-height: 1.9;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.about__text p:last-child { margin-bottom: 0; }

/* ============================================================
   通用横向画廊（About / Design 共用）
   ============================================================ */
.gallery__rail {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  padding: 0 clamp(20px, 4vw, 60px);
  height: 100%;
  transition: transform 700ms var(--ease);
  will-change: transform;
  cursor: grab;
}
.gallery__rail:active { cursor: grabbing; }
.gallery__item {
  flex: 0 0 auto;
  height: 90%;
  border-radius: 10px 12px 9px 14px;
  overflow: hidden;
  background: var(--paper-deep);
  border: 1.5px solid var(--ink);
  box-shadow: var(--shadow);
  transition: transform 400ms var(--ease);
  user-select: none;
}
.gallery__item img {
  height: 100%;
  width: auto;
  object-fit: cover;
  pointer-events: none;
}
.gallery__item:hover { transform: translateY(-6px); }

/* ============================================================
   页面二/三 · 子页面竖向翻页 (内嵌 deck)
   ============================================================ */
.sub {
  position: relative;
  height: 100%;
  min-height: 0;
}
.sub__track {
  position: absolute;
  inset: 0;
  transition: transform 800ms var(--ease);
  will-change: transform;
}
.subpage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 6px clamp(6px, 2vw, 28px) 46px;
  overflow: hidden;
}
.subpage__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: 0 0 auto;
}
.subpage__idx {
  font-family: "Caveat", cursive;
  font-size: 24px;
  color: var(--ink-faint);
}
.subpage__name {
  font-family: "SimSun", "Songti SC", "STSong", serif;
  font-size: clamp(18px, 2.2vw, 26px);
  color: var(--ink);
  font-weight: 400;
}
.subpage__rule {
  flex: 1;
  height: 1px;
  background: var(--line-soft);
  margin-left: 8px;
  align-self: center;
}
.subpage__body {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 14px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.subpage__body::-webkit-scrollbar { width: 6px; }
.subpage__body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }

/* 子页面通用内容块 */
.b { margin-bottom: 18px; }
.b__label {
  font-family: "Caveat", cursive;
  font-size: clamp(20px, 2.4vw, 30px);
  color: var(--ink);
  margin-bottom: 6px;
}
.b__label::before {
  content: "✓ ";
  color: var(--ink-faint);
}
.b__text {
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.95;
  color: var(--ink-soft);
}
.b__list {
  list-style: none;
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.9;
  color: var(--ink-soft);
}
.b__list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 6px;
}
.b__list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--ink-faint);
}
.placeholder {
  border: 1.5px dashed var(--line);
  border-radius: 14px 12px 16px 11px;
  padding: clamp(24px, 5vh, 56px);
  color: var(--ink-faint);
  font-family: var(--sans);
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 300;
  text-align: center;
  line-height: 1.6;
}

/* ---------- 项目子页面内容：图文排版 ---------- */
.proj {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vh, 20px);
  height: 100%;
}
.proj__text {
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.95;
  color: var(--ink-soft);
  flex: 0 0 auto;
}
.proj__text a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1.5px solid var(--ink);
  font-weight: 500;
  padding: 0 2px;
  transition: opacity 200ms;
}
.proj__text a:hover { opacity: .55; }
/* 图集：默认横向并排滚动；可加 .is-stack 改竖排 */
.proj__shots {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 18px);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.proj__shots::-webkit-scrollbar { height: 8px; }
.proj__shots::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.proj__shots.is-stack {
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  justify-content: flex-start;
}
.proj__shot {
  flex: 0 0 auto;
  border: 1.5px solid var(--ink);
  border-radius: 10px 12px 9px 14px;
  overflow: hidden;
  background: var(--paper-deep);
  box-shadow: var(--shadow);
}
.proj__shot img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* 单张大图（概述页）：撑满，按比例缩放 */
.proj__shots.is-hero { justify-content: center; }
.proj__shots.is-hero .proj__shot img {
  max-height: 100%;
  width: auto;
}
/* 竖排技术流程图：限高居中 */
.proj__shots.is-flow { justify-content: center; }
.proj__shots.is-flow .proj__shot { height: 100%; }
.proj__shots.is-flow .proj__shot img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
/* 多图横排时给每张一个合理高度 */
.proj__shots.is-row { justify-content: flex-start; }
.proj__shots.is-row .proj__shot { height: 100%; }
.proj__shots.is-row .proj__shot img {
  height: 100%;
  width: auto;
  max-width: none;
}

/* 子页面进度小圆点（点击跳转，替代翻页键） */
.sub__dots {
  position: absolute;
  right: clamp(16px, 2.5vw, 30px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 6;
}
.sub__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 300ms, transform 300ms;
}
.sub__dot.is-active {
  background: var(--ink);
  transform: scale(1.4);
}
.sub__dot:hover { background: var(--ink-soft); }

/* ============================================================
   页面四 · 美工设计 横向画廊
   ============================================================ */
.design {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.design__stage {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.design__caption {
  flex: 0 0 auto;
  padding-top: 14px;
  text-align: center;
  font-family: var(--sans);
  font-size: clamp(13px, 1.5vw, 17px);
  font-weight: 300;
  color: var(--ink-soft);
  letter-spacing: 1px;
}

/* ============================================================
   全局翻页按钮 (右上 上翻 / 右下 下翻)
   ============================================================ */
.nav {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  z-index: 50;
  width: 52px; height: 52px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  border-radius: 50% 46% 52% 48%;   /* 手绘感不规则圆 */
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 250ms var(--ease), background 250ms, color 250ms;
  font-family: "Caveat", cursive;
}
.nav:hover {
  background: var(--ink);
  color: var(--paper);
  transform: scale(1.06);
}
.nav:active { transform: scale(.94); }
.nav:disabled {
  opacity: .25;
  cursor: not-allowed;
  background: var(--paper);
  color: var(--ink);
}
.nav--up    { top: clamp(16px, 3vh, 30px); }
.nav--down  { bottom: clamp(16px, 3vh, 30px); }
.nav svg { width: 22px; height: 22px; }

/* ============================================================
   侧边页码指示 (左侧极简竖排)
   ============================================================ */
.pager {
  position: fixed;
  left: clamp(14px, 2vw, 24px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 40;
}
.pager__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 300ms, transform 300ms;
}
.pager__dot.is-active {
  background: var(--ink);
  transform: scale(1.4);
}
.pager__dot:hover { background: var(--ink-soft); }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 820px) {
  .nav { width: 44px; height: 44px; }
  .pager { left: 10px; gap: 10px; }
}

/* 尊重减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .track, .sub__track, .gallery__rail { transition: none !important; }
}

/* ============================================================
   图片放大灯箱
   ============================================================ */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(75,75,75,.82);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: clamp(20px, 5vw, 80px);
  cursor: zoom-out;
}
.lightbox.is-open { display: flex; }
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 2px solid var(--paper);
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0,0,0,.3);
  cursor: default;
}
.lightbox__close {
  position: absolute;
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
  width: 44px; height: 44px;
  border: none;
  background: var(--paper);
  color: var(--ink);
  border-radius: 50%;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 200ms var(--ease);
}
.lightbox__close:hover { transform: scale(1.1) rotate(90deg); }

/* ---------- Agent 页：图集竖排完整展示（非画廊） ---------- */
.proj__shots.is-stack {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  gap: clamp(12px, 2vh, 20px);
  padding: 4px 2px;
}
.proj__shots.is-stack .proj__shot {
  height: auto;
  width: auto;
  max-width: 100%;
  cursor: zoom-in;
  transition: transform 300ms var(--ease);
}
.proj__shots.is-stack .proj__shot:hover { transform: translateY(-3px); }
.proj__shots.is-stack .proj__shot img {
  width: 100%;
  height: auto;
  max-height: none;
  max-width: 100%;
  object-fit: contain;
}
/* 单图完整展示（概述/技术流程） */
.proj__shots.is-single {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: auto;
}
.proj__shots.is-single .proj__shot {
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  cursor: zoom-in;
  transition: transform 300ms var(--ease);
}
.proj__shots.is-single .proj__shot:hover { transform: translateY(-3px); }
.proj__shots.is-single .proj__shot img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}