/* Quiet, optional movement; the approved layout and image sizes stay in control. */
html:not(.no-js) .model-panels { display: grid; }
html:not(.no-js) .model-panel { grid-area: 1 / 1; align-self: start; }
html:not(.no-js) .model-panel[hidden] { display: block; visibility: hidden; pointer-events: none; }
.model-previous { pointer-events: none; }

/* Reserve the complete photo's dimensions while the original is loading. */
.dialog-media { position: relative; }
.dialog-media[aria-busy="true"] { min-height: 0; }
.dialog-status { position: absolute; inset: 0; max-width: none; max-height: 100%; overflow: auto; display: grid; place-items: center; padding: 16px; background: var(--paper); }

@media (prefers-reduced-motion: no-preference) {
  .button > span, .text-link > span { transition: transform 180ms ease-out; }
  .button:focus-visible > span, .text-link:focus-visible > span { transform: translate(2px, -2px); }
  .gallery-dialog[open]::backdrop { animation: gallery-backdrop-in 200ms ease-out both; }
  .gallery-dialog.is-closing::backdrop { animation: gallery-backdrop-out 140ms ease-out both; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .button:hover > span, .text-link:hover > span { transform: translate(2px, -2px); }
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .project-image:hover img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .button > span, .text-link > span, .photo-zoom .image-expand { transform: none; transition: none; }
}
@keyframes gallery-backdrop-in {
  from { background-color: rgba(29, 34, 25, 0); }
  to { background-color: rgba(29, 34, 25, .86); }
}
@keyframes gallery-backdrop-out {
  from { background-color: rgba(29, 34, 25, .86); }
  to { background-color: rgba(29, 34, 25, 0); }
}

/* Without JavaScript, keep mobile navigation available in normal document flow. */
@media (max-width: 820px) {
  .no-js .site-header { position: static; height: auto; }
  .no-js .header-inner { flex-wrap: wrap; gap: 12px; padding-block: 18px; }
  .no-js .menu-toggle { display: none; }
  .no-js .site-nav { display: flex; position: static; flex: 0 0 100%; max-height: none; overflow: visible; padding: 0; border-bottom: 0; }
}