/* The reference keeps its 1160px directory canvas on narrow screens.
   Match its measured geometry without changing desktop or admin styles. */
@media (max-width: 600px), (max-device-width: 600px) {
  body { font-size: 12px; line-height: normal; overflow-x: auto; }
  .site-shell { width: 1160px; max-width: none; min-width: 1160px; margin: 0; padding: 0; }
  .masthead { box-sizing: border-box; width: 1160px; height: 145px; min-height: 145px; padding: 22px 0 0; display: block; text-align: left; background: #000; }
  .masthead a { display: flex; align-items: center; justify-content: center; width: 186px; height: 86px; background: #f53420; color: #fff; }
  .masthead strong { font-size: 76px; line-height: 1; letter-spacing: -3px; }
  .masthead strong span, .masthead > div { display: none; }
  .masthead .site-logo { max-width: 186px; max-height: 86px; }
  .announcement { box-sizing: border-box; width: 1160px; height: 60px; padding: 15px 8px 0 298px; text-align: left; white-space: nowrap; font-size: 27px; line-height: 40px; overflow: hidden; }
  .site-nav { box-sizing: border-box; display: flex; flex-wrap: nowrap; width: 1160px; height: 42px; margin: 0; border: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { box-sizing: border-box; flex: 0 0 165.55px; height: 42px; padding: 7px 1px; border: 1px solid #000; border-right: 0; white-space: nowrap; font: 600 16px/26px Arial, sans-serif; }
  .site-nav a:last-child { border-right: 1px solid #000; }
  .site-nav a.active { background: linear-gradient(#fff,#eee); color: #202020; }
  .site-nav a:hover { background: #eee; color: #202020; }
  .mobile-search, .breadcrumb-line, .filter-toggle { display: none; }
  main > h1.visually-hidden { display: none !important; }
  .directory-layout { display: grid; grid-template-columns: 200px 930px; gap: 30px; width: 1160px; margin: 0; }
  .recent-column { width: 200px; order: initial; }
  .recent-column h2 { box-sizing: border-box; height: 40px; margin: 0 0 10px; padding: 8px 0 0; border: 0; text-align: center; font: 600 18px/30px Arial, sans-serif; }
  .recent-grid { display: grid; grid-template-columns: 200px; gap: 15px; width: 200px; padding: 0; overflow: visible; scroll-snap-type: none; }
  .recent-grid .listing-card { display: block; width: 200px; min-width: 200px; height: 320px; overflow: hidden; scroll-snap-align: none; }
  .recent-grid .listing-card:nth-child(n+3) { display: block; }
  .recent-column .card-photo { width: 198px; height: 230px; aspect-ratio: auto; }
  .recent-column .card-copy { padding: 3px 3px 4px; }
  .recent-column .card-title { font-size: 14px; line-height: 25px; min-height: 0; }
  .recent-column .card-copy p { display: block; font-size: 12px; line-height: 20px; }
  .recent-column .card-desc, .recent-column .card-meta { display: none; }
  .recent-column .more-link { display: block; }
  .main-column { width: 930px; min-width: 930px; }
  .main-column > section { margin: 0 0 22px; }
  .section-head { display: flex; flex-wrap: nowrap; box-sizing: border-box; height: 40px; min-height: 40px; padding: 3px 10px; margin: 0 0 14px; border-bottom: 2px solid #222; }
  .section-head h1, .section-head h2 { font: 400 22px/30px Arial, sans-serif; white-space: nowrap; }
  .section-head .quick-search { display: flex; order: initial; width: 417px; min-width: 417px; height: 32px; margin: 0; gap: 5px; }
  .quick-search input { width: 312px; min-width: 312px; height: 32px; font-size: 13px; }
  .quick-search button { width: 100px; height: 31px; padding: 0; font-size: 14px; }
  .card-grid { display: grid; grid-template-columns: repeat(4, 190px); gap: 20px 40px; padding: 0 24px; }
  .card-grid .listing-card { width: 190px; }
  .card-grid .card-photo { width: 188px; height: 250px; aspect-ratio: auto; }
  .card-grid .card-copy { padding: 3px 3px 5px; }
  .card-grid .card-title { min-height: 0; font-size: 14px; line-height: 25px; }
  .card-grid .card-copy p { display: block; min-height: 0; margin: 0; font-size: 12px; line-height: 20px; }
  .card-grid .card-meta { font-size: 10px; }
  .card-grid .card-desc { display: none; }
  .card-grid .system-card .card-copy p { display: block; }
  .card-grid .system-card .card-photo img { filter: none; }
  .card-grid .system-card:first-child .card-photo img { content: url('/mobile-discussion.svg'); }
  .card-grid .system-card:nth-child(2) .card-photo img { content: url('/mobile-channel.svg'); }
  .full-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; padding: 0; }
  .detail-panel { display: flex; flex-direction: column; width: 1160px; margin: 0; border: 2px solid #222; border-radius: 0; overflow: hidden; }
  .detail-panel > .section-head { order: 0; height: 50px; min-height: 50px; margin: 0; padding: 7px 10px; }
  .mobile-detail-title { display: none; }
  .detail-layout { order: 1; display: grid; grid-template-columns: 380px minmax(0,1fr); gap: 26px; padding: 12px 20px; }
  .detail-media { width: 380px; }
  .detail-copy { width: auto; }
  .detail-copy .detail-title { display: block; font-size: 31px; }
  .detail-cover { width: 380px; height: auto; max-height: 570px; aspect-ratio: 3/4; object-fit: cover; }
  .dense-facts > div { font-size: 16px; line-height: 1.5; padding: 2px 0; border: 0; }
  .dense-facts dt { min-width: 130px; }
  .detail-section { order: 3; margin: 14px 20px 26px; }
  #videos { order: 2; margin-left: 0; margin-right: 0; }
  #contacts { order: 4; }
  #gallery { order: 5; }
  .detail-panel > .comments-section { order: 6; }
  .detail-gallery { columns: 3; column-gap: 16px; }
  .detail-videos { grid-template-columns: repeat(2,550px); gap: 40px; padding: 2px 8px 0; }
  .detail-videos figure { margin: 0; }
  .detail-videos video { width: 550px; height: 400px; object-fit: contain; }
  .detail-videos figcaption { display: none; }
  .contact-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .detail-panel .comment-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 25px; }
  .detail-panel .comments-section { margin: 0 20px 20px; }
  .rich-content { max-width: 100%; font-size: 16px; overflow-wrap: anywhere; }
  .rich-content img { max-width: 100%; height: auto; }
  .rich-content table { max-width: 100%; }
  .rich-content a { overflow-wrap: anywhere; }
  footer { width: 1160px; }
}