/* ============================================================
   摄影作品集模板 v2 — 幻灯片展示模式
   日常不需要改这个文件,布局参数在 data/config.json 里调。
   ============================================================ */

:root {
  --accent: #111111;
  --sidebar-width: 240px;
  --image-max-width: 1400px;
  --font-scale: 1;

  --bg: #ffffff;
  --text: #1a1a1a;
  --text-soft: #6b6b6b;
  --hairline: #e6e6e6;

  --font-body: "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", Arial, sans-serif;
}

html {
  color-scheme: only light;
  background: #ffffff;
}

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

body {
  background: #ffffff !important;
  color: var(--text) !important;
  font-family: var(--font-body);
  font-size: calc(14px * var(--font-scale));
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

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

/* ---------- 左侧导航 ---------- */
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-width);
  padding: 48px 32px;
  overflow-y: auto;
  border-right: 1px solid var(--hairline);
  background: var(--bg);
  z-index: 20;
}

.site-name {
  display: block;
  font-size: calc(19px * var(--font-scale));
  font-weight: 600;
  letter-spacing: 0.06em;
}

.site-name-en {
  font-size: calc(12px * var(--font-scale));
  color: var(--text-soft);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 4px;
  margin-bottom: 44px;
}

.nav-group { margin-bottom: 30px; }

.nav-group-title {
  font-size: calc(11px * var(--font-scale));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 10px;
}

.nav-link {
  display: block;
  padding: 4px 0;
  font-size: calc(13.5px * var(--font-scale));
  color: var(--text-soft);
  transition: color .18s ease;
}

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

.nav-link.active {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.nav-link:focus-visible,
.site-name:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- 右侧内容区 ---------- */
.content {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
}

.loading { color: var(--text-soft); padding: 64px 56px; }

.project { display: none; }
.project.visible { display: block; animation: fadeIn .3s ease; }

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- 幻灯片模式 ---------- */
.project.slideshow {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  padding: 56px 64px 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.slide.current {
  opacity: 1;
  pointer-events: auto;
}

.slide img {
  max-width: min(100%, var(--image-max-width));
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #f4f4f4;
}

/* 文字页(标题 + 描述) */
.slide-text {
  max-width: 620px;
}

.slide-text h1 {
  font-size: calc(17px * var(--font-scale));
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}

.slide-text p {
  color: var(--text);
  white-space: pre-line;
}
/* 图片 + 链接组合 */
.slide-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  margin: 0;
}

.slide-figure img { max-height: 100%; }

.slide-figure.has-link img { max-height: calc(100% - 34px); }

.slide-link {
  position: relative;
  z-index: 8;
  font-size: calc(12.5px * var(--font-scale));
  color: var(--text-soft);
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 1px;
}

.slide-link:hover { color: var(--accent); border-color: var(--accent); }
/* 左右点击翻页区 */
.slide-zone {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  z-index: 5;
}

.slide-zone.prev { left: 0; cursor: w-resize; }
.slide-zone.next { right: 0; cursor: e-resize; }

/* 页码 */
.slide-counter {
  position: fixed;
  right: 28px;
  bottom: 18px;
  z-index: 15;
  font-size: calc(13px * var(--font-scale));
  color: var(--text-soft);
  letter-spacing: 0.08em;
  user-select: none;
  display: none;
}

.slide-counter.visible { display: block; }

/* ---------- 简介页(普通滚动页) ---------- */
.project.page {
  padding: 64px 56px 120px;
  max-width: 1100px;
}

.project-title {
  font-size: calc(22px * var(--font-scale));
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: 20px;
}

.about-wrap {
  display: flex;
  gap: 56px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.about-text { flex: 1 1 380px; max-width: 620px; white-space: pre-line; }

.about-portrait { flex: 0 1 320px; }
.about-portrait img { width: 100%; height: auto; display: block; }

.contact-block {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}

.contact-title {
  font-size: calc(11px * var(--font-scale));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 10px;
}

.site-footer {
  margin-top: 96px;
  font-size: calc(11.5px * var(--font-scale));
  color: var(--text-soft);
}

/* ---------- 遗留的放大层(幻灯片模式下不再使用) ---------- */
.lightbox[hidden] { display: none; }
.lightbox { display: none; }

/* ---------- 移动端 ---------- */
.mobile-bar { display: none; }

@media (max-width: 820px) {
  .mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    padding: 0 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--hairline);
    z-index: 30;
  }

  .mobile-name { font-weight: 600; letter-spacing: 0.05em; }

  .menu-toggle {
    background: none; border: none; cursor: pointer;
    display: flex; flex-direction: column; gap: 5px; padding: 8px;
  }
  .menu-toggle span {
    width: 20px; height: 1.5px; background: var(--text); display: block;
  }

  .sidebar {
    top: 56px;
    width: 100%;
    border-right: none;
    transform: translateX(-100%);
    transition: transform .25s ease;
    padding: 32px 24px;
  }
  .sidebar.open { transform: none; }
  .sidebar .site-name, .sidebar .site-name-en { display: none; }

  .content { margin-left: 0; }

  .project.slideshow { height: calc(100vh - 56px); margin-top: 56px; }

  .slide { padding: 24px 16px 64px; }

  .slide-counter { right: 16px; bottom: 14px; }

  .project.page { padding: 88px 20px 80px; }

  .about-wrap { gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .project.visible { animation: none; }
  .slide { transition: none; }
}