/* MOBILE v1 (28 Oct 2026): phones and small tablets follow the desktop structure more closely
   (two-up grids, side-by-side buttons, swipeable rows where desktop has columns) and the page is
   shorter. Remove the <link> to this file in templates/base.html to switch it off. Desktop is untouched. */

.m-navstrip{display:flex;gap:6px;overflow-x:auto;padding:0 12px 10px;background:#fff;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.m-navstrip a{flex:0 0 auto;padding:7px 13px;border-radius:999px;font:500 13px/1 Inter,sans-serif;color:#52525b;background:#fafafa;border:1px solid #f4f4f5;white-space:nowrap}
.m-navstrip a.on{color:#96590a;border-color:#f3d673;background:#fefbe9}
#nav.is-stuck .m-navstrip{margin:6px 12px 0;padding:6px;border-radius:999px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 8px 24px -14px rgba(74,46,18,.35)}
@media (min-width:1024px){.m-navstrip{display:none}}

@media (max-width:767px){
  main .max-w-container[class*="py-16"],main .max-w-container[class*="py-20"]{padding-top:2.75rem!important;padding-bottom:2.75rem!important}
  main h2[class*="text-4xl"]{font-size:1.85rem!important;line-height:1.15!important}
  main .mb-12{margin-bottom:1.75rem!important}
  main .mb-10{margin-bottom:1.5rem!important}

  .m-btns{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px!important}
  .m-btns>a{padding:12px 6px!important;font-size:13px!important;text-align:center;line-height:1.2;display:flex;align-items:center;justify-content:center}
  .m-stats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px!important;margin-top:1.75rem!important;padding-top:1.25rem!important}
  .m-stats p.font-display{font-size:1.35rem!important}

  .m-grid2{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .m-details>div{padding:16px!important}
  .m-details>div svg{width:22px;height:22px}
  .m-details>div p.font-display{font-size:15px!important}
  .m-details>div:nth-child(n+3){grid-column:span 2}
  .m-people>a{flex-direction:column!important;gap:10px!important;padding:10px!important}
  .m-people>a>span:first-child{width:100%!important;height:auto!important;aspect-ratio:4/5}
  .m-people>a span.font-display{font-size:14.5px!important}
  .m-people>a span[class*="line-clamp-2"]{font-size:12px!important}
  .m-list{gap:8px 14px!important;font-size:13.5px!important}

  .m-hscroll{display:flex!important;gap:14px!important;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -24px;padding:0 24px 4px;scrollbar-width:none}
  .m-hscroll>*{flex:0 0 78%;scroll-snap-align:start}

  .m-side{display:grid!important;grid-template-columns:38% minmax(0,1fr)!important;gap:18px!important;align-items:start!important}
  .m-side h2{font-size:1.4rem!important}
  .m-side p.text-lg{font-size:14.5px!important}
  .m-side .mt-8.flex{flex-direction:column;gap:8px}
  .m-side .mt-8.flex a{padding:11px 14px!important;font-size:13.5px!important;text-align:center}

  .m-map iframe{height:15rem!important;min-height:0!important}

  .m-foot{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:2rem 1.25rem!important}
  .m-foot>div:first-child{grid-column:span 2}
  footer .py-16{padding-top:3rem!important;padding-bottom:3rem!important}
}