/* =========================================================================
   Home · 单色极简
   -------------------------------------------------------------------------
   这一版把首页从「黑底 + 荧光绿 + 光晕」收敛为纯单色。所有强调都只靠
   「白 / 灰 / 一条 1px 的线」完成，靠位移和显隐表达层级，不靠发光。

   注意：index.html 先加载 shared.css，其中的 .hero / .eyebrow / .section /
   .site-header / .navbar / .brand* / .site-footer 都是浅色主题的规则，
   本文件必须逐个覆盖（下面每段都有对应的 override 注释）。

   想恢复绿色强调色：只改 --home-fg 一处即可让线条、描边、读数全部变色；
   若要恢复「绿点」式的局部强调，另加一个 --home-accent 变量并在
   .entry-arrow / .meter-value 上引用，不必改结构。
   ========================================================================= */

:root {
  --home-bg: #08080a;
  --home-fg: #f4f4f2;
  --home-soft: rgba(244, 244, 242, 0.6);
  --home-faint: rgba(244, 244, 242, 0.36);
  --home-line: rgba(244, 244, 242, 0.13);
  --home-line-2: rgba(244, 244, 242, 0.3);
  --home-panel: rgba(244, 244, 242, 0.028);

  --home-x: clamp(20px, 5.4vw, 104px);
  --home-y: clamp(88px, 12vh, 152px);

  --home-ease: cubic-bezier(0.22, 0.68, 0.24, 1);
  --home-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 深色页需要深色表单控件/滚动条；shared.css 在 :root 上写死了 light */
html:has(body.home-page) {
  color-scheme: dark;
  background: #08080a;
  scroll-behavior: auto; /* Lenis 接管滚动，浏览器不要再做平滑 */
}

body.home-page {
  background: var(--home-bg);
  color: var(--home-fg);
  overflow-x: hidden;
}

body.home-page dl,
body.home-page dd,
body.home-page dt,
body.home-page figure,
body.home-page p {
  margin: 0;
}

body.home-page dl,
body.home-page figure {
  padding: 0;
}

/* 内容层要盖在滚动进度条之下、但都在 body 背景之上 */
.home-main {
  position: relative;
  z-index: 2;
}

/* ------------------------------------------------------------ 键盘焦点
   全站统一的那一套：1px 实线 + 偏移。四个内页各自写了一份
   （gallery 3px / music 3px / about 4px / learning 4px），只有首页之前
   没有，焦点落到了浏览器默认环上。

   为什么必须自己写：默认环的 outline-color 在这块背景上算出来是
   rgb(16,16,16)，实测聚焦后整块截图里最亮的像素只有 luminance 77，
   比旁边那行灰字的 85 还暗——等于看不见。相册页同一位置的对照值是
   244,244,242，正是 --g-fg。所以这不是「好不好看」，是「有没有」。

   偏移取 3px，与相册 / 音乐一致。 */
:focus-visible {
  outline: 1px solid var(--home-fg);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- 加载页 */

.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(22px, 4vw, 46px) var(--home-x) clamp(30px, 5vw, 58px);
  background: var(--home-bg);
}

.loader-mark {
  color: var(--home-soft);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.loader-count {
  align-self: flex-end;
  font-size: clamp(52px, 9vw, 124px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 0.86;
}

.loader-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--home-line);
}

.loader-line i {
  display: block;
  height: 100%;
  background: var(--home-fg);
  transform: scaleX(0);
  transform-origin: left;
}

/* ------------------------------------------------------------ 滚动进度条 */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  height: 1px;
  pointer-events: none;
}

.scroll-progress span {
  display: block;
  height: 100%;
  background: var(--home-fg);
  transform: scaleX(0);
  transform-origin: left;
}

/* ---------------------------------------------------------------- 导航
   override shared.css: .site-header / .navbar / .navbar a / .brand* */

.home-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px var(--home-x);
  border-bottom: 1px solid transparent;
  background: transparent;
  backdrop-filter: none;
  transition: background 0.5s var(--home-ease), border-color 0.5s var(--home-ease),
    transform 0.6s var(--home-ease);
}

.home-nav.is-scrolled {
  border-bottom-color: var(--home-line);
  background: rgba(8, 8, 10, 0.74);
  backdrop-filter: blur(14px);
}

.home-nav.is-hidden {
  transform: translate3d(0, -102%, 0);
}

.home-nav .brand {
  gap: 12px;
}

.home-nav .brand-mark {
  width: 38px;
  height: 38px;
  border: 1px solid var(--home-line-2);
  border-radius: 50%;
  background: var(--home-panel);
}

.home-nav .brand-name {
  color: var(--home-fg);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.home-nav .brand-note {
  color: var(--home-faint);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.home-nav .navbar {
  gap: 0;
}

.home-nav .navbar a {
  position: relative;
  min-height: 40px;
  margin-left: clamp(6px, 1.4vw, 18px);
  padding: 0 2px;
  border-radius: 0;
  background: none;
  color: var(--home-faint);
  font-size: 13.5px;
  letter-spacing: 0.04em;
  transition: color 0.4s var(--home-ease);
}

.home-nav .navbar a::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 9px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--home-ease-out);
}

/* 键盘 focus 与 hover 拿同一套反馈：变亮 + 那条底线划出来。
   不另造效果——「当前指到哪一项」的语义两种输入完全一样。 */
.home-nav .navbar a:hover,
.home-nav .navbar a.active,
.home-nav .navbar a:focus-visible {
  background: none;
  color: var(--home-fg);
}

.home-nav .navbar a:hover::after,
.home-nav .navbar a.active::after,
.home-nav .navbar a:focus-visible::after {
  transform: scaleX(1);
}

/* ---------------------------------------------------------------- HERO
   override shared.css 的 .hero（它是浅色页的 min-height:calc(100vh - 88px) 居中块）*/

.hero {
  --mx: 0; /* -1 ~ 1，由 js/hero-animation.js 按指针写入 */
  --my: 0;

  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  row-gap: clamp(16px, 2.6vh, 36px);
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(96px, 12vh, 150px) var(--home-x) clamp(18px, 2.6vh, 30px);
}

.hero-eyebrow {
  grid-area: 1 / 1;
  align-self: center;
  color: var(--home-faint);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.hero-scroll {
  grid-area: 4 / 1;
  align-self: end;
  /* 靠左和 eyebrow / lead 同一条阅读轴；靠右会和 hero-spec 那一列挤在一起，
     看起来像第四个规格项 */
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--home-faint);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.hero-scroll i {
  position: relative;
  display: block;
  width: 1px;
  height: 26px;
  overflow: hidden;
  background: var(--home-line);
}

.hero-scroll i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--home-fg);
  animation: hero-cue 2.6s var(--home-ease) infinite;
}

.hero-scroll em {
  font-style: normal;
}

@keyframes hero-cue {
  0% {
    transform: translateY(-100%);
  }
  55%,
  100% {
    transform: translateY(100%);
  }
}

.hero-title {
  grid-area: 2 / 1;
  align-self: center;
  margin: 0;
  /* 同时受视口宽和高约束：只用 vw 的话，在 1440×900 这种矮屏上
     三行大字会把 hero-foot 顶到折线以下 */
  font-size: min(clamp(52px, 13vw, 224px), 19vh);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

/* .line 是遮罩，<i> 是被遮罩推上来的那一行 —— 位移分开做，
   line 负责鼠标视差，i 负责入场，两者互不打架 */
.hero-title .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.05em;
  transform: translate3d(calc(var(--mx) * 12px), calc(var(--my) * 7px), 0);
}

.hero-title .line:nth-child(2) {
  transform: translate3d(calc(var(--mx) * -20px), calc(var(--my) * -10px), 0);
}

.hero-title .line:nth-child(3) {
  transform: translate3d(calc(var(--mx) * 7px), calc(var(--my) * 4px), 0);
}

.hero-title .line i {
  display: block;
  font-style: normal;
  transform: translate3d(0, 110%, 0);
  transition: transform 1.15s var(--home-ease-out);
}

.hero-title .line:nth-child(2) i {
  transition-delay: 0.09s;
}

.hero-title .line:nth-child(3) i {
  transition-delay: 0.18s;
}

.hero-title .line.is-outline i {
  color: transparent;
  -webkit-text-stroke: 2px var(--home-fg);
}

body.is-ready .hero-title .line i {
  transform: translate3d(0, 0, 0);
}

.hero-foot {
  grid-area: 3 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(22px, 4vw, 64px);
  padding-top: clamp(18px, 2.6vh, 28px);
  border-top: 1px solid var(--home-line);
}

.hero-lead {
  max-width: 44ch;
  color: var(--home-soft);
  font-size: clamp(14px, 1.1vw, 15.5px);
  line-height: 1.9;
}

.hero-spec {
  display: flex;
  gap: clamp(20px, 3vw, 46px);
}

.hero-spec > div {
  display: grid;
  gap: 5px;
}

.hero-spec dt {
  color: var(--home-faint);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero-spec dd {
  color: var(--home-fg);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}

/* -------------------------------------------------------------- 关键词带 */

.marquee-section {
  position: relative;
  z-index: 2;
  padding: clamp(44px, 7vh, 88px) 0;
  border-top: 1px solid var(--home-line);
  border-bottom: 1px solid var(--home-line);
}

.marquee {
  width: 100%;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: clamp(26px, 3.6vw, 62px);
  width: max-content;
}

.marquee-track span {
  color: transparent;
  font-size: clamp(38px, 7vw, 122px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  -webkit-text-stroke: 1px var(--home-line-2);
}

.marquee-track span:nth-child(even) {
  color: var(--home-fg);
  -webkit-text-stroke: 0;
}

/* ------------------------------------------------------------ 实时读数
   override shared.css 的 .section（浅色页的 --section-y 竖padding）*/

.section {
  padding: 0;
}

.meter-section {
  position: relative;
  z-index: 2;
  padding: var(--home-y) var(--home-x);
}

.meter {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--home-line);
  border-bottom: 1px solid var(--home-line);
}

.meter-cell {
  display: grid;
  gap: 10px;
  padding: clamp(22px, 3.2vw, 38px) clamp(18px, 2.6vw, 38px);
}

.meter-cell:first-child {
  padding-left: 0;
}

.meter-cell:last-child {
  padding-right: 0;
}

.meter-cell + .meter-cell {
  border-left: 1px solid var(--home-line);
}

.meter-value {
  font-size: clamp(38px, 6vw, 88px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 0.9;
}

.meter-label {
  color: var(--home-fg);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.meter-note {
  color: var(--home-faint);
  font-size: 12px;
}

/* ------------------------------------------------------------ 四个入口 */

.entries-section {
  position: relative;
  z-index: 2;
  padding: 0 var(--home-x) var(--home-y);
}

.entries-head {
  display: grid;
  gap: 14px;
  max-width: 30ch;
  margin-bottom: clamp(36px, 5vw, 68px);
}

/* override shared.css 的 .eyebrow（它被写成了浅色主题的 --accent-dark 棕色） */
.eyebrow {
  color: var(--home-faint);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.28em;
}

.entries-title {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 50px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.16;
}

/* entry-item 用 display:contents，让它内部的 <a> 和预览面板
   直接成为 .entry-list 的网格项 —— 于是桌面端 a 落在左列、
   面板落在右列；窄屏时列数变 1，两者按 DOM 顺序自然交替，
   就变成了「一行 + 它的预览」的堆叠，不需要任何 JS 搬 DOM */
.entry-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 34%);
  column-gap: clamp(30px, 5vw, 88px);
  align-items: start;
}

.entry-item {
  display: contents;
}

.entry {
  grid-column: 1;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: clamp(12px, 2vw, 26px);
  padding: clamp(18px, 2.5vw, 30px) 0;
  border-top: 1px solid var(--home-line);
}

.entry-item:last-child .entry {
  border-bottom: 1px solid var(--home-line);
}

.entry-num {
  color: var(--home-faint);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
  transition: color 0.4s var(--home-ease);
}

.entry-name {
  color: var(--home-soft);
  font-size: clamp(30px, 4.2vw, 60px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  transition: color 0.4s var(--home-ease), transform 0.6s var(--home-ease-out);
}

.entry-en {
  justify-self: end;
  color: var(--home-faint);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.entry-arrow {
  color: var(--home-faint);
  font-size: 17px;
  line-height: 1;
  transition: color 0.4s var(--home-ease), transform 0.6s var(--home-ease-out);
}

/* -------------------------------------------------------- 预览面板（把手上）*/

.entry-pane {
  grid-column: 2;
  grid-row: 1 / span 4; /* 四个面板叠在同一格，靠 opacity 切换 */
  /* .entry-list 上是 align-items:start，会把面板压成内容高度。
     四个面板内容长短不一（117 ~ 328px），不撑满的话预览区会随 hover 忽高忽低 */
  align-self: stretch;
  overflow: hidden;
  border: 1px solid var(--home-line);
  background: var(--home-panel);
  opacity: 0;
  transition: opacity 0.45s var(--home-ease);
}

/* 没有 JS 时的兜底：至少让第一个面板可见 */
.entry-item:first-child .entry-pane {
  opacity: 1;
}

.entry-list.is-live .entry-pane {
  opacity: 0;
}

.entry-list.is-live .entry-item.is-active .entry-pane {
  opacity: 1;
}

.pane {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.8vh, 20px);
  height: 100%;
  padding: clamp(18px, 2.2vw, 28px);
}

.pane-cap {
  color: var(--home-faint);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* 档案：年份时间轴 + 该年最新一篇的真实标题 */
.pane-archive {
  justify-content: space-between;
}

.pa-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "year rule count"
    "latest latest latest";
  align-items: center;
  column-gap: 14px;
  row-gap: 7px;
}

.pa-year {
  grid-area: year;
  font-size: clamp(16px, 1.6vw, 26px);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.pa-latest {
  grid-area: latest;
  overflow: hidden;
  color: var(--home-faint);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pa-rule {
  grid-area: rule;
  height: 1px;
  background: var(--home-line-2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.75s var(--home-ease-out);
}

.pa-count {
  grid-area: count;
  color: var(--home-soft);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.pane-archive .pa-row:nth-child(2) .pa-rule {
  transition-delay: 0.05s;
}

.pane-archive .pa-row:nth-child(3) .pa-rule {
  transition-delay: 0.11s;
}

.pane-archive .pa-row:nth-child(4) .pa-rule {
  transition-delay: 0.17s;
}

.entry-pane.is-active .pa-rule {
  transform: scaleX(1);
}

/* 关键词行：只是把这一栏里的词列出来，没有一个词能点。
   原来每个词带一圈 1px 边框 + 内边距，那是「标签按钮」的形状，
   和全站其它可点元素（.link-underline / .entry）用的是同一种描边语言——
   于是它看起来像能点，点了没反应。边框去掉，改成关于页
   .a-interest-fine 那种「一排淡字」的写法：同样是纯展示，但不假装是控件。 */
.pa-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.pa-tags span {
  color: var(--home-faint);
  font-size: 10.5px;
  letter-spacing: 0.06em;
}

/* 相册：真实照片，统一去色 */
.pane-gallery {
  position: relative;
  height: 100%;
  padding: 0;
}

.pane-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(0.96);
}

.pane-gallery figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 14px clamp(16px, 1.8vw, 22px);
  border-top: 1px solid rgba(244, 244, 242, 0.16);
  background: linear-gradient(to top, rgba(8, 8, 10, 0.9), rgba(8, 8, 10, 0));
  font-size: 12px;
  letter-spacing: 0.06em;
}

.pg-index {
  color: var(--home-faint);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
}

/* 音乐：随指针起伏的波形 */
.pane-music {
  gap: clamp(10px, 1.4vh, 16px);
}

.pm-bars {
  display: flex;
  flex: 1;
  align-items: flex-end;
  gap: clamp(2px, 0.35vw, 5px);
  min-height: 0;
}

.pm-bars i {
  flex: 1;
  height: 100%;
  background: var(--home-fg);
  opacity: 0.42;
  transform: scaleY(0.05);
  transform-origin: bottom;
}

.pm-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--home-faint);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* 学习：真实课程构成的节点图 */
.pane-learning {
  gap: clamp(8px, 1.2vh, 14px);
}

.pl-map {
  flex: 1;
  width: 100%;
  min-height: 0;
  font-family: var(--font);
}

.pl-edges line {
  stroke: var(--home-line-2);
  stroke-width: 1;
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  transition: stroke-dashoffset 0.95s var(--home-ease-out);
}

.entry-pane.is-active .pl-edges line {
  stroke-dashoffset: 0;
}

.pl-edges line:nth-child(2) {
  transition-delay: 0.07s;
}

.pl-edges line:nth-child(3) {
  transition-delay: 0.14s;
}

.pl-edges line:nth-child(4) {
  transition-delay: 0.21s;
}

.pl-nodes circle {
  fill: none;
  stroke: var(--home-line-2);
  stroke-width: 1;
  transition: fill 0.55s var(--home-ease), stroke 0.55s var(--home-ease);
}

.pl-nodes .pl-hub {
  fill: var(--home-fg);
  stroke: var(--home-fg);
}

.entry-pane.is-active .pl-nodes circle:not(.pl-hub) {
  fill: var(--home-fg);
  stroke: var(--home-fg);
}

.pl-labels text {
  fill: var(--home-faint);
  font-size: 11px;
  letter-spacing: 0.1em;
  transition: fill 0.55s var(--home-ease);
}

.entry-pane.is-active .pl-labels text {
  fill: var(--home-soft);
}

/* ------------------------------------------------------------ 桌面端 hover */

@media (hover: hover) and (pointer: fine) {
  .entry-item.is-active .entry-num,
  .entry-item.is-active .entry-en {
    color: var(--home-fg);
  }

  .entry-item.is-active .entry-name {
    color: var(--home-fg);
    transform: translate3d(clamp(6px, 1vw, 16px), 0, 0);
  }

  .entry-item.is-active .entry-arrow {
    color: var(--home-fg);
    transform: translate3d(6px, 0, 0);
  }
}

/* ---------------------------------------------------------------- 收尾 */

.closing {
  position: relative;
  z-index: 2;
  padding: var(--home-y) var(--home-x) calc(var(--home-y) * 1.25);
  border-top: 1px solid var(--home-line);
}

.closing-title {
  max-width: 17ch;
  margin: 0;
  font-size: clamp(28px, 5vw, 82px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.closing-links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(30px, 4.5vw, 58px);
}

.link-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 7px;
  color: var(--home-soft);
  font-size: 14px;
  letter-spacing: 0.06em;
  transition: color 0.4s var(--home-ease);
}

.link-underline::before,
.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
}

.link-underline::before {
  background: var(--home-line-2);
}

.link-underline::after {
  background: var(--home-fg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--home-ease-out);
}

.link-underline:hover,
.link-underline:focus-visible {
  color: var(--home-fg);
}

.link-underline:hover::after,
.link-underline:focus-visible::after {
  transform: scaleX(1);
}

/* ---------------------------------------------------------------- 页脚
   override shared.css: .site-footer / .site-footer a（hover 是棕色） */

.home-footer {
  position: relative;
  z-index: 2;
  padding: 40px var(--home-x);
  border-top: 1px solid var(--home-line);
  background: var(--home-bg);
  color: var(--home-faint);
}

.home-footer a {
  border-bottom-color: var(--home-line);
  color: inherit;
}

.home-footer a:hover,
.home-footer a:focus-visible {
  border-bottom-color: var(--home-line-2);
  color: var(--home-fg);
}

/* ================================================================ 平板 */

@media (max-width: 1023px) {
  /* 行结构沿用基准的 auto / 1fr / auto / auto：中间那行 1fr 会吸收多余高度，
     标题靠 align-self:center 自然居中，不需要另立一套 */
  .hero {
    row-gap: clamp(20px, 4vh, 40px);
    min-height: 92vh;
    padding-top: clamp(96px, 14vh, 130px);
  }

  .hero-foot {
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vw, 30px);
  }

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

  .meter-cell {
    padding: clamp(20px, 3.4vw, 30px) 0;
  }

  .meter-cell + .meter-cell {
    border-left: 0;
    border-top: 1px solid var(--home-line);
  }
}

/* ============================================ 窄屏 / 触控：无 hover 就摊开 */

@media (max-width: 1023px), (pointer: coarse) {
  .entry-list {
    grid-template-columns: 1fr;
  }

  .entry {
    grid-column: 1;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  /* 触控没有 hover，就把预览直接摊开在每一行下面 */
  .entry-pane,
  .entry-list.is-live .entry-pane {
    grid-column: 1;
    grid-row: auto;
    margin-bottom: clamp(20px, 4vw, 32px);
    border: 0;
    border-bottom: 1px solid var(--home-line);
    background: none;
    opacity: 1;
  }

  .entry-list.is-live .entry-item:first-child:not(.is-active) .entry-pane {
    opacity: 1;
  }

  .entry-item:last-child .entry {
    border-bottom: 0;
  }

  .entry-en {
    display: none;
  }

  .entry-name {
    font-size: clamp(26px, 7vw, 40px);
  }

  .pa-rule,
  .entry-pane .pl-edges line {
    transform: none;
    stroke-dashoffset: 0;
  }

  .entry-pane .pl-nodes circle:not(.pl-hub) {
    fill: var(--home-fg);
    stroke: var(--home-fg);
  }

  .entry-pane .pl-labels text {
    fill: var(--home-soft);
  }
}

/* ================================================================ 手机 */

@media (max-width: 640px) {
  :root {
    --home-y: clamp(64px, 10vh, 96px);
  }

  .home-nav {
    padding: 12px var(--home-x);
  }

  .home-nav .brand-note {
    display: none;
  }

  .home-nav .navbar {
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .home-nav .navbar::-webkit-scrollbar {
    display: none;
  }

  .home-nav .navbar a {
    min-height: 36px;
    margin-left: 14px;
    font-size: 12.5px;
  }

  .hero {
    min-height: 88vh;
    padding-top: 92px;
  }

  .hero-title {
    font-size: clamp(46px, 15.5vw, 92px);
  }

  .hero-title .line.is-outline i {
    -webkit-text-stroke-width: 1.5px;
  }

  .hero-spec {
    flex-wrap: wrap;
    gap: 16px 26px;
  }

  .pane {
    padding: 16px;
  }

  .pane-gallery {
    padding: 0;
  }

  .pm-bars {
    min-height: 96px;
  }
}

/* ==================================================== 无动画偏好 */

@media (prefers-reduced-motion: reduce) {
  .hero-title .line {
    transform: none;
  }

  .hero-title .line i {
    transform: none;
    transition: none;
  }

  .hero-scroll i::after {
    animation: none;
    transform: none;
  }

  .pa-rule {
    transform: scaleX(1);
  }

  .pl-edges line {
    stroke-dashoffset: 0;
  }

  .loader-line i {
    transform: scaleX(1);
  }
}