/* Shared interaction layer, loaded after each page's own design. */
:root { --touch-ease: cubic-bezier(.2,.8,.2,1); }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
button, a, summary, select, [role="button"] { -webkit-tap-highlight-color: transparent; }
button, summary, [role="button"] { touch-action: manipulation; }
:where(a, button, summary, [role="button"]):focus-visible { outline: 2px solid var(--accent, #dcc39a); outline-offset: 4px; }
:where(a, button, summary, [role="button"]) { transition: opacity 160ms var(--touch-ease), background-color 160ms var(--touch-ease), border-color 160ms var(--touch-ease); }
:where(a, button, summary, [role="button"]).is-pressed { opacity: .72; }
:where(.artist-link, .painting-open, .season-card, .interview-trigger, .author-card, .entrance) { transition: transform 220ms var(--touch-ease), opacity 160ms var(--touch-ease); }
:where(.artist-link, .painting-open, .season-card, .interview-trigger, .author-card, .entrance).is-pressed { transform: scale(.982); transition-duration: 75ms; }
.painting-dialog .dialog-stage { touch-action: none; }
.painting-surface { transition: transform 220ms var(--touch-ease), opacity 220ms var(--touch-ease); }
.dialog-stage.is-gesturing .painting-surface { transition: none; }
.art-dialog[open] { animation: viewer-enter 230ms var(--touch-ease); }
.art-dialog[open]::backdrop { animation: veil-enter 180ms ease-out; }
.interview-dialog .dialog-close { width: 44px; height: 44px; border-radius: 50%; }
@keyframes viewer-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes veil-enter { from { opacity: 0; } to { opacity: 1; } }
@media (hover: none) {
    /* Touch devices keep the painting still; a press supplies the feedback. */
    .painting-open:hover img { transform: none; }
    .artist-link:hover .artist-portrait img { transform: none; }
    .season-card:hover .season-painting { transform: rotate(-1deg); }
    .entrance:is(:hover,:focus-visible) { --art-scale: 1; --art-turn: 0deg; }
}
@media (pointer: coarse) {
    button, [role="button"] { min-height: 44px; min-width: 44px; }
    summary { min-height: 44px; }
    .admin-link { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
    .form-control, .input-control, .pm-url-input-wrap .form-control, .ap-search-bar .form-control { font-size: 16px; }
}
@media (max-width: 700px) {
    .page-shell { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
    .site-header, .pleinair-page .site-header { min-height: 80px; padding: max(14px, env(safe-area-inset-top)) 0 14px; gap: 10px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: nowrap; }
    .site-header::after { content: none; }
    .wordmark { min-height: 44px; }
    .wordmark-image, .pleinair-page .wordmark-image { width: clamp(128px, 39vw, 172px); }
    .gallery-navigation { gap: 4px; }
    .gallery-navigation-link { min-height: 44px; padding: 8px 6px; font-size: 12px; border-radius: 5px 5px 0 0; }
    .gallery-navigation-link.is-pressed { background: rgba(36,56,47,.07); }
    .site-header .collection-nav { min-height: 44px; display: inline-flex; align-items: center; font-size: 12px; }
    .site-footer { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
    .admin-link { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
    .developer { min-height: 44px; display: inline-flex; align-items: center; }
    .artist-navigation { padding: 0 0 20px; }
    .artist-back, .archive-back { min-height: 44px; align-items: center; }
    .gallery-filters { flex-wrap: nowrap; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
    .gallery-filter { min-height: 48px; flex: 0 0 auto; font-size: 13px; padding: 12px 0; }
    .profile-appendix summary { min-height: 44px; display: flex; align-items: center; }
    .profile-social-link { min-height: 48px; font-size: 13px; }
    .profile-social-icon { width: 38px; height: 38px; flex-basis: 38px; }
    .artist-next { flex-wrap: wrap; }
    .artist-next a { min-height: 44px; display: flex; align-items: center; }
    .event-poster .event-description { font-size: 13px; }
    .event-poster .event-details > summary, .event-report-link { min-height: 48px; font-size: 12px; }
    .event-report-link { min-width: 120px; }
    .event-poster-footer.has-report .event-details > summary { max-width: calc(100% - 135px); }
    .painting-dialog[open] { padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); gap: 14px; }
    .painting-dialog .dialog-footer { gap: 12px; padding-top: 16px; }
    .painting-dialog .dialog-caption h2 { font-size: clamp(24px, 7vw, 30px); }
    .painting-dialog .dialog-step, .viewer-zoom, .painting-dialog .dialog-close { width: 48px; height: 48px; }
    .interview-dialog { padding: max(62px, calc(env(safe-area-inset-top) + 54px)) 18px max(22px, env(safe-area-inset-bottom)); max-height: calc(100dvh - 24px); }
    .interview-dialog .dialog-footer { flex-wrap: wrap; gap: 18px; }
    .interview-dialog .dialog-navigation { width: 100%; justify-content: space-between; }
    /* Catalog layouts use their own dark theme. */
    .dark-theme .container { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
    .dark-theme .authors-grid { grid-template-columns: minmax(0,1fr); gap: 36px; }
    .dark-theme .back-to-portal { top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); min-height: 44px; padding: 10px 14px; font-size: 12px; }
    .dark-theme .collection-hero { min-height: 0; padding: 100px 0 42px; }
    .dark-theme .collection-filter-bar { max-width: 100%; border-radius: 16px; padding: 8px; }
    .dark-theme .collection-filter-bar .filter-btn { min-height: 44px; font-size: 12px; letter-spacing: .03em; padding: 10px 14px; }
    .dark-theme .filter-select { min-height: 48px; font-size: 16px; max-width: 100%; }
    .dark-theme .alphabet-list-link { min-height: 44px; }
    .dark-theme .collection-hero-title { font-size: clamp(36px,10vw,48px); letter-spacing: .015em; }
    .dark-theme .collection-hero-subtitle { font-size: 13px; letter-spacing: .1em; }
}
@media (max-width: 350px) {
    .gallery-navigation-link { font-size: 11px; }
    .event-poster { padding-left: 18px; padding-right: 18px; }
    .event-poster .event-details > summary, .event-report-link { font-size: 11px; }
}
@media (max-height: 500px) and (orientation: landscape) {
    .site-header, .pleinair-page .site-header { min-height: 72px; padding: max(10px,env(safe-area-inset-top)) 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
    .site-header::after { content: none; }
    .wordmark-image, .pleinair-page .wordmark-image { width: 156px; }
    .painting-dialog[open] { gap: 8px; padding: max(8px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); }
    .painting-dialog .dialog-footer { flex-direction: row; align-items: center; gap: 16px; padding-top: 8px; }
    .painting-dialog .dialog-navigation { width: auto; }
    .painting-dialog .dialog-caption h2 { font-size: 23px; }
    .painting-dialog .dialog-more { max-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    :where(.artist-link,.painting-open,.season-card,.interview-trigger,.author-card,.entrance).is-pressed { transform: none; }
    .animate-fade-in-up, .collection-ornament-top, .collection-ornament-bottom, .collection-filter-bar, .collection-hero-title, .collection-hero-subtitle, .artists-hero-meta, .author-card:not(.hidden), .empty-state { opacity: 1; transform: none; }
    .hero-slider .slide:first-child { opacity: 1; transform: none; }
}