/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ===== Base ===== */
:root{
  --bg:#fff;
  --fg:#111;
  --muted:#888;
  --line:#eaeaea;
  --accent:#111;
  --maxw:1280px;
  --pad-x:48px;
  --header-h:80px;
  --footer-h:140px;
  --gap-x:32px;
  --gap-y:28px;
  --radius:2px;
}
@media (max-width:900px){:root{--pad-x:28px;--gap-x:20px;--gap-y:20px}}
@media (max-width:720px){:root{--pad-x:20px;--header-h:72px}}

html,body{background:var(--bg);color:var(--fg)}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,
             "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

.page{min-height:100vh;display:flex;flex-direction:column}

/* ===== Header ===== */
.site-header{
  position:sticky;top:0;z-index:50;
  height:var(--header-h);
  /* 背景移到 ::before，用 left:calc(50% - 50vw) + width:100vw 让背景延伸到视口左右边缘，
     header 本体保留 max-width 居中限内容宽，背景全宽贴合窗口（详情页 Hero 渐变/图片背景下不留空隙）*/
}
.site-header::before{
  content:"";
  position:absolute;
  top:0;bottom:0;
  left:calc(50% - 50vw);   /* 伪元素左边 = header 中心 - 50vw = 视口左边（header margin auto 居中时）*/
  width:100vw;             /* 铺满视口宽度 */
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.2) blur(8px);
  -webkit-backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid transparent;
  z-index:-1;             /* 内容（logo/nav/icons）在伪元素之上 */
}
.site-header{
  max-width:var(--maxw);
  width:100%;
  margin:0 auto;
  padding:0 var(--pad-x);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  /* 顶栏三个区域（Logo / 导航 / 社交图标）统一用父级的交叉轴居中，
     同时给两个 flex 子容器显式设 height:100%，确保两侧的中线 = header 80px 的中线 */
}
.brand{display:inline-flex;align-items:center;height:100%}
.brand img{height:28.16px;width:auto;vertical-align:middle}   /* 80% 版 Logo；vertical-align:middle 兜底避免基线差 */

.site-nav{display:flex;align-items:center;justify-content:flex-end;height:100%;gap:22px;min-width:0;margin-right:-6px}
/* margin-right:-6px：精确对齐——
   header 与 grid 容器用了相同的 max-width + pad-x，因此两者内容右边界理论相等。
   但 icon-link 有 padding-right:6px → Email img.right 会比"容器右边界"少 6px；
   用 -6px 负 margin 让 nav 盒子向右溢出 6px，恰好抵消 padding-right，使：
   Email img.right == 右列项目插图 img.right（用户要求的视觉右对齐）。*/
.site-nav > *{flex-shrink:0}
.nav-link{
  position:relative;   /* ::after 独立定位坐标原点 = 本元素（保证中线和下划线位置解耦）*/
  display:inline-flex;align-items:center;height:100%;
  font-size:14px;letter-spacing:1.4px;color:#333;
  padding:0 2px;
  /* 原 border-bottom 不再用：它永远画在元素最外沿 = header 底边，离文字太远。
     改用下面 ::after 绝对定位，精准锚定到"文字下方约 1px 处"，且不影响文字中线对齐。*/
  border-bottom:0;
  transition:color .25s ease;
  text-transform:capitalize;
}
.nav-link:hover{color:#000}
/* active 下划线：距离文字底 = 字体高度(14px) × 0.8 = 11.2px
   所以 bottom 参数 = 元素高(79) - 文字中线(40) - 字体下半部分(≈font-size×0.36=5px) - 目标距离(11.2px) - 线高度(1)
   = 79 - 40 - 5 - 11.2 - 1 = 21.8 → 取 22px 正好实现"0.8 倍字高"间距 */
.nav-link::after{
  content:"";
  position:absolute;
  left:2px; right:2px;
  bottom:22px;
  height:1px;
  background:transparent;
  transition:background .25s ease;
}
.nav-link.active::after{ background:#111; }
.nav-sep{display:inline-block;width:1px;height:14px;background:var(--line);margin:0 6px;align-self:center}
.icon-link{display:inline-flex;align-items:center;height:100%;padding:0 6px;border-radius:4px;opacity:.75;transition:opacity .2s ease,transform .2s ease}
.icon-link img{width:22px;height:22px}
.icon-link:hover{opacity:1;transform:translateY(-1px)}

@media (max-width:640px){
  .site-nav{gap:14px}
  .nav-link{font-size:13px;letter-spacing:1px}
  .nav-sep{margin:0 2px}
}

/* ===== Portfolio grid + 所有主内容区 =====
   .portfolio（首页作品网格）、.pg（Patents/About 主区）、.detail（详情页主区）
   统一用 main 标签 + role="main"，并设定 flex:1，保证整页高度=100vh 时 footer 永远贴最底部
   （和 Portfolio 页 footer 行为、高度、上下边距保持完全一致）*/
main[role="main"]{
  flex:1 0 auto;
  width:100%;
}
.portfolio{
  flex:1 0 auto;
  max-width:var(--maxw);
  width:100%;
  margin:0 auto;
  padding:36px var(--pad-x) 64px;
}

/* Patents / About / 详情页：统一主区内边距与 Portfolio 底部 64px 对齐，
   避免各页内联写 80px 导致 footer 距离正文不一致。
   这些类如果在 HTML 里有内联样式定义优先级更高，我们也用同名类覆写（加上 !）*/
.pg,.detail{
  max-width:960px;
  width:100%;
  margin:0 auto;
  padding:40px var(--pad-x) 64px !important;
}
.pg h1,.detail h1{margin:8px 0 18px;font-size:28px;letter-spacing:1px}
.pg p,.detail p{color:#333;line-height:1.9}
.detail .crumb{color:#888;font-size:13px;letter-spacing:1px}
.detail .crumb a:hover{color:#000}
.detail .hero{aspect-ratio:16/10;margin:22px 0;border-radius:2px;overflow:hidden;background:#f4f4f4}
.detail .hero img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:720px){
  .pg,.detail{padding:20px !important}
  .pg h1,.detail h1{font-size:22px}
}
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--gap-x);
  row-gap:var(--gap-y);
}
@media (max-width:720px){
  .portfolio-grid{grid-template-columns:1fr}
  .portfolio{padding-top:20px}
}

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

/* ===== Project card (整卡可点，插图 + 标题全在 <a> 内) ===== */
/* ===== Project cards：用户永久规则（请勿修改）=====
   规则 1：所有项目缩略图卡片容器保持固定 16:10 长宽比，不能被图撑变形。
   规则 2：如果替换上来的图片比例 ≠ 16:10，必须「按较大比例等比放大 + 居中裁剪」填满容器，
          不留上下/左右白边或黑边（使用 object-fit: cover 实现）。
          不要改成 contain（会出现留白）；不要用 width/height:auto 让容器跟着图变。*/
.project-card{
  display:block;
  width:100%;
  color:inherit;
  outline:none;
}
.project-card:focus-visible{
  box-shadow:0 0 0 2px #fff,0 0 0 4px #2563eb;border-radius:calc(var(--radius) + 2px);
}

.project-card .thumb{
  position:relative;
  width:100%;
  /* ↓ 用户规则 1：固定 16:10，不能改 */
  aspect-ratio:16 / 10;
  overflow:hidden;
  background:#f4f4f4;
  border-radius:var(--radius);
}
.project-card .thumb img{
  width:100%;height:100%;
  /* ↓ 用户规则 2026-08-23 修正：缩略图容器尺寸和比例（16:10）不变；
     被填充的图片保持原始长宽比，不允许形变；
     要"尽可能铺满整个画面"——短边等比放大到刚好覆盖容器宽度或高度，
     然后对称裁切长边多余部分（如 HEY 竖图：裁上下；横图：裁左右）。
     object-fit: cover = 等比缩放 + 填满容器 + 超出的裁掉（不畸变、无留白）。*/
  object-fit:cover;
  object-position:center center;
  display:block;
  line-height:0;  /* 按经验 310603：防止 inline baseline 造成底部 1~2px 空隙 */
  transform:translateZ(0) scale(1.0001);
  transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .24s ease;
  will-change:transform;
}
.project-card:hover .thumb img,
.project-card:focus-visible .thumb img{
  transform:translateZ(0) scale(1.03); /* 轻微放大 */
}

.project-card .meta{
  margin-top:14px;
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
}
.project-card .title{
  font-size:15px;font-weight:600;letter-spacing:.6px;color:#111;
  margin:0;
}
@media (max-width:720px){
  .project-card .meta{margin-top:10px}
  .project-card .title{font-size:14px}
}

/* ===== Footer ===== */
.site-footer{
  margin-top:48px;
  border-top:1px solid var(--line);
  /* 去掉底栏 Logo 后，版权文字要在底栏上下居中：上下 padding 相等 + copyright 无额外 margin */
  padding:24px var(--pad-x);
  text-align:center;
  background:#fafafa;
  display:flex;align-items:center;justify-content:center;  /* flex 再兜底保证垂直居中 */
  min-height:0;
}
.copyright{
  margin:0;
  color:var(--muted);
  font-size:12px;letter-spacing:1.2px;
}

/* ===== Patents Page ===== */
/* 容器规格与 Portfolio 完全一致：1280px max-width + 48px 两侧边距 + 与项目图右对齐 */
.patents-page{
  flex:1 0 auto;
  max-width:var(--maxw);
  width:100%;
  margin:0 auto;
  /* 顶栏 → Stats 间距 +20%：80→96px；
     专利清单 → 底栏 间距 -50%：64→32px */
  padding:96px var(--pad-x) 32px;
}

/* —— 顶部 3 行静态统计（14 Invention / 03 Utility Model / 23 Appearance Design）——
   · 数字 + 英文 字号相同，仅数字加粗
   · 数字 / 英文 独立 flex item，英文左边界全行对齐（通过 stat-num 的 min-width）
   · 上下间距加大 */
.patents-stats{
  margin-bottom:75px; /* Stats → 专利列表 间距缩小为现在 60%：125×0.6=75 */
}
.patents-stats .stat{
  display:flex;
  align-items:baseline;
  gap:24px;              /* 数字 ↔ 英文 独立间距 */
  margin-bottom:20px;
  line-height:1;
}
.patents-stats .stat:last-child{
  margin-bottom:0;
}
.stat-num{
  font-size:28px;        /* 与英文同字号，仅数字加粗 */
  font-weight:700;
  color:#111;
  letter-spacing:0.3px;
  min-width:44px;        /* 固定最小宽 → 3 行英文左边界严格对齐 */
  flex-shrink:0;
  text-align:left;
}
.stat-label{
  font-size:28px;        /* 与数字同字号 */
  font-weight:400;
  color:#222;
  letter-spacing:0.2px;
  text-align:left;
  flex:0 1 auto;
}

/* —— 40 个专利编号：PC 默认 8 列 × 5 行 ——
   · column-gap 缩小（解决 13 寸上 WO 长文本换行）
   · row-gap 缩小 25%（24 → 18）
   · 万一小屏换行，grid item 顶部对齐（避免垂直居中导致长短不一） */
.patents-grid{
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  column-gap:12px;   /* 20 → 12：节省 56px 总宽，给每列多 7px 空间避免 WO 换行 */
  row-gap:18px;      /* 24 → 18：缩小 25% */
}
.patent-item{
  min-width:0;
  display:flex;
  align-items:flex-start;  /* 顶部对齐（vs 原来的 center），换行时顶端齐平 */
  min-height:28px;         /* 微调高度适配 row-gap 缩小 */
}
.patent-link{
  /* 深蓝 + 下划线，参考图视觉风格 */
  color:#27446e;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  font-size:14px;  /* 缩小一号：15→14，解决 13 寸长文本换行 */
  letter-spacing:0.2px;
  line-height:1.4;
  transition:color .2s ease, text-decoration-color .2s ease;
  display:inline-block;
}
.patent-link:hover{
  color:#13305c;
  text-decoration-color:#13305c;
}
/* 最后 3 个专利：置灰 + 不可点击 */
.patent-item.disabled .patent-num{
  color:#c7cad0;
  text-decoration:none;
  cursor:default;
  font-size:14px;  /* 与可点击项同步缩小一号：15→14 */
  letter-spacing:0.2px;
  line-height:1.4;
  user-select:text;  /* 允许选中文本，只是不能跳转 */
}

/* —— 响应式：窗口缩小后自动减少列数 —— */
@media (max-width:1100px){
  .patents-grid{ grid-template-columns:repeat(6, 1fr); column-gap:10px; row-gap:16px; }
}
@media (max-width:900px){
  .patents-stats{ margin-bottom:80px; }
  .stat-num{ font-size:22px; min-width:36px; }
  .stat-label{ font-size:22px; }
  .patents-grid{ grid-template-columns:repeat(4, 1fr); column-gap:10px; row-gap:15px; } /* row-gap 原 20 → 15（25% 缩小） */
}
@media (max-width:600px){
  .patents-page{ padding-top:64px; }
  .patents-stats{ margin-bottom:64px; }
  .stat-num{ font-size:20px; min-width:32px; }
  .stat-label{ font-size:20px; }
  .patents-stats .stat{ gap:16px; }
  .patents-grid{ grid-template-columns:repeat(2, 1fr); column-gap:10px; row-gap:14px; } /* row-gap 原 18 → 14（25% 缩小） */
}

/* ==========================================================
   About 页
   容器规格同 Portfolio / Patents（1280px / var(--pad-x)）
   ========================================================== */
.about-page{
  box-sizing:border-box;
  max-width:1280px;
  margin:0 auto;
  width:100%;
  /* —— 与 Portfolio / Patents 的 main 保持一致：flex:1 保证 footer 贴最底端 —— */
  flex:1 0 auto;
  /* awards→底栏 可控下方间距（awards.mb + page.pb）按视觉总距 176×60%=106 反推：
     固定间隙(footer.pt+其他)≈80，故可控=26 → awards.mb:page.pb ≈ 2:1 = 18:8 */
  padding:96px var(--pad-x) 8px;
}

/* —— 圆形头像（居中）—— */
.about-avatar{
  text-align:center;
  margin:0 0 56px;
}
.about-avatar img{
  display:inline-block;
  width:210px;
  height:210px;
  border-radius:50%;
  object-fit:cover;
  /* 圆形头像参考图视觉，略带阴影可加，这里保持参考图纯色无阴影 */
  background:#fafafa;
}

/* —— 自我介绍文字（左对齐，宽度限制在内容区，两侧留白与参考图一致）—— */
.about-bio{
  max-width:1080px;
  /* bio→awards 上方间距 ×60%：margin-bottom 120→72 */
  margin:0 auto 72px;
}
.about-bio .welcome{
  /* 第 1 行：Hi! I'm Tianyi… */
  display:block;
  font-size:22px;
  font-weight:700;
  color:#111;
  line-height:1.4;
  margin-bottom:28px;
}
.about-bio .intro{
  /* 第 2 行：长段落 */
  display:block;
  font-size:18px;
  line-height:1.9;
  color:#111;
  letter-spacing:0.1px;
}

/* —— 奖项 Logo 横排（居中，整图）—— */
.about-awards{
  text-align:center;
  /* 配合 page padding-bottom:8px，总可控 18+8=26 → + 固定≈80 → 视觉≈106 (≈原 176×60%) */
  margin:0 0 18px;
}
.about-awards img{
  display:inline-block;
  max-width:100%;
  width:100%;
  max-width:1080px;
  height:auto;
  /* 保持奖项原比例，整图左右居中 */
}

/* —— About 响应式 —— */
@media (max-width:1100px){
  .about-bio{ max-width:92%; }
  .about-awards img{ max-width:92%; }
}
@media (max-width:900px){
  .about-page{ padding-top:64px; }
  .about-avatar{ margin-bottom:44px; }
  .about-avatar img{ width:170px; height:170px; }
  /* bio→awards 上方间距 ×60%：96→58 */
  .about-bio{ margin-bottom:58px; }
  .about-bio .welcome{ font-size:20px; margin-bottom:22px; }
  .about-bio .intro{ font-size:16px; }
}
@media (max-width:600px){
  /* awards→底栏 下方间距 ×60%：padding-bottom 16→10 */
  .about-page{ padding-top:48px; padding-bottom:10px; }
  .about-avatar{ margin-bottom:32px; }
  .about-avatar img{ width:140px; height:140px; }
  /* bio→awards 上方间距 ×60%：72→43 */
  .about-bio{ margin-bottom:43px; }
  .about-bio .welcome{ font-size:18px; margin-bottom:18px; }
  .about-bio .intro{ font-size:15px; line-height:1.8; }
  /* awards→底栏 下方间距 ×60%：awards margin-bottom 48→29（+ padding-bottom 10 = 39 ≈ 64 × 60% = 38.4） */
  .about-awards{ margin-bottom:29px; }
}

/* ==========================================================
   Project Detail Pages
   用于所有项目详情页的通用样式
   ========================================================== */

/* —— Hero 区域（全宽背景图 + 文字叠加）—— */
.detail-hero{
  position:relative;
  width:100%;
  min-height:420px;
  display:flex;
  align-items:flex-end;
  /* 左右 padding 移到 .detail-hero-inner，保证背景全宽 + 内容与下方 .detail-content 严格对齐 */
  /* 上 padding 1.6 倍：60→96；下 padding 缩至 60%：96×0.6≈58（缩小 section 底缘到内容底缘距离） */
  padding:96px 0 58px;
  overflow:hidden;
  /* 背景图通用规格：cover + 居中 + 不重复。
     默认为渐变色（无图兜底），各项目页通过内联 style 的 background-image 覆盖为真实主题图。
     用 background-image（而非 background shorthand）便于内联只覆盖图片层、保留 size/position。*/
  background-color:#f4f4f4;
  background-image:linear-gradient(135deg, #f8b4d4 0%, #e8a0d8 30%, #c4b6f0 60%, #a8c8f8 100%);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  /* Hero 内所有文字颜色统一为下方正文色 #333（date/title/desc/meta 全部一致）*/
  color:#333;
}
.detail-hero::before{
  /* 文字可读性遮罩：底部到顶部渐变 */
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(255,255,255,0) 40%, rgba(255,255,255,0.3) 100%);
  pointer-events:none;
}
.detail-hero-inner{
  position:relative;
  z-index:1;
  /* 容器规格与 .detail-content 完全一致：相同 max-width + 相同左右 padding，
     使 Hero 文字左右边缘 = 下方段落/媒体左右边缘（水平严格对齐）*/
  max-width:960px;
  width:100%;
  margin:0 auto;
  padding:0 var(--pad-x);
}
.detail-hero-date{
  display:block;
  font-size:13px;
  letter-spacing:1.5px;
  color:#333;
  margin-bottom:14px;
  text-transform:uppercase;
}
.detail-hero-title{
  display:block;
  font-size:48px;
  font-weight:800;
  letter-spacing:1px;
  color:#333;
  line-height:1.15;
  margin:0 0 24px;
}
.detail-hero-desc{
  /* 去掉 max-width 限制，宽度与下方 .detail-section-body 正文一致（撑满 content 区域，左右边缘对齐 h2/p） */
  /* 与下方 .detail-hero-meta(Contributions) 间距提升至原值 1.6 倍：20→32 */
  margin:0 0 32px;
  font-size:15px;
  line-height:1.8;
  color:#333;
}
.detail-hero-desc p{
  margin:0 0 12px;
}
.detail-hero-desc p:last-child{
  margin-bottom:0;
}
.detail-hero-meta{
  display:flex;
  flex-direction:column;  /* meta 项垂直堆叠（上 Contributions、下 Design&Developing Tools），不横排到右侧 */
  /* 两 meta 项垂直间距：8→12 */
  gap:12px 0;
  font-size:13px;
  letter-spacing:0.5px;
  color:#333;
}
.detail-hero-meta .meta-label{
  font-weight:600;
  color:#333;
}

/* —— 详情内容区 —— */
.detail-content{
  max-width:960px;
  width:100%;
  margin:0 auto;
  padding:80px var(--pad-x) 64px;
}

/* —— 章节结构 —— */
.detail-section{
  margin-bottom:80px;
}
.detail-section:last-child{
  margin-bottom:0;
}
.detail-section-title{
  font-size:32px;
  font-weight:800;
  letter-spacing:1px;
  color:#111;
  line-height:1.2;
  margin:0 0 24px;
  text-transform:uppercase;
}
.detail-section-body{
  font-size:15px;
  line-height:1.9;
  color:#333;
  margin-bottom:32px;
}
.detail-section-body p{
  margin:0 0 16px;
}
.detail-section-body p:last-child{
  margin-bottom:0;
}

/* —— 媒体容器（图片/视频）—— */
.detail-media{
  margin:0 0 16px;
}
.detail-media-row{
  display:grid;
  gap:16px;
}
.detail-media-row.cols-2{
  grid-template-columns:repeat(2, 1fr);
}
.detail-media-row.cols-3{
  grid-template-columns:repeat(3, 1fr);
}
.detail-media figure{
  margin:0;
  position:relative;
  overflow:hidden;
  border-radius:2px;
  background:#f4f4f4;
}
.detail-media img,
.detail-media video{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  background:#f4f4f4;
}
.detail-media figcaption{
  display:block;
  font-size:12px;
  line-height:1.6;
  color:#888;
  letter-spacing:0.3px;
  margin-top:8px;
  text-align:left;
}
.detail-media-row figcaption{
  padding:0 4px;
}

/* —— 响应式视频嵌入 —— */
.detail-video-wrap{
  position:relative;
  width:100%;
  padding-bottom:56.25%; /* 16:9 */
  background:#000;
  border-radius:2px;
  overflow:hidden;
}
.detail-video-wrap video,
.detail-video-wrap iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* —— 响应式 —— */
@media (max-width:900px){
  .detail-hero{
    min-height:340px;
    /* 上 padding 1.6 倍：48→77；下 padding 缩至 60%：77×0.6≈46 */
    padding:77px 0 46px;
  }
  .detail-hero-title{
    font-size:36px;
  }
  .detail-content{
    padding:56px var(--pad-x) 48px;
  }
  .detail-section{
    margin-bottom:56px;
  }
  .detail-section-title{
    font-size:26px;
  }
  .detail-media-row.cols-3{
    grid-template-columns:repeat(2, 1fr);
  }
}
@media (max-width:720px){
  .detail-hero{
    min-height:280px;
    /* 上 padding 1.6 倍：36→58；下 padding 缩至 60%：58×0.6≈35 */
    padding:58px 0 35px;
  }
  .detail-hero-title{
    font-size:28px;
  }
  .detail-hero-desc{
    font-size:14px;
  }
  .detail-content{
    padding:40px 20px 32px;
  }
  .detail-section{
    margin-bottom:40px;
  }
  .detail-section-title{
    font-size:22px;
  }
  .detail-media-row.cols-2,
  .detail-media-row.cols-3{
    grid-template-columns:1fr;
  }
}