/* ============================================================
   PROJECTS — Chapter 02
   Torn paper, fabric tags, stamp markings.
   ============================================================ */

/* ---------- CATEGORY NAV ---------- */
.cat-nav {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--cream-deep);
  border-bottom: 1px solid var(--cream-deep);
  margin-bottom: 5rem;
  flex-wrap: wrap;
}
.cat-nav a {
  position: relative;
  font-family: var(--font-serif-cn);
  font-size: 0.95rem;
  color: var(--green-deep);
  letter-spacing: 0.1em;
  padding: 0.4rem 1rem;
  transition: color var(--motion);
}
.cat-nav a:hover { color: var(--red-accent); }
.cat-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background: var(--red-accent);
  transition: width var(--motion);
}
.cat-nav a:hover::after { width: 100%; }
@media (max-width: 768px) {
  .cat-nav { gap: 0.8rem; padding: 1rem 0; }
  .cat-nav a { font-size: 0.85rem; padding: 0.3rem 0.6rem; }
}

/* ---------- CATEGORY HEAD ---------- */
.proj-cat {
  padding: clamp(3rem, 6vw, 5rem) 0;
  position: relative;
}
.proj-cat--alt {
  background: rgba(74, 93, 58, 0.05);
  border-top: 1px solid var(--cream-deep);
  border-bottom: 1px solid var(--cream-deep);
}
.proj-cat--alt::before,
.proj-cat--alt::after {
  content: "";
  display: block;
  position: absolute;
  left: 0; right: 0;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--red-accent) 0,
    var(--red-accent) 4px,
    transparent 4px,
    transparent 10px
  );
}
.proj-cat--alt::before { top: 0; }
.proj-cat--alt::after { bottom: 0; }

.proj-cat__head {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  gap: 0.4rem 1.6rem;
  margin-bottom: 3rem;
  max-width: 40rem;        /* 顶格横幅标题框改窄：原本铺满整页(~1120px)→ 收成 640px，留出右半空白 */
  align-items: start;
}
.proj-cat__fabric-tag {
  grid-row: 1 / 4;
  align-self: start;
}
.proj-cat__title {
  font-family: var(--font-serif-cn);
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  color: var(--green-deep);
  letter-spacing: 0.06em;
  margin: 0;
  font-weight: 400;
}
.proj-cat__sub {
  font-family: var(--font-serif-en);
  font-style: italic;
  color: var(--ink-mute);
  font-size: 1.1rem;
  margin: 0;
}
.proj-cat__lede {
  font-size: 0.95rem;
  color: var(--ink-soft);
  max-width: 38rem;
  margin: 0.6rem 0 0;
}

/* ---------- PROJECT LIST ---------- */
.proj-list {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.proj {
  position: relative;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 0 2rem;
  align-items: start;
}
.proj__no {
  font-size: 1.1rem;
  color: var(--red-accent);
  letter-spacing: 0.18em;
  padding-top: 0.4rem;
  border-top: 2px solid var(--red-accent);
}
.proj__main {
  border-top: 1px dashed var(--cream-deep);
  padding-top: 0.6rem;
  position: relative;
}
.proj--wide { grid-column: 1 / -1; }
.proj--wide .proj__main {
  border-top: 1px dashed var(--red-accent);
}
.proj__title {
  font-family: var(--font-serif-cn);
  font-size: 1.4rem;
  color: var(--green-deep);
  margin-bottom: 0.5rem;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.proj__period {
  font-size: 0.74rem;
  color: var(--ink-mute);
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}
.proj__desc {
  font-size: 0.94rem;
  line-height: 1.85;
  color: var(--ink-soft);
  margin-bottom: 1.3rem;
}
.proj__highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6rem 1.2rem;
  padding: 1.2rem;
  background: var(--cream-warm);
  border-left: 3px solid var(--red-accent);
  margin-bottom: 1.3rem;
}
.proj__highlights li {
  font-size: 0.88rem;
  color: var(--ink-soft);
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.proj__highlights .mono {
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}
.proj__stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--paper-beige);
  margin-bottom: 1.3rem;
}
.proj__stat-row > div {
  padding: 1.4rem 1rem;
  text-align: center;
  border-right: 1px solid var(--paper-beige);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.proj__stat-row > div:last-child { border-right: 0; }
.proj__stat-num {
  font-family: var(--font-serif-en);
  font-size: 2.4rem;
  font-style: italic;
  color: var(--red-accent);
  line-height: 1;
}
.proj__stat-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-mute);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.proj__visual-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 1.4rem 0;
}
.proj__visual-item {
  background: var(--cream-bg);
  border: 1px solid var(--paper-beige);
  padding: 1.2rem 1rem;
  position: relative;
  transition: all var(--motion);
}
.proj__visual-item:hover {
  background: var(--cream-warm);
  transform: translateY(-3px);
  box-shadow: 4px 4px 0 var(--green-vintage);
}
.proj__visual-num {
  display: inline-block;
  font-size: 0.7rem;
  color: var(--red-accent);
  letter-spacing: 0.18em;
  margin-bottom: 0.4rem;
}
.proj__visual-item strong {
  display: block;
  font-family: var(--font-serif-cn);
  font-weight: 500;
  color: var(--green-deep);
  margin-bottom: 0.4rem;
}
.proj__visual-item p {
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--ink-mute);
}
.proj__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

@media (max-width: 768px) {
  .proj { grid-template-columns: 1fr; gap: 0.6rem; }
  .proj__no { padding-top: 0; border-top: 0; }
  .proj__visual-grid { grid-template-columns: repeat(2, 1fr); }
  .proj__stat-row { grid-template-columns: repeat(3, 1fr); }
  .proj__stat-num { font-size: 1.8rem; }
}
@media (max-width: 480px) {
  .proj__visual-grid { grid-template-columns: 1fr; }
}

/* ---------- 考研账号 · 手机模型展示 ---------- */
.ky-gallery { margin-top: 3.5rem; }
.ky-gallery__label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
  margin-bottom: 1.6rem;
}
.ky-gallery__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
}
.ky-gallery__row .phone { width: min(300px, 100%); }

/* iPhone-style frame (frame ratios measured from the supplied mockup) */
.phone {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 349 / 709;
  transition: transform var(--motion);
}
.phone:hover { transform: translateY(-5px); }
.phone__screen {
  position: absolute;
  left: 5.73%;
  top: 2.26%;
  width: 88.83%;
  height: 95.35%;
  overflow: hidden;
  border-radius: 12%;
  background: #fff;
}
.phone__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.phone__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* ---------- 艺术创作 图库 ---------- */
.art-mod { margin-top: 2.6rem; }
.art-mod__title,
.acc-mod__title {
  font-family: var(--font-serif-cn);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--green-deep);
  letter-spacing: 0.06em;
  margin-bottom: 1.2rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--cream-deep);
}
.art-mod__title .serif-en,
.acc-mod__title .serif-en { font-size: 1rem; color: var(--ink-mute); margin-left: 0.5rem; }

/* 艺术创作 · 整行大图：横幅铺满整行，竖图自动缩到一屏内居中 */
.art-grid { display: block; }
.art-item {
  margin: 0 0 clamp(2rem, 5vw, 3.4rem);
  text-align: center;
}
.art-item img {
  display: block;
  margin: 0 auto;
  width: auto;              /* 不放大低分辨率源 */
  max-width: 100%;          /* 横幅铺满整行 */
  max-height: 58vh;         /* 单张图高度上限：88vh 会让一张图占满整屏，必须缩浏览器才看得下 */
  height: auto;             /* 永不拉伸、永不裁切 */
  border: 1px solid var(--paper-beige);
  background: var(--cream-bg);
}
.art-item figcaption {
  font-size: 0.78rem;
  color: var(--ink-mute);
  margin-top: 0.7rem;
  line-height: 1.5;
}

/* 并排对（书法 / 素描）：两张同排同尺寸，作为「一页」呈现
   核心：用 aspect-ratio + object-fit:cover 让两张图同宽同高，
   多余的画布被裁掉。默认 3:4 竖版；--tall 2:5 给窄长书法用；
   --landscape 4:3 给横图用。max-width 防止宽屏被拉得过高。 */
.art-pair {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin: 0 auto clamp(2rem, 5vw, 3.4rem);
  max-width: 960px;
}
.art-pair .art-item {
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
  max-width: 440px;
  text-align: center;
}
.art-pair .art-item img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;       /* 默认竖版，与素描原图比例接近 */
  object-fit: cover;
  max-height: none;
  height: auto;
  border: 1px solid var(--paper-beige);
  background: var(--cream-bg);
}
.art-pair--tall .art-item img {
  aspect-ratio: 2 / 5;        /* 窄长竖版，给书法卷轴用 */
}
.art-pair--landscape .art-item img {
  aspect-ratio: 4 / 3;        /* 横版，给手绘/数字绘画用 */
}

/* ---------- 账号运营 图库 · 两列并排大图 ---------- */
.acc-mod { margin-top: 3rem; }
.acc-group { margin-bottom: 1.6rem; }
.acc-group__label {
  font-size: 1.15rem;        /* 0.72rem → 1.15rem：约 +60%，≈ 小五→四号 三级 */
  letter-spacing: 0.1em;
  color: var(--red-accent);
  margin-bottom: 0.85rem;
}
.acc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 2.2vw, 1.6rem);
  align-items: start;
}
.acc-grid img {
  display: block;
  width: 100%;
  height: auto;             /* 不裁切、不变形 */
  border: 1px solid var(--paper-beige);
  background: var(--cream-bg);
}
/* 只有一张的组（基金/考研主页、漫画合集）：跨两列居中放大 */
.acc-grid > img:only-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: auto;
  max-width: min(100%, 760px);
  max-height: 66vh;
  margin: 0 auto;
}
@media (max-width: 640px) { .acc-grid { grid-template-columns: 1fr; } }

/* ============================================================
   图库方向性滑入 · art / account galleries
   ------------------------------------------------------------
   · 渐进增强：隐藏态只在 html.js 下生效（各页 <head> 内联脚本添加），
     无 JS 时图片始终可见。
   · 只对叶子元素施加 transform：.art-item（figure，图注随图一起动）
     与 .acc-grid img —— 二者都不是 .pin-head 的祖先，
     position:sticky 不会被破坏（参见 main.css 中 .reveal--fade 注释）。
   · 方向为纯 CSS nth-child 奇偶交替，JS 不参与。
   ============================================================ */
.js .art-item,
.js .acc-grid img {
  transition:
    opacity .8s cubic-bezier(.2, .7, .2, 1),
    transform .8s cubic-bezier(.2, .7, .2, 1);
}

/* 奇数项从左、偶数项从右 */
.art-grid .art-item:nth-child(odd),
.acc-grid img:nth-child(odd)  { --slide-x: calc(-1 * clamp(2.25rem, 5vw, 3.5rem)); }
.art-grid .art-item:nth-child(even),
.acc-grid img:nth-child(even) { --slide-x: clamp(2.25rem, 5vw, 3.5rem); }

.js .art-item:not(.in),
.js .acc-grid img:not(.in) { opacity: 0; transform: translate3d(var(--slide-x, 3rem), 0, 0); }
.js .art-item.in,
.js .acc-grid img.in { opacity: 1; transform: translate3d(0, 0, 0); }

/* 轻错峰：同批入场形成细微波浪；不需要可整段删除 */
.art-grid .art-item:nth-child(3), .art-grid .art-item:nth-child(4),
.acc-grid img:nth-child(3), .acc-grid img:nth-child(4) { transition-delay: .07s; }
.art-grid .art-item:nth-child(5), .art-grid .art-item:nth-child(6),
.acc-grid img:nth-child(5), .acc-grid img:nth-child(6) { transition-delay: .14s; }
.art-grid .art-item:nth-child(7), .art-grid .art-item:nth-child(8),
.acc-grid img:nth-child(7), .acc-grid img:nth-child(8) { transition-delay: .21s; }

@media (prefers-reduced-motion: reduce) {
  .js .art-item,
  .js .acc-grid img { transition: none; }
  .js .art-item:not(.in),
  .js .acc-grid img:not(.in) { opacity: 1; transform: none; }
}

/* 入场滑入的横向位移不溢出容器：避免小屏（尤其 iOS）出现横向滚动 */
.art-grid,
.acc-grid { overflow-x: clip; }

/* ============================================================
   账号运营 · 策划思路升级（起号方法论 / 数据条 / 编辑笔记 / 转化链路）
   ============================================================ */

/* ---------- 起号四步法 ---------- */
.acc-method {
  margin: 2.2rem 0 0.6rem;
  padding: 1.5rem 1.6rem 1.3rem;
  background: var(--cream-warm);
  border: 1px solid var(--paper-beige);
  box-shadow: 3px 3px 0 rgba(74, 93, 58, 0.12);
}
.acc-method__label {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--red-accent);
  margin-bottom: 1rem;
}
.acc-method__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.3rem;
  counter-reset: step;
}
.acc-method__steps .mono { font-size: 0.68rem; letter-spacing: 0.16em; }
.acc-method__steps h4 {
  font-size: 1.05rem;
  color: var(--green-deep);
  margin: 0.25rem 0 0.35rem;
  letter-spacing: 0.05em;
}
.acc-method__steps p {
  font-size: 0.8rem;
  line-height: 1.75;
  color: var(--ink-soft);
}
@media (max-width: 900px) { .acc-method__steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .acc-method__steps { grid-template-columns: 1fr; } }

/* ---------- 账号标识行 + 数据条 ---------- */
.acc-mod__id {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  margin: -0.7rem 0 0.9rem;
}
.acc-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.8rem;
  align-items: baseline;
  margin-bottom: 1.5rem;
  padding: 0.85rem 1.1rem;
  background: var(--cream-warm);
  border: 1px solid var(--cream-deep);
}
.acc-metrics li { font-size: 0.78rem; color: var(--ink-mute); letter-spacing: 0.04em; }
.acc-metrics .mono { font-size: 1.05rem; margin-right: 0.4rem; color: var(--red-accent); }

/* ---------- 起号思路 / 单篇策划 两栏笔记 ---------- */
.acc-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  margin-bottom: 1.8rem;
}
.acc-note {
  border-top: 2px solid var(--green-vintage);
  padding-top: 0.85rem;
}
.acc-note__label {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--red-accent);
  margin-bottom: 0.7rem;
}
.acc-note__list li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.85rem;
  line-height: 1.8;
  margin-bottom: 0.55rem;
  color: var(--ink-soft);
}
.acc-note__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  background: var(--red-accent);
}
.acc-note__list b { color: var(--green-deep); font-weight: 500; }
.acc-note__data {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}
/* 单篇策划：mono 序号代替圆点 */
.acc-note__list--cases { counter-reset: case; }
.acc-note__list--cases li { padding-left: 1.8rem; }
.acc-note__list--cases li::before {
  content: counter(case, decimal-leading-zero);
  counter-increment: case;
  display: block;
  width: auto;
  height: auto;
  left: 0;
  top: 0.1em;
  background: none;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--red-accent);
  letter-spacing: 0.08em;
}
@media (max-width: 760px) { .acc-notes { grid-template-columns: 1fr; } }

/* ---------- 转化链路 + 完整复盘 PDF（深绿收束块） ---------- */
.acc-conv {
  margin-top: 2.8rem;
  padding: 1.6rem 1.7rem 1.5rem;
  background: var(--green-deep);
  color: var(--cream-bg);
  box-shadow: 4px 4px 0 rgba(31, 40, 32, 0.35);
}
.acc-conv .acc-note__label { color: var(--paper-amber); margin-bottom: 0.9rem; }
.acc-conv__flow {
  font-family: var(--font-serif-cn);
  font-size: clamp(1rem, 2vw, 1.2rem);
  letter-spacing: 0.05em;
  margin-bottom: 1.1rem;
}
.acc-conv .acc-metrics {
  background: rgba(244, 239, 228, 0.08);
  border-color: rgba(197, 174, 140, 0.3);
  margin-bottom: 1.1rem;
}
.acc-conv .acc-metrics li,
.acc-conv .acc-metrics .mono { color: var(--cream-bg); }
.acc-conv .acc-metrics .mono { color: var(--paper-amber); }
.acc-conv__sum {
  font-size: 0.82rem;
  line-height: 1.85;
  color: rgba(244, 239, 228, 0.85);
  margin-bottom: 0.9rem;
}
.acc-conv__guide {
  font-size: 0.78rem;
  line-height: 1.8;
  letter-spacing: 0.03em;
  color: var(--paper-amber);
  margin-bottom: 1.1rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--paper-amber);
}
.acc-pdf {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1.5rem;
  background: var(--red-accent);
  color: var(--cream-bg);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  box-shadow: 2px 2px 0 rgba(31, 40, 32, 0.5);
  transition: background var(--motion), transform var(--motion);
}
.acc-pdf .mono { font-size: 0.75rem; letter-spacing: 0.14em; }
.acc-pdf:hover { background: var(--red-darker); transform: translate(-1px, -1px); }