@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;
  line-height: 1.3; /* 全站统一行高，只需调整这里 */
  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: 70%;
  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: var(--spacing-unit);
}

/* ========== 中文模式 ========== */
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,
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: 1.6; /* 中文 bio 单独增加行距 */
  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: var(--spacing-unit);
}

/* 展览首项在点击前显示紫色提示。 */
.project-item.is-click-hint,
.project-item:hover {
  color: blueviolet;
}

.project-item:hover {
  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;
}