:root {
  color-scheme: light;
  --paper: #f1f2f5;
  --ink: #16171b;
  --line: rgba(22, 23, 27, .16);
  --page-x: clamp(20px, 4vw, 68px);
  --content: 1440px;
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  min-width: 320px;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Geist Variable", "PingFang SC", sans-serif;
}

a { color: inherit; text-decoration: none; }
figure { margin: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
  font-size: 11px;
  transform: translateY(-160%);
}

.skip-link:focus { transform: none; }

.case-nav,
.case-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  width: 100%;
  margin: 0 auto;
  align-items: center;
  padding-right: 20px;
  padding-left: 20px;
  font-size: 10px;
  font-weight: 620;
  letter-spacing: .12em;
}

.case-nav {
  height: 46px;
  min-height: 0;
}

.case-nav > :last-child,
.case-footer > :last-child { justify-self: end; }

.back-link {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 10px;
}

.back-link span:first-child {
  font-size: 16px;
  transition: transform 220ms ease;
}

.back-link:hover span:first-child,
.back-link:focus-visible span:first-child { transform: translateX(-3px); }

.portfolio-pages {
  display: grid;
  gap: 20px;
  width: 100%;
  margin: 0 auto;
  background: var(--paper);
}

/* 首屏展板：贴近导航，并限制高度，避免第一张图把首屏撑出视口 */
.portfolio-page:first-child { margin-top: -22px; }

.portfolio-page,
.portfolio-page img {
  width: 100%;
  background: #fff;
}

.portfolio-page img {
  display: block;
  height: min(calc(100svh - 70px), 1080px);
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
}

/* —— 滚动入场动效（Tezign 式 reveal，时间驱动）——
   进入视口后由 JS 移除 is-hidden，按短时过渡播放；
   快速滚动也不会跳过动画，全浏览器行为一致。 */
@media (prefers-reduced-motion: no-preference) {
  .portfolio-page {
    transition:
      opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  }

.portfolio-page.is-hidden {
    opacity: 0;
    transform: translateY(18px);
    will-change: opacity, transform;
  }

  [data-reveal] {
    transition: opacity 420ms cubic-bezier(.22, 1, .36, 1), transform 420ms cubic-bezier(.22, 1, .36, 1);
  }

  [data-reveal].is-hidden {
    opacity: 0;
    transform: translateY(18px);
  }
}

.case-footer {
  height: 46px;
  min-height: 0;
}

.case-footer a {
  width: fit-content;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--ink);
}

@media (max-width: 680px) {
  .case-nav,
  .case-footer {
    grid-template-columns: 1fr auto;
    height: 46px;
    min-height: 0;
    padding-right: 20px;
    padding-left: 20px;
  }

  .case-nav > :nth-child(2),
  .case-footer > :nth-child(2) { display: none; }

  .portfolio-page img {
    width: 100%;
    height: calc(100svh - 76px);
    max-width: 100%;
    object-fit: cover;
    object-position: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}