/* Tablet and phone repairs. Loaded after each page's original stylesheet. */
html { -webkit-text-size-adjust: 100%; overflow-wrap: break-word; }
body { min-width: 0; }
*, *::before, *::after { box-sizing: border-box; }
img, video { max-width: 100%; }
input, select, textarea { max-width: 100%; }
button, a, input, select, textarea { -webkit-tap-highlight-color: rgba(184,157,107,.3); }
a:focus-visible, button:focus-visible { outline: 2px solid #bda576; outline-offset: 4px; }
header > #menu, .site-header > .menu-button { display: none !important; }
header > #nav, .site-header > #navigation { min-width: 0; }
.hero-title > *, .art-grid > *, .artwork-layout > *, .contact > *,
.inquiry-section > *, .fields > *, .wall-access-cards > *, .review-columns > * { min-width: 0; }
.wall-access-actions, .wall-video-links, .wall-hero-actions, .actions { flex-wrap: wrap; }
.actions > *, .wall-video-links a { max-width: 100%; overflow-wrap: anywhere; }
.wall-access-nav { flex-wrap: wrap; height: auto; }
.hero-art, .collection-hero img, .wall-installation img, .split > img { height: auto; }
.art-image img, .enlarge img { object-fit: contain; }
.form-panel, fieldset { min-width: 0; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
[hidden] { display: none !important; }

/* One breakpoint shared with navigation-repair.js; no hover is required. */
@media (max-width: 1200px) {
  header.thp-main-header, .site-header { height: auto !important; min-height: 90px; flex-wrap: wrap; }
  header > #nav, .site-header > #navigation {
    display: flex !important; flex-basis: 100%; width: 100%; flex-direction: column;
    align-items: stretch; gap: 8px; padding: 16px 0; max-height: none;
  }
  .thp-nav-js header > #menu, .thp-nav-js .site-header > .menu-button {
    display: block !important; min-width: 76px; min-height: 44px; cursor: pointer;
    background: transparent; color: inherit; border: 1px solid #758079;
    border-radius: 0; font: inherit; padding: 10px 16px;
  }
  .thp-nav-js header > #nav, .thp-nav-js .site-header > #navigation { display: none !important; }
  .thp-nav-js header > #nav.open, .thp-nav-js .site-header > #navigation.open {
    display: flex !important; max-height: 70vh; max-height: 70dvh; overflow-y: auto;
  }
  header > #nav a, .site-header > #navigation a { min-height: 44px; display: flex; align-items: center; }
}

@media (max-width: 1000px) {
  .inquiry-section { grid-template-columns: minmax(0,1fr); gap: 30px; }
  .inquiry-section aside > p { max-width: 65ch; }
  .aside-note { margin: 24px 0; }
  .inquiry-section .selected-preview { max-width: 280px; }
}
@media (max-width: 900px) {
  .hero-title { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .hero-title > div:last-child { max-width: 65ch; }
  .wall-marketing .hero, body.thp-wall-page .hero { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .wall-access-cards { grid-template-columns: minmax(0,1fr); }
  .contact, .artwork-layout { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .artwork-info { margin-top: 0; }
  .artwork-stage { min-height: 0; }
  footer { gap: 24px; }
  footer > div { min-width: 0; }
}
@media (max-width: 700px) {
  header { height: auto; flex-wrap: wrap; gap: 16px; }
  header nav:not(#nav):not(#navigation) { flex-wrap: wrap; height: auto; }
  .utility { display: flex; flex-wrap: wrap; gap: 8px 16px; }
  .hero > *, .wall-access-card { min-width: 0; }
  .fields, .two, .art-grid, .review-columns, .participant-layout { grid-template-columns: minmax(0,1fr); }
  .form-panel { padding: 22px 16px; }
  .wall-access-actions a { width: 100%; overflow-wrap: anywhere; }
  .caption { flex-wrap: wrap; }
  .art-image { height: auto; min-height: 220px; }
  .art-image img { height: auto; max-height: 480px; }
  .button { max-width: 100%; overflow-wrap: anywhere; }
  .process ol { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .event { grid-template-columns: 70px minmax(0,1fr); }
  .event > .textlink { grid-column: 2; justify-self: start; }
  input, select, textarea { font-size: 16px !important; }
  dialog { width: calc(100% - 24px); max-width: calc(100vw - 24px); padding: 18px; }
}
@media (max-width: 420px) {
  .process ol { grid-template-columns: minmax(0,1fr); }
  .ribbon { flex-wrap: wrap; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}