/* ============================================================
   weeeeeeishang · pages.css
   内容页 · about / projects / contact
   ------------------------------------------------------------
   接在 archive.css 之后加载，共用同一套纸墨令牌。
   索引页（图集）不加载本文件。

   版式规则：
   - 每个版块的构图与邻居不同，不用卡片阵列
   - 版块之间用整块色场或间距分隔，不用细线
   - 五档字号：display / title / lead / body / small
   ============================================================ */

/* ------------------------------------------------------------
   0. 顶栏
   ------------------------------------------------------------ */

.topbar{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(16px,2.4vw,26px) var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.topbar__mark{
  color:var(--tx);
  text-decoration:none;
  font-size:var(--t-lead);
  font-weight:600;
  letter-spacing:.02em;
  transition:color .3s var(--ease);
}
.topbar__mark:hover{ color:var(--indigo); }

.topnav{ display:flex; align-items:center; gap:clamp(14px,2.4vw,32px); }
.topnav a{
  font-size:var(--t-body);
  color:var(--tx-2);
  text-decoration:none;
  padding:4px 0;
  transition:color .3s var(--ease);
}
.topnav a:hover{ color:var(--tx); }
.topnav a[aria-current="page"]{ color:var(--indigo); }

/* ------------------------------------------------------------
   1. 扉页
   ------------------------------------------------------------ */

.hero{
  padding:clamp(24px,3.4vw,52px) var(--pad) clamp(44px,6.4vw,88px);
}
.hero__in{ max-width:var(--maxw); margin:0 auto; }

.hero__top{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(18px,4vw,64px);
  align-items:end;
}
.hero__h{
  font-size:var(--t-display);
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.03em;
  color:var(--tx);
}
.hero__note{
  font-size:var(--t-body);
  line-height:1.72;
  color:var(--tx-2);
  max-width:40ch;
  padding-bottom:6px;
}

.hero__acts{
  margin-top:clamp(24px,3.2vw,40px);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 16px;
}

/* 作品页的扉页：左边标题和导语，右边是本页目录 */
.hero__top--toc{ align-items:start; }
.hero__lead .hero__note{ max-width:46ch; padding-bottom:0; }
.toc{
  display:grid;
  gap:clamp(18px,2.6vw,34px);
}
.toc a{
  display:grid;
  grid-template-columns:9px minmax(0,1fr);
  gap:14px;
  grid-template-rows:auto auto;
  text-decoration:none;
  color:inherit;
  transition:transform .35s var(--ease);
}
.toc a::before{
  content:"";
  grid-column:1;
  grid-row:1 / span 2;
  width:9px; height:9px;
  margin-top:8px;
  background:var(--indigo);
  transition:background-color .35s var(--ease), transform .35s var(--ease);
}
.toc a:hover{ transform:translateX(4px); }
.toc a:hover::before{ background:var(--seal); transform:rotate(45deg); }
.toc__t{
  grid-column:2;
  grid-row:1;
  display:block;
  font-size:var(--t-lead);
  font-weight:500;
  line-height:1.3;
  color:var(--tx);
  transition:color .3s var(--ease);
}
.toc a:hover .toc__t{ color:var(--indigo); }
.toc__d{
  grid-column:2;
  grid-row:2;
  display:block;
  margin-top:4px;
  font-size:var(--t-small);
  line-height:1.6;
  color:var(--tx-3);
}

/* 事实行：像节目单上的时间行，只用空格分开 */
.facts{
  margin-top:clamp(28px,4.4vw,60px);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2.6vw,44px);
}
.fact__v{
  font-size:var(--t-lead);
  font-weight:500;
  line-height:1.24;
  color:var(--tx);
}
.fact__k{
  margin-top:7px;
  font-size:var(--t-small);
  line-height:1.6;
  color:var(--tx-3);
}
.facts--contact{ margin-top:clamp(26px,4vw,52px); }

.hero__stamp{
  margin-top:18px;
  font-size:var(--t-small);
  line-height:1.6;
  color:var(--tx-3);
}

/* ------------------------------------------------------------
   2. 版块
   ------------------------------------------------------------ */

.sec{ padding:clamp(44px,6.4vw,96px) var(--pad); }
.sec--paper2{ background:var(--paper-2); }
.sec--ink{
  background:var(--ink);
  color:var(--on-ink);
}
.sec__in{ max-width:var(--maxw); margin:0 auto; }

.sec__h{
  font-size:var(--t-title);
  font-weight:600;
  line-height:1.14;
  letter-spacing:-.018em;
  color:var(--tx);
  margin-bottom:clamp(10px,1.6vw,16px);
}
.sec--ink .sec__h{ color:var(--on-ink); }

.sec__note{
  font-size:var(--t-small);
  line-height:1.7;
  color:var(--tx-3);
  max-width:56ch;
  margin-bottom:clamp(22px,3.2vw,42px);
}
.sec--ink .sec__note{ color:var(--on-ink-3); }

/* 标签 */
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:16px;
}
.sec--ink .tag{ background:rgba(229,223,209,.14); color:var(--on-ink-2); }

/* ------------------------------------------------------------
   3. 履历：两栏账目
   ------------------------------------------------------------ */

.ledger{ display:grid; gap:clamp(30px,4vw,54px); }
.ledger__i{
  display:grid;
  grid-template-columns:minmax(0,190px) minmax(0,1fr);
  gap:clamp(12px,2.4vw,40px);
}
.ledger__when{
  font-size:var(--t-small);
  line-height:1.5;
  color:var(--tx-2);
  font-variant-numeric:tabular-nums;
}
.ledger__where{
  margin-top:4px;
  font-size:var(--t-small);
  color:var(--tx-3);
}
.ledger__org{
  font-size:var(--t-lead);
  font-weight:600;
  line-height:1.26;
  color:var(--tx);
}
.ledger__role{
  margin-top:6px;
  font-size:var(--t-small);
  color:var(--tx-3);
}
.ledger__list{
  margin:14px 0 0;
  display:grid;
  gap:8px;
}
.ledger__list li{
  position:relative;
  padding-left:15px;
  font-size:var(--t-body);
  line-height:1.68;
  color:var(--tx-2);
  max-width:58ch;
}
.ledger__list li::before{
  content:"";
  position:absolute;
  left:0; top:.72em;
  width:7px; height:2px;
  background:var(--indigo);
}
.ledger__list strong{ color:var(--tx); font-weight:600; }

/* ------------------------------------------------------------
   4. 手边的作品：图片加标签纸
   ------------------------------------------------------------ */

.tiles{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.6vw,20px);
}
.tile{ margin:0; display:flex; flex-direction:column; }
.tile img{
  width:100%;
  aspect-ratio:4 / 5;
  object-fit:cover;
  filter:saturate(.97);
}
.tile__strip{
  padding:12px 14px 14px;
  display:flex;
  flex-direction:column;
  gap:4px;
  background:var(--paper-2);
}
.tile__t{ font-size:var(--t-small); font-weight:600; line-height:1.4; color:var(--tx); }
.tile__k{ font-size:var(--t-small); line-height:1.5; color:var(--tx-2); }
.tile__d{ font-size:var(--t-small); line-height:1.5; color:var(--tx-3); }

.tile--dark .tile__strip{ background:var(--ink); }
.tile--dark .tile__t{ color:var(--on-ink); }
.tile--dark .tile__k{ color:var(--on-ink-2); }
.tile--dark .tile__d{ color:var(--on-ink-3); }
.tile--mid .tile__strip{ background:var(--paper-3); }

/* ------------------------------------------------------------
   5. 一封信：纸上的信，底下是可撕的回执
   ------------------------------------------------------------ */

.letter{ max-width:700px; margin:0 auto; }
.letter__sheet{
  background-color:var(--paper);
  background-image:url("../assets/paper-grain.webp");
  background-size:340px 340px;
  background-blend-mode:soft-light;
  color:var(--tx);
  padding:clamp(28px,4.4vw,60px);
  border-bottom:5px dotted var(--ink);
}
.letter__p{
  font-size:var(--t-body);
  line-height:1.82;
  color:var(--tx-2);
  max-width:34ch;
}
.letter__p + .letter__p{ margin-top:16px; }
.letter__sign{
  margin-top:clamp(22px,3vw,34px);
  font-size:var(--t-lead);
  font-weight:600;
  color:var(--tx);
}
.letter__role{
  margin-top:4px;
  font-size:var(--t-small);
  color:var(--tx-3);
}
.letter__stub{
  min-height:72px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px 22px;
  padding:0 clamp(18px,3vw,40px);
  background:var(--paper-2);
  color:var(--tx-2);
  font-size:var(--t-small);
}

/* ------------------------------------------------------------
   6. 三个站点：会叠起来的文件夹
   ------------------------------------------------------------ */

.stack{ max-width:var(--maxw); margin:0 auto; }

.band{
  position:sticky;
  top:calc(var(--i) * 56px);
  min-height:74svh;
}
.band--1{ --i:0; background:var(--paper-2); }
.band--2{ --i:1; background:var(--paper-3); }
.band--3{ --i:2; background:var(--paper-4); }

.band__strip{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}
.band__tab{
  display:inline-flex;
  align-items:center;
  height:46px;
  padding:0 36px 0 22px;
  background:var(--indigo);
  color:var(--paper);
  font-size:clamp(19px,2vw,26px);
  font-weight:600;
  letter-spacing:-.012em;
  clip-path:polygon(0 0, 100% 0, calc(100% - 24px) 100%, 0 100%);
}
.band__kind{
  align-self:center;
  font-size:var(--t-small);
  color:var(--tx-2);
  white-space:nowrap;
}
.band__body{
  display:grid;
  grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);
  gap:clamp(16px,2.6vw,42px);
  padding:16px 0 clamp(24px,3.2vw,40px);
}
.band__shot{
  display:block;
  background:var(--ink-2);
  overflow:hidden;
}
.band__shot img{
  width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
  filter:brightness(.94) saturate(.98);
  transition:transform 1.1s var(--ease), filter 1.1s var(--ease);
}
.band__shot:hover img{ transform:scale(1.025); filter:brightness(1) saturate(1); }
.band__list{ display:grid; gap:9px; }
.band__list li{
  position:relative;
  padding-left:15px;
  font-size:var(--t-body);
  line-height:1.68;
  color:var(--tx-2);
}
.band__list li::before{
  content:"";
  position:absolute;
  left:0; top:.72em;
  width:7px; height:2px;
  background:var(--indigo);
}
.band__list strong{ color:var(--tx); font-weight:600; }
.band__text .btn{ margin-top:18px; }

/* ------------------------------------------------------------
   7. 案头：可以翻的平面作品
   ------------------------------------------------------------ */

.proof__i{
  margin:0 0 clamp(26px,3.4vw,46px);
  display:grid;
  grid-template-columns:minmax(0,1.24fr) minmax(0,1fr);
  gap:clamp(18px,3vw,48px);
  align-items:start;
}
.proof__sheet img{
  width:100%;
  height:auto;
  background:var(--paper-3);
}
.proof__t{
  font-size:var(--t-title);
  font-weight:600;
  line-height:1.16;
  color:var(--on-ink);
}
.proof__k{
  margin-top:8px;
  font-size:var(--t-small);
  color:var(--indigo-ink);
}
.proof__d{
  margin-top:14px;
  font-size:var(--t-body);
  line-height:1.72;
  color:var(--on-ink-2);
}
.proof__list{
  margin-top:14px;
  display:grid;
  gap:8px;
}
.proof__list li{
  position:relative;
  padding-left:15px;
  font-size:var(--t-small);
  line-height:1.72;
  color:var(--on-ink-3);
}
.proof__list li::before{
  content:"";
  position:absolute;
  left:0; top:.7em;
  width:7px; height:2px;
  background:var(--indigo-ink);
}

.proof__ctrl{ display:none; }
.js .proof__ctrl{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-top:clamp(12px,1.8vw,20px);
}
.js .proof__i{ display:none; }
.js .proof__i.is-on{ display:grid; }

.proof__tabs{ display:flex; gap:10px; }
.proof__tab{
  width:clamp(62px,7.6vw,100px);
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
}
.proof__tab img{
  width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
  opacity:.5;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.proof__tab:hover img{ opacity:.82; }
.proof__tab.is-on img{ opacity:1; transform:scale(1.03); }

.proof__btn{
  width:48px; height:48px;
  flex:0 0 auto;
  background:var(--ink-3);
  border:0;
  color:var(--on-ink);
  font-size:18px;
  line-height:1;
  cursor:pointer;
  transition:background-color .3s var(--ease);
}
.proof__btn:hover{ background:var(--indigo); }

/* ------------------------------------------------------------
   8. 回执券
   ------------------------------------------------------------ */

.coupon{
  position:relative;
  max-width:1080px;
  margin:0 auto;
  display:grid;
  grid-template-columns:46% 54%;
  background:var(--indigo);
  color:var(--paper);
}
.coupon__notch{
  position:absolute;
  left:46%;
  width:28px; height:28px;
  border-radius:50%;
  background:var(--paper);
  transform:translateX(-50%);
}
.coupon__notch--top{ top:-14px; }
.coupon__notch--bot{ bottom:-14px; }

.coupon__left{
  padding:clamp(26px,3.4vw,48px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:24px;
}
.coupon__h{
  font-size:var(--t-title);
  font-weight:600;
  line-height:1.16;
  color:var(--paper);
}
.coupon__d{
  font-size:var(--t-small);
  line-height:1.72;
  color:rgba(229,223,209,.88);
  max-width:32ch;
}
.coupon__right{
  padding:clamp(26px,3.4vw,48px);
  background:rgba(255,255,255,.12);
  border-left:5px dotted var(--paper);
}
.coupon__alt{
  margin-top:14px;
  font-size:var(--t-small);
  line-height:1.6;
  color:rgba(229,223,209,.80);
}
.coupon__alt a{ color:var(--paper); }

.cform{ display:grid; gap:10px; }
.cform__row{ margin:0; }
.cform input,
.cform textarea{
  width:100%;
  border:0;
  border-radius:0;
  background:rgba(255,255,255,.16);
  color:var(--paper);
  font-family:inherit;
  font-size:var(--t-body);
  line-height:1.5;
  padding:13px 16px;
}
.cform input{ min-height:52px; }
.cform textarea{ min-height:76px; resize:vertical; }
.cform input::placeholder,
.cform textarea::placeholder{ color:rgba(229,223,209,.62); }
.cform input:focus,
.cform textarea:focus{ background:rgba(255,255,255,.26); }
.cform__go{
  min-height:56px;
  border:0;
  border-radius:0;
  background:var(--ink);
  color:var(--paper);
  font-family:inherit;
  font-size:var(--t-body);
  font-weight:500;
  cursor:pointer;
  transition:background-color .3s var(--ease);
}
.cform__go:hover{ background:var(--seal); }

/* ------------------------------------------------------------
   9. 链接表与说明
   ------------------------------------------------------------ */

.clinks{ display:grid; }
.clinks a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:clamp(14px,2vh,20px) 14px;
  margin-left:-14px;
  text-decoration:none;
  color:inherit;
  transition:background-color .35s var(--ease);
}
.clinks a:hover{ background:var(--paper-2); }
.clink__v{ font-size:var(--t-lead); color:var(--tx); }
.clink__v em{
  display:block;
  margin-top:4px;
  font-style:normal;
  font-size:var(--t-small);
  color:var(--tx-3);
}
.clink__go{ font-size:var(--t-lead); color:var(--indigo); transition:transform .35s var(--ease); }
.clinks a:hover .clink__go{ transform:translate(3px,-2px); }

.alist{ display:grid; gap:clamp(14px,2vh,22px); }
.alist__t{ font-size:var(--t-lead); color:var(--tx); }
.alist__s{
  margin-top:6px;
  font-size:var(--t-small);
  line-height:1.68;
  color:var(--tx-2);
  max-width:62ch;
}

/* ------------------------------------------------------------
   10. 入场动效
   ------------------------------------------------------------
   只有在 JS 正常运行时才会出现：脚本先给 html 加 .js，
   再给每个版块的标题、文字、图片标上 data-rise。
   脚本挂了，内容照样全部显示。
   ------------------------------------------------------------ */

.js [data-rise]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.js [data-rise].is-in{
  opacity:1;
  transform:none;
}

/* ------------------------------------------------------------
   11. 响应式
   ------------------------------------------------------------ */

@media (max-width: 1000px){
  .hero__top{ grid-template-columns:minmax(0,1fr); gap:18px; }
  .hero__note{ max-width:52ch; padding-bottom:0; }
  .facts{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,3vw,28px); }
  .tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .band__body{ grid-template-columns:minmax(0,1fr); }
  .proof__i{ grid-template-columns:minmax(0,1fr); }
  .coupon{ grid-template-columns:minmax(0,1fr); }
  .coupon__right{ border-left:0; border-top:5px dotted var(--paper); }
  .coupon__notch{ left:50%; }
}

@media (max-width: 760px){
  .ledger__i{ grid-template-columns:minmax(0,1fr); gap:8px; }
  .band{ min-height:auto; padding-top:52px; position:static; }
  .band__strip{ flex-direction:column; align-items:flex-start; gap:6px; }
  .band__kind{ align-self:flex-start; }
  .coupon__notch{ display:none; }
  .letter__stub{ flex-direction:column; align-items:flex-start; justify-content:center; padding:14px 18px; }
  .tile img{ aspect-ratio:1 / 1; }
}

@media (max-width: 480px){
  .tiles{ grid-template-columns:minmax(0,1fr); }
  .proof__tabs{ gap:6px; }
  .proof__tab{ width:54px; }
}

@media (prefers-reduced-motion: reduce){
  .topnav a,
  .topbar__mark,
  .clinks a,
  .clink__go,
  .proof__tab img,
  .proof__btn,
  .cform__go,
  .band__shot img{ transition:none; }
  .js [data-rise]{ opacity:1; transform:none; }
}