/* Touch interaction and mobile layout, loaded after the legacy styles. */
a, button, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

@media (hover: none), (pointer: coarse) {
  .home-page .home-stage .project-card:not(.is-leaving) .project-image,
  .home-page .home-stage .project-card:not(.is-leaving) .project-image img {
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .home-page .home-stage .project-card.is-leaving .project-image {
    filter: blur(10px) !important;
    transform: none !important;
    transition: filter 220ms ease !important;
  }
}

@media (max-width: 1100px) {
  .home-page {
    --corner-logo-bottom: calc(var(--pad) + 1cm);
  }
}

/* Narrow portrait windows and tablets sit just above the phone breakpoint.
   Keep the preview and all three index columns inside the viewport instead of
   inheriting desktop minimum widths and negative overhangs. */
@media (min-width: 781px) and (max-width: 1100px) {
  .home-page .home-projects-layout {
    grid-template-columns: minmax(150px, 25vw) minmax(0, 1fr) !important;
    gap: clamp(22px, 3.5vw, 42px) !important;
  }
  .home-page .home-project-preview,
  .home-page .home-project-preview.is-portrait,
  .home-page .home-project-preview:has(img[height][width]) {
    width: 100% !important;
    max-width: 240px !important;
  }
  .home-page .home-project-preview img,
  .home-page .home-project-preview img[height][width] {
    width: 100% !important;
    max-height: 38svh !important;
    object-fit: contain !important;
  }
  .home-page #projectIndexGroups {
    width: 100% !important;
    margin-left: 0 !important;
  }
  .home-page .project-index-column {
    min-width: 0 !important;
    overflow: visible !important;
  }
  .home-page .project-index-group-title,
  .home-page .home-project-list li > a,
  .home-page .home-project-list li > .project-index-static {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) minmax(82px, .42fr) minmax(108px, .34fr) !important;
    column-gap: clamp(10px, 1.6vw, 18px) !important;
    font-size: clamp(14px, 1.8vw, 18px) !important;
  }
  .home-page .project-index-group-title > *,
  .home-page .home-project-list li > a > *,
  .home-page .home-project-list li > .project-index-static > * {
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
  .home-page .project-index-year,
  .home-page .project-index-group-title > :last-child {
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
    text-align: right !important;
  }
  .home-page .project-index-title {
    overflow-wrap: anywhere;
  }
  .home-page .project-index-column > .project-sort-control {
    margin-left: 0 !important;
  }
}

@media (max-width: 780px) {
  /* Project pages become one continuous mobile document: the two gallery
     tracks first, followed by the full project information. */
  .project-body {
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  .project-body .project-info-trigger {
    margin-top: 1px !important;
  }
  .project-body .project-page {
    height: auto !important;
    overflow: visible !important;
    background: var(--bg) !important;
  }
  .project-body .dual-gallery {
    height: 100svh !important;
  }
  .project-body .gallery-column,
  .project-body .gallery-column:first-child,
  .project-body .gallery-column:last-child {
    touch-action: pan-x pan-y !important;
    overscroll-behavior-block: auto !important;
  }
  .project-body .gallery-drawings .project-media {
    padding-inline: 24px !important;
  }
  .project-body .gallery-drawings .project-media img {
    max-width: calc(100% - 24px) !important;
    max-height: calc(50svh - clamp(112px, 15svh, 150px)) !important;
  }
  .project-body .project-info-overlay,
  .project-body .project-info-overlay.is-visible {
    position: relative !important;
    z-index: 1 !important;
    inset: auto !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 100svh !important;
    padding: clamp(104px, 15svh, 150px) var(--pad) 64px !important;
    overflow: visible !important;
    background: var(--bg) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .project-body {
    background: var(--bg) !important;
  }
  .project-body .project-info-overlay::before,
  .project-body .project-info-overlay::after {
    content: none !important;
    display: none !important;
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .project-body .project-info-scroll {
    position: static !important;
    inset: auto !important;
    display: block !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  .project-body .project-info-content {
    min-height: 0 !important;
    transform: none !important;
  }
  .project-body .project-info-copy p {
    text-wrap: pretty;
  }

  /* Reserve an actual logo-sized region below the sorting control. The mark
     remains fixed and continues to move above the footer with the existing JS. */
  .home-page .home-bottom-row {
    min-height: calc(var(--corner-logo-height, 90px) + 80px) !important;
    padding-top: 48px !important;
    padding-bottom: 32px !important;
  }

  .sketchbooks-page .sketchbook-back,
  .sketchbooks-page .sketchbook-cover-title,
  .sketchbooks-page .sketchbook-cover-meta,
  .sketchbooks-page .sketchbook-cover > span {
    display: none !important;
  }
  html:has(body.sketchbooks-page:not(.is-book-open)) {
    scroll-snap-type: y proximity;
  }
  .sketchbooks-page .sketchbooks-overview {
    padding: clamp(140px, 22svh, 240px) var(--sketch-pad) 16svh !important;
    gap: clamp(48px, 12svh, 110px);
  }
  .sketchbooks-page .sketchbooks-overview .sketchbook-cover {
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto;
    align-items: center;
  }
  .sketchbooks-page .sketchbooks-overview .sketchbook-cover img {
    top: 0;
    width: 100%;
    max-height: 52svh;
    object-fit: contain;
  }
}