/* Motion is progressive enhancement; every section is readable without JS. */
:root { --motion-ease: cubic-bezier(.22,1,.36,1); }
.site-header { transition: box-shadow .25s ease, background-color .25s ease; }
.mobile-navigation[open] nav { animation: none; }
.mobile-navigation > summary:focus-visible,
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 5px;
}
.button, .mobile-book a, .viewer-controls button, .viewer-close, .viewer-compare {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
  .zoom-link:hover .zoom-hint, .guide-photo-link:hover .zoom-hint { color: var(--accent); }
  .viewer-controls button:enabled:hover, .viewer-close:hover, .viewer-compare:hover { background: #e5ebed; }
}
.faq details[data-expanding="false"] .faq-icon::after { transform: rotate(90deg); }
.guide-case-grid > *, .pair > *, .journey-pair > * { min-width: 0; }
.guide-author img[data-original-size], .portrait img[data-original-size] {
  aspect-ratio: auto; height: auto; object-fit: contain;
}
#photo-viewer { border-radius: 4px; scrollbar-gutter: stable; }
.viewer-top { top: -20px; margin-bottom: 12px; }
.viewer-top h2 { margin-right: auto; }
.viewer-compare { min-height: 44px; border: 1px solid var(--line); padding: 8px 12px; background: white; color: var(--ink); font: inherit; font-size: .875rem; }
.viewer-compare[aria-pressed="true"] { background: var(--ink); color: white; border-color: var(--ink); }
.viewer-stage { position: relative; min-height: min(48dvh, 360px); display: grid; place-items: center; background: var(--wash); }
.viewer-stage .viewer-image { display: block; max-height: 58vh; max-height: 58dvh; }
.viewer-stage[aria-busy="true"] .viewer-image { opacity: 0; }
.viewer-status { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 14px; padding: 24px; font-size: .9375rem; color: var(--muted); }
.viewer-status a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.viewer-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; width: 100%; }
.viewer-comparison figure { margin: 0; min-width: 0; }
.viewer-comparison img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: contain; max-height: 58vh; max-height: 58dvh; background: var(--wash); }
.viewer-comparison figcaption { padding: 10px 8px 2px; font-size: .875rem; line-height: 1.8; overflow-wrap: anywhere; }
.viewer-controls { margin-top: 12px; }
#photo-viewer.is-comparing .viewer-controls { justify-content: center; min-height: 28px; }
.viewer-caption { min-height: 1.9em; }
#photo-viewer [hidden] { display: none !important; }
@media (max-width: 700px) {
  .viewer-top { top: -14px; flex-wrap: wrap; gap: 8px; }
  .viewer-top h2 { font-size: .9375rem; }
  .viewer-compare, .viewer-close { padding-inline: 10px; font-size: .8125rem; }
  .viewer-stage { min-height: min(45dvh, 300px); }
  .viewer-comparison { gap: 8px; }
  .viewer-comparison figcaption { padding: 8px 4px; font-size: .875rem; }
  .viewer-caption-aligned { gap: 10px; }
  .viewer-controls button { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}