/* ==========================================================
   栗子 LIZI VISUAL · Apple 设计语言
   规范来源:DESIGN.md (apple) — 单一蓝色强调 / 羊皮纸×近黑瓦片节奏
   ========================================================== */

/* 标题字体:本地子集,不再依赖 Google Fonts。
   Noto Serif SC 是可变字体,一份文件覆盖 400–600 字重。
   子集只含站点实际用到的字符(见 tools/localize-fonts.py);
   新增文案若出现未收录的字,会回退到 --font-serif 链里的
   Songti SC / STSong / SimSun,中文衬线体之间观感接近,不会出现方块。
   文案有较大改动后重跑 `python tools/localize-fonts.py` 即可。 */
@font-face {
  font-family: "Noto Serif SC";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/noto-serif-sc-400.woff2") format("woff2");
}

:root {
  /* 颜色 token(DESIGN.md · colors) */
  --primary: #0066cc;
  --primary-focus: #0071e3;
  --primary-on-dark: #2997ff;
  --ink: #1d1d1f;
  --ink-muted-80: #333333;
  --ink-muted-48: #7a7a7a;
  --body-on-dark: #ffffff;
  --body-muted-dark: #cccccc;
  --canvas: #ffffff;
  --parchment: #f5f5f7;
  --pearl: #fafafc;
  --tile-dark-1: #272729;
  --tile-dark-2: #2a2a2c;
  --black: #000000;
  --chip-translucent: rgba(210, 210, 215, 0.64);
  --hairline: #e0e0e0;
  --divider-soft: rgba(0, 0, 0, 0.08);

  /* 字体栈:macOS/iOS 解析为 SF Pro;Windows 落到 Segoe UI + 雅黑 */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  /* 衬线标题(b.ai / Claude 式编辑排版):标题、标语、语录 */
  --font-serif: "Noto Serif SC", Georgia, "Songti SC", "STSong", "SimSun", serif;

  /* 圆角(DESIGN.md · rounded) */
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 18px;
  --r-pill: 9999px;

  /* 间距(DESIGN.md · spacing) */
  --sp-section: 80px;
  --sp-card: 24px;

  --container: 1200px;
  --nav-h: 44px;
}

/* ============ 基础 ============ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.47;
  letter-spacing: -0.374px;
  color: var(--ink);
  background: var(--canvas);
}

img { max-width: 100%; display: block; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; letter-spacing: inherit; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-card);
}

::selection { background: rgba(0, 102, 204, 0.18); }

:focus-visible {
  outline: 2px solid var(--primary-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============ 瓦片节奏:颜色本身就是分隔线 ============ */
.tile { padding: var(--sp-section) 0; }
.tile-parchment { background: var(--parchment); }
.tile-white { background: var(--canvas); }
/* DESIGN.md 的 product-tile-dark(深色瓦片)。当前页面只用羊皮纸/白两种瓦片,
   这里保留实现,方便以后插入深色分隔带时直接用 —— 它不是遗留代码,是可用积木。 */
.tile-dark { background: var(--tile-dark-1); color: var(--body-on-dark); }

.tile-head { max-width: 720px; margin: 0 auto var(--sp-card); text-align: center; }

.tile-title {
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-wrap: balance;
}

.tile-lead {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.47;
  color: var(--ink-muted-80);
}

/* 瓦片小标(如「All Works」):大写字距撑开,压在小标题之上 */
.intro-eyebrow {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted-48);
  margin-bottom: 10px;
}

/* ============ 全局导航(纯黑 44px,毛玻璃) ============ */
.global-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(0, 0, 0, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: background 0.3s ease;
}

.global-nav.scrolled {
  background: rgba(0, 0, 0, 0.92);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

.nav-inner {
  max-width: var(--container);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--sp-card);
  display: flex;
  align-items: center;
  gap: var(--sp-card);
}

.nav-logo {
  display: flex;
  align-items: baseline;
  gap: 6px;
  text-decoration: none;
  color: var(--body-on-dark);
}

.nav-logo-cn {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.nav-logo-en {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--body-muted-dark);
}

.nav-links {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex: 1;
}

.nav-links a {
  font-size: 12px;
  line-height: 1;
  letter-spacing: -0.12px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  padding: 8px 0;
  transition: color 0.2s ease;
}

.nav-links a:hover,
.nav-links a.active { color: var(--body-on-dark); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* 汉堡(≤833px 显示) */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: none;
  border: 0;
  cursor: pointer;
}

.hamburger span {
  display: block;
  height: 1.5px;
  background: var(--body-on-dark);
  transition: transform 0.25s ease;
}

.hamburger.open span:first-child { transform: translateY(3.75px) rotate(45deg); }
.hamburger.open span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* ============ 按钮(Apple 两套按钮语法) ============ */
.btn {
  display: inline-block;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.2s ease;
}

.btn:active { transform: scale(0.95); }

.btn-primary {
  background: var(--primary);
  color: #fff;
  font-size: 17px;
  line-height: 1.24;
  border-radius: var(--r-pill);
  padding: 11px 22px;
}

.btn-primary:hover { background: #0077ed; }

.btn-nav-cta {
  font-size: 14px;
  letter-spacing: -0.224px;
  padding: 6px 15px;
}

/* 珍珠胶囊:羊皮纸底上的次级按钮(DESIGN.md · button-pearl-capsule) */
.btn-pearl {
  background: var(--pearl);
  color: var(--ink-muted-80);
  font-size: 14px;
  letter-spacing: -0.224px;
  border: 3px solid var(--divider-soft);
  border-radius: var(--r-md);
  padding: 8px 14px;
  transition: transform 0.15s ease, border-color 0.2s ease;
}

.btn-pearl:active { transform: scale(0.95); }
.btn-pearl:hover { border-color: rgba(0, 0, 0, 0.16); }

.text-link {
  color: var(--primary);
  text-decoration: none;
  font-size: 17px;
  letter-spacing: -0.374px;
}

.text-link:hover { text-decoration: underline; }

/* DESIGN.md 的 text-link-on-dark:深色瓦片上的链接用 Sky Link Blue。
   当前没有深色瓦片,同样作为可用积木保留。 */
.text-link-dark { color: var(--primary-on-dark); }

/* ============ 开门见山:身份头部(无封面,首屏直达作品) ============ */
.tile-intro { padding-top: 64px; }

.intro { text-align: center; }

.intro-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  margin: 18px auto 0;
}

.intro-title {
  margin-top: 18px;
  font-family: var(--font-serif);
  font-size: 64px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
}

/* 签名图:标题行首,高度随字号缩放 */
.intro-title .sig {
  display: inline-block;
  height: 1.05em;
  width: auto;
  vertical-align: -0.12em;
  margin-right: 0.28em;
}

.intro-title .cn { margin-left: 0.26em; }

.intro-note { margin-top: 16px; }
.intro-note .text-link { font-size: 15px; letter-spacing: 0.02em; }

/* ============ 画廊:筛选芯片 + 自适应瀑布流 ============ */
.filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 32px 0 14px;
}

.filter-btn {
  background: var(--canvas);
  color: var(--ink);
  font-size: 14px;
  letter-spacing: -0.224px;
  border: 1px solid var(--divider-soft);
  border-radius: var(--r-pill);
  padding: 10px 18px;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.15s ease;
}

.filter-btn:hover { border-color: rgba(0, 0, 0, 0.24); }
.filter-btn:active { transform: scale(0.95); }

/* 选中态 = 配置器芯片:2px Focus Blue 描边 */
.filter-btn.active {
  border: 2px solid var(--primary-focus);
  padding: 9px 17px;
}

/* 作品计数(works.html):筛选芯片下方的细字,由 JS 写入 */
.gallery-count {
  text-align: center;
  font-size: 12px;
  letter-spacing: -0.12px;
  color: var(--ink-muted-48);
  margin-bottom: 28px;
  min-height: 15px; /* 占位,避免筛选时布局跳动 */
}

/* 网格:杂志式错落布局。
   横向分带:每一带(band)是一个独立的 4 列 grid,宽度恰好铺满,
   带内卡片高度由 JS 统一撑齐 —— 结构上不可能出现空洞。 */
.grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-card);
}

.band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-card);
  align-items: stretch;
}

/* 收尾带:竖图不足 4 张时等分铺满整行,不留空列。
   但只有 1 张时铺满全宽会把竖图裁得太狠 —— 那种情况限宽到半幅居中。 */
.band-short { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
.band-short .card,
.band-short .card.landscape,
.band-short .card.feature { grid-column: auto; }
.band-short:has(.card:only-child) {
  grid-auto-columns: minmax(0, calc(50% - var(--sp-card) / 2));
  justify-content: center;
}

/* 横图 + 1 张竖图(2+1,共 3 列):两者等宽铺满整行,
   既不留空列,也不会让横图独占一行宽度 */
.band-land1port { grid-template-columns: 1fr 1fr; }
.band-land1port .card,
.band-land1port .card.landscape { grid-column: auto; }

/* 作品卡 = store-utility-card:白底 / 18px 圆角 / 1px 发丝线 / 无阴影 */
.card {
  display: block;
  width: 100%;
  height: var(--band-h, auto); /* 由 JS 按带内最高卡写入,同带撑齐 */
  padding: 0;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  animation: card-in 0.5s ease both;
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

.card-media {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--parchment);
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.card:hover .card-media img { transform: scale(1.035); }
.card:active { transform: scale(0.99); }

/* 列跨度:由 JS 写入 --span(竖图 1 / 横图 2 / 主视觉 4),
   与分带逻辑保持一致 */
.card.landscape { grid-column: span var(--span, 2); }
.card.feature { grid-column: span var(--span, 4); }

/* 注:卡片是纯照片,没有标题/分类文字 —— 分类只在灯箱右下角显示。
   原先的 .card-left / .card-title / .card-cat 已随说明文字一并移除。 */

.grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink-muted-48);
  padding: 48px 0;
}

.load-more-wrap { text-align: center; }

/* 首页墙尾:查看全部作品 */
.all-works { text-align: center; margin-top: 16px; }

.btn-all { font-size: 15px; padding: 12px 26px; }

/* 次级幽灵胶囊:白底 + 发丝线 */
.btn-ghost {
  background: var(--canvas);
  color: var(--ink);
  font-size: 14px;
  letter-spacing: -0.224px;
  border: 1px solid var(--divider-soft);
  border-radius: var(--r-pill);
  padding: 10px 22px;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.15s ease;
}

.btn-ghost:hover { border-color: rgba(0, 0, 0, 0.24); }
.btn-ghost:active { transform: scale(0.95); }

.gallery-hint {
  margin-top: 32px;
  text-align: center;
  font-size: 12px;
  letter-spacing: -0.12px;
  color: var(--ink-muted-48);
}

/* ============ 关于:居中堆叠(头像居中 + 简介居中栏) ============ */
.about {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 720px;
  margin: 24px auto 0;
}

.about-avatar {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 28px;
}

.about-text { width: 100%; }

.about-text p {
  color: var(--ink-muted-80);
}

.about-text p + p { margin-top: 20px; }
.about-text strong { color: var(--ink); font-weight: 600; }

/* 器材芯片 */
.gear-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

.gear-chips li {
  background: var(--parchment);
  color: var(--ink-muted-80);
  font-size: 14px;
  letter-spacing: -0.224px;
  border-radius: var(--r-pill);
  padding: 8px 16px;
}

/* 数据:大数字 56/600 紧字距 */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  margin-top: 40px;
  border-top: 1px solid var(--hairline);
  padding-top: 32px;
}

.stat { padding-right: 24px; }
.stat + .stat { border-left: 1px solid var(--hairline); padding-left: 32px; }

.stat strong {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.28px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stat-plus {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--ink-muted-48);
  margin-left: 2px;
}

.stat em {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 14px;
  letter-spacing: -0.224px;
  color: var(--ink-muted-48);
}

/* ============ 约拍:羊皮纸瓦片 ============ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 64px;
  align-items: start;
  max-width: 980px;
  margin: 24px auto 0;
}

.contact-mail {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: 0.196px;
  color: var(--primary);
  text-decoration: none;
}

.contact-mail:hover { text-decoration: underline; }

.contact-main .btn-pearl { margin-top: 24px; }

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 28px;
}

.contact-meta { margin: 0; }

.contact-meta > div {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--divider-soft);
}

.contact-meta > div:last-child { border-bottom: 1px solid var(--divider-soft); }

.contact-meta dt {
  flex: none;
  width: 44px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-muted-48);
}

.contact-meta dd {
  font-size: 17px;
  letter-spacing: -0.374px;
  color: var(--ink);
}

/* ============ 页脚 ============ */
.footer {
  background: var(--parchment);
  border-top: 1px solid var(--divider-soft);
  padding: 32px 0 40px;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-brand {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.12px;
  color: var(--ink-muted-80);
}

.footer-legal {
  font-size: 12px;
  letter-spacing: -0.12px;
  color: var(--ink-muted-48);
}

/* ============ 灯箱:纯黑 + 半透明圆形控件 ============ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.97);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.lightbox.open { opacity: 1; visibility: visible; }

.lb-figure {
  max-width: min(1080px, 88vw);
  text-align: center;
}

.lb-figure img {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: var(--r-sm);
}

/* 灯箱说明:只有「序号 / 总数」+ 分类(作品不带标题) */
.lb-caption {
  margin-top: 16px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  color: var(--body-on-dark);
}

.lb-count {
  font-size: 12px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--body-muted-dark);
}

.lb-tag {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--body-muted-dark);
}

/* button-icon-circular:44px 半透明圆钮 */
.lb-btn {
  position: absolute;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--chip-translucent);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: transform 0.15s ease, background-color 0.2s ease;
}

.lb-btn:hover { background: rgba(210, 210, 215, 0.85); }
.lb-btn:active { transform: scale(0.95); }

.lb-close { top: 20px; right: 20px; }
.lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 20px; top: 50%; transform: translateY(-50%); }
.lb-prev:active { transform: translateY(-50%) scale(0.95); }
.lb-next:active { transform: translateY(-50%) scale(0.95); }

/* ============ 悬浮按钮:回顶部 + 约拍(毛玻璃胶囊) ============ */
.float-bar {
  position: fixed;
  right: 20px;
  bottom: 28px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.float-bar.show { opacity: 1; visibility: visible; transform: none; }

.float-btn {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--chip-translucent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.224px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.2s ease;
}

.float-btn:hover { background: rgba(210, 210, 215, 0.85); }
.float-btn:active { transform: scale(0.95); }

.float-round { width: 44px; padding: 0; font-size: 18px; font-weight: 400; }

/* 标题逐字入场(纯色,无扫描光效) */
[data-split] .char {
  display: inline-block;
  color: var(--ink);
  opacity: 0;
  transform: translateY(0.45em);
  filter: blur(6px);
  animation: char-in 0.7s cubic-bezier(0.22, 0.61, 0.21, 1) var(--d, 0s) both;
}

@keyframes char-in {
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* 品牌词打字机(逐字淡入淡出,顺滑无光标) */
.rotator { color: var(--ink); }

.rotator .t-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.12em);
  filter: blur(3px);
  transition: opacity 0.18s ease, transform 0.18s ease, filter 0.18s ease;
}

.rotator .t-char.on {
  opacity: 1;
  transform: none;
  filter: none;
}

html.no-motion .rotator .t-char { opacity: 1; transform: none; filter: none; transition: none; }

/* ============ 滚动浮现 ============ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible { opacity: 1; transform: none; }

/* 减少动态:系统偏好(可用 ?motion=1 强制演示)时全部动画退场 */
html.no-motion { scroll-behavior: auto; }
html.no-motion .reveal { opacity: 1; transform: none; transition: none; }
html.no-motion .card { animation: none; }
html.no-motion .card-media img { transition: none; }
html.no-motion [data-split] .char,
html.no-motion .rotator .char {
  animation: none;
  opacity: 1;
  transform: none;
  filter: none;
  background: none;
  color: var(--ink);
}

/* ==========================================================
   响应式(DESIGN.md · 关键断点 1068 / 834 / 734 / 640 / 419)
   ========================================================== */

@media (max-width: 1068px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 833px) {
  .nav-links {
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(0, 0, 0, 0.96);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .nav-links.open { max-height: 240px; }

  .nav-links a {
    padding: 14px 24px;
    font-size: 17px;
    letter-spacing: -0.374px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .hamburger { display: flex; }

  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 734px) {
  :root { --sp-section: 48px; }
  .tile { padding: var(--sp-section) 0; }
}

@media (max-width: 640px) {
  .intro-avatar { width: 72px; height: 72px; }
  .intro-title { font-size: 40px; }

  .tile-title { font-size: 32px; }

  /* 手机:双列独立瀑布流 —— 卡片轮流进两列,自然错落,永不空洞 */
  .grid { display: flex; flex-direction: row; gap: 12px; }
  .grid-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 0;
    min-width: 0;
  }
  .grid-empty { flex: 1 1 100%; }
  .card { border-radius: 14px; height: auto; }

  .filters {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
    scrollbar-width: none;
  }

  .filters::-webkit-scrollbar { display: none; }
  .filter-btn { flex: none; }

  .stats { grid-template-columns: 1fr; gap: 20px; }
  .stat { padding: 0; }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--hairline); padding: 20px 0 0; }
  .stat strong { font-size: 40px; }

  .contact-mail { font-size: 22px; }
  .footer-inner { flex-direction: column; gap: 8px; }

  .lb-prev { left: 12px; }
  .lb-next { right: 12px; }

  .float-bar { right: 14px; bottom: 18px; }
}

@media (max-width: 419px) {
  .intro-title { font-size: 28px; }
  .btn-primary { padding: 10px 20px; font-size: 16px; }
}