/* Mobile gallery: retain the museum palette, with touch-sized controls. */
@media (max-width: 700px) {
  html { scroll-padding-top: 90px; }
  body { background-attachment: scroll; }
  header { height: 76px; padding-inline: 16px; gap: 8px; }
  .logo-brand { width: 115px; height: 38px; }
  .logo-brand img { width: 200px; left: -58px; top: -47px; }
  .header-actions { gap: 4px; min-width: 0; }
  .digital-books-link { width: 44px; height: 44px; }
  .contact-link { font-size: 14px; letter-spacing: 0; padding: 10px 4px; }
  .site-menu summary { font-size: 0; padding: 10px; gap: 0; width: 44px; height: 44px; }
  .site-menu summary svg { width: 24px; height: 24px; }
  .site-menu nav { width: min(340px, calc(100vw - 32px)); min-width: 0; max-height: calc(100dvh - 100px); overflow-y: auto; }
  .site-menu nav a, .site-menu nav .menu-styles > button { white-space: normal; font-size: 16px; min-height: 48px; }
  .menu-styles:hover:not(.is-open):not(:focus-within) .style-submenu { display: none; }
  .museum { min-height: 0; height: clamp(240px, 56svh, 380px); margin-top: 16px; }
  .slide .frame, .slide:nth-child(n):hover .frame { transform: none; }
  .slide .frame img { object-fit: contain; }
  .caption { margin: 12px 20px 0; padding-top: 18px; gap: 12px; }
  .caption > div { min-width: 0; }
  .caption h2 { font-size: clamp(1.6rem, 7vw, 2rem); overflow-wrap: anywhere; }
  .caption p { font-size: 16px; line-height: 1.6; letter-spacing: 0; }
  .count { flex: none; font-size: 14px; letter-spacing: .04em; }
  .controls { gap: 10px; padding-inline: 16px; margin: 22px 0 36px; }
  .arrow, .pause { flex: none; width: 44px; min-width: 44px; height: 44px; }
  .dots { min-width: 0; max-width: 160px; overflow-x: auto; gap: 0; scrollbar-width: none; }
  .dots::-webkit-scrollbar { display: none; }
  .dot { flex: 0 0 24px; width: 24px; height: 44px; border-radius: 0; background: radial-gradient(circle, #706b63 3px, transparent 4px); }
  .dot.current { transform: none; background: radial-gradient(circle, #d5bf98 4px, transparent 5px); }
  .albums, .gear, .about-section { padding-inline: 20px; }
  .albums-head h2, .gear-heading h2, .about-copy h2 { font-size: clamp(2.4rem, 10vw, 3.5rem); overflow-wrap: anywhere; }
  .eyebrow, .gear-card .number, .gear-card .type, .foot { font-size: 14px; letter-spacing: .1em; }
  .style-grid { gap: 12px; margin: 28px 0 44px; }
  .style-card { min-width: 0; min-height: 175px; }
  .style-card span { font-size: 1.5rem; overflow-wrap: anywhere; }
  .style-card small { font-size: 14px; }
  .albums-subhead { align-items: start; flex-wrap: wrap; scroll-margin-top: 90px; }
  .filter-reset { min-height: 44px; font-size: 16px; }
  .album-card, .album-meta { min-width: 0; }
  .album-meta strong { overflow-wrap: anywhere; }
  .album-meta span { font-size: 14px; }
  .album-stack { margin-right: 0; height: clamp(230px, 75vw, 340px); }
  .album-card:hover .album-cover { transform: translate(-50%, -50%) rotate(-3deg); }
  .album-card:hover .album-backing-photo { transform: translate(-50%, -50%) translate(19px, -10px) rotate(7deg); }
  .album-card:hover .album-backing { transform: translate(16px, -9px) rotate(6deg); }
  .album-card:hover .album-backing:nth-child(2) { transform: translate(28px, -16px) rotate(10deg); }
  .heritage { min-height: 0; }
  .heritage-photo { width: min(86%, 360px); }
  .heritage-photo img { height: auto; aspect-ratio: 4/5; }
  .heritage-photo span, .heritage-sign { font-size: 14px; letter-spacing: .04em; }
  .gear-card { padding: 24px 20px; }
  .gear-card p, .about-copy p { font-size: 16px; line-height: 1.75; }
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .specs span { font-size: 14px; }
  .about-visual { width: min(100%, 420px); justify-self: center; box-shadow: 0 18px 40px #0008; }
  .album-view, .collection-view { padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); }
  .album-view-header, .collection-view-header { gap: 12px; }
  .album-view-header > div, .collection-view-header > div { min-width: 0; }
  .album-view-header h2, .collection-view-header h2 { font-size: clamp(2rem, 8vw, 3rem); overflow-wrap: anywhere; }
  .album-preview img { max-height: 50svh; }
  .album-thumbs { padding: 8px 0 24px; }
  .album-thumb { min-height: 44px; }
  .lightbox { padding: max(74px, env(safe-area-inset-top)) 12px max(76px, env(safe-area-inset-bottom)); }
  .lightbox img { touch-action: pan-y pinch-zoom; }
  .light-nav { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); transform: none; width: 48px; height: 48px; }
  .light-nav.previous { left: calc(50% - 62px); }
  .light-nav.next { right: calc(50% - 62px); }
  .close { top: max(12px, env(safe-area-inset-top)); right: 12px; width: 48px; height: 48px; }
}
@media (max-width: 380px) {
  header { padding-inline: 10px; }
  .logo-brand { width: 90px; height: 30px; }
  .logo-brand img { width: 157px; left: -45px; top: -37px; }
  .contact-link { font-size: 13px; }
  .header-actions { gap: 0; }
}