* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; padding: 0; background: #fff; color: #111; font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif; }
a { color: inherit; }
.portfolio-index { min-height: 100vh; display: grid; place-items: center; }
.portfolio-grid { width: min(1440px, 100%); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); padding: clamp(20px, 4vw, 64px); }
.project-card { display: block; min-width: 0; text-decoration: none; }
.project-card img { display: block; width: 100%; height: auto; }
.project-card span { display: block; padding-top: 14px; font-size: 1rem; line-height: 1.4; letter-spacing: 0.02em; }
.project-card:focus-visible { outline: 2px solid #111; outline-offset: 6px; }
.project-nav { width: min(1440px, 100%); height: 48px; margin: 0 auto; display: flex; align-items: center; padding: 0 16px; font-size: 0.875rem; }
.project-nav a { text-decoration: none; }
.project-nav a:hover, .project-nav a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.media-frame, .media-stream { display: block; width: 100%; margin: 0; padding: 0; }
.media-frame { max-width: 1440px; margin-inline: auto; }
.media-stream img, .media-stream video { display: block; width: 100%; height: auto; margin: 0; padding: 0; border: 0; }
.media-stream video { background: #000; }
@media (max-width: 720px) {
  .portfolio-index { display: block; }
  .portfolio-grid { grid-template-columns: 1fr; gap: 40px; padding: 0 0 40px; }
  .project-card span { padding: 12px 16px 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }