/* ============================================================
   Portfolio — 深色沉浸 · 高级简约
   设计令牌
   ============================================================ */
:root {
  --bg: #0a0a0b;
  --bg-soft: #101012;
  --bg-elev: #16161a;

  --text: #edeae5;
  --text-2: #9a9791;
  --text-3: #63615d;

  --line: rgba(237, 234, 229, 0.09);
  --line-strong: rgba(237, 234, 229, 0.18);

  --accent: #60b060;
  --script-green: #60b060;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC",
    "HarmonyOS Sans SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;

  --maxw: 1280px;
  --pad: 40px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 768px) {
  :root {
    --pad: 22px;
  }
}

/* ============================================================
   Reset
   ============================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* ⚠ overscroll-behavior-y 必须写在 body 上，不能写在 html 上：
     WebKit（Safari）在「html 的 overscroll-behavior-y 不是 auto」+「页面存在非被动 wheel 监听」时，
     滚轮的默认滚动完全不执行 —— 表现为 Chrome 正常、Safari 里鼠标滚轮滚不动（键盘/脚本滚动却正常）。
     放在 body 上同样会传播到视口生效，且不会触发该缺陷。 */
  /* 触控板/鼠标向右横滑时只滑页面，不触发浏览器「返回上一页」手势 */
  overscroll-behavior-x: none;
  -webkit-text-size-adjust: 100%;
}

body {
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--accent);
  color: #0a0a0b;
}

/* 滚动条 */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: #2a2a2e;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3a3a40;
}

/* ============================================================
   排版基元
   ============================================================ */
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
}

.num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-3);
}

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  width: 100%;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* ============================================================
   滚动进度线
   ============================================================ */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 1px;
  background: var(--accent);
  width: 0;
  z-index: 200;
  opacity: 0.75;
}

/* ============================================================
   导航
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 68px;
  display: flex;
  align-items: center;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}

.nav.is-scrolled {
  background: rgba(10, 10, 11, 0.72);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom-color: var(--line);
}

.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* 详情页顶部左侧：返回作品列表（替代头像 + 姓名） */
.brand-back {
  gap: 8px;
  font-weight: 400;
  color: var(--text-2);
  transition: color 0.3s var(--ease);
}

.brand-back:hover {
  color: var(--text);
}

.brand-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--line-strong);
}

@media (max-width: 768px) {
  .brand-avatar {
    width: 28px;
    height: 28px;
  }
  .brand {
    gap: 11px;
  }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
}

.nav-links a {
  font-size: 13px;
  color: var(--text-2);
  transition: color 0.3s var(--ease);
  position: relative;
}

.nav-links a:hover {
  color: var(--text);
}

.nav-resume {
  font-size: 13px;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  padding: 7px 16px;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.nav-resume:hover {
  border-color: var(--accent);
  background: rgba(198, 168, 124, 0.08);
}

/* 汉堡 */
.nav-toggle {
  display: none;
  width: 28px;
  height: 18px;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
}

.nav-toggle span {
  position: absolute;
  left: 0;
  height: 1px;
  width: 100%;
  background: var(--text);
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}

.nav-toggle span:nth-child(1) {
  top: 3px;
}
.nav-toggle span:nth-child(2) {
  top: 13px;
}

.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.nav-toggle.is-open span:nth-child(2) {
  transform: translateY(-5px) rotate(-45deg);
}

/* 移动端菜单 */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--pad);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--ease);
}

.mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu a {
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.02em;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

/* ============================================================
   Hero —— 全宽 PORTFOLIO + 人像压在字中间 + 名字行
   层级（z-index）：PORTFOLIO 1 → 人像 2 → 名字行 3
   ============================================================ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero-inner {
  position: relative;
  width: 100%;
  /* 主标字号：按 9 个 Anton 字母的实测字宽定字号；
     剩余宽度由 flex space-between 在 8 个字母间距中均分，确保 PORTFOLIO 等距铺满版心。
     所有尺寸都按 --hw 等比 */
  --hw: calc((min(100vw, var(--maxw)) - 2 * var(--pad)) / 4.92);
  padding-top: 68px;
  /* 整体上移 40px（用 transform，不影响首屏高度和下方区块位置） */
  transform: translateY(-40px);
}

.hero-stage {
  position: relative;
  /* 给人像的头部留出 PORTFOLIO 上方的空间（参考图：头顶比字顶高约 10.6% 版心 ≈ 0.8 个字号） */
  padding-top: calc(var(--hw) * 0.8);
}

/* ---------- 主标：PORTFOLIO ---------- */
/* Anton 子集（仅 P O R T F L I，约 1KB）：狭长超重压缩体。Google Fonts 用 &text=PORTFOLI 下载；
   换主标文字要重新下载含新字母的子集 */
@font-face {
  font-family: "Hero Sans";
  src: url("../fonts/anton.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Hero Script";
  /* Hurricane（Google Fonts，OFL），仅含 "Wang Huafeng" 用到的字形；旧字体 mrs-saint-delafield.woff2 保留未删 */
  src: url("../fonts/hurricane.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

.hero-title {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  font-family: "Hero Sans", var(--font-sans);
  font-weight: 400;
  font-size: var(--hw);
  line-height: 0.9;
  letter-spacing: 0;
  color: #fff;
  /* Anton 本身笔画极重、字腔细长，与参考图（THUNDER）字形一致，无需描边 */
  -webkit-text-stroke: 0;
  margin: 0;
}

/* 初始态在 T/F 之间留一格；头像开始移动时收回，space-between 随即均分所有字距 */
.hero-title .hero-tf-gap {
  margin-right: 0.6em;
  transition: margin-right 280ms ease;
}

.hero-title.is-spreading .hero-tf-gap {
  margin-right: 0;
}

/* ---------- 人像：站在 PORTFOLIO 中间，挡住 T / F 之间的字 ---------- */
.hero-portrait {
  position: absolute;
  z-index: 2;
  /* 人像缩小到 80% 后，top 下移 0.58hw 锚住底边（手/相机仍在名字行附近），头自然沉到字后 */
  top: calc(var(--hw) * 0.58);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  /* 参考图里人像略偏左于正中：右侧留 6% 把中心往左推 3% */
  padding-right: 6%;
  /* 再向左挪 20px、向上挪 60px（transform 放在容器上，img 自己的入场动画也用 transform） */
  transform: translate(-20px, -60px);
  pointer-events: none;
}

.hero-portrait img {
  /* 参考图里人像高 ≈ 版心的 38%；v=86 按用户要求缩小到 80%（2.9 × 0.8 = 2.32） */
  height: calc(var(--hw) * 2.32);
  width: auto;
  max-width: none;
  filter: saturate(0.35) brightness(1.06) contrast(1.05);
  /* 相机以下很快淡出，和背景融为一体（参考图里只留到手部） */
  -webkit-mask-image: linear-gradient(to bottom, #000 56%, transparent 84%);
  mask-image: linear-gradient(to bottom, #000 56%, transparent 84%);
  animation: portraitIn 1.6s var(--ease) both 0.2s;
}

@keyframes portraitIn {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero-portrait-dock {
  position: fixed;
  z-index: 90;
  display: block;
  max-width: none;
  object-fit: contain;
  object-position: center top;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  will-change: left, top, width, height;
  transition: opacity 0.22s linear, visibility 0.22s linear;
}

.hero-portrait-dock.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ---------- 名字行：左 = 中文名 + 手写体，右 = 一句话简介 ---------- */
.hero-row {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 32px;
  margin-top: calc(var(--hw) * 0.14);
}

.hero-name {
  display: flex;
  align-items: center;
  font-size: var(--hw); /* 子项用 em 相对它换算 */
}

.hero-cn {
  /* 原 0.4em 的 0.8 倍 */
  font-size: 0.32em;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: #fff;
}

/* 手写体压在中文名右缘 + 人像的相机上，所以要在人像之上（.hero-row 已是 z-index 3） */
.hero-script {
  /* 中文名与手写体之间的「可见间距」= 20px：
     中文名末尾有字距留白、手写体 W 左侧有字形留白，两者合计约 0.073em（随字号等比），从 20px 里扣掉 */
  margin-left: calc(20px - 0.073em);
  font-family: "Hero Script", cursive;
  font-weight: 400;
  font-size: 0.42em;
  line-height: 1;
  letter-spacing: 0;
  color: var(--script-green);
  white-space: nowrap;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  font-size: clamp(12px, 1.3vw, 16px);
  letter-spacing: 0.01em;
  color: rgba(237, 234, 229, 0.82);
}

/* 斜杠挂在后一项的 ::before 上：窄屏换行时不会孤零零留在行尾 */
.hero-meta span {
  white-space: nowrap;
}

.hero-meta span + span::before {
  content: "/";
  margin: 0 0.5em;
  opacity: 0.6;
}

@media (max-width: 768px) {
  .hero-inner {
    padding-top: 56px;
  }

  /* 窄屏下字号只有 ~63px，按桌面比例人像/手写体会小到看不清：整体放大一档 */
  .hero-stage {
    padding-top: calc(var(--hw) * 1.2);
  }

  .hero-portrait {
    /* 窄屏人像 2.48hw（3.1 × 0.8），top 下移 0.62hw 锚住底边 */
    top: calc(var(--hw) * 0.62);
  }

  .hero-portrait img {
    height: calc(var(--hw) * 2.48);
  }

  .hero-row {
    flex-direction: column;
    align-items: flex-start;
    margin-top: calc(var(--hw) * 0.2);
  }

  .hero-name {
    font-size: calc(var(--hw) * 1.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-portrait img {
    animation: none;
  }
}

/* ============================================================
   Section 通用
   ============================================================ */
.section {
  padding: 130px 0;
}

/* 区块顶部的分隔线（原来这里有一行小字「关于」，已去掉，只留线） */
.section-head {
  border-bottom: 1px solid var(--line);
  margin-bottom: 60px;
}

/* 圆形按钮（详情页灯箱在用） */
.works-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: none;
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease),
    opacity 0.3s var(--ease);
}

.works-btn:hover:not(:disabled) {
  border-color: var(--accent);
  background: rgba(198, 168, 124, 0.08);
}

.works-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

/* 详情页「下一个作品」区域复用的标题与标签 */
.work-title {
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.015em;
  transition: color 0.3s var(--ease);
}

.work-tags {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 4px;
}

/* ============================================================
   项目展示：纵向滚动映射为横向左滑（与旅行照片同一机制）
   ============================================================ */
.works-gallery {
  position: relative;
  height: 100vh;
  /* 与下方旅行屏之间多留 40px 间隙 */
  margin-bottom: 40px;
  background: var(--bg);
}

.works-gallery-pin {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}

.works-gallery-pin.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.works-gallery-head {
  position: absolute;
  top: 104px;
  left: 0;
  right: 0;
  z-index: 2;
  margin: 0 auto;
  pointer-events: none;
}

.works-gallery-title {
  margin: 0;
  color: var(--text);
  font-size: clamp(30px, 4.2vw, 48px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.works-gallery-sub {
  margin: 14px 0 0;
  color: rgba(237, 234, 229, 0.88);
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.works-gallery-track {
  --wg-size: min(400px, max(160px, calc(100vh - 330px)));
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: max-content;
  padding-top: 230px;
  /* 起点对齐版心左边缘，终点留同样的边距 */
  padding-left: max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));
  padding-right: max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));
  will-change: transform;
}

.wg-card {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: block;
  width: var(--wg-size);
  color: inherit;
  text-decoration: none;
}

/* 悬停：卡片放大到 460×460（高度按卡片宽度换算比例），同时左右邻卡让位，
   间距保持 14px 不被压掉；缩放以底边为基准向上长，卡片底边始终齐平 */
.wg-card:hover {
  z-index: 5;
}

.wg-card {
  transition: transform 0.45s var(--ease);
  will-change: transform;
}

.wg-card.shift-l {
  transform: translateX(calc(var(--wg-hot-shift, 0px) * -1));
}

.wg-card.shift-r {
  transform: translateX(var(--wg-hot-shift, 0px));
}

.wg-card .wg-media,
.wg-card .wg-title,
.wg-card .wg-meta {
  transform-origin: 50% 100%;
}

.wg-media {
  width: var(--wg-size);
  height: var(--wg-size);
  overflow: hidden;
  border-radius: 8px;
  background: #151517;
  transition: transform 0.45s var(--ease);
  will-change: transform;
}

.wg-card.is-hot .wg-media {
  transform: scale(var(--wg-hot-scale, 1.15));
}

.wg-media img,
.wg-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.9s var(--ease);
}

.wg-card:hover .wg-media img,
.wg-card:hover .wg-media video {
  transform: scale(1.03);
}

.wg-title {
  margin: 16px 0 0;
  transition: transform 0.45s var(--ease), color 0.3s var(--ease);
  will-change: transform;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--text);
  transition: color 0.3s var(--ease);
}

.wg-card.is-hot .wg-title {
  transform: scale(var(--wg-hot-scale, 1.15));
}

.wg-meta {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-3);
  transition: transform 0.45s var(--ease);
  will-change: transform;
}

.wg-card.is-hot .wg-meta {
  transform: scale(var(--wg-hot-scale, 1.15));
}

.wg-card.is-pending {
  cursor: default;
  opacity: 0.55;
}

/* 视频封面卡片：详情未就绪也保持正常亮度，让自动播放的封面清晰可见 */
.wg-card.is-pending.has-video {
  opacity: 1;
}

.wg-card.is-pending:hover .wg-title {
  color: var(--text);
}

.wg-card.is-pending:hover .wg-media img,
.wg-card.is-pending:hover .wg-media video {
  transform: none;
}

/* ============================================================
   关于
   ============================================================ */
/* 关于 → 项目展示 的间距：原 234px（130 + 104）缩小 40% 至约 140px，削减部分取自关于区底部留白 */
#about {
  padding-bottom: 36px;
}

.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(180px, 23vw, 250px);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}

.about {
  display: block;
  width: 100%;
  max-width: 790px;
  margin-right: auto;
}

/* 第二屏头像停靠位：仅占位并保持 sticky，实际图像由首屏人像滚动接管 */
.about-portrait-target {
  position: sticky;
  top: 104px;
  width: 100%;
  height: min(40vw, 430px);
  min-height: 320px;
  pointer-events: none;
}

.about-title {
  font-size: clamp(30px, 4.2vw, 48px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: 28px;
}

.about-text p {
  font-size: 16px;
  line-height: 1.9;
  color: var(--text-2);
  max-width: 760px;
}

.about-text p + p {
  margin-top: 18px;
}

.timeline {
  margin-top: 52px;
  border-top: 1px solid var(--line);
}

.timeline-item {
  border-bottom: 1px solid var(--line);
}

/* 无详细说明的条目（如教育经历）：不显示 +，也不响应点击与悬停变色 */
.timeline-item.is-static .t-plus {
  visibility: hidden;
}

.timeline-item.is-static .timeline-head {
  cursor: default;
}

.timeline-item.is-static .timeline-head:hover .t-org {
  color: inherit;
}

.timeline-head {
  display: grid;
  grid-template-columns: 170px 1fr auto auto;
  grid-template-areas: "year org role plus";
  column-gap: 28px;
  align-items: baseline;
  width: 100%;
  padding: 32px 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.t-year {
  grid-area: year;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-3);
}

.t-org {
  grid-area: org;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color 0.3s var(--ease);
}

.timeline-head:hover .t-org {
  color: var(--accent);
}

.t-role {
  grid-area: role;
  justify-self: end;
  font-size: 14px;
  color: var(--text-2);
}

.t-plus {
  grid-area: plus;
  justify-self: end;
  align-self: center;
  position: relative;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.t-plus::before,
.t-plus::after {
  content: "";
  position: absolute;
  background: var(--text-3);
  transition: transform 0.4s var(--ease), background 0.3s var(--ease);
}

.t-plus::before {
  left: 0;
  right: 0;
  top: 5.5px;
  height: 1px;
}

.t-plus::after {
  top: 0;
  bottom: 0;
  left: 5.5px;
  width: 1px;
}

.timeline-item.is-open .t-plus::after {
  transform: scaleY(0);
}

.timeline-head:hover .t-plus::before,
.timeline-head:hover .t-plus::after {
  background: var(--text);
}

.t-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s var(--ease);
}

.timeline-item.is-open .t-body {
  grid-template-rows: 1fr;
}

.t-body-inner {
  overflow: hidden;
}

.t-lines {
  padding: 0 0 34px 198px;
}

/* ---------- 工作占比图 ---------- */
.t-split {
  --seg-0: var(--accent);
  --seg-1: rgba(96, 176, 96, 0.5);
  --seg-2: rgba(96, 176, 96, 0.22);
  padding: 4px 0 40px 198px;
}

.t-split-bar {
  display: grid;
  grid-template-columns: minmax(0, 60fr) minmax(0, 30fr) minmax(0, 10fr);
  column-gap: 3px;
  height: 6px;
}

.t-split-bar .seg {
  border-radius: 1px;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.9s var(--ease);
}

.t-split-bar .seg-0 { background: var(--seg-0); }
.t-split-bar .seg-1 { background: var(--seg-1); transition-delay: 0.12s; }
.t-split-bar .seg-2 { background: var(--seg-2); transition-delay: 0.24s; }

.timeline-item.is-open .t-split-bar .seg {
  transform: scaleX(1);
}

/* 图例列宽和比例条完全一致：每个数字正好落在自己那一段的起点下方 */
.t-split-legend {
  display: grid;
  /* 图例按三类信息等分，避免 10% 窄栏里的数字与 30% 数据重叠 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 16px;
  margin-top: 26px;
}

.t-split-item {
  min-width: 0;
}

.t-split-num {
  font-size: clamp(44px, 5vw, 68px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.t-split-num small {
  font-size: 0.4em;
  font-weight: 400;
  margin-left: 2px;
  color: var(--text-3);
}

.t-split-item.seg-0 .t-split-num { color: var(--accent); }

.t-split-label {
  position: relative;
  margin-top: 14px;
  padding-left: 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}

/* 小色块：对应比例条的颜色 */
.t-split-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 1px;
}

.t-split-item.seg-0 .t-split-label::before { background: var(--seg-0); }
.t-split-item.seg-1 .t-split-label::before { background: var(--seg-1); }
.t-split-item.seg-2 .t-split-label::before { background: var(--seg-2); }

.t-split-sub {
  margin-top: 4px;
  padding-left: 14px;
  font-size: 12px;
  color: var(--text-3);
}

.t-lines p {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.75;
}

.t-lines p + p {
  margin-top: 9px;
}

/* ============================================================
   旅行照片：纵向滚动映射为横向长廊
   ============================================================ */
.travel-gallery {
  position: relative;
  height: 100vh;
  background: var(--bg);
}

.travel-gallery-pin {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}

/* 第三屏开场：第一张旅行图撑满叠底（60% 透明度），滚动时等比缩到首张卡片位置 */
.travel-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0.6;
  pointer-events: none;
  will-change: left, top, width, height, opacity;
}

.travel-backdrop img {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  max-width: none;
  height: auto;
  transform: translate3d(0, -50%, 0);
  user-select: none;
  -webkit-user-drag: none;
}

.travel-backdrop.is-done {
  visibility: hidden;
}

.travel-gallery-head {
  position: absolute;
  top: 104px;
  left: 0;
  right: 0;
  z-index: 2;
  margin: 0 auto;
  pointer-events: none;
}

.travel-gallery-title {
  margin: 0;
  color: var(--text);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
  font-size: clamp(30px, 4.2vw, 48px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.travel-gallery-contact {
  margin: 14px 0 0;
  color: rgba(237, 234, 229, 0.88);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  pointer-events: auto;
  user-select: text;
}

.travel-gallery-pin.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.travel-gallery-track {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;
  padding-top: 230px;
  padding-left: clamp(280px, 55vw, 760px);
  padding-right: clamp(48px, 7vw, 110px);
  z-index: 1;
  will-change: transform;
}

.travel-frame {
  /* 取景窗：高度 = 照片完整高度（2:3 竖幅不裁上下），宽度 9/16 高度（9:16 竖幅，即 16:9 的竖向比例），照片在窗内左右位移；矮屏等比缩小 */
  --travel-frame-h: min(400px, max(200px, calc(100vh - 280px)));
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--travel-frame-h) * 9 / 16);
  height: var(--travel-frame-h);
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #151517;
}

/* 开场阶段：首张由叠底图缩小接管，其余随进度淡入 */
.travel-gallery-track:not(.is-intro-done) .travel-frame:first-child {
  opacity: 0;
}

.travel-gallery-track .travel-frame:not(:first-child) {
  opacity: var(--travel-intro, 1);
}

/* 视差：图片按卡片高度完整显示（不裁上下），比取景窗更宽，左滑时在窗内反向位移（--px 由脚本按位置写入） */
.travel-frame img {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: auto;
  max-width: none;
  height: 100%;
  transform: translate3d(calc(-50% + var(--px, 0px)), 0, 0);
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

/* ============================================================
   联系
   ============================================================ */
.contact {
  display: flex;
  flex-direction: column;
  padding-top: 130px;
  background: var(--bg);
}

/* 联系区是纵向 flex 容器，.wrap 的 margin:auto 会让它收缩居中，这里撑满宽度 */
.contact > .wrap {
  width: 100%;
}

/* 联系内容整体宽度 = 标题最长一行的宽度：联系条左右两端与标题两端对齐。
   联系条自身 width:0 + min-width:100%，不参与撑宽，宽度完全由标题决定 */
.contact-inner {
  display: grid;
  width: max-content;
  max-width: 100%;
}

.contact-inner > .contact-bar {
  width: 0;
  min-width: 100%;
}

.contact-title {
  margin: 0;
  color: var(--text);
  /* 与「关于」「项目展示」等区块标题同字号 */
  font-size: clamp(30px, 4.2vw, 48px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.6;
}

.contact-title span {
  display: block;
  margin-top: 0;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: inherit;
  line-height: inherit;
  color: var(--text);
}

/* 页面最底部的联系条：电话 / 邮箱 / 微信 + 二维码 */
.contact-bar {
  margin-top: 56px;
  /* 无底色；底部预留 200px 空间 */
  padding: 36px 0 200px;
  background: transparent;
}

.contact-grid {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: space-between;
  gap: 40px;
  align-items: center;
}

.contact-item h4 {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--text-3);
}

.contact-item a,
.contact-item p {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
  overflow-wrap: anywhere;
  transition: color 0.3s var(--ease);
}

.contact-item a:hover {
  color: var(--accent);
}

/* 微信文字与二维码放在一起 */
.contact-wechat {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
}

.qr {
  flex: 0 0 auto;
  display: block;
  width: 120px;
  height: 120px;
  border-radius: 8px;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* ============================================================
   作品详情页
   ============================================================ */
.detail-top {
  padding-top: 100px;
  padding-bottom: 60px;
}

.back-link {
  font-size: 13px;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 56px;
  transition: color 0.3s var(--ease);
}

.back-link:hover {
  color: var(--text);
}

.detail-title {
  font-size: clamp(34px, 5.4vw, 62px);
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -0.035em;
  margin: 18px 0 20px;
}

.detail-summary {
  font-size: 18px;
  color: var(--text-2);
  max-width: 720px;
  line-height: 1.8;
}

.detail-hero-img {
  margin: 70px 0;
  border-radius: 3px;
  overflow: hidden;
  background: var(--bg-soft);
  aspect-ratio: 16 / 9;
}

.detail-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.meta {
  display: grid;
  grid-template-columns: repeat(var(--meta-cols, 3), minmax(0, 1fr));
  gap: 30px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.meta-item h5 {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
  margin-bottom: 8px;
}

.meta-item p {
  font-size: 14px;
}

.detail-section {
  padding: 80px 0;
  border-bottom: 1px solid var(--line);
}

.detail-section:last-of-type {
  border-bottom: 0;
}

.detail-section h3 {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 500;
  margin-bottom: 26px;
}

.detail-section p {
  font-size: 16px;
  color: var(--text-2);
  max-width: 680px;
  line-height: 1.9;
}

.detail-section p + p {
  margin-top: 18px;
}

/* ---------- 长文详情（article）：文字限宽，图片通栏 ---------- */
.article {
  padding-bottom: 100px;
}

/* 文章前面有信息栏（类型 / 主题等）时，与正文拉开距离 */
.wrap:has(> .meta) + .article {
  padding-top: 64px;
}

.article > * {
  max-width: 760px;
}

.art-h2 {
  margin: 110px 0 28px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: var(--text);
}

.article > .art-h2:first-child {
  margin-top: 0;
}

.art-h3 {
  margin: 56px 0 18px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: var(--text);
}

.art-h4 {
  margin: 36px 0 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--text);
}

.art-p {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.95;
  color: var(--text-2);
}

.art-p.is-strong {
  padding: 22px 26px;
  border-radius: 8px;
  background: var(--bg-elev);
  color: var(--text);
  font-weight: 500;
}

.art-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin: 0 2px;
  vertical-align: -5px;
  border-radius: 4px;
}

.art-ul {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.art-ul li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--text-2);
}

.art-ul li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.95em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.art-ul b {
  color: var(--text);
  font-weight: 500;
}

.art-tip {
  margin: 8px 0 22px;
  padding: 14px 18px;
  border-left: 2px solid var(--accent);
  background: var(--bg-soft);
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-2);
}

.art-link {
  color: var(--accent);
  overflow-wrap: anywhere;
}

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

.article > .art-img {
  max-width: none;
  margin: 44px 0;
}

.art-img img {
  cursor: zoom-in;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: var(--bg-soft);
}

.art-img figcaption {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-3);
}

/* ---------- 长文里的规范表格 ---------- */
.article > .art-table {
  max-width: none;
  margin: 28px 0 0;
}

.at-head h3 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
}

.at-head p {
  margin: 0 0 26px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-2);
}

.at-scroll {
  overflow-x: auto;
  border: 1px solid var(--line-strong);
  /* 右、下边线交给单元格自己的 border（含 rowspan 行），避免容器与单元格线重叠或缺失 */
  border-right: 0;
  border-bottom: 0;
  border-radius: 8px;
}

.art-table table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-2);
}

.art-table th,
.art-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.art-table thead th {
  background: var(--bg-elev);
  color: var(--text);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--line-strong);
}

.art-table td {
  color: var(--text-2);
}

.art-table th.at-cat {
  background: var(--bg-soft);
  color: var(--text);
  font-weight: 500;
  border-bottom: 1px solid var(--line-strong);
}

.at-num {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.08em;
}

.at-name {
  display: block;
  font-size: 15px;
  line-height: 1.5;
}

.art-table td img {
  cursor: zoom-in;
  display: block;
  width: 100%;
  height: auto;
  margin-top: 10px;
  border-radius: 4px;
  background: var(--bg-soft);
}

.art-table td img:first-child {
  margin-top: 0;
}

.shots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.shot {
  border-radius: 3px;
  overflow: hidden;
  background: var(--bg-soft);
  aspect-ratio: 4 / 3;
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shot-full {
  grid-column: span 2;
  aspect-ratio: 16 / 9;
}

.caption {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 12px;
}

.decisions {
  list-style: none;
  max-width: 680px;
}

.decisions li {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  color: var(--text-2);
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  line-height: 1.8;
}

.decisions li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 12px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 34px;
}

.stat {
  background: var(--bg-soft);
  border-radius: 3px;
  padding: 30px 26px;
}

.stat b {
  display: block;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 8px;
}

.stat span {
  font-size: 13px;
  color: var(--text-3);
}

.next-work {
  display: block;
  padding: 60px 0 120px;
  border-top: 1px solid var(--line);
  margin-top: 60px;
}

.next-work:hover .work-title {
  color: var(--accent);
}

.next-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 14px;
}

.next-work .work-title {
  font-size: clamp(24px, 3.2vw, 36px);
  letter-spacing: -0.03em;
}

.next-arrow {
  font-size: 22px;
  color: var(--text-3);
  transition: transform 0.5s var(--ease), color 0.3s var(--ease);
}

.next-work:hover .next-arrow {
  color: var(--accent);
  transform: translateX(8px);
}

/* ============================================================
   详情长图流
   ============================================================ */
.gallery {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 72px;
}

.gallery-item {
  margin: 0;
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-soft);
  cursor: zoom-in;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease), filter 0.6s var(--ease);
  filter: brightness(0.94);
}

.gallery-item:hover img {
  transform: scale(1.012);
  filter: brightness(1);
}

/* 图内叠放的循环视频（替换图上某一块画面）：位置与大小用百分比写在数据里 */
.gallery-overlay {
  position: absolute;
  overflow: hidden;
  border-radius: 9.5% / 4.4%;
  background: #f5f5f5;
  pointer-events: none;
  /* 与底图悬停时的缩放同步（缩放原点是整张图中心，由脚本换算成盖层自己的 transform-origin） */
  transition: transform 1.4s var(--ease);
}

.gallery-item:hover .gallery-overlay {
  transform: scale(1.012);
}

.gallery-overlay video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 纵向平铺：图多的项目（设计规范手册等） ---------- */
/* 一行一张、自上而下排列；长图整行铺开、按原比例完整展示 */
.gallery--grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.gallery--grid .gallery-item {
  aspect-ratio: 4 / 3;
}

.gallery--grid .gallery-item:hover img {
  transform: scale(1.004);
}

/* 整页长图：不裁切、不折叠，按原比例完整铺开 */
.gallery--grid .gallery-item.is-tall {
  aspect-ratio: auto;
}

.gallery--grid .gallery-item.is-tall img {
  width: 100%;
  height: auto;
  object-fit: fill;
}

/* 整页图放大没有信息增益，反而会裁掉文字边缘 */
.gallery--grid .gallery-item.is-tall:hover img {
  transform: none;
}

/* 分组标题：跨满整行 */
.gallery-group {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 34px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.gallery-group:first-child {
  margin-top: 0;
}

.gallery-group b {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text);
}

.gallery-group span {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-3);
}

/* 大图查看 */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(8, 8, 9, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 40px 96px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
  cursor: zoom-out;
}

.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* 长图：在弹层内竖向滚动看完整（lb-bar 不随之滚走） */
.lb-scroll {
  width: 100%;
  align-self: stretch;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  overscroll-behavior: contain;
}

.lightbox.is-tall .lb-scroll {
  align-items: flex-start;
}

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
  cursor: default;
  transform: scale(0.97);
  transition: transform 0.5s var(--ease);
}

.lightbox.is-open img {
  transform: none;
}

.lightbox img.is-tall {
  max-height: none;
  width: min(100%, 1080px);
  height: auto;
  margin: auto;
}

.lb-bar {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: default;
}

.lb-count {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-3);
}

.lb-nav {
  display: flex;
  gap: 10px;
}

/* ============================================================
   进场动效
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1024px) {
  .section {
    padding: 100px 0;
  }
}

@media (max-width: 900px) {
  #about {
    padding-bottom: 18px;
  }

  .contact {
    min-height: 0;
    padding-top: 90px;
  }

  .contact-bar {
    margin-top: 56px;
    padding: 32px 0 200px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    justify-content: stretch;
    gap: 28px;
  }

  .works-gallery-track {
    --wg-size: min(240px, 66vw, max(140px, calc(100vh - 430px)));
    gap: 12px;
  }

  .travel-gallery-track {
    gap: 20px;
    padding-left: clamp(170px, 42vw, 300px);
    padding-right: 32px;
  }

  .about-layout {
    display: block;
  }

  .about {
    max-width: 790px;
  }

  .about-portrait-target {
    display: none;
  }

  .hero-portrait-dock {
    display: none;
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  .nav-toggle {
    display: block;
  }

  .hero {
    min-height: 92vh;
  }

  .section {
    padding: 80px 0;
  }

  .works-section {
    --card-w: min(76vw, 330px);
    --card-h: min(76vw, 330px);
    --gap: 3px;
    --gap-project: 12px;
    --works-top: 20px;
    padding-top: var(--works-top);
    /* 覆盖移动端 .section 的 80px，吸底间距保持 40px */
    padding-bottom: 40px;
  }

  .works-blur {
    width: clamp(36px, 12vw, 86px);
  }

  .works-btn {
    width: 38px;
    height: 38px;
  }

  .gallery {
    gap: 16px;
    padding-top: 44px;
  }

  /* 窄屏：间距收一点 */
  .gallery--grid {
    gap: 12px;
  }

  .gallery-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    margin-top: 22px;
    padding-bottom: 9px;
  }

  .gallery-item {
    border-radius: 4px;
  }

  .lightbox {
    padding: 20px 12px 84px;
  }

  .lb-bar {
    left: 20px;
    right: 20px;
    bottom: 22px;
  }

  .about-title {
    margin-bottom: 20px;
  }

  .about-text p {
    font-size: 15px;
  }

  .timeline-head {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "year plus"
      "org org"
      "role role";
    row-gap: 10px;
    column-gap: 16px;
    padding: 26px 0;
  }

  .t-role {
    justify-self: start;
  }

  .t-lines {
    padding: 0 0 26px 0;
  }

  .t-split {
    padding: 0 0 30px 0;
  }

  .t-split-legend {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 12px;
    margin-top: 20px;
  }

  .t-split-item.seg-2 {
    justify-self: start;
    text-align: left;
  }

  .t-split-item.seg-2 .t-split-label,
  .t-split-item.seg-2 .t-split-sub {
    padding-right: 0;
  }

  .t-split-num {
    font-size: 38px;
  }

  .t-split-label {
    font-size: 13px;
    padding-left: 0;
  }

  .t-split-label::before {
    display: none;
  }

  .t-split-sub {
    padding-left: 0;
    font-size: 11px;
  }

  .contact {
    padding: 80px 0 60px;
  }

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

  .detail-top {
    padding-top: 70px;
    padding-bottom: 40px;
  }

  .detail-hero-img {
    margin: 44px 0;
  }

  .meta {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .detail-section {
    padding: 56px 0;
  }

  .shots {
    grid-template-columns: 1fr;
  }

  .shot-full {
    grid-column: span 1;
  }

  .stats {
    grid-template-columns: 1fr;
  }
}