@import "../anthropic-inspired-design-system/tokens.css";

* {
  box-sizing: border-box;
}

html {
  overflow-anchor: none;
  scroll-behavior: auto;
  scrollbar-width: none;
  /* 顶部固定导航栏高度：锚点跳转时不让区块标题被导航遮住 */
  scroll-padding-top: 4.5rem;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
}

body {
  min-width: 320px;
}

body[data-nav-open="true"] {
  overflow: hidden;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

.site-shell {
  --nav-rail-width: 118px;
  --container-width: min(1120px, calc(100vw - 40px));
  --hero-photo-width: min(58vw, 44rem);
  --hero-side-gap: 3rem;
  --hero-side-panel-width: 7.5rem;
  --hero-side-panel-edge: 1.5rem;
  min-height: 100vh;
  padding-left: 0;
}

#top {
  display: flex;
  flex-direction: column;
}

/* 顶部导航栏：固定在视口顶部，左 logo 右选项；默认完全透明（压在首屏照片上），
   滚过首屏后由 .is-scrolled 滑入米白色块垫底并切换黑色文字 */
.site-header {
  --topbar-height: 3.9rem;
  --topbar-pad-x: clamp(1.25rem, 3vw, 2.5rem);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 20;
  width: 100vw;
  height: var(--topbar-height);
  border-bottom: 0;
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
  transform: none;
  clip-path: inset(0 0 0 0);
  transition: box-shadow var(--duration-medium) var(--ease-out);
}

/* 滚过首屏后垫在导航下的实底色块：从顶部滑入/滑出（明显的先快后慢非线性，1.25s；
   文字/logo 变色保持 750ms，略快于白块，视觉上先见字变色、白块随后落定） */
.site-header::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-bottom: 1px solid var(--color-border-soft);
  background: var(--color-bg);
  content: "";
  opacity: 0;
  transform: translateY(-100%);
  transition: transform 1250ms cubic-bezier(.22, 1, .36, 1), opacity 1250ms cubic-bezier(.22, 1, .36, 1);
}

.site-header.is-scrolled:not([data-open="true"]):not([data-closing="true"])::after {
  opacity: 1;
  transform: translateY(0);
}

/* MORE 覆盖层展开/收起期间不显示白块，避免压在品牌色覆盖层上 */
.site-header[data-open="true"]::after,
.site-header[data-closing="true"]::after {
  opacity: 0;
  transform: translateY(-100%);
  transition: none;
}

.site-header[data-open="true"],
.site-header[data-closing="true"] {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  border-bottom: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  transform: none;
  transition: box-shadow var(--duration-medium) var(--ease-out);
  clip-path: inset(0 0 0 0);
}

/* MORE 覆盖层展开/收起过程中隐藏顶部 logo，避免压在菜单上 */
.site-header[data-open="true"] .nav-logo,
.site-header[data-closing="true"] .nav-logo {
  opacity: 0;
  pointer-events: none;
}

/* Opening: menu content wipes in top-to-bottom together with the brand
   cover, instead of appearing instantly on top of the homepage. */
.site-header[data-open="true"] .site-nav {
  animation: nav-menu-reveal 1500ms cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes nav-menu-reveal {
  0% {
    clip-path: inset(0 0 100% 0);
  }

  100% {
    clip-path: inset(0 0 0 0);
  }
}

.site-header::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--color-brand);
  clip-path: inset(0 0 100% 0);
  content: "";
  transition: clip-path 1500ms cubic-bezier(.16, 1, .3, 1);
}

.site-header[data-open="true"]::before {
  clip-path: inset(0 0 0 0);
}

/* Closing: the brand layer itself slides off to the top while the header
   stays put (transparent), so the nav can return independently. */
.site-header[data-closing="true"]::before {
  clip-path: inset(0 0 0 0);
  transform: translateY(-100%);
  transition: transform 1500ms cubic-bezier(.16, 1, .3, 1);
}

/* Menu content fades out first while the brand layer slides away. */
.site-header[data-closing="true"] .site-nav {
  opacity: 0;
}

/* Late closing phase: the header returns to its top-bar geometry
   (invisibly) and the nav bar fades back in together with the homepage,
   while the brand layer keeps sliding off behind it. */
.site-header[data-closing="true"][data-late="true"] {
  position: fixed;
  /* 关闭菜单的 late 阶段回到顶部导航栏位置，与上面的 .site-header 保持一致 */
  left: 0;
  top: 0;
  width: 100vw;
  height: var(--topbar-height);
  transform: none;
  clip-path: none;
  transition: none;
}

.site-header[data-closing="true"][data-late="true"] .site-nav {
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding-inline: var(--topbar-pad-x);
  opacity: 1;
  transform: none;
}

/* Restore the small text-nav styling for the late phase -- the big serif
   menu styling must not travel back to the homepage. */
.site-header[data-closing="true"][data-late="true"] .nav-links {
  position: static;
  left: auto;
  top: auto;
  align-items: center;
  flex-direction: row;
  gap: clamp(1rem, 2.4vw, 2rem);
  transform: none;
}

.site-header[data-closing="true"][data-late="true"] .nav-links a {
  min-height: 40px;
  justify-content: flex-start;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 1.05rem;
  line-height: normal;
  text-align: left;
}

.site-header[data-closing="true"][data-late="true"] .nav-toggle {
  position: static;
  right: auto;
  top: auto;
  transform: none;
  color: var(--color-text);
}

.site-header[data-closing="true"][data-late="true"] .nav-toggle-label {
  font-size: 1.05rem;
}

/* late 阶段顶部导航栏恢复，logo 一并淡回 */
.site-header[data-closing="true"][data-late="true"] .nav-logo {
  opacity: 1;
  pointer-events: auto;
}

.site-header[data-closing="true"][data-late="true"] .nav-toggle-label::after {
  content: none;
}

/* Homepage content fades out as the menu covers, fades back in as it leaves.
   照片信息已移入 main 内部（#image 区块），随 main 一起淡入淡出。 */
main {
  transition: opacity 600ms var(--ease-out, ease);
}

.site-header[data-open="true"] ~ main {
  opacity: 0;
}

/* While closing, hold the homepage fade-in until the late phase so the
   homepage content and the returning small nav appear together. */
.site-header[data-closing="true"] ~ main {
  transition-delay: 500ms;
}

/* 首屏照片背景上导航默认白色；滚过首屏（.is-scrolled）后变黑。
   颜色过渡与底部色块滑动同节奏。 */
.site-header:not([data-open="true"]):not([data-closing="true"]) .nav-links a,
.site-header:not([data-open="true"]):not([data-closing="true"]) .nav-toggle {
  color: #fffaf4;
  transition: color 750ms cubic-bezier(.22, 1, .36, 1);
}

.site-header.is-scrolled:not([data-open="true"]):not([data-closing="true"]) .nav-links a,
.site-header.is-scrolled:not([data-open="true"]):not([data-closing="true"]) .nav-toggle {
  color: var(--color-text);
}

.site-header:not([data-open="true"]):not([data-closing="true"]) {
  background: transparent;
}

/* After the closing slide finishes, hide the brand layer instantly --
   otherwise its clip-path transition would replay a wipe over the homepage. */
.site-header:not([data-open="true"]):not([data-closing="true"])::before {
  transition: none;
}

.site-header[data-open="true"] .site-nav,
.site-header[data-closing="true"] .site-nav {
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding-inline: 0;
}

.site-nav {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  gap: clamp(.5rem, 1.5vw, 1.25rem);
  padding-inline: var(--topbar-pad-x);
  margin-inline: 0;
  pointer-events: auto;
  transition: opacity 500ms var(--ease-out, ease);
}

/* ===== 顶部 logo："y" 签名，悬浮展开为 "yulijiang" ===== */
.nav-logo {
  display: inline-flex;
  align-items: center;
  /* 收起宽度只露出 "y" 字形；悬浮时展开到完整签名宽度 */
  width: 1.9rem;
  height: 2rem;
  overflow: hidden;
  color: var(--color-text);
  text-decoration: none;
  pointer-events: auto;
  transition: width 650ms var(--ease-out);
}

.nav-logo:hover {
  width: 10.6rem;
  color: var(--color-text);
}

.nav-logo-svg {
  display: block;
  flex: 0 0 auto;
  width: 10.6rem;
  max-width: none;
  height: auto;
}

.nav-logo-y-stroke {
  fill: none;
  /* 首屏照片背景上默认白色，滚过首屏后变黑（见下方 .is-scrolled 规则） */
  stroke: #fffaf4;
  stroke-width: 16;
  stroke-linecap: butt;
  stroke-linejoin: round;
  shape-rendering: geometricPrecision;
  transition: stroke 750ms cubic-bezier(.22, 1, .36, 1);
}

/* "ulijiang" 文字默认擦除隐藏，悬浮时随宽度展开逐个方向擦入 */
.nav-logo-text {
  fill: #fffaf4;
  font-family: "Source Han Sans SC", "Noto Sans CJK SC", "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 82px;
  font-weight: 500;
  letter-spacing: 4px;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 520ms var(--ease-out) 120ms, transform 520ms var(--ease-out) 120ms, fill 750ms cubic-bezier(.22, 1, .36, 1);
}

/* 滚过首屏后 logo 与导航文字一起变黑（含 MORE 关闭动画的 late 阶段） */
.site-header.is-scrolled:not([data-open="true"]):not([data-closing="true"]) .nav-logo-y-stroke,
.site-header.is-scrolled[data-closing="true"][data-late="true"] .nav-logo-y-stroke {
  stroke: var(--color-text);
}

.site-header.is-scrolled:not([data-open="true"]):not([data-closing="true"]) .nav-logo-text,
.site-header.is-scrolled[data-closing="true"][data-late="true"] .nav-logo-text {
  fill: var(--color-text);
}

/* MORE 关闭动画的 late 阶段：仍在首屏时导航恢复为白色 */
.site-header:not(.is-scrolled)[data-closing="true"][data-late="true"] .nav-links a,
.site-header:not(.is-scrolled)[data-closing="true"][data-late="true"] .nav-toggle {
  color: #fffaf4;
}

.nav-logo:hover .nav-logo-text {
  opacity: 1;
  transform: translateX(0);
}

.wordmark {
  position: static;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  justify-content: flex-start;
  gap: 0;
  overflow: hidden;
  padding-inline: .25rem;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: lowercase;
  white-space: nowrap;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.wordmark::before {
  content: none;
}

.wordmark span {
  opacity: 1;
  transform: translateX(0);
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.site-header[data-open="true"] .wordmark,
.site-header[data-closing="true"] .wordmark {
  position: absolute;
  left: clamp(1.25rem, 3vw, 2.5rem);
  top: clamp(1rem, 2.5vw, 2rem);
  transform: none;
}

.mark {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 22px;
  border: 1.3px solid var(--color-text);
  border-radius: 4px;
}

.mark::after {
  position: absolute;
  right: 6px;
  top: 4px;
  width: 2px;
  height: 12px;
  border-radius: 2px;
  background: var(--color-brand);
  content: "";
}

.nav-links {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: clamp(1rem, 2.4vw, 2rem);
  margin-top: 0;
  /* 顶栏里把选项整体推到右侧，与 MORE 按钮聚成一组 */
  margin-left: auto;
}

.nav-links a {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: flex-start;
  border-radius: 999px;
  padding-inline: .25rem;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 1.05rem;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 1;
  animation: nav-text-enter 1200ms cubic-bezier(.2, .85, .18, 1) both;
  animation-delay: calc(.16s + var(--nav-item-index, 0) * .08s);
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.nav-links a:nth-child(1) {
  --nav-item-index: 0;
}

.nav-links a:nth-child(2) {
  --nav-item-index: 1;
}

.nav-links a:nth-child(3) {
  --nav-item-index: 2;
}

.nav-links a:nth-child(4) {
  --nav-item-index: 3;
}

/* hover 不再强制改色：首屏保持白色、滚过后保持黑色，只保留扫线动画 */
.nav-links a[aria-current="page"],
.nav-links a:hover {
  background: transparent;
  opacity: 1;
}

/* Hover sweep underline: a thin line as wide as the link enters from the
   left edge and exits at the right edge, once per hover (0.8s). */
.site-header:not([data-open="true"]):not([data-closing="true"]) .nav-links a,
.site-header:not([data-open="true"]):not([data-closing="true"]) .nav-toggle {
  position: relative;
  overflow: hidden;
}

.site-header:not([data-open="true"]):not([data-closing="true"]) .nav-links a::after,
.site-header:not([data-open="true"]):not([data-closing="true"]) .nav-toggle::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 100%;
  height: 1px;
  /* 跟随文字颜色：首屏白线、滚过后黑线 */
  background: currentColor;
  transform: translateX(-101%);
}

.site-header:not([data-open="true"]):not([data-closing="true"]) .nav-links a:hover::after,
.site-header:not([data-open="true"]):not([data-closing="true"]) .nav-toggle:hover::after {
  animation: nav-line-sweep 800ms cubic-bezier(.4, 0, .2, 1) 1 both;
}

@keyframes nav-line-sweep {
  from {
    transform: translateX(-101%);
  }

  to {
    transform: translateX(101%);
  }
}

.site-header[data-open="true"] .nav-links,
.site-header[data-closing="true"] .nav-links {
  position: absolute;
  left: 50%;
  top: 50%;
  align-items: center;
  flex-direction: column;
  gap: clamp(.4rem, 1.2vh, .8rem);
  margin-top: 0;
  transform: translate(-50%, -50%);
}

.site-header[data-open="true"] .nav-links a,
.site-header[data-closing="true"] .nav-links a {
  min-height: auto;
  justify-content: center;
  background: transparent;
  color: var(--color-bg);
  font-family: "Libre Caslon Display", Georgia, serif;
  font-size: clamp(3.5rem, 2rem + 6.4vw, 8.2rem);
  line-height: .9;
  opacity: 1;
  text-align: center;
}

.site-header[data-open="true"] .nav-links a:hover,
.site-header[data-closing="true"] .nav-links a:hover {
  color: var(--color-text);
  transform: translateX(.2rem);
}

.back-link {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-muted);
  font-size: .9rem;
  text-decoration: none;
}

.nav-toggle {
  position: static;
  display: inline-flex;
  width: auto;
  min-width: 0;
  height: 40px;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  letter-spacing: 0;
  padding-inline: .25rem;
  text-transform: uppercase;
  transform: none;
  z-index: 2;
  margin-top: 0;
  animation: nav-text-enter 1200ms cubic-bezier(.2, .85, .18, 1) .5s both;
}

.site-header[data-open="true"] .nav-toggle,
.site-header[data-closing="true"] .nav-toggle {
  position: absolute;
  left: 50%;
  right: auto;
  top: auto;
  bottom: clamp(1.5rem, 4vh, 2.6rem);
  transform: translateX(-50%);
  color: var(--color-bg);
}

.site-header[data-open="true"] .nav-toggle-label,
.site-header[data-closing="true"] .nav-toggle-label {
  font-size: 0;
}

.site-header[data-open="true"] .nav-toggle-label::after,
.site-header[data-closing="true"] .nav-toggle-label::after {
  content: "CLOSE";
  display: inline-block;
  font-size: .78rem;
  letter-spacing: .45em;
  padding-left: .45em;
  padding-bottom: .55em;
  border-bottom: 1px solid var(--color-bg);
}

.nav-toggle-label {
  display: block;
}

/* ===== 灰黑色介绍版块（hero 之后、#writing 之前） =====
   背景用 ::before 实现，随 --intro-bg-shift 位移（慢）；
   白色卡片由 JS 直接改 transform（快）—— 同一滚动进度下卡片上升更快。 */
.intro-band {
  position: relative;
  display: grid;
  /* 加长：200vh 的灰黑呼吸区（留白大幅加大），卡片靠下放置；
     也让白卡追赶窗口能拉长到 ~1.6 倍视口高度（几何上由卡片文档位置决定） */
  min-height: 200vh;
  min-height: 200svh;
  align-items: end;
  justify-items: center;
  /* 不用 overflow: hidden：背景层需要向上延伸出界来遮住视差缝隙 */
  padding-block: clamp(4rem, 9vh, 7rem);
}

/* 背景层向上多延伸 60px（= 最大偏移量）：向下偏移时顶边仍与 hero 底边齐平，
   不会在 hero 与版块之间露出米白缝；底部随偏移向下探出，也不会露缝。
   归位（shift=0）时顶边盖住 hero 底部 60px——此时 hero 已完全渐暗，色差不可见。 */
.intro-band::before {
  position: absolute;
  inset: -60px 0 0 0;
  background: #2a2926;
  content: "";
  transform: translateY(var(--intro-bg-shift, 60px));
  will-change: transform;
}

/* ===== 装饰性双圈轮盘（灰黑版块背景层上的"巨大仪器"） =====
   容器绝对定位裁进版块范围；stage 高 100vh、自身 overflow:hidden，
   SVG 为 200vh 见方从 stage 顶边排起 → 圆心正好落在 stage 底边，
   圆心水平线以下一律不可见，严格只露半圈。
   stage 的 top 由 JS 每帧驱动：圆心先锚定视口底边（半圈从屏幕底边探出），
   版块底边升上来后贴着版块底边一起离开 */
.intro-dial {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.intro-dial-stage {
  position: absolute;
  left: 50%;
  top: 100vh;
  width: 200vh;
  height: 100vh;
  transform: translateX(-50%);
  overflow: hidden;
}

.intro-dial-svg {
  display: block;
  width: 200vh;
  height: 200vh;
}

.intro-dial-ring {
  fill: none;
  stroke: #9d998f;
  stroke-width: 1.1;
}

.intro-dial-tick {
  stroke: #9d998f;
  stroke-width: 1;
}

.intro-dial-label {
  fill: #a8a49b;
  font-family: var(--font-mono);
  /* 径向排布：最长名 "MORE PROJECTS" 约 150 单位，须保证 R+26+150 ≤ 840（viewBox 半径） */
  font-size: 16px;
  letter-spacing: 2px;
}

/* 外圈顺时针 120s/圈，内圈逆时针 90s/圈；绕各自包围盒中心旋转 */
.intro-dial-outer {
  transform-box: fill-box;
  transform-origin: center;
  animation: dial-spin-cw 120s linear infinite;
}

.intro-dial-inner {
  transform-box: fill-box;
  transform-origin: center;
  animation: dial-spin-ccw 90s linear infinite;
}

@keyframes dial-spin-cw {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dial-spin-ccw {
  to {
    transform: rotate(-360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-dial-outer,
  .intro-dial-inner {
    animation: none;
  }
}

/* 白色介绍卡片：米白底、大留白。
   覆盖 3/4（scrollY≈75vh）才开始出现：位移与不透明度都由 JS 滚动驱动，
   这里给一个"藏在视口下方"的初始值防 JS 加载前的闪烁 */
.intro-card {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(34rem, calc(100vw - 40px));
  /* 加长：更高最小高度 + 更大留白 */
  min-height: 48vh;
  align-content: center;
  gap: 1.25rem;
  border-radius: var(--radius-main);
  background: var(--color-bg);
  color: var(--color-text);
  padding: clamp(2.5rem, 5vw, 4rem);
  opacity: 0;
  transform: translateY(45vh);
  will-change: transform, opacity;
}

/* 卡片内小标签：mono、黑色系（不用品牌色） */
.intro-card .ly-eyebrow {
  margin: 0;
  color: var(--color-text-soft);
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.intro-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem);
  font-weight: 500;
  line-height: 1.2;
}

.intro-text {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* 覆盖式滚动：hero 固定在视口原地（z-index 0），后续内容垫 100vh 占位后
   从底部滑上来盖住它；各 section 用实底背景 + z-index 1 形成覆盖层 */
.hero {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: flex;
  order: 1;
  height: 100vh;
  height: 100svh;
  min-height: 100vh;
  min-height: 100svh;
  align-items: center;
  padding-block: 0;
  overflow: hidden;
}

#top {
  /* 给 fixed hero 留出首屏占位：后续内容从这里开始覆盖 */
  padding-top: 100vh;
  padding-top: 100svh;
}

/* 覆盖在 fixed hero 之上的内容层：实底 + 相对定位 + 更高层级 */
main > .ly-section,
main > .intro-band {
  position: relative;
  z-index: 1;
}

main > .ly-section {
  background: var(--color-bg);
}

/* about-band 保留自己的 surface 底色 */
main > .about-band {
  background: var(--color-surface);
}

/* 首屏全屏背景图（夜景三轮车）+ 调暗遮罩，保证白色文字可读 */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../assets/photos/C_ND000039.jpg") center / cover no-repeat;
}

/* 第一层常驻调暗：50% 黑，保证首屏白字可读。
   注意伪元素叠放顺序：::before 在下、::after 在上，
   因此 50% 黑用 ::before，滚动渐暗的灰黑层用 ::after 压在最上面。 */
.hero-bg::before {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / .5);
  content: "";
}

/* 滚动渐暗第二层（最顶层）：hero 随 --hero-dim（0→1）淡入灰黑遮罩。
   颜色直接取 intro-band 同款 #2a2926、opacity 到 1：
   覆盖完成时合成色与灰黑版块完全一致，无缝衔接；中间帧保持单调变暗。 */
.hero-bg::after {
  position: absolute;
  inset: 0;
  background: #2a2926;
  content: "";
  opacity: var(--hero-dim, 0);
}

/* hero 内容压在背景与遮罩之上 */
.hero .hero-grid {
  position: relative;
  z-index: 1;
}

/* 灰黑色介绍版块：插在 hero 与 #writing 之间（order: 2） */
#intro {
  order: 2;
}

#writing {
  order: 3;
}

#video {
  order: 4;
}

#image {
  order: 5;
}

#work {
  order: 6;
}

#ai {
  order: 7;
}

#about {
  order: 8;
}

main > .ly-section {
  min-height: 100vh;
  min-height: 100svh;
}

.hero-grid {
  display: grid;
  width: var(--container-width);
  align-items: end;
  gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .72fr);
  margin-inline: auto;
}

#top > .hero .hero-grid {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.hero-copy {
  display: grid;
  gap: 1.5rem;
  max-width: 46rem;
}

#top > .hero .hero-copy {
  justify-items: center;
  max-width: min(72rem, 100%);
  text-align: center;
}

.hero-copy > * {
  animation: soft-enter 720ms var(--ease-out) both;
}

.hero-copy > *:nth-child(1) {
  animation-delay: 80ms;
}

.hero-copy > *:nth-child(2) {
  animation-delay: 430ms;
}

.hero-copy > *:nth-child(3) {
  animation-delay: 560ms;
}

.hero-copy > *:nth-child(4) {
  animation-delay: 560ms;
}

.hero-copy .ly-body {
  max-width: 58ch;
}

.hero-visual-stage {
  position: relative;
  display: grid;
  width: min(78vw, 62rem);
  /* 照片已搬走，首屏只剩大标题：去掉原来的超大 min-height，让标题在首屏自然居中 */
  place-items: center;
  isolation: isolate;
}

/* 照片轮播已搬到 #image 区块：.photos-layout 负责水平排列轮播与照片信息 */
.photos-layout {
  display: flex;
  width: var(--container-width);
  align-items: center;
  justify-content: center;
  gap: var(--hero-side-gap);
  margin-inline: auto;
}

.photo-stage {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.hero-photo-frame {
  /* 在 photos 区块内走正常文档流，不再相对首屏绝对居中 */
  position: relative;
  z-index: 1;
  width: var(--hero-photo-width);
  max-width: 100%;
  aspect-ratio: 1800 / 1204;
  overflow: hidden;
}

.hero-photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.hero-photo.is-visible {
  opacity: 1;
}

.hero-photo.is-active {
  animation: hero-photo-slide-enter 1000ms cubic-bezier(.2, .85, .18, 1) forwards;
}

.hero-photo-controls {
  --svg-title-x: 0;
  position: absolute;
  left: clamp(.9rem, 2vw, 1.35rem);
  bottom: clamp(.58rem, 1.35vw, .92rem);
  z-index: 999;
  display: flex;
  align-items: center;
  gap: .82rem;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(-78px) rotate(-1.4deg);
  transform-origin: left bottom;
  animation: svg-title-char-drop 2000ms cubic-bezier(.2, .85, .18, 1) 120ms forwards;
  animation-play-state: paused;
  pointer-events: none;
  will-change: transform, filter, opacity;
}

.photo-stage[data-hero-settle="true"] .hero-photo-controls {
  animation-play-state: running;
  pointer-events: auto;
}

.hero-photo-control,
.hero-photo-timer {
  width: 1.26rem;
  height: 1.26rem;
  border-radius: 50%;
}

.hero-photo-control {
  display: inline-grid;
  place-items: center;
  border: 0;
  background: #fffaf4;
  color: var(--color-text);
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.hero-photo-control span {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: .82;
  transform: translateY(-.06em);
}

.hero-photo-control:hover {
  background: #fffaf4;
}

.hero-photo-timer {
  --hero-photo-progress: 106.814;
  position: relative;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.hero-photo-timer::after {
  position: absolute;
  border-radius: 50%;
  content: "";
}

.hero-photo-timer::after {
  inset: 0;
  background: #fffaf4;
}

.hero-photo-toggle-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: block;
  color: var(--color-text);
  transform: translate(-50%, -50%);
}

.hero-photo-toggle-icon-pause {
  width: .34rem;
  height: .44rem;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.hero-photo-toggle-icon-play {
  width: 0;
  height: 0;
  border-top: .25rem solid transparent;
  border-bottom: .25rem solid transparent;
  border-left: .4rem solid currentColor;
  opacity: 0;
  transform: translate(-42%, -50%);
}

.hero-photo-timer.is-paused .hero-photo-toggle-icon-pause {
  opacity: 0;
}

.hero-photo-timer.is-paused .hero-photo-toggle-icon-play {
  opacity: 1;
}

.hero-photo-timer-ring {
  position: absolute;
  inset: -1.5px;
  z-index: 1;
  display: block;
  width: calc(100% + 3px);
  height: calc(100% + 3px);
  max-width: none;
  overflow: visible;
  transform: rotate(-90deg);
}

.hero-photo-timer-ring-ghost {
  pointer-events: none;
  animation: hero-photo-timer-ring-collapse 2000ms cubic-bezier(.2, .85, .18, 1) forwards;
}

.hero-photo-timer-path {
  fill: none;
  stroke: #fffaf4;
  stroke-width: 6.4;
  stroke-linecap: round;
  stroke-dasharray: 106.814;
  stroke-dashoffset: var(--hero-photo-progress);
}

.hero-photo-timer.is-paused .hero-photo-timer-path {
  opacity: 1;
}

.hero-photo-signature {
  --svg-title-x: 38%;
  position: absolute;
  right: clamp(.9rem, 2vw, 1.35rem);
  bottom: clamp(.58rem, 1.35vw, .92rem);
  z-index: 999;
  display: block;
  width: auto;
  height: 1.26rem;
  max-width: none;
  overflow: visible;
  opacity: 0;
  filter: blur(8px);
  transform: translate(38%, -78px) rotate(-1.4deg);
  transform-origin: right bottom;
  animation: svg-title-char-drop 2000ms cubic-bezier(.2, .85, .18, 1) 120ms forwards;
  animation-play-state: paused;
  pointer-events: none;
  will-change: transform, filter, opacity;
}

.photo-stage[data-hero-settle="true"] .hero-photo-signature {
  animation-play-state: running;
}

.hero-signature-y-stroke {
  fill: none;
  stroke: #fffaf4;
  stroke-width: 16;
  stroke-linecap: butt;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  shape-rendering: geometricPrecision;
}

.hero-signature-y-stroke-lower {
  animation-delay: 220ms;
}

.hero-photo-signature.is-playing .hero-signature-y-stroke {
  animation: hero-signature-y-draw 720ms cubic-bezier(.55, 0, .2, 1) forwards;
}

.hero-signature-text {
  fill: #fffaf4;
  font-family: "Source Han Sans SC", "Noto Sans CJK SC", "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 82px;
  font-weight: 500;
  letter-spacing: 4px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .25rem;
}

#top > .hero .hero-actions {
  justify-content: center;
}

.hero-note {
  max-width: 29rem;
  border-left: 2px solid var(--color-brand);
  padding-left: 1rem;
  animation: rule-enter 780ms var(--ease-out) 620ms both;
}

.media-frame {
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--color-surface);
  transform-origin: center;
}

.media-frame img {
  display: block;
  width: 100%;
  transition: transform var(--duration-medium) var(--ease-out);
}

.media-frame:hover img {
  transform: scale(1.025);
}

.hero-grid > .media-frame {
  animation: media-enter 920ms var(--ease-out) 360ms both;
}

.ly-display[data-title-lines] {
  max-width: 13ch;
  overflow: visible;
  font-family: "Libre Caslon Display", Georgia, serif;
  font-style: normal;
  font-weight: 400;
  transform: skewX(-7deg);
  transform-origin: left center;
}

.hero-title-svg {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  overflow: visible;
  transform: skewX(-7deg);
  transform-origin: center;
  /* 不再有叠在照片上的需求：去掉 hero-title-settle 缩小位移动画，标题保持原始大小 */
  pointer-events: none;
}

.hero-title-svg [data-svg-title-line] {
  opacity: 0;
  pointer-events: none;
}

.hero-title-line {
  fill: var(--color-text);
  stroke: none;
  font-family: "Libre Caslon Display", Georgia, serif;
  font-size: 150px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

/* 首页首屏大标题在调暗的照片背景上用白色（含入场动画拆出的逐字字符） */
#top .hero-title-line {
  fill: #fffaf4;
}

.hero-title-char {
  opacity: 0;
  stroke: none;
  paint-order: fill;
  filter: blur(var(--svg-title-blur, 8px));
  transform: translateY(-78px) rotate(var(--svg-title-rotate, 0deg));
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: svg-title-char-drop var(--svg-title-duration, 2000ms) cubic-bezier(.2, .85, .18, 1) forwards;
  animation-delay: var(--svg-title-delay, 120ms);
  animation-play-state: paused;
  will-change: transform, filter, opacity;
}

.hero-visual-stage[data-hero-active="true"] .hero-title-svg {
  animation-play-state: running;
}

.hero-visual-stage[data-hero-active="true"] .hero-title-char {
  animation-play-state: running;
}

/* settle 后标题保持深色、不再缩小：原来的 hero-title-settle / hero-title-color-settle
   是为“标题收缩并变白叠在照片上”设计的，照片搬走后该规则会让标题在白底上隐形，
   字符仅靠 svg-title-char-drop 的 forwards 填充保持最终状态即可。 */

@keyframes svg-title-char-drop {
  0% {
    opacity: 0;
    filter: blur(var(--svg-title-blur, 8px));
    transform: translate(var(--svg-title-x, 0), -78px) rotate(var(--svg-title-rotate, 0deg));
  }

  34% {
    opacity: 1;
    filter: blur(calc(var(--svg-title-blur, 8px) * .18));
  }

  52% {
    filter: blur(0);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate(var(--svg-title-x, 0), 0) rotate(0deg);
  }
}

@keyframes hero-photo-slide-enter {
  0% {
    opacity: 0;
    filter: blur(18px);
    transform: scale(1.18);
  }

  100% {
    opacity: 1;
  }
}

@keyframes hero-photo-timer-ring-collapse {
  0% {
    opacity: 1;
    transform: rotate(-90deg) scale(1);
  }

  100% {
    opacity: 0;
    transform: rotate(-90deg) scale(0);
  }
}

@keyframes hero-signature-y-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes hero-title-settle {
  0% {
    transform: skewX(-7deg) translateY(0) scale(1);
  }

  100% {
    transform: skewX(-7deg) translateY(clamp(5.25rem, 14vw, 9rem)) scale(.42);
  }
}

@keyframes hero-title-color-settle {
  0% {
    fill: var(--color-text);
  }

  100% {
    fill: #fffaf4;
  }
}

#top .ly-display[data-title-lines] {
  max-width: 15ch;
  font-size: clamp(4.4rem, 2.9rem + 7.2vw, 10.5rem);
  transform-origin: center;
}

#top .ly-button {
  border-color: var(--color-border);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text);
  padding-inline: 1.45rem;
}

#top .ly-button:hover {
  border-color: var(--color-brand);
  background: transparent;
  color: var(--color-brand);
}

.section-head {
  display: grid;
  width: var(--container-width);
  gap: 1rem;
  margin-inline: auto;
  margin-bottom: clamp(2.25rem, 4vw, 4rem);
}

.section-head.split {
  grid-template-columns: minmax(0, .85fr) minmax(260px, .55fr);
  align-items: end;
}

.section-kicker {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.section-kicker::after {
  flex: 1;
  height: 1px;
  max-width: 112px;
  background: var(--color-border);
  content: "";
}

.work-grid {
  display: grid;
  width: var(--container-width);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-inline: auto;
}

.work-card {
  display: grid;
  min-height: 100%;
  gap: 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-main);
  background: var(--color-surface-soft);
  padding: clamp(1.25rem, 2vw, 1.7rem);
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.work-card:hover {
  border-color: var(--color-brand);
  color: inherit;
  transform: translateY(-2px);
}

.work-grid .ly-reveal:nth-child(2),
.selection-grid .ly-reveal:nth-child(2),
.masonry-light .ly-reveal:nth-child(2) {
  transition-delay: 90ms;
}

.work-grid .ly-reveal:nth-child(3),
.selection-grid .ly-reveal:nth-child(3),
.masonry-light .ly-reveal:nth-child(3) {
  transition-delay: 180ms;
}

.work-card h3,
.article-item h3,
.video-item h3,
.selection-card h2,
.gallery-caption h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 1.1rem + .7vw, 1.9rem);
  font-weight: 500;
  line-height: 1.15;
}

.work-card p,
.article-item p,
.video-item p,
.selection-card p,
.gallery-caption p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.meta {
  color: var(--color-text-soft);
  font-family: var(--font-mono);
  font-size: .75rem;
}

.rule-list {
  display: grid;
  width: var(--container-width);
  border-top: 1px solid var(--color-border-soft);
  margin-inline: auto;
}

.article-item,
.video-item {
  display: grid;
  grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 3rem);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--color-border-soft);
}

.article-item > div,
.video-item > div {
  display: grid;
  gap: .65rem;
}

.rule-list .ly-reveal:nth-child(2),
.lab-grid .ly-reveal:nth-child(2) {
  transition-delay: 80ms;
}

.rule-list .ly-reveal:nth-child(3),
.lab-grid .ly-reveal:nth-child(3) {
  transition-delay: 160ms;
}

.rule-list .ly-reveal:nth-child(4),
.lab-grid .ly-reveal:nth-child(4) {
  transition-delay: 240ms;
}

.gallery-grid {
  display: grid;
  width: var(--container-width);
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(1rem, 2.5vw, 1.7rem);
  margin-inline: auto;
}

.gallery-stack {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.7rem);
}

.gallery-caption {
  display: grid;
  gap: .7rem;
  margin-top: .9rem;
}

.about-band {
  background: var(--color-surface);
}

.about-grid {
  display: grid;
  width: var(--container-width);
  grid-template-columns: minmax(0, .7fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  margin-inline: auto;
}

.about-text {
  display: grid;
  gap: 1rem;
}

.about-facts {
  display: grid;
  gap: 1px;
  align-self: start;
  background: var(--color-border-soft);
}

.about-fact {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1rem;
  background: var(--color-surface);
  padding-block: 1.05rem;
}

.about-fact span:first-child {
  color: var(--color-text-soft);
  font-size: .9rem;
}

.site-footer {
  padding-block: 3rem;
}

.footer-inner {
  display: flex;
  width: var(--container-width);
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-inline: auto;
  border-top: 1px solid var(--color-border-soft);
  padding-top: 1.5rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.selection-hero {
  width: var(--container-width);
  margin-inline: auto;
  padding-block: clamp(4.5rem, 8vw, 8rem) 3rem;
}

.selection-hero .ly-display {
  max-width: 15ch;
}

.selection-lead {
  display: grid;
  max-width: 62ch;
  gap: 1.2rem;
  margin-top: 1.4rem;
}

.selection-grid {
  display: grid;
  width: var(--container-width);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-inline: auto;
  padding-bottom: var(--section-space);
}

.selection-card {
  display: grid;
  gap: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-main);
  background: var(--color-surface-soft);
  padding: 1rem;
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.selection-card:hover {
  border-color: var(--color-brand);
  color: inherit;
  transform: translateY(-2px);
}

.selection-preview {
  display: grid;
  min-height: 250px;
  align-content: space-between;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--color-bg);
  padding: 1rem;
}

.preview-line {
  height: 1px;
  background: var(--color-border-soft);
}

.preview-title {
  display: grid;
  gap: .55rem;
}

.preview-title span {
  display: block;
  height: 9px;
  border-radius: 99px;
  background: var(--color-text);
}

.preview-title span:nth-child(1) {
  width: 64%;
}

.preview-title span:nth-child(2) {
  width: 88%;
}

.preview-title span:nth-child(3) {
  width: 46%;
  background: var(--color-brand);
}

.preview-media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}

.preview-media-grid span {
  min-height: 68px;
  border-radius: 4px;
  background: var(--color-surface);
}

.preview-media-grid span:nth-child(2) {
  background: #e7e1d7;
}

.preview-media-grid span:nth-child(3) {
  background: #cbc3b5;
}

.preview-list {
  display: grid;
  gap: .65rem;
}

.preview-list span {
  display: block;
  height: 1px;
  background: var(--color-border);
}

.choice-meta {
  display: grid;
  gap: .45rem;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.tag {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: .24rem .42rem;
  color: var(--color-text-muted);
  font-size: .78rem;
  line-height: 1;
}

.gallery-hero .hero-grid {
  grid-template-columns: minmax(0, .8fr) minmax(340px, 1fr);
}

.gallery-hero .ly-display {
  max-width: 10ch;
}

.wide-showcase {
  width: var(--container-width);
  margin-inline: auto;
}

.wide-showcase .media-frame {
  margin-bottom: 1rem;
}

.masonry-light {
  display: grid;
  width: var(--container-width);
  grid-template-columns: 1fr 1.35fr 1fr;
  gap: clamp(1rem, 2.2vw, 1.6rem);
  margin-inline: auto;
}

.masonry-light .media-frame:nth-child(2) {
  margin-top: 3rem;
}

.masonry-light .media-frame:nth-child(3) {
  margin-top: 1.25rem;
}

.workbench-hero {
  border-bottom: 1px solid var(--color-border-soft);
}

.workbench-hero .hero-grid {
  align-items: center;
}

.terminal-panel {
  display: grid;
  gap: 1rem;
  border-radius: var(--radius-main);
  background: var(--color-text);
  color: var(--color-bg);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  font-family: var(--font-mono);
  animation: panel-enter 900ms var(--ease-out) 420ms both;
}

.terminal-panel p {
  margin: 0;
  color: rgb(251 250 246 / 72%);
  font-size: .85rem;
  line-height: 1.65;
}

.terminal-panel strong {
  color: var(--color-bg);
  font-weight: 500;
}

.terminal-cursor {
  color: var(--color-brand);
  animation: cursor-blink 1.1s steps(2, start) infinite;
}

.lab-grid {
  display: grid;
  width: var(--container-width);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px;
  background: var(--color-border-soft);
  margin-inline: auto;
}

.lab-item {
  display: grid;
  gap: .9rem;
  background: var(--color-bg);
  padding: clamp(1.25rem, 3vw, 2rem);
}

.lab-item h3 {
  margin: 0;
  font-size: clamp(1.15rem, 1rem + .4vw, 1.45rem);
  font-weight: 500;
}

.lab-item p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.6;
}

@keyframes soft-enter {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rule-enter {
  0% {
    opacity: 0;
    transform: translateX(16px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes panel-enter {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(.985);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes media-enter {
  0% {
    opacity: 0;
    clip-path: inset(0 0 18% 0);
    transform: translateY(24px) scale(.985);
  }

  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0) scale(1);
  }
}

@keyframes cursor-blink {
  50% {
    opacity: .18;
  }
}

@keyframes nav-text-enter {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: translateX(-28px) rotate(-1deg);
  }

  42% {
    opacity: 1;
    filter: blur(1.5px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0) rotate(0deg);
  }
}

/* 窄屏下隐藏照片信息：已改为 flex 布局，用 display:none 避免留下空白占位 */
@media (max-width: 640px) {
  .hero-photo-info {
    display: none;
  }
}

@media (max-width: 1320px) {
  .hero-photo-info {
    display: none;
  }
}

@media (max-width: 920px) {
  .hero-grid,
  .section-head.split,
  .gallery-grid,
  .about-grid,
  .gallery-hero .hero-grid,
  .workbench-hero .hero-grid {
    grid-template-columns: 1fr;
  }

  /* 照片区块在窄屏下纵向堆叠（照片信息此时已被上面的规则隐藏） */
  .photos-layout {
    flex-direction: column;
  }

  .work-grid,
  .selection-grid,
  .masonry-light {
    grid-template-columns: 1fr;
  }

  .masonry-light .media-frame:nth-child(2),
  .masonry-light .media-frame:nth-child(3) {
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .site-shell {
    --nav-rail-width: 96px;
    --container-width: min(1120px, calc(100vw - 32px));
  }

  /* 窄屏：顶栏只留 logo + MORE 按钮，文字导航收进 MORE 覆盖层 */
  .site-header {
    --topbar-height: 3.4rem;
  }

  .site-header:not([data-open="true"]):not([data-closing="true"]) .nav-links,
  .site-header[data-closing="true"][data-late="true"] .nav-links {
    display: none;
  }

  .site-header[data-open="true"],
  .site-header[data-closing="true"] {
    width: 100vw;
  }

  .site-nav {
    gap: clamp(.22rem, .65vh, .45rem);
  }

  .site-header[data-open="true"] .site-nav,
  .site-header[data-closing="true"] .site-nav {
    padding: .8rem 1.35rem;
  }

  .wordmark {
    min-height: 38px;
    padding-inline: .28rem;
  }

  .wordmark::before {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  .nav-links a {
    min-height: 36px;
    padding-inline: .25rem;
    font-size: .98rem;
  }

  .site-header[data-open="true"] .nav-links a {
    font-size: clamp(3.4rem, 2rem + 12vw, 7rem);
  }

  .hero {
    padding-block: 0;
  }

  .hero-actions {
    flex-direction: column;
  }

  .ly-button {
    width: 100%;
  }

  #top .ly-button {
    width: auto;
  }

  .article-item,
  .video-item,
  .about-fact {
    grid-template-columns: 1fr;
    gap: .65rem;
  }

  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-delay: 0ms !important;
    transition-delay: 0ms !important;
  }

  .nav-links a,
  .nav-toggle {
    filter: none !important;
    transform: none !important;
  }

  .hero-photo-controls,
  .hero-photo-signature {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .hero-signature-y-stroke {
    stroke-dashoffset: 0 !important;
  }

}

/* Photo info panel: 照片信息，位于 #image 区块内照片轮播的右侧。
   已改为相对布局（.photos-layout 的 flex 子项），与轮播水平对齐并垂直居中。 */
.hero-photo-info {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 1.2rem;
  text-align: left;
  pointer-events: none;
}

/* Two stacked layers enable the crossfade: outgoing info fades out while
   incoming info fades in at the same time, with a pronounced blur. */
.hero-photo-info-layer {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: clamp(.18rem, .72vh, .45rem);
  opacity: 0;
  filter: blur(9px);
  transition:
    opacity 1400ms var(--ease-out, ease),
    filter 1400ms var(--ease-out, ease);
}

.hero-photo-info-layer.is-current {
  opacity: 1;
  filter: blur(0);
}

/* The right-slide entrance animation belongs to the first reveal only;
   later photo changes crossfade whole layers instead. */
.hero-photo-info-layer:first-child p {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  white-space: nowrap;
  animation: photo-info-enter 1200ms cubic-bezier(.2, .85, .18, 1) both;
  animation-delay: calc(.16s + var(--info-item-index, 0) * .08s);
  animation-play-state: paused;
}

.hero-photo-info[data-hero-active="true"] .hero-photo-info-layer:first-child p {
  animation-play-state: running;
}

.hero-photo-info-layer p {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  white-space: nowrap;
}

.hero-photo-info-layer p:nth-child(1) {
  --info-item-index: 0;
}

.hero-photo-info-layer p:nth-child(2) {
  --info-item-index: 1;
}

.hero-photo-info-layer p:nth-child(3) {
  --info-item-index: 2;
}

.hero-photo-info-layer p:nth-child(4) {
  --info-item-index: 3;
}

.hero-photo-info-layer p:nth-child(5) {
  --info-item-index: 4;
}

/* Mirrored counterpart of nav-text-enter: slides in from the right. */
@keyframes photo-info-enter {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: translateX(28px) rotate(1deg);
  }

  42% {
    opacity: 1;
    filter: blur(1.5px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0) rotate(0deg);
  }
}