/* 公共部分在平板和手机上的排版 */
@media (max-width: 900px) {
  .stamp-card {
    width: min(33vw, 280px);
  }
  .about-layout {
    grid-template-columns: 1fr;
    gap: 45px;
  }
  .works-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .digital-grid {
    grid-template-columns: 1fr 1fr;
  }
  .digital-card:last-child {
    grid-column: span 2;
  }
  .resume-info {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 650px) {
  .site-header {
    min-height: 64px;
    padding: 12px 18px;
    gap: 8px;
  }
  .brand strong {
    font-size: 27px;
  }
  .brand small {
    display: none;
  }
  .header-link,
  .lang-switch,
  .menu-toggle {
    font-size: 10px;
    padding: 8px 10px;
  }
  .menu-toggle {
    min-width: auto;
  }
  .site-menu {
    top: 62px;
    right: 18px;
  }
  .hero {
    min-height: 590px;
  }
  .hero-heading {
    top: 17%;
    bottom: 24%;
  }
  .hero-heading strong,
  .hero-heading strong.zh {
    font-size: clamp(56px, 16vw, 100px);
  }
  .hero-heading strong.zh {
    letter-spacing: -0.08em;
  }
  .stamp-card {
    width: min(58vw, 270px);
  }
  .stamp-title {
    font-size: 22px;
  }
  .en .stamp-title {
    font-size: 27px;
  }
  .hero-path {
    width: 90vw;
    left: -25vw;
  }
  .hero-controls {
    left: 18px;
    right: 18px;
    bottom: 70px;
  }
  .hero-hint {
    display: none;
  }
  .hero-index strong {
    font-size: 29px;
  }
  .hero-open {
    padding: 10px 12px;
  }
  .scroll-cue {
    bottom: 20px;
  }
  .section {
    padding: 78px 20px;
  }
  .section-head {
    margin-bottom: 35px;
  }
  .section-title {
    font-size: clamp(42px, 12vw, 70px);
  }
  .about-intro {
    font-size: 23px;
  }
  .practice {
    align-items: flex-start;
  }
  .practice small {
    white-space: normal;
    text-align: right;
  }
  .works-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .work-tile {
    min-height: 190px;
    padding: 15px;
  }
  .work-tile strong {
    font-size: 22px;
  }
  .media-grid.vertical {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .media-grid {
    gap: 14px;
  }
  .empty-media .symbol {
    font-size: 54px;
  }
  .detail-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .poster-frame {
    border-width: 8px;
  }
  .poster-meta strong {
    font-size: 14px;
  }
  .digital-grid {
    grid-template-columns: 1fr;
  }
  .digital-card:last-child {
    grid-column: auto;
  }
  .process-button {
    grid-template-columns: 35px 1fr 50px 22px;
    gap: 9px;
    padding: 20px 0;
  }
  .process-button strong {
    font-size: 30px;
  }
  .process-body {
    padding: 0 10px 25px 45px;
    font-size: 17px;
  }
  .resume-role {
    font-size: 21px;
  }
  .resume-grid {
    grid-template-columns: 1fr;
  }
  .info-cell strong {
    font-size: 14px;
  }
  .contact {
    min-height: 430px;
  }
  .site-footer {
    padding: 28px 20px;
  }
  .back-top {
    right: 12px;
    bottom: 12px;
  }
  .lightbox {
    padding: 25px;
  }
  .lightbox-content {
    width: min(90vw, 440px);
  }
}
@media (max-width: 380px) {
  .header-link {
    display: none;
  }
  .works-grid {
    grid-template-columns: 1fr;
  }
  .work-tile {
    min-height: 155px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.paper-grain {
  opacity: 0.32;
  filter: grayscale(1) contrast(1.75);
  mix-blend-mode: multiply;
}
.stamp-paper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../assets/textures/paper.webp") center/cover;
  mix-blend-mode: multiply;
  opacity: 0.36;
  filter: grayscale(1) contrast(1.5);
  pointer-events: none;
  z-index: 5;
}
.media-frame::after,
.poster-frame::before,
.device-screen::before {
  pointer-events: none;
}
.stamp-art-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.stamp-art:has(.stamp-art-image)::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24%;
  background: linear-gradient(transparent, #172a2470);
}
.works-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 56px);
}
.work-tile {
  min-height: clamp(290px, 30vw, 460px);
  padding: clamp(23px, 3vw, 45px);
}
.media-grid.vertical {
  grid-template-columns: repeat(2, minmax(0, 440px));
}
@media (max-width: 650px) {
  .works-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .work-tile {
    min-height: 280px;
  }
  .media-grid.vertical,
  .media-grid {
    grid-template-columns: 1fr;
  }
  .media-frame.vertical {
    max-width: 420px;
  }
}