/* Phone layout: use the page's native scroll instead of a nested canvas scroller. */
@media (max-width: 650px), (max-width: 900px) and (max-height: 500px) {
  html, body { width: 100%; overflow-x: clip; }
  html { scroll-behavior: auto !important; }
  .portfolio-window,
  .contact-page-single { height: auto !important; min-height: 100dvh; overflow: visible !important; }
  .titlebar { height: 36px; }
  .window-file { display: none; }
  .menubar { min-height: 29px; }
  .menus { max-width: calc(100vw - 145px); gap: 10px; overflow: hidden; white-space: nowrap; }
  .menus span:nth-child(n+6) { display: none; }
  .mode-label { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .workspace,
  .harper-case-page .workspace,
  .contact-page-single .workspace,
  .aedsa-case-page .workspace,
  .about-modern-page .workspace,
  body.is-scrolling .workspace,
  .portfolio-home.is-past-hero .workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0;
  }
  .left-rail, .panel-column { display: none !important; }
  .center-column,
  .portfolio-home.is-past-hero .center-column { grid-column: 1 !important; min-width: 0; }
  .document-bar { height: 46px; overflow: hidden; }
  .document-tabs { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .document-tabs::-webkit-scrollbar { display: none; }
  .document-tab { flex: 0 0 auto; min-height: 46px; padding-inline: 13px; font-size: 10px; }
  .document-tab:nth-child(2) { display: flex; }
  .stage { min-height: 0; overflow: visible; }
  .canvas-scroll,
  .aedsa-case-page .canvas-scroll,
  .contact-page-single .canvas-scroll.contact-canvas {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    scroll-behavior: auto;
    scroll-snap-type: none;
    overscroll-behavior: auto;
  }
  .canvas-section,
  .harper-case-page .canvas-section,
  .creative-project {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible;
    padding: 74px 22px 52px !important;
    scroll-snap-align: none;
  }
  .section-number { top: 33px; right: 30px; font-size: 9px; }
  .canvas-section::before,
  .harper-case-page .canvas-section::before,
  .aedsa-case-page .canvas-section::before,
  .creative-project::before {
    inset: 16px !important;
    border-radius: 28px !important;
  }
  .ticker { height: 30px; }
  .ticker-track { animation-duration: 48s; }
  .reveal, .reveal.is-revealed { opacity: 1; transform: none; transition: none; }

  /* Homepage: keep the name, collage and scroll cue within a phone composition. */
  .portfolio-home .hero-screen {
    display: block;
    min-height: max(680px, calc(100dvh - 111px)) !important;
    padding: 82px 22px 58px !important;
    overflow: hidden;
  }
  .portfolio-home .hero-copy { width: 100%; transform: none; }
  .portfolio-home .hero-copy h1 {
    margin-top: 28px;
    font-size: clamp(72px, 24vw, 104px);
    line-height: .81;
  }
  .portfolio-home .hero-screen .hero-art {
    position: absolute;
    right: -4%;
    bottom: 72px;
    width: min(96vw, 390px);
    min-width: 0;
    height: min(46dvh, 390px);
    max-height: none;
    margin: 0;
    opacity: 1;
    transform: none;
  }
  .portfolio-home .hero-screen .scroll-prompt { z-index: 4; left: 32px; bottom: 27px; }
  .portfolio-home .about-screen,
  .portfolio-home .work-screen,
  .portfolio-home .contact-screen { display: block; }
  .portfolio-home .statement-wrap h2,
  .portfolio-home .work-heading h2,
  .portfolio-home .contact-copy h2 { font-size: clamp(40px, 11vw, 58px); line-height: 1.04; }
  .portfolio-home .about-columns { grid-template-columns: 1fr; gap: 18px; margin-top: 30px; font-size: 14px; line-height: 1.6; }
  .portfolio-home .work-list { margin-top: 30px; }
  .portfolio-home .work-row { min-height: 64px; grid-template-columns: 28px minmax(0, 1fr) 20px; }
  .portfolio-home .work-row strong { font-size: 17px; line-height: 1.25; }
  .portfolio-home .end-links { margin-top: 34px; }
  .portfolio-home .end-links a { min-height: 48px; align-items: center; }

  /* Case studies: remove fixed spacer heights and give the art the full width. */
  .harper-case-page .ez-case-entry,
  .harper-case-page .ez-digital,
  .harper-case-page .harper-showcase { min-height: 0 !important; }
  .harper-case-page .ez-case-entry { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 26px; }
  .ez-entry-copy > h2 { font-size: clamp(62px, 19vw, 82px); }
  .ez-logo-presentation { width: 100%; max-width: 420px; margin-inline: auto; border-radius: 22px; }
  .harper-case-page .ez-digital { padding-top: 72px !important; }
  .ez-contribution-summary, .ez-live-gallery, .ez-boundary { width: 100%; }
  .ez-live-gallery { grid-template-columns: minmax(0, 1fr); }
  .ez-live-gallery .ez-interface-shot { min-width: 0; }
  .harper-showcase-top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .harper-showcase-copy h1 { font-size: clamp(68px, 22vw, 94px); }
  .harper-metal-stage { max-width: 100%; }
  .harper-logo-variations { gap: 9px; }

  /* Creative work: one image per row so captions remain legible. */
  .creative-project { padding-top: 72px !important; }
  .project-intro h1 { font-size: clamp(52px, 17vw, 72px); }
  .project-gallery { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 10px; }
  .project-image, .image-portrait, .image-template { grid-row: auto; grid-column: auto; aspect-ratio: 4 / 3; }
  .image-portrait { aspect-ratio: 4 / 5; }
  .practice-gallery { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .practice-image { aspect-ratio: 1; }

  /* About: a readable profile followed by full artwork and the home panel. */
  .about-modern-page .about-profile-screen { height: auto !important; min-height: 0 !important; padding: 18px 16px 38px !important; }
  .about-modern-page .about-peel-stack { position: relative; inset: auto; display: flex; flex-direction: column; gap: 18px; height: auto !important; min-height: 0; }
  .about-modern-page .about-peel-sheet,
  .about-modern-page .about-home-underlay {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 0;
    border-radius: 26px;
    transform: none !important;
    opacity: 1 !important;
  }
  .about-modern-page .about-copy-sheet { order: 1; display: flex; flex-direction: column; align-items: stretch; overflow: visible; padding: 34px 22px 25px; }
  .about-modern-page .about-profile-copy { width: 100%; }
  .about-modern-page .about-profile-copy h1 { font-size: clamp(38px, 10.5vw, 52px); line-height: 1.02; }
  .about-modern-page .about-profile-story { display: grid; grid-template-columns: 1fr; gap: 13px; font-size: 14px; line-height: 1.55; }
  .about-modern-page .about-profile-story p,
  .about-modern-page .about-profile-story p:first-child { grid-column: auto; font-size: 14px; line-height: 1.55; }
  .about-modern-page .about-profile-actions { grid-template-columns: 1fr; }
  .about-modern-page .about-flip-cue { position: relative; right: auto; bottom: auto; align-self: flex-end; margin-top: 20px; }
  .about-modern-page .about-art-sheet { order: 2; height: auto; aspect-ratio: 1; overflow: hidden; }
  .about-modern-page .about-art-reveal figcaption { right: 14px; bottom: 14px; left: 14px; max-width: none; padding: 11px 13px; }
  .about-modern-page .about-flip-cue-art { position: absolute; top: 12px; right: 12px; bottom: auto; margin: 0; }
  .about-modern-page .about-home-underlay { order: 3; display: flex; min-height: 310px; padding: 32px 22px; }
  .about-home-link { display: inline-flex; margin-top: 20px; padding: 12px 18px; border: 1px solid currentColor; border-radius: 999px; font: 11px DM Mono, monospace; }
  .about-modern-page .mobile-motion .about-art-sheet.is-visible,
  .about-modern-page .mobile-motion .about-home-underlay.is-visible {
    animation: mobileCardArrival .65s ease both;
  }

  /* Contact: let the actions follow the image without clipping on short phones. */
  .contact-page-single .contact-hero-screen { min-height: max(690px, calc(100dvh - 111px)) !important; padding: 70px 20px 50px !important; }
  .contact-page-single .contact-art-watermark { inset: 44px 14px 190px; }
  .contact-page-single .contact-hero-copy { width: 100%; height: auto; min-height: 570px; justify-content: flex-end; padding-bottom: 0; }
  .contact-page-single .contact-actions { width: 100%; gap: 8px; }
  .contact-page-single .contact-actions { grid-template-columns: minmax(0, 1fr); }
  .contact-page-single .contact-action { min-height: 50px; }
}

@keyframes mobileCardArrival {
  from { opacity: .6; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 360px) {
  .menus { gap: 8px; }
  .portfolio-home .hero-copy h1 { font-size: 22vw; }
  .portfolio-home .hero-screen .hero-art { right: -9%; width: 103vw; height: min(45dvh, 340px); }
  .about-modern-page .about-copy-sheet { padding-inline: 18px; }
  .about-modern-page .about-profile-copy h1 { font-size: 36px; }
  .ez-entry-copy > h2 { font-size: 18vw; }
}

@media (max-width: 650px) and (max-height: 650px) {
  .portfolio-home .hero-screen .scroll-prompt { top: 265px; bottom: auto; }
}

@media (min-width: 651px) and (max-width: 900px) and (max-height: 500px) {
  .portfolio-home .hero-screen { min-height: 510px !important; }
  .portfolio-home .hero-copy h1 { font-size: clamp(72px, 11vw, 98px); }
  .portfolio-home .hero-screen .hero-art { right: 3%; bottom: 68px; width: min(43vw, 345px); height: min(54dvh, 225px); }
  .ez-live-gallery,
  .project-gallery,
  .practice-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-image, .image-portrait, .image-template, .practice-image { aspect-ratio: 4 / 3; }
  .contact-page-single .contact-hero-screen { min-height: 570px !important; }
  .contact-page-single .contact-hero-copy { min-height: 420px; }
}

@media (max-width: 650px) and (prefers-reduced-motion: reduce),
       (max-width: 900px) and (max-height: 500px) and (prefers-reduced-motion: reduce) {
  .ticker-track, .shard, .canvas-glow { animation: none !important; }
  .reveal, .reveal.is-revealed { opacity: 1; transform: none; transition: none; }
  .work-row, .practice-image img, .project-image img { transition: none; }
}