/* Shared mobile layout. Original desktop styles remain the baseline. */
.mobile-menu-toggle, .mobile-home-logo { display: none; }
/* Keep the telephone banner visible throughout the desktop layout range. */
@media (min-width: 981px) {
  #tel { display: block; }
}
@media (max-width: 980px) {
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 16px; line-height: 1.8; }
  body .container { width: auto; margin: 0 16px; }
  body .container .inner { max-width: none; padding: 16px; }
  body #header { padding-top: 8px; }
  body #logo { display: none; }
  body .mobile-home-logo { display: block; }
  body.mobile-menu-ready .mobile-menu-toggle {
    display: flex; align-items: center; gap: 8px; position: static;
    top: 0; right: 0; min-height: 44px; padding: 6px 10px;
    border: 0; background: transparent; color: #3a1a1a; font: inherit;
    cursor: pointer;
  }
  .mobile-menu-icon { font-size: 24px; line-height: 1; }
  body a:focus-visible, body button:focus-visible {
    outline: 2px solid #1da3aa; outline-offset: 3px;
  }
  body #bar { margin: 12px 0 20px; text-align: left; }
  body.mobile-menu-ready #bar:not(.is-open) { display: none; }
  body #bar ul { border-top: 1px dotted #aaaaaa; }
  body .centered ul, body .centered ul li { left: auto; float: none; }
  body #bar ul li { float: none; margin: 0; border-bottom: 1px dotted #aaaaaa; }
  body #bar ul li a[id] {
    background: none !important; text-indent: 0; width: auto !important;
    height: auto !important; padding: 10px 12px; min-height: 24px;
    color: #3a1a1a; font-size: 16px; line-height: 1.8;
  }
  body #bar ul li a.current { color: #1da3aa; }
  body #bar .new { display: none; }
  body #main { margin-top: 20px; margin-bottom: 24px; }
  body .hello {
    width: 100%; height: auto; aspect-ratio: 2 / 1;
    background-size: cover; background-position: center; margin-bottom: 16px;
  }
  body.home #main .container:has(.hello) { margin: 0; }
  body.home #main .inner:has(> .hello) { padding: 0; background: transparent; border-radius: 0; }
  body.home .hello { border-radius: 0; margin-bottom: 0; }
  body.home #updates { margin: 16px 16px 24px; padding: 16px; background: #fff; border-radius: 8px; }
  body #home_news, body #home_blog, body .col_left, body .col_right {
    float: none; width: auto; margin: 0;
  }
  body #home_blog { margin-top: 32px; }
  body #home_news ul, body #home_blog ul { margin: 0; }
  body h2#title { margin-bottom: 20px; padding-top: 16px; }
  body img { max-width: 100%; height: auto; }
  body .post_content { overflow-wrap: anywhere; }
  body #page_link li { float: none; width: auto; margin: 28px 0; }
  body #page_link .post_thumbnail { display: block; width: 200px; max-width: 100%; margin: 0 auto; }
  body #updates { margin-bottom: 24px; }
  body #footer .inner { padding: 0; }
  body .data_right { margin-left: 0; }
  body .hours-scroll { max-width: 100%; overflow-x: auto; }
  body table#open { min-width: 390px; }
  body #contact .col_right { margin-top: 28px; }
  body #map a {
    width: min(330px, 100%); height: auto; aspect-ratio: 330 / 300;
    background-size: contain; margin: 0 auto;
  }
  body #copyright { padding: 32px 0; }
  body #wanted { position: static !important; margin: 0 auto; padding: 0 0 24px; width: 125px; }
  body.single #main .container { width: auto; }
  body #logo_mini { margin: 12px 0 20px; }
  body #logo_mini a, body #logo_mini:hover a {
    width: min(375px, 100%); height: auto; aspect-ratio: 5 / 1;
    margin: 0 auto; background-size: contain; background-position: center;
  }
  body #header .container {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; column-gap: 12px; padding-top: 0;
  }
  body #logo_mini { grid-column: 1; grid-row: 1; min-width: 0; margin: 0; }
  body #logo_mini a { margin: 0; min-height: 44px; background-position: left center; }
  body .mobile-menu-toggle { grid-column: 2; grid-row: 1; }
  body #header #bar { grid-column: 1 / -1; margin: 12px 0 0; }
  body #left, body #right, body .staff_left, body .staff_right {
    float: none; width: auto; margin: 0;
  }
  body #left { margin-bottom: 24px; }
  body #left h3#title { float: none; }
  body #content_wrap li.content_list { padding-top: 16px; margin-bottom: 32px; }
  body .staff_left { margin-bottom: 20px; }
  body .staff_right { overflow-wrap: anywhere; }
  body #main { overflow-wrap: anywhere; }
  body.single #post { margin: 0; }
  body.single #post_link #previous, body.single #post_link #next {
    float: none; width: auto; margin: 16px 0;
  }
  body #cats { display: flex; flex-wrap: wrap; gap: 8px 16px; }
  body #cats a { display: inline-block; padding: 6px 0; }
  body #pagenation { margin: 24px 0; }
  body #pagenation .pagenum > div { display: flex; flex-wrap: wrap; gap: 8px; }
  body #pagenation .pagenum a, body #pagenation .pagenum span {
    min-width: 24px; padding: 6px 10px; text-align: center;
  }
  body .flex-container { margin-bottom: 56px; }
  body .flex-direction-nav .flex-next { right: 0; opacity: 1; }
  body .flex-direction-nav .flex-prev { left: 0; opacity: 1; }
  body .flex-control-nav { position: static; margin-top: 12px; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
  body .flex-control-nav li { margin: 0; }
  body #machine ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  body #machine li { float: none; box-sizing: border-box; width: 100%; height: auto; margin: 0; }
  body #machine li a { height: auto; aspect-ratio: 1; display: flex; align-items: center; }
  body #machine .group img { object-fit: contain; max-height: 100%; }
  body #machine li p { padding-bottom: 8px; }
  body .post_content img { max-width: 100% !important; height: auto !important; }
  body .post_content .wp-caption { max-width: 100%; }
  body .post_content iframe, body .post_content video { max-width: 100%; }
  body .content-table-scroll { max-width: 100%; overflow-x: auto; }
  body .post_content pre { white-space: pre-wrap; }
  body #main .inner:has(#monthly) { display: flex; flex-direction: column; }
  body #main .inner:has(#monthly) > #left { order: 2; margin-top: 24px; }
  body #monthly { display: flex; flex-wrap: wrap; gap: 8px 16px; }
}