@font-face {
  font-family: "heading-display";
  src: url("../assets/fonts/garabosse-nonpareille.ttf") format("truetype");
  font-display: swap;
}

.section-title,
.info-heading {
  font-family: "fr", "cn", serif;
  text-transform: uppercase;
}

/* ========== 字体 ========== */
@font-face {
  font-family: "cn";
  src: url("../assets/fonts/ChillJinshuMinchoJPTextMedium.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+FF00-FFEF, U+20000-3134F;
}

@font-face {
  font-family: "fr";
  src: url("../assets/fonts/garabosse-mignonne-618014.ttf") format("opentype");
  font-display: swap;
  unicode-range: U+0000-024F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF;
}


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

body {
  min-height: 100vh;
  margin: 0;
  padding: 2vw;
  padding-bottom: 3vh;

  font-family: "fr", "cn", serif;
  --text-line-height: 1.3;
  line-height: var(--text-line-height); /* 以现有项目标题的行距为标准 */
  /*text-align: center;*/
  color: #28282B;
}

a {
  color: inherit;
}

a:hover {
  text-decoration: underline;
}


/* ========== 首页文字 ========== */
main.indexfont {
  --spacing-unit: 0.3em;
  --group-gap: calc(var(--spacing-unit) * 6);
  --section-gap: calc(var(--spacing-unit) * 12);
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  width: 100%;
  font-size: clamp(16px, 2.35vw, 48px);
}

.indexfont p {
  margin: 0;
  padding-bottom: 0;

  font-family: "fr", "cn", serif;
  letter-spacing: 0;
}


/* 教育经历：条目之间使用正常文本行距。 */
#Education .education-entry {
  display: block;
}

#Education .education-entry + .education-entry {
  margin-top: 0;
}

/* ========== 中文模式 ========== */
body.lang-cn main.indexfont {
  font-size: clamp(18px, 2.1vw, 44px);
}

body.lang-cn .indexfont p {
  font-family: "fr", "cn", serif;
  font-size: clamp(18px, 2.1vw, 44px);
}

/* 拉丁字母、数字保持原字距；仅汉字和中文标点增加字距。 */
body.lang-cn .indexfont p { letter-spacing: normal; }
body.lang-cn .cn-spaced-text,
body.lang-cn .project-cn-text { letter-spacing: 0.08em; }

/* 中文正文和项目列表使用相同描边。 */
body.lang-cn .indexfont p,
body.lang-cn #project-list {
  -webkit-text-stroke: 0.15px currentColor;
}

body.lang-cn #bio {
  line-height: inherit; /* 中文简介与项目标题保持一致 */
  text-align: justify;
  text-justify: inter-ideograph;
}


/* ========== 项目列表 ========== */
.project-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 分类和个人信息小节统一为 3 倍间距。 */
#project-list,
.info-group {
  display: flex;
  flex-direction: column;
  gap: var(--group-gap);
}

.section-title {
  margin: 0 0 var(--spacing-unit);
}

.info-heading {
  display: inline-block;
  padding-bottom: var(--spacing-unit);
}

.project-item {
  cursor: pointer;
}

/* 相邻项目不增加额外间距。 */
.project-list > [data-project-id] + [data-project-id] {
  margin-top: 0;
}

/* 展览首项在点击前显示紫色提示。 */
.project-item.is-click-hint { color: blueviolet; }
@media (hover: hover) and (pointer: fine) {
  .project-item:hover {
    color: blueviolet;
    position: relative;
    z-index: 10;
  }
}


/* ========== 页脚 ========== */
.footer {
  font-family: "fr", "cn", serif;
}


/* ========== 右下角按钮 ========== */
#btnContainer {
  position: fixed;
  z-index: 100;
  right: 3vw;
  bottom: 3vw;

  display: flex;
  gap: 1vw;
}

#btnContainer button {
  padding: 6px 12px;
  border: none;
  border-radius: 20px;

  color: white;
  background: blueviolet;

  font-family: "fr", "cn", serif;
  font-size: 18px;
  cursor: pointer;
}

.nav-btn:hover {
  opacity: 0.8;
  transform: scale(1.05);
}


/* ========== 项目窗口 ========== */
#windows[hidden] {
  display: none;
}

#windows {
  position: fixed;
  z-index: 999999;
  top: 3vh;
  right: 2vw;

  /* 图片未加载时，默认使用横图 4:3 尺寸。 */
  width: min(78vw, calc(72vh * var(--image-ratio, 1.333333))) !important;

  transition: width 0.2s cubic-bezier(.22, .61, .36, 1);
  will-change: width;
}

/* 竖图窗口：768 × 1024，比例 3:4。 */
#windows.is-portrait {
  width: min(58vw, 65vh) !important;
}

/* 横图窗口：1024 × 768，比例 4:3。 */
#windows.is-paysage {
  width: min(78vw, calc(72vh * var(--image-ratio, 1.333333))) !important;
}

#windows figure {
  margin: 0;
  overflow: hidden;

  border-radius: 1rem;
  background: rgba(180, 180, 180, 0.15);
  box-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.18);

  backdrop-filter: invert(0.98) blur(2.5px);
  -webkit-backdrop-filter: invert(1) blur(10px);
}

#windows figcaption {
  position: relative;
  color: white;
  min-height: 2.4rem;
  padding: 0.7rem 1rem 0.7rem 2.4rem;

  font-size: 1rem;
  text-align: left;
}

#windows .num {
  float: right;
}


/* ========== 关闭按钮 ========== */
#windows .close {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;

  width: 0.9rem;
  height: 0.9rem;
  padding: 0;
  border: none;
  border-radius: 50%;

  background: #ff5f57;
border: 1px solid #e0443e;
  cursor: pointer;
}


/* ========== 图片画布 ========== */
.slider {
  position: relative;
  width: 100%;

  /*
   * 默认横图高度：
   * 78vw × 3/4 = 58.5vw
   * 96vh × 3/4 = 72vh
   */
   aspect-ratio: var(--image-ratio, 4 / 3);

  margin: 0;
  overflow: hidden;

  transition: height 0.2s cubic-bezier(.22, .61, .36, 1);
  will-change: height;
}

/* 竖图画布：3:4。 */
#windows.is-portrait .slider {
  aspect-ratio: 3 / 4;
}

/* 横图画布：4:3。 */
#windows.is-paysage .slider {
  aspect-ratio: var(--image-ratio, 4 / 3);
}

.slider-track {
  position: absolute;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;

  transform: translate3d(0, 0, 0);
  transition: transform 0.2s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

.slider-track img {
  display: block;
  flex: 0 0 100%;

  width: 100%;
  min-width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}


/* ========== 图片左右点击区域 ========== */
.slide-zone {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;

  width: 50%;
  padding: 0;
  border: none;
  background: transparent;
}

.prev-zone {
  left: 0;
  cursor: w-resize;
}

.next-zone {
  right: 0;
  cursor: e-resize;
}


/* ========== 平板 ========== */
@media (max-width: 900px) {
  body {
    padding: 24px 4vw 88px;
  }

  main.indexfont {
    width: 100%;
    font-size: clamp(18px, 2.8vw, 26px);
    overflow-wrap: anywhere;
  }

  body.lang-cn main.indexfont,
  body.lang-cn .indexfont p {
    font-size: clamp(17px, 2.4vw, 22px);
  }

  #btnContainer button {
    min-width: 44px;
    min-height: 44px;
    font-size: 16px;
  }
}

/* ========== 手机正文 ========== */
@media (max-width: 768px) {
  body {
    padding: max(20px, env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      calc(88px + env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
  }

  main.indexfont {
    font-size: clamp(18px, 4.6vw, 24px);
  }

  body.lang-cn main.indexfont,
  body.lang-cn .indexfont p {
    font-size: clamp(17px, 4.3vw, 22px);
  }

  #btnContainer {
    right: max(16px, env(safe-area-inset-right));
    bottom: calc(16px + env(safe-area-inset-bottom));
    gap: 8px;
  }
}


/* ========== 手机窗口及低高度横屏 ========== */
@media (max-width: 768px), (max-height: 500px) {
  #windows,
  #windows.is-portrait,
  #windows.is-paysage {
    top: 50vh;
    top: 50dvh;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    --image-height-limit: calc(70vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    --image-height-limit: calc(70dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    width: min(
      calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)),
      calc(var(--image-height-limit) * var(--image-ratio, 1.333333))
    ) !important;
    max-width: none;
  }

  /* 竖图更窄，横图更宽；画布高度由图片比例决定。 */
  #windows.is-portrait {
    width: min(
      86vw,
      calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)),
      calc(var(--image-height-limit) * var(--image-ratio, 0.75))
    ) !important;
  }

  #windows figure {
    height: auto;
  }

  #windows figcaption {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 4px 8px;
    min-height: 56px;
    max-height: 30vh;
    max-height: 30dvh;
    overflow-y: auto;
    padding: 6px;
    font-size: 14px;
    overflow-wrap: anywhere;
  }

  #windows .window-heading {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    text-align: center;
  }

  #window-title:empty,
  #window-subtitle:empty,
  #window-content:empty {
    display: none;
  }

  #windows .num {
    float: none;
    grid-column: 3;
    grid-row: 1;
    white-space: nowrap;
  }

  #windows .close {
    position: relative;
    top: auto;
    left: auto;
    grid-column: 1;
    grid-row: 1;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 0;
    background: transparent;
  }

  #windows .close::after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #e0443e;
    background: #ff5f57;
  }

  #windows .slider,
  #windows.is-portrait .slider,
  #windows.is-paysage .slider {
    height: auto;
    aspect-ratio: var(--image-ratio, 4 / 3);
  }
}

/* 手机端降低背景遮盖和模糊，让透过窗口的文字更清晰。 */
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  #windows figure {
    background: rgba(180, 180, 180, 0.1);
    backdrop-filter: invert(0.98) blur(4px);
    -webkit-backdrop-filter: invert(1) blur(2px);
  }
}

/* ========== 减少动态效果偏好 ========== */
@media (prefers-reduced-motion: reduce) {
  #windows,
  .slider,
  .slider-track {
    transition-duration: 0.01ms;
  }
}

/* 中文项目：原文名在上，中文名及补充信息在下。 */
body.lang-cn .project-item,
body.lang-cn .project-pending,
body.lang-cn #window-subtitle {
  white-space: pre-line;
}

/* 手势浏览：保留纵向滚动和双指缩放。 */
.slider { touch-action: pan-y pinch-zoom; }
@media (hover: none) and (pointer: coarse) {
  .slide-zone { display: none; }
}

#windows.is-dragging, #windows.is-dragging .slider,
#windows.is-dragging .slider-track { transition: none !important; }
.slider img { -webkit-touch-callout: none; }

/* 手机端窗口尺寸变化与松手后的滑动保持同一节奏。 */
@media (any-pointer: coarse) and (prefers-reduced-motion: no-preference) {
  #windows, .slider {
    transition-duration: 420ms;
    transition-timing-function: cubic-bezier(.25, .1, .25, 1);
  }
}

/* 首个项目初始静态紫色，点击后移除提示类。 */
.project-item.is-click-hint {
  color: blueviolet;
  --project-arrow-opacity: 1;
}
.project-item.is-click-hint .project-motion-label {
  text-decoration-line: underline;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-decoration-skip-ink: auto;
}
.project-item:focus-visible {
  outline: 2px solid blueviolet;
  outline-offset: 4px;
}

/* 安静的链接提示：文字固定，下划线与末尾箭头在悬停时出现。 */
.project-motion-label {
  display: inline;
}
.project-item {
  --project-arrow-opacity: 0;
}
.project-arrow {
  margin-left: .2em;
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: .65em;
  font-weight: normal;
  line-height: 1;
  white-space: nowrap;
  vertical-align: .08em;
  opacity: var(--project-arrow-opacity, 0);
  transition: opacity 160ms ease;
  /* 始终保留箭头位置，显示时文字不会重新换行。 */
}

@media (hover: hover) and (pointer: fine) {
  .project-item:hover {
    color: blueviolet;
    --project-arrow-opacity: 1;
  }
  .project-item:hover .project-motion-label {
    text-decoration-line: underline;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-decoration-skip-ink: auto;
  }
}
@media (hover: hover) and (pointer: fine) {
.project-item:focus-visible,
.project-item:active {
  color: blueviolet;
  --project-arrow-opacity: 1;
}
.project-item:focus-visible .project-motion-label,
.project-item:active .project-motion-label {
  text-decoration-line: underline;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-decoration-skip-ink: auto;
}
}
@media (prefers-reduced-motion: reduce) {
  .project-arrow { transition: none; }
}

/* 点击后保留紫色，选中另一个项目时转移。 */
.project-item.is-selected { color: blueviolet; }

/* 手机版不显示箭头，也不保留箭头占位。 */
@media (max-width: 768px) {
  .project-arrow { display: none; }
}

/* 文字区域保持左侧位置。 */
body { background-color: #fff; }
main.indexfont { margin-inline: 0; }
/* 语言按钮仅通过透明度区分状态。 */
#btnContainer .language-btn {
  font-weight: normal;
  text-decoration: none;
  box-shadow: none;
  outline: none;
  opacity: .45;
}
#btnContainer .language-btn[aria-pressed="true"],
#btnContainer .language-btn:hover,
#btnContainer .language-btn:focus-visible {
  opacity: 1;
  transform: none;
}

/* 语言按钮居中对齐，并增加左右留白。 */
#btnContainer .language-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 6px 18px;
}
@media (max-width: 900px) {
  #btnContainer .language-btn { min-height: 44px; }
}

/* 字形视觉居中微调，不改变按钮尺寸。 */
#btnContainer .language-label {
  display: inline-block;
  transform: translateY(1px);
}

/* 手机语言按钮稍微缩小。 */
@media (max-width: 768px) {
  #btnContainer .language-btn {
    min-width: 54px;
    min-height: 36px;
    padding: 5px 14px;
    font-size: 14px;
  }
}

/* 按钮文字也使用正文的行距。 */
#btnContainer button { line-height: var(--text-line-height); }

/* New 标签叠在标题开头，不占用排版宽度。 */
.new-badge-anchor {
  position: relative;
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: baseline;
}
.new-badge {
  width: max-content;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  flex-shrink: 0;
  position: absolute;
  z-index: 12;
  left: 0;
  bottom: .65em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 6px 18px;
  border-radius: 20px;
  background: blueviolet;
  color: white;
  font-family: "fr", "cn", serif;
  font-size: 18px;
  font-weight: normal;
  line-height: 1.3;
  letter-spacing: 0;
  -webkit-text-stroke: 0;
  transform: rotate(-15deg);
  transform-origin: center;
  opacity: .85;
  pointer-events: none;
}
@keyframes new-badge-blink {
  0%, 100% { opacity: .85; }
  50% { opacity: .25; }
}
.project-item.is-click-hint .new-badge {
  animation: new-badge-blink 1s steps(1, end) infinite;
}
@media (max-width: 768px) {
  .new-badge { min-width: 54px; padding: 5px 14px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .project-item.is-click-hint .new-badge { animation: none; }
}

/* 点击后移除提示类，New 标签随之隐藏。 */
.project-item:not(.is-click-hint) .new-badge-anchor { display: none; }

/* 中文保持 1.3 倍行高，仅增加相邻项目之间的间隔。 */
body.lang-cn { --text-line-height: 1.3; }
body.lang-cn .project-list > [data-project-id] + [data-project-id] {
  margin-top: .4em;
}

/* 中文简介单独使用更宽松的行距。 */
body.lang-cn #bio { line-height: 1.6; }

/* 工作经历：机构、职位、城市在同一行，不增加条目间距。 */
#Experience .experience-entry { display: block; }

/* 手机端正文与项目标题统一居中。 */
@media (max-width: 768px) {
  main.indexfont,
  main.indexfont p,
  body.lang-cn #bio,
  .project-list,
  .info-group,
  .footer {
    text-align: center;
    text-justify: auto;
  }
}

/* 手机滑动不会给未选中的项目留下触摸悬停颜色。 */
@media (max-width: 768px), (hover: none), (pointer: coarse) {
  .project-item:not(.is-selected):not(.is-click-hint),
  .project-item:not(.is-selected):not(.is-click-hint):hover,
  .project-item:not(.is-selected):not(.is-click-hint):active,
  .project-item:not(.is-selected):not(.is-click-hint):focus-visible {
    color: #28282B;
    --project-arrow-opacity: 0;
  }
  .project-item:not(.is-click-hint) .project-motion-label {
    text-decoration: none;
  }
  .project-item.is-selected { color: blueviolet; }
}