/* Mobile layout. Desktop composition is kept in style.css and pages.css. */
@media (max-width: 900px) {
  .site-header { inset: max(16px, env(safe-area-inset-top)) 0 auto; }
  .site-header nav { width: calc(100% - 32px); max-width: 600px; column-gap: clamp(12px, 4vw, 28px); }
  .nav-link { font-size: clamp(14px, 4vw, 17px); min-height: 44px; display: inline-flex; align-items: center; }
  .nav-link::after { bottom: 9px; }
  .brand { width: clamp(84px, 24vw, 116px); min-height: 44px; display: grid; align-items: center; }
  .brand:focus-visible svg { transform: none; }
  .home { min-height: 320px; }
  .portfolio-title { left: 16px; right: 16px; bottom: max(24px, env(safe-area-inset-bottom)); height: calc((100vw - 32px) * .125); }
  .portfolio-type { display: block; }
  .title-fallback { font-size: calc((100vw - 32px) * .1716); white-space: nowrap; }
  .type-ready .title-fallback { display: none; }

  .page-shell { margin-inline: 16px; padding-top: 104px; padding-bottom: max(40px, env(safe-area-inset-bottom)); }
  .page-shell > *, .case-section > *, .media-block, .project-card { min-width: 0; }
  .page-heading { margin-bottom: 24px; }
  .work-grid:not(.work-carousel) { width: 100%; gap: 40px; }
  .work-grid:not(.work-carousel) .project-caption { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .work-grid:not(.work-carousel) .project-caption h2 { font-size: 23px; }
  .work-grid:not(.work-carousel) .project-caption .view-label { display: none; }
  .page-heading h1 { font-size: clamp(54px, 16vw, 84px); }
  .project-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; }
  .project-heading h1 { grid-column: 1 / -1; font-size: clamp(42px, 10vw, 68px); line-height: .98; overflow-wrap: anywhere; }
  .project-heading p { font-size: 15px; }
  .project-heading .back-link { margin-left: 0; grid-column: 2; grid-row: 2; justify-self: end; }
  .text-link { min-height: 44px; display: inline-flex; align-items: center; font-size: 11px; }
  .project-hero { margin-top: 20px; }
  .project-hero video { height: auto; max-height: none; }
  .project-overview { grid-template-columns: minmax(0, 1fr); margin-top: 28px; padding-top: 20px; gap: 20px; }
  .project-overview p { font-size: 16px; }
  .case-section { padding-top: 56px; }
  .section-heading { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 24px; }
  .case-section h2 { font-size: clamp(30px, 8.2vw, 44px); line-height: 1.06; }
  .section-heading p { font-size: 16px; line-height: 1.5; max-width: none; }
  .media-block figcaption { font-size: 13px; line-height: 1.4; }
  .logo-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .program-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .program-grid video { width: 100%; }
  .film-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .film-grid > figure { width: min(100%, 360px); margin-inline: auto; }
  .echo-logo { width: min(90%, 600px); }
  .mt7rk-cover { width: min(100%, 520px); }
  .credits-section { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .credits-list > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 12px; font-size: 14px; }
  .credits-list dd { overflow-wrap: anywhere; }
  .project-footer { margin-top: 48px; padding-top: 24px; gap: 20px; flex-wrap: wrap; }

  .aalka-cover img { height: auto; aspect-ratio: 1; }
  .aalka-image-grid, .aalka-motion-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .aalka-print-grid { width: min(100%, 600px); }
  .aalka-use-grid { width: 100%; grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .aalka-kinetic { width: min(100%, 520px); margin-inline: auto; }
  .aalka-source-links { gap: 12px 24px; flex-wrap: wrap; margin-top: 24px; }
  .personal-heading h1 { font-size: clamp(28px, 8.2vw, 54px); }
  .personal-hero { width: min(100%, 500px); }
  .personal-studies { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .personal-study, .personal-studies > :last-child:nth-child(odd) { width: 100%; grid-column: auto; }
  .personal-study figcaption { min-height: 44px; align-items: center; margin-top: 8px; }
  .personal-study figcaption a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

  .contact-shell { width: calc(100% - 32px); margin-inline: auto; }
  .contact-shell h1 { font-size: clamp(72px, 20vw, 110px); margin-bottom: 28px; }
  .contact-bio { font-size: clamp(23px, 6.4vw, 34px); line-height: 1.26; }
  .contact-details { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 40px; }
  .contact-details h2 { font-size: clamp(30px, 8.2vw, 44px); }
  .contact-links a { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-block: 18px; font-size: 16px; overflow-wrap: anywhere; }

  .work-carousel-page .work-shell {
    --work-heading-size: clamp(54px, 16vw, 76px);
    --work-top: 104px;
    display: flex; flex-direction: column; height: auto; min-height: 100svh;
    padding-top: var(--work-top); padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
  .work-carousel-page .page-heading { flex: 0 0 auto; margin: 0 16px 6px; }
  .work-carousel {
    --carousel-card-width: min(84vw, 560px);
    --carousel-small-width: min(72vw, 360px, max(180px, calc(100svh - 490px)));
    flex: 1 0 auto; height: auto; gap: 24px;
    padding-top: 24px; padding-bottom: 36px;
    -webkit-overflow-scrolling: touch; touch-action: auto;
  }
  .work-carousel .project-card { transform: none; will-change: auto; }
  .work-carousel .project-caption { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-top: 12px; }
  .work-carousel .project-caption h2 { font-size: clamp(22px, 5.8vw, 30px); }
  .work-carousel .personal-project-card .project-caption h2 { font-size: clamp(18px, 4.6vw, 24px); }
  .work-carousel .project-caption > span { font-size: 13px; }
  .work-carousel .project-caption .view-label { display: none; }
  .project-open { right: 12px; bottom: 10px; font-size: 28px; }
  .carousel-float { animation-name: mobile-project-float; animation-duration: 7.6s; }
  .carousel-controls { flex: 0 0 44px; margin: 0 16px; gap: 16px; }
  .carousel-buttons { gap: 12px; }
  @keyframes mobile-project-float { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }
}

@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .cursor-trail, [data-trail-carryover] { display: none !important; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .carousel-float { animation: none; }
}