/* ============================================================
   刘浩志 作品集 — 1-bit Macintosh × 纸
   像素字体：Fusion Pixel (OFL) · 单色系统 · 暖纸底
   西文正文：New York Large Semibold · 西文标题：Silom
   中文正文：Noto Serif SC（衬线，呼应纸质质感）
   ============================================================ */

@font-face {
  font-family: "Fusion Pixel";
  src: url("../assets/fonts/fusion-pixel.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 西文正文。先试系统已装的（Mac 上字符集更全、也省下载），
   没有再取本地子集包（18KB，只含拉丁字母+标点+常用符号）。
   字重 600 —— 全站正文正好用 600，700/900 的地方浏览器自动加粗。 */
@font-face {
  font-family: "New York Large";
  src: local("New York Large Semibold"),
       local("NewYorkLarge-Semibold"),
       url("../assets/fonts/newyork-large-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* 西文标题 */
@font-face {
  font-family: "Silom";
  src: local("Silom"),
       url("../assets/fonts/silom.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper:     #F2ECDC;
  --paper-dim: #E8E0CC;
  --ink:       #1B1712;
  --ink-soft:  #4C4438;
  --ink-faint: #8A8070;
  --red:       #B23A26;

  /* 拉丁字母一律走 New York（macOS 系统衬线），中文才落到 Noto Serif SC。
     字体栈按字形逐个回退，所以西文永远不会用中文字体里的英文。
     注意 --latin 结尾不能放 serif / ui-serif 这类通用族，否则会拦住后面的中文字体。 */
  --latin: "New York Large", "New York", Georgia, "Times New Roman";
  --px: "Fusion Pixel", "PingFang SC", "Microsoft YaHei", monospace;
  --body-en: var(--latin), serif;
  --body-zh: var(--latin), "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
  --title-en: "Silom", "Fusion Pixel", "SF Mono", "Menlo", monospace;

  --dither50: repeating-conic-gradient(var(--ink) 0% 25%, transparent 0% 50%);
  --gutter: clamp(1rem, 4vw, 3.5rem);

  --section-gap: clamp(6.5rem, 16vh, 12rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:     #17140F;
    --paper-dim: #201C15;
    --ink:       #E9E2CF;
    --ink-soft:  #B5AB94;
    --ink-faint: #6E6555;
    --red:       #D96A50;
  }
}

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

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

/* 锚点跳转时避开吸顶菜单栏 */
#contact { scroll-margin-top: 34px; }

body {
  margin: 0;
  background-color: var(--paper);
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1px);
  background-size: 6px 6px;
  color: var(--ink);
  font-family: var(--body-zh);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.95;
}

body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 90;
  opacity: .05;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency=".9" numOctaves="2"/></filter><rect width="160" height="160" filter="url(%23n)"/></svg>');
}

#sky {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
}

main, footer.desk-foot { position: relative; z-index: 1; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

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

/* --- 双语 ------------------------------------------------ */
:root[data-lang="en"] .zh { display: none !important; }
:root[data-lang="zh"] .en { display: none !important; }

/* ============================================================
   菜单栏
   ============================================================ */
.menubar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: stretch;
  gap: 0;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
  font-family: var(--px);
  font-size: 15px;
  line-height: 1;
  padding: 0 clamp(.4rem, 2vw, 1.2rem);
  user-select: none;
}

.menubar__item {
  display: flex; align-items: center; gap: .5em;
  padding: .62em .85em;
  white-space: nowrap;
  cursor: pointer;
  border: 0; background: none;
  font: inherit; color: inherit;
}
.menubar__item:hover,
.menubar__item[aria-current="page"] { background: var(--ink); color: var(--paper); }
.menubar__item[aria-current="page"] { cursor: default; }

.menubar__logo { padding-left: .6em; }
.menubar__logo svg { display: block; }
.menubar__logo:hover svg .px-fill { fill: var(--paper); }

.menubar__spacer { flex: 1; }

.menubar__clock {
  display: flex; align-items: center;
  padding: 0 .8em;
  font-size: 15px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* 品牌位后面的「作品集 / Portfolio」——点明这是什么站 */
.menubar__suffix {
  margin-left: .55em;
  color: var(--ink-faint);
  font-weight: 400;
  letter-spacing: .04em;
}
.menubar__item:hover .menubar__suffix { color: inherit; }

@media (max-width: 600px) {
  .menubar { font-size: 13px; }
  .menubar__clock { display: none; }
}

/* 英文模式：顶部 tab 用 Silom */
:root[data-lang="en"] .menubar__item,
:root[data-lang="en"] .menubar__clock { font-family: var(--title-en); }

/* 英文标题统一用 Silom（中文标题保持像素字体） */
.hero__line .en,
.card__title .en,
.case__title .en,
.rule-head h2 .en,
.cv h3 .en,
.about-mac__body h2 .en,
.pxcover__big .en,
.pxcover__small .en,
:root[data-lang="en"] .win__title,
:root[data-lang="en"] .stamp,
:root[data-lang="en"] .card__tags,
:root[data-lang="en"] .list__tag { font-family: var(--title-en); }

/* ============================================================
   窗口（全站核心组件）
   ============================================================ */
.win {
  display: block;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--ink) 82%, transparent);
}

.win__bar {
  position: relative;
  display: flex; align-items: center;
  height: 26px;
  padding: 0 8px;
  border-bottom: 2px solid var(--ink);
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 3px,
    var(--ink) 3px 4px,
    transparent 4px 7px
  );
  background-size: 100% 22px;
  background-position: 0 2px;
  background-repeat: no-repeat;
  font-family: var(--px);
}

.win__close {
  width: 13px; height: 13px;
  border: 2px solid var(--ink);
  background: var(--paper);
  flex: none;
}

.win__title {
  margin: 0 auto;
  padding: 0 10px;
  background: var(--paper);
  font-size: 14px;
  letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 78%;
  font-family: var(--px);
}

a.win { transition: box-shadow .12s steps(2, end), translate .12s steps(2, end); }
a.win:hover {
  translate: -2px -2px;
  box-shadow: 10px 10px 0 color-mix(in srgb, var(--ink) 82%, transparent);
}
a.win:hover .win__bar { background: var(--ink); }
a.win:hover .win__title { background: var(--ink); color: var(--paper); }
a.win:hover .win__close { background: var(--paper); }

.win__body { padding: clamp(1.3rem, 3vw, 2.3rem); }

.win__media {
  position: relative;
  border-bottom: 2px solid var(--ink);
  overflow: hidden;
  aspect-ratio: 1024 / 672;
  background: var(--paper-dim);
}
.win__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.12) brightness(1.04);
  transition: filter .25s steps(4, end);
}
.win__media::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--ink) 27%, transparent 28%);
  background-size: 3px 3px;
  opacity: .28;
  mix-blend-mode: multiply;
  transition: opacity .25s steps(4, end);
}
a.win:hover .win__media img { filter: none; }
a.win:hover .win__media::after { opacity: 0; }

@media (prefers-color-scheme: dark) {
  .win__media::after { mix-blend-mode: normal; opacity: .35; }
}

/* ============================================================
   桌面布局 — 大量留白
   ============================================================ */
.desk {
  padding: clamp(1.6rem, 4vh, 3rem) var(--gutter) clamp(3rem, 8vh, 5rem);
  max-width: 78rem;
  margin-inline: auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
}
@media (max-width: 780px) { .grid { grid-template-columns: 1fr; } }
.span2 { grid-column: 1 / -1; }
.span2 .win__media { aspect-ratio: 21 / 10; }
@media (max-width: 780px) { .span2 .win__media { aspect-ratio: 1024 / 672; } }

/* ============================================================
   Hero 窗口 — 近满屏
   ============================================================ */
.hero-win {
  margin-bottom: var(--section-gap);
  min-height: calc(100vh - 32px - var(--section-gap));
  display: flex;
  flex-direction: column;
}
.hero-win .win__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 6vw, 5rem) clamp(2rem, 6vw, 5rem);
}

/* Hero 双栏：文字 + 像素头像（填补右侧留白） */
.hero__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 6vw, 6rem);
  /* start 而非 center：英文标题换行时头像不跟着往下掉 */
  align-items: start;
}
.hero__text { container-type: inline-size; }
.hero__avatar {
  position: relative;
  width: clamp(150px, 20vw, 250px);
  /* 与标题首行对齐（kicker 高度 + 其下 margin） */
  margin-top: clamp(1rem, 4vh, 3rem);
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}
.hero__avatar svg { width: 100%; height: auto; display: block; }
.hero__avatar:hover { animation: avatar-bob .5s steps(2, end) infinite; }
@keyframes avatar-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}
.avatar-bubble {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  translate: -50%;
  padding: .5em .9em;
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--ink) 82%, transparent);
  font-family: var(--px);
  font-size: 14px;
  line-height: 1.6;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s steps(2, end);
}
.avatar-bubble::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  translate: -50%;
  border: 6px solid transparent;
  border-top-color: var(--ink);
}
.avatar-bubble.is-on { opacity: 1; }
@media (max-width: 780px) {
  .hero__cols { grid-template-columns: 1fr; }
  .hero__avatar { width: 140px; order: -1; margin-bottom: .5rem; }
  /* 收窄内边距，给标题留出一行的宽度 */
  .hero-win .win__body { padding: clamp(1.6rem, 5vw, 2.4rem) 1.4rem; }
}

.hero__kicker {
  margin: 0 0 1.8em;
  font-family: var(--px);
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--red);
  text-transform: uppercase;
}

.hero__line {
  margin: 0;
  font-family: var(--px);
  /* 回退：按视口估算文字栏宽度 */
  font-size: clamp(24px, 3.6vw, 50px);
  /* 按文字栏实际宽度取字号，让中文标题正好占满一行（11 字 + 光标 ≈ 11.9em） */
  font-size: clamp(24px, 7.9cqw, 60px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: .02em;
}
.hero__line .en {
  font-family: var(--title-en);
}

.cursor {
  display: inline-block;
  width: .55em; height: 1.05em;
  background: var(--ink);
  vertical-align: text-bottom;
  margin-left: .12em;
  animation: blink 1.06s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.hero__sub {
  margin: 2.4em 0 0;
  max-width: 54ch;
  color: var(--ink-soft);
  font-size: 16.5px;
  line-height: 2;
}

.hero__meta {
  margin-top: 3em;
  display: flex; flex-wrap: wrap; gap: .5em 2em;
  font-family: var(--px);
  font-size: 13px;
  color: var(--ink-faint);
}

/* ============================================================
   区块标题（像素分隔）— 加大间距
   ============================================================ */
.rule-head {
  display: flex; align-items: baseline; gap: clamp(1rem, 2vw, 1.8rem);
  margin: var(--section-gap) 0 clamp(2.2rem, 4.5vh, 3.6rem);
}
.rule-head h2 {
  margin: 0;
  font-family: var(--px);
  font-size: clamp(23px, 3.3vw, 42px);
  font-weight: 400;
  letter-spacing: .06em;
  white-space: nowrap;
  display: flex; align-items: center; gap: .6em;
}
.rule-head h2 .en {
  font-family: var(--title-en);
  letter-spacing: .06em;
}
.rule-head::after {
  content: "";
  flex: 1; height: 8px;
  background: var(--dither50);
  background-size: 4px 4px;
  opacity: .5;
}
.rule-head .count {
  font-family: var(--px);
  font-size: clamp(16px, 2.2vw, 28px);
  color: var(--ink-faint);
  letter-spacing: .04em;
}

/* ============================================================
   卡片文字
   ============================================================ */
.card__tags {
  display: flex; flex-wrap: wrap; gap: .5em 1.2em;
  margin: 0 0 .7em;
  font-family: var(--px);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

.card__title {
  margin: 0 0 .55em;
  font-family: var(--px);
  font-size: clamp(19px, 2.5vw, 28px);
  font-weight: 400;
  line-height: 1.4;
}
.span2 .card__title { font-size: clamp(21px, 3.4vw, 38px); }
a.win:hover .card__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

.card__desc {
  margin: 0;
  font-size: 15.5px;
  color: var(--ink-soft);
  max-width: 58ch;
  line-height: 1.95;
}
.span2 .card__desc { font-size: 16.5px; max-width: 62ch; }

.card__role {
  margin: 1.4em 0 0;
  font-family: var(--px);
  font-size: 12px;
  color: var(--ink-faint);
}

.stamp {
  display: inline-block;
  padding: .45em 1em;
  border: 2px solid var(--red);
  color: var(--red);
  font-family: var(--px);
  font-size: 13.5px;
  letter-spacing: .1em;
  rotate: -2deg;
  margin: .2em 0;
  background: color-mix(in srgb, var(--red) 6%, transparent);
}

/* ============================================================
   像素文字封面（无图作品）
   ============================================================ */
.pxcover {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-end;
  padding: clamp(1.2rem, 3vw, 2.4rem);
  overflow: hidden;
  font-family: var(--px);
}
.pxcover--dither {
  background:
    linear-gradient(to top, transparent 55%, var(--paper-dim) 56%),
    var(--dither50);
  background-size: 100% 100%, 4px 4px;
}
.pxcover__big {
  font-size: clamp(44px, 8vw, 96px);
  line-height: 1;
  letter-spacing: .01em;
}
.pxcover__small {
  font-size: clamp(14px, 1.8vw, 18px);
  margin-top: .5em;
  color: var(--ink-soft);
}
.pxcover svg { position: absolute; right: 6%; top: 10%; opacity: .9; }

/* ============================================================
   清单（Finder 列表视图）
   ============================================================ */
.finder .win__body { padding: 0; }

.finder__intro {
  padding: clamp(1.3rem, 2.6vw, 1.9rem) clamp(1.3rem, 3vw, 2.3rem);
  border-bottom: 2px solid var(--ink);
  font-size: 15.5px;
  color: var(--ink-soft);
  max-width: none;
  line-height: 1.9;
}

.list { margin: 0; }

a.list__row {
  display: grid;
  grid-template-columns: 26px 6.2rem 1fr auto;
  gap: .9rem;
  align-items: center;
  padding: .95rem clamp(1.3rem, 3vw, 2.3rem);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  font-family: var(--px);
  font-size: 16px;
  line-height: 1.5;
}
a.list__row:last-child { border-bottom: 0; }
a.list__row:hover { background: var(--ink); color: var(--paper); }
a.list__row:hover .px-ico .px-fill { fill: var(--paper); }
a.list__row:hover .list__tag { color: var(--paper); }

.list__date {
  font-size: 12.5px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
a.list__row:hover .list__date { color: var(--paper); }

.list__tag {
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-faint);
  white-space: nowrap;
}
.list__tag--lead { color: var(--red); }

@media (max-width: 640px) {
  a.list__row { grid-template-columns: 26px 1fr auto; }
  .list__date { display: none; }
}

/* ============================================================
   按钮
   ============================================================ */
.btn {
  display: inline-block;
  padding: .55em 1.3em;
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--ink);
  font: inherit;
  font-family: var(--px);
  font-size: 15px;
  letter-spacing: .06em;
  cursor: pointer;
  color: inherit;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:active { translate: 4px 4px; box-shadow: 0 0 0 var(--ink); }

/* ============================================================
   采风物料展示 — 严格按「新闻采风所有物料排布设计」的排布
   行式排布：海报+场册+侧题 → 邀请函内页+易拉宝+工作证 → 勘舆图 → 条幅
   每行随滚动按顺序入场
   ============================================================ */
.collage-section { margin-top: var(--section-gap); }

.collage-intro {
  max-width: 54ch;
  margin-bottom: clamp(2.4rem, 5vh, 3.6rem);
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.9;
}

.collage {
  display: flex;
  flex-direction: column;
  gap: clamp(2.4rem, 5vw, 4.5rem);
  max-width: 1020px;
  margin: 0 auto;
}

.collage__row { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); }

/* 第一行：海报 | 场册封面+邀请函 | 侧边竖排标题 */
.collage__row--head {
  grid-template-columns: minmax(0, 11fr) minmax(0, 7fr) minmax(0, 2.6fr);
  align-items: stretch;
}
.collage__stack {
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  justify-content: space-between;
}
.collage__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}
.collage__side img { width: 100%; height: auto; }
.collage__side-title {
  font-family: var(--px);
  font-size: clamp(15px, 1.8vw, 22px);
  letter-spacing: .3em;
  line-height: 1.9;
  writing-mode: vertical-rl;
  color: var(--ink);
  flex: 1;
}
.collage__side-org {
  font-family: var(--px);
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: .22em;
  writing-mode: vertical-rl;
  color: var(--ink-faint);
}

/* 第二行：邀请函内页 | 易拉宝+工作证 */
.collage__row--spread {
  grid-template-columns: minmax(0, 13fr) minmax(0, 7fr);
  align-items: center;
}
.collage__pair {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: center;
}

/* 三、四行：勘舆图、条幅通栏 */
.collage__row--wide { grid-template-columns: 1fr; }

.collage__credit {
  font-family: var(--px);
  font-size: clamp(12px, 1.4vw, 15px);
  letter-spacing: .2em;
  color: var(--ink-soft);
  writing-mode: vertical-rl;
}

.collage__item {
  position: relative;
  margin: 0;
  cursor: zoom-in;
  filter: drop-shadow(4px 6px 10px rgba(0, 0, 0, .16));
  transition: rotate .18s steps(3, end), scale .18s steps(3, end);
}
.collage__item img { width: 100%; height: auto; display: block; }
.collage__item:hover { rotate: 0deg !important; scale: 1.02; z-index: 5; }

/* 轻微错落 + 慢速漂浮 */
.collage__item--r1 { rotate: -1.6deg; animation: float-a 7s ease-in-out infinite; }
.collage__item--r2 { rotate: 1.4deg;  animation: float-b 8.5s ease-in-out infinite; }
.collage__item--r3 { rotate: -0.8deg; animation: float-c 6s ease-in-out infinite; }
.collage__item--flat { rotate: 0.5deg; animation: float-b 9s ease-in-out infinite; }

@keyframes float-a { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes float-b { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes float-c { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }

/* 行内元素随行入场后错峰淡入 */
.js .collage__row .collage__item,
.js .collage__row .collage__side > *,
.js .collage__row .collage__credit { opacity: 0; translate: 0 14px; }
.js .collage__row.is-in .collage__item,
.js .collage__row.is-in .collage__side > *,
.js .collage__row.is-in .collage__credit {
  opacity: 1;
  translate: 0 0;
  transition: opacity .45s ease, translate .45s ease;
}
.js .collage__row.is-in > *:nth-child(1),
.js .collage__row.is-in .collage__side > *:nth-child(1) { transition-delay: .05s; }
.js .collage__row.is-in > *:nth-child(2),
.js .collage__row.is-in .collage__side > *:nth-child(2) { transition-delay: .18s; }
.js .collage__row.is-in > *:nth-child(3),
.js .collage__row.is-in .collage__side > *:nth-child(3) { transition-delay: .32s; }
.js .collage__row.is-in .collage__stack > *:nth-child(2) { transition-delay: .28s; }
.js .collage__row.is-in .collage__pair > *:nth-child(2) { transition-delay: .3s; }

/* 手机端：单列顺序堆叠 */
@media (max-width: 700px) {
  .collage { gap: 1.8rem; }
  .collage__row--head,
  .collage__row--spread { grid-template-columns: 1fr; }
  .collage__side {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: 100%;
    min-width: 0;
  }
  .collage__side img { width: 56px; }
  .collage__side-title,
  .collage__side-org,
  .collage__credit {
    writing-mode: horizontal-tb;
    letter-spacing: .1em;
    text-align: center;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  /* 「2025「新闻采风」系列物料」在窄屏放不下，按屏宽取字号 */
  .collage__side-title {
    font-size: clamp(12px, 3.6vw, 17px);
    line-height: 1.6;
    flex: none;
  }
  .collage__item { animation: none !important; rotate: 0deg !important; }
}

/* ============================================================
   详情页
   ============================================================ */
.case-head { margin-bottom: var(--section-gap); }
.case-head .win__body { padding: clamp(1.6rem, 5vw, 3rem); }

.case__kicker {
  margin: 0 0 1.2em;
  font-family: var(--px);
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--red);
  text-transform: uppercase;
}

.case__title {
  margin: 0;
  font-family: var(--px);
  font-size: clamp(30px, 5.2vw, 58px);
  font-weight: 400;
  line-height: 1.32;
}
.case__title small {
  display: block;
  font-size: .5em;
  color: var(--ink-soft);
  margin-top: .5em;
}

.case__lede {
  margin: 1.6em 0 0;
  max-width: 60ch;
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 2;
}

.case__stamps { margin-top: 1.6em; display: flex; flex-wrap: wrap; gap: .8em; }

.facts-win { margin-bottom: clamp(1.6rem, 3.5vw, 2.8rem); }
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0;
  margin: 0;
  font-family: var(--px);
}
.facts > div {
  padding: .9rem 1.2rem;
  border-right: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
}
.facts dt {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .35em;
}
.facts dd { margin: 0; font-size: 14.5px; line-height: 1.55; }

.fig-win { margin-bottom: clamp(1.6rem, 3.5vw, 2.8rem); }
.fig-win .win__media { border-bottom: 0; aspect-ratio: auto; }
.fig-win figcaption {
  padding: .7rem 1.2rem;
  border-top: 2px solid var(--ink);
  font-family: var(--px);
  font-size: 13px;
  color: var(--ink-faint);
}
.fig-win figure { margin: 0; }

.prose-win { max-width: 46rem; margin: 0 auto clamp(1.6rem, 3.5vw, 2.8rem); }
.prose-win .win__body { padding: clamp(1.4rem, 4vw, 2.6rem); }

.prose h2 {
  font-family: var(--px);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 400;
  margin: 2.6em 0 .85em;
  padding-bottom: .4em;
  border-bottom: 2px solid var(--ink);
  display: flex; align-items: center; gap: .6em;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 16.5px; font-weight: 400; color: var(--red); margin: 1.8em 0 .5em; }
.prose p { margin: 0 0 1.7em; font-size: 16.5px; line-height: 2.05; }
.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 1.4em; font-size: 16px; }
.prose li { margin-bottom: .5em; }
.prose a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose a:hover { background: var(--ink); color: var(--paper); }

.prose blockquote {
  margin: 1.6em 0;
  padding: 1em 1.2em;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--ink) 25%, transparent);
  font-size: 17px;
}
.prose blockquote p { margin: 0; }

.todo {
  display: block;
  margin: 1.2em 0;
  padding: .9em 1.1em;
  border: 2px dashed var(--red);
  font-family: var(--px);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--red) 5%, transparent);
}
.todo strong {
  display: block;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--red);
  margin-bottom: .35em;
}
.todo code { font-family: inherit; border: 1px solid var(--ink-faint); padding: 0 .3em; font-size: .92em; }

.pager {
  display: flex; justify-content: space-between; gap: 1.5rem;
  max-width: 46rem; margin: 0 auto;
  font-family: var(--px);
  font-size: 14px;
}
.pager a:hover { background: var(--ink); color: var(--paper); }
.pager a { padding: .2em .5em; }

/* ============================================================
   关于页
   ============================================================ */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16rem;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }

.portrait-win .win__body { padding: 0; }
.portrait {
  aspect-ratio: 3 / 4;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 1rem;
  font-family: var(--px);
  font-size: 12.5px;
  color: var(--ink-faint);
  background: var(--dither50);
  background-size: 4px 4px;
  background-blend-mode: normal;
}
.portrait span { background: var(--paper); padding: .8em 1em; border: 2px solid var(--ink); }

/* 像素自画像版本 */
.portrait--avatar {
  aspect-ratio: 1;
  background: none;
  color: var(--ink);
  padding: clamp(1.2rem, 8%, 2rem);
}
.portrait--avatar svg { width: 100%; height: auto; }

.aside-meta {
  margin: 1.2rem 0 0;
  font-family: var(--px);
  font-size: 13px;
  color: var(--ink-faint);
  line-height: 1.8;
}

.cv h3 {
  font-family: var(--px);
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--ink-faint);
  margin: 2.2em 0 .7em;
  display: flex; align-items: center; gap: .8em;
}
.cv h3 .en { font-family: var(--title-en); }
.cv h3::after { content: ""; flex: 1; height: 6px; background: var(--dither50); background-size: 4px 4px; opacity: .4; }
.cv ul { list-style: none; margin: 0; padding: 0; }
.cv li {
  display: grid; grid-template-columns: 7rem 1fr; gap: 1rem;
  padding: .55rem 0;
  font-size: 15px;
  line-height: 1.75;
}
.cv li > span:first-child { font-family: var(--px); font-size: 12.5px; color: var(--ink-faint); padding-top: .25em; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .cv li { grid-template-columns: 1fr; gap: .15rem; } }

/* ============================================================
   页脚
   ============================================================ */
.desk-foot {
  padding: var(--section-gap) var(--gutter) clamp(3rem, 8vh, 5rem);
  max-width: 78rem;
  margin-inline: auto;
}

.foot-win .win__body { padding: clamp(1.6rem, 4vw, 2.6rem); }

.foot-mail {
  font-family: var(--px);
  font-size: clamp(22px, 4vw, 40px);
  line-height: 1.3;
  word-break: break-all;
}
.foot-mail:hover { background: var(--ink); color: var(--paper); }

.foot-links {
  margin-top: 1.8em;
  display: flex; flex-wrap: wrap; gap: 1.5em;
  font-family: var(--px);
  font-size: 14px;
}
.foot-links a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.foot-links a:hover { background: var(--ink); color: var(--paper); }

.foot-fine {
  margin-top: 2.4em;
  font-family: var(--px);
  font-size: 12px;
  color: var(--ink-faint);
}

/* ============================================================
   关于本站对话框
   ============================================================ */
dialog.about-mac {
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 8px 8px 0 color-mix(in srgb, var(--ink) 82%, transparent);
  padding: 0;
  max-width: min(30rem, 92vw);
  font-family: var(--px);
}
dialog.about-mac::backdrop { background: color-mix(in srgb, var(--ink) 30%, transparent); }
.about-mac__body { padding: 1.6rem; font-size: 15px; line-height: 1.9; }
.about-mac__body h2 { margin: 0 0 .8em; font-size: 19px; font-weight: 400; }
.about-mac__row { display: flex; gap: 1em; }
.about-mac__row dt { color: var(--ink-faint); flex: none; width: 6.5em; }
.about-mac__row dd { margin: 0; }
.about-mac__ok { margin-top: 1.4rem; text-align: right; }

/* ============================================================
   灯箱（采风物料点击放大）
   ============================================================ */
dialog.lightbox {
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 8px 8px 0 color-mix(in srgb, var(--ink) 82%, transparent);
  padding: 0;
  max-width: min(64rem, 94vw);
  cursor: zoom-out;
}
dialog.lightbox::backdrop { background: color-mix(in srgb, var(--ink) 42%, transparent); }
dialog.lightbox img {
  display: block;
  max-width: 100%;
  max-height: 82vh;
  width: auto; height: auto;
  margin: 0 auto;
}

/* ============================================================
   桌面选框（Finder 风格）
   ============================================================ */
.marquee-box {
  position: fixed;
  z-index: 40;
  border: 1px dashed var(--ink);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  pointer-events: none;
}

/* ============================================================
   开窗动画（经典 zoom rects）
   ============================================================ */
.js .reveal { opacity: 0; }
.js .reveal.is-in {
  opacity: 1;
  animation: zoomrects .22s steps(4, end);
}
@keyframes zoomrects {
  from { transform: scale(.55); opacity: .3; }
  to   { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; }
  .js .reveal.is-in { animation: none; }
  .js .collage__row .collage__item,
  .js .collage__row .collage__side > *,
  .js .collage__row .collage__credit { opacity: 1; translate: 0 0; }
  .collage__item { animation: none !important; transition: none; }
  .hero__avatar:hover { animation: none; }
  .cursor { animation: none; }
  a.win, .win__media img, .win__media::after { transition: none; }
  #sky { display: none; }
}

.px-ico { image-rendering: pixelated; flex: none; }
.px-ico .px-fill { fill: var(--ink); }
.px-ico .px-red { fill: var(--red); }

/* ============================================================
   Konami 彩蛋：彩色模式
   ============================================================ */
.rainbow-mode .win__bar {
  background: repeating-linear-gradient(
    90deg,
    #E74C3C 0 14.28%,
    #F39C12 14.28% 28.57%,
    #F1C40F 28.57% 42.85%,
    #27AE60 42.85% 57.14%,
    #2980B9 57.14% 71.42%,
    #8E44AD 71.42% 85.71%,
    #E74C3C 85.71% 100%
  ) !important;
}
.rainbow-mode .stamp { animation: rainbow-border 2s linear infinite; }
@keyframes rainbow-border {
  0%, 100% { border-color: #E74C3C; color: #E74C3C; }
  33% { border-color: #27AE60; color: #27AE60; }
  66% { border-color: #2980B9; color: #2980B9; }
}

/* ============================================================
   窄屏收尾修正（放在最后，确保覆盖前面的基础规则）
   ============================================================ */
@media (max-width: 700px) {
  /* 菜单栏挤，先让掉「作品集」后缀（首屏 kicker 里还写着） */
  .menubar__suffix { display: none; }

  /* 区块标题默认 nowrap（让右边点阵线紧贴），窄屏必须放开换行，
     否则英文标题「Infographics · Guangming Online」会顶出屏幕 */
  .rule-head { flex-wrap: wrap; row-gap: .5rem; }
  .rule-head h2 { white-space: normal; flex-wrap: wrap; min-width: 0; }
  .rule-head h2 .zh,
  .rule-head h2 .en { white-space: normal; min-width: 0; }
}

/* ============================================================
   触摸设备：没有 hover，所以把悬停才有的效果换个触发方式
   ============================================================ */
@media (hover: none) {
  /* 封面图：滚到视野中间自动褪掉半调网点、恢复彩色，
     离开视野再变回黑白——等价于桌面端把鼠标移上去 */
  a.win .win__media img { transition: filter .5s ease; }
  a.win .win__media::after { transition: opacity .5s ease; }
  a.win .win__media.is-lit img { filter: none; }
  a.win .win__media.is-lit::after { opacity: 0; }

  /* 点下去要有反馈，替代 hover 的「激活窗口」反色 */
  a.win:active { translate: -2px -2px; }
  a.win:active .win__bar { background: var(--ink); }
  a.win:active .win__title { background: var(--ink); color: var(--paper); }
  a.win:active .win__close { background: var(--paper); }

  a.list__row:active { background: var(--ink); color: var(--paper); }
  a.list__row:active .px-ico .px-fill { fill: var(--paper); }
  a.list__row:active .list__tag,
  a.list__row:active .list__date { color: var(--paper); }

  .btn:active,
  .foot-mail:active,
  .foot-links a:active,
  .prose a:active,
  .pager a:active { background: var(--ink); color: var(--paper); }
}

/* 关掉动效时不做渐变，直接给彩色，别让人一直看黑白 */
@media (hover: none) and (prefers-reduced-motion: reduce) {
  a.win .win__media img { filter: none; transition: none; }
  a.win .win__media::after { opacity: 0; transition: none; }
}