/* Shared responsive layer. Desktop styles live in each page and remain untouched. */
@media (min-width: 768px) and (max-width: 1023px) {
  .portfolio-content-align { width: min(100% - 48px, 900px) !important; }
  .marventa-case, .case { width: min(100% - 48px, 900px) !important; }
}

@media (max-width: 767px) {
  .portfolio-content-align,
  .marventa-case,
  .case {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 20px !important;
    padding-left: 20px !important;
  }

  img, video { max-width: 100%; }
  video { display: block; width: 100%; height: auto; }

  /* Homepage: one clear reading column. */
  .portfolio-home-content { min-height: auto !important; padding-top: 104px !important; padding-bottom: 68px !important; }
  .home-hero { gap: 38px !important; margin-bottom: 72px !important; }
  .home-hero__copy { gap: 18px !important; }
  .home-hero h1 { font-size: clamp(42px, 11vw, 54px) !important; line-height: 1.04 !important; }
  .home-hero__role { font-size: clamp(24px, 6.5vw, 28px) !important; line-height: 1.35 !important; }
  .home-hero__intro-card { padding: 22px 20px !important; border-radius: 20px !important; }
  .home-hero__intro-card > p:first-of-type { font-size: clamp(18px, 5.2vw, 20px) !important; line-height: 1.55 !important; }
  .home-hero__intro-card > p:last-of-type { font-size: 15px !important; line-height: 1.72 !important; }
  .home-hero__tags, .project-pills, .project-capabilities, .tag-row { gap: 8px !important; }
  .home-hero__tags span, .project-pills .resume-pill, .project-capabilities .resume-pill, .tag-row span { width: auto !important; margin: 0 !important; padding: 8px 12px !important; font-size: 12px !important; }
  .home-hero__proof { gap: 6px !important; font-size: 12px !important; }
  .home-hero__actions { gap: 10px !important; }
  .home-hero__actions > * { min-height: 46px !important; padding: 11px 18px !important; font-size: 15px !important; }
  .home-hero__visual { max-width: 420px !important; }
  .home-hero__status { width: min(205px, 64vw) !important; }
  .portfolio-home-content .font-headline-md { font-size: clamp(28px, 8vw, 36px) !important; line-height: 1.15 !important; }
  .portfolio-home-content .mt-section-gap, .portfolio-home-content .mb-section-gap { margin-top: 72px !important; margin-bottom: 72px !important; }
  .portfolio-home-content .grid.lg\:grid-cols-4 { grid-template-columns: 1fr !important; gap: 14px !important; }
  .portfolio-home-content .grid.lg\:grid-cols-4 > div { min-height: auto !important; padding: 22px !important; transform: none !important; }

  /* Homepage project cards and experience: compact copy first, media second. */
  .projects-stack, .experience-stack { gap: 20px !important; }
  #project-yuren.project-card--representative,
  #project-marventa.project-card--representative,
  #project-rural.project-card--representative,
  .project-card, .experience-card { min-height: 0 !important; border-radius: 24px !important; }
  .project-card__copy, .experience-card__copy { padding: 22px 18px !important; }
  .project-card h3, .experience-card h3 { font-size: clamp(27px, 7.5vw, 34px) !important; line-height: 1.12 !important; }
  .project-card__copy p, .experience-card__copy p { margin-top: 13px !important; font-size: 15px !important; line-height: 1.68 !important; }
  .project-work { padding-top: 14px !important; }
  .project-work p { white-space: normal !important; overflow-wrap: anywhere; }
  .project-proof { display: inline-block !important; width: fit-content !important; max-width: 100% !important; margin-top: 16px !important; padding: 10px 14px; border-radius: 16px; background: rgba(209,250,229,.34); font-size: 13px !important; line-height: 1.5 !important; white-space: normal !important; }
  .project-actions { gap: 9px !important; margin-top: 20px !important; }
  .project-actions .resume-link, .project-experience-link { min-height: 44px !important; padding: 10px 14px !important; font-size: 14px !important; }
  .project-experience-link { padding-right: 6px !important; padding-left: 6px !important; }
  #project-yuren .project-visuals, #project-marventa .project-visuals, #project-rural .project-visuals { height: auto !important; min-height: 0 !important; padding: 0 18px 22px !important; }
  #project-yuren .project-visuals figure, #project-marventa .project-visuals figure, #project-rural .project-visuals figure { height: auto !important; }
  #project-yuren .project-visuals img, #project-marventa .project-visuals img, #project-rural .project-visuals img { width: 100% !important; height: auto !important; object-fit: contain !important; }
  .project-shots { min-height: 0 !important; padding: 18px !important; }
  .project-shot--main { min-height: 0 !important; height: auto !important; }
  .experience-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; padding: 16px !important; }
  .experience-metrics div { padding: 15px !important; }
  .contact-email, .resume-contact { overflow-wrap: anywhere; white-space: normal; }

  /* 羽人：640–767px 也必须保持单列，截图横滑而不是缩略图墙。 */
  main.portfolio-content-align { padding-top: 104px !important; padding-bottom: 68px !important; }
  main.portfolio-content-align .grid[class*="sm:grid-cols-2"] { grid-template-columns: 1fr !important; }
  main.portfolio-content-align h1 { font-size: clamp(40px, 10.5vw, 46px) !important; line-height: 1.08 !important; }
  main.portfolio-content-align h2 { font-size: clamp(28px, 8vw, 36px) !important; line-height: 1.15 !important; }
  .yuren-hero-award { align-items: flex-start !important; }
  .yuren-award-card { width: fit-content !important; min-height: 0 !important; max-width: 100%; padding: 12px !important; border-radius: 16px !important; gap: 10px !important; }
  .yuren-award-card p { font-size: 13px !important; line-height: 1.45 !important; white-space: normal !important; }
  .yuren-award-card span:last-child { margin-top: 4px !important; font-size: 21px !important; line-height: 1.1 !important; }
  .manual-gallery { align-items: stretch !important; gap: 12px !important; padding: 6px 0 16px !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch; }
  .manual-gallery figure { flex: 0 0 72% !important; scroll-snap-align: start; }
  .manual-gallery figure.manual-flow { flex-basis: 90% !important; }
  .manual-gallery img { width: 100% !important; height: auto !important; max-width: 100% !important; max-height: none !important; object-fit: contain !important; }
  .gallery-lightbox { padding: 18px !important; }
  .gallery-lightbox__content { width: 92vw !important; max-width: 92vw !important; }
  .gallery-lightbox__image { max-width: 92vw !important; max-height: 88vh !important; object-fit: contain !important; }
  .gallery-lightbox__button, .gallery-lightbox__close { width: 44px !important; height: 44px !important; }

  /* Marventa: product visual and story retain hierarchy without fixed desktop crop. */
  .marventa-case { padding-top: 104px !important; padding-bottom: 64px !important; }
  .marventa-hero { min-height: 0 !important; border-radius: 26px !important; }
  .marventa-copy { padding: 30px 20px 24px !important; }
  .marventa-case h1 { font-size: clamp(36px, 10vw, 46px) !important; line-height: 1.08 !important; white-space: normal !important; }
  .positioning { font-size: 17px !important; }
  .problem, .story-intro { font-size: 15px !important; line-height: 1.72 !important; }
  .result-badges { gap: 7px !important; margin-top: 18px !important; }
  .result-badges span, .story-result__badge { width: fit-content; max-width: 100%; min-height: 0 !important; padding: 9px 12px !important; font-size: 12px !important; line-height: 1.45 !important; white-space: normal; }
  .product-build { margin-top: 20px !important; padding-top: 15px !important; }
  .product-build p { font-size: 14px !important; line-height: 1.65 !important; }
  .case-actions { gap: 9px !important; margin-top: 20px !important; }
  .case-button { min-height: 44px !important; padding: 10px 14px !important; }
  .marventa-visual { padding: 10px 20px 24px !important; }
  .product-shot { padding: 7px !important; border-radius: 20px !important; }
  .product-shot img { height: auto !important; aspect-ratio: auto !important; object-fit: contain !important; border-radius: 14px !important; }
  .project-story { margin-top: 64px !important; }
  .project-story h2 { font-size: clamp(28px, 8vw, 36px) !important; }
  .story-gallery { gap: 14px !important; margin-top: 26px !important; padding: 4px 0 15px !important; scroll-snap-type: x mandatory !important; }
  .story-gallery__item { flex: 0 0 90% !important; }
  .story-gallery__media { height: auto !important; padding: 4px !important; }
  .story-gallery__media img { width: 100% !important; height: auto !important; object-fit: contain !important; }
  .story-outro { gap: 18px !important; margin-top: 52px !important; }
  .story-outro__actions { gap: 9px !important; }

  /* 泥土之上：手机端是“供给侧 → 需求侧”的连续单列。 */
  .case { padding-top: 104px !important; padding-bottom: 64px !important; }
  .project-hero { gap: 28px !important; }
  .project-hero h1 { font-size: clamp(36px, 10vw, 46px) !important; line-height: 1.08 !important; }
  .hero-statement { font-size: clamp(17px, 5.2vw, 20px) !important; line-height: 1.52 !important; }
  .hero-intro, .section-copy p, .demand-path p { font-size: 15px !important; line-height: 1.72 !important; }
  .hero-visual { min-height: 360px !important; border-radius: 26px !important; }
  .hero-visual img { width: auto !important; max-width: min(86%, 330px) !important; max-height: 340px !important; }
  .hero-visual__note { display: none !important; }
  .tag-row { gap: 8px !important; }
  .tag-row span { padding: 8px 12px !important; }
  .project-demo-link, .demo-video__link { min-height: 44px !important; }
  .demo, .port-section { margin-top: 68px !important; }
  .demo-video { border-radius: 22px !important; }
  .demo-video__caption { padding: 14px 16px !important; font-size: 13px !important; }
  .port-section--supply, .port-section--demand { padding: 26px 18px !important; border-radius: 24px !important; }
  .section-copy h2 { font-size: clamp(28px, 8vw, 36px) !important; line-height: 1.15 !important; }
  .shared-supply { margin: 22px 0 24px !important; padding: 13px 14px !important; }
  .demand-path + .demand-path { margin-top: 30px !important; padding-top: 28px !important; }
  .demand-path h3 { font-size: clamp(21px, 6.2vw, 25px) !important; }
  .demand-path--buyer .manual-gallery figure:first-child { flex-basis: 92% !important; }
  .demand-path--consumer .manual-gallery figure { flex-basis: 72% !important; }
  .case-footer { gap: 18px !important; margin-top: 68px !important; }
}

@media (max-width: 479px) {
  .portfolio-content-align,
  .marventa-case,
  .case { padding-right: 16px !important; padding-left: 16px !important; }
  .portfolio-home-content, main.portfolio-content-align, .marventa-case, .case { padding-top: 96px !important; }
  .home-hero h1 { font-size: 40px !important; }
  .home-hero__actions > * { flex: 1 1 100%; }
  .project-card__copy, .experience-card__copy { padding: 22px 16px !important; }
  .project-actions { align-items: stretch !important; }
  .project-actions .resume-link { flex: 1 1 auto; justify-content: center; }
  .experience-metrics { grid-template-columns: 1fr !important; }
  .hero-visual { min-height: 330px !important; }
  .hero-visual img { max-width: min(84%, 320px) !important; max-height: 314px !important; }
}