@media (max-width:1200px){
  /* Replace the old pager dots with tactile swipe controls. */
  .mobile-shell-dots{display:none!important}
  .mobile-map-page::before,.mobile-map-page::after{display:none!important}

  .mobile-swipe-nav{
    position:absolute!important;
    top:50%!important;
    z-index:96!important;
    width:30px!important;
    height:50px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    transform:translateY(-50%)!important;
    border:1px solid rgba(244,240,229,.34)!important;
    border-radius:999px!important;
    background:rgba(23,54,58,.18)!important;
    color:rgba(244,240,229,.82)!important;
    box-shadow:0 2px 10px rgba(23,54,58,.09)!important;
    font:300 29px/1 Arial,sans-serif!important;
    padding:0!important;
    margin:0!important;
    cursor:pointer!important;
    touch-action:manipulation!important;
    -webkit-tap-highlight-color:transparent!important;
    backdrop-filter:blur(2px)!important;
    -webkit-backdrop-filter:blur(2px)!important;
    will-change:transform,opacity!important;
  }
  .mobile-swipe-nav[data-dir="left"]{
    left:max(7px,env(safe-area-inset-left))!important;
    animation:kevewi-swipe-left 4.2s cubic-bezier(.2,.75,.2,1) infinite!important;
  }
  .mobile-swipe-nav[data-dir="right"]{
    right:max(7px,env(safe-area-inset-right))!important;
    animation:kevewi-swipe-right 4.2s .55s cubic-bezier(.2,.75,.2,1) infinite!important;
  }
  .mobile-swipe-nav:hover,.mobile-swipe-nav:focus-visible{
    color:#f4f0e5!important;
    background:rgba(23,54,58,.28)!important;
    outline:none!important;
  }
  .mobile-swipe-nav[data-dir="left"]:hover,.mobile-swipe-nav[data-dir="left"]:focus-visible{
    animation:kevewi-swipe-left-hover .8s cubic-bezier(.2,.8,.2,1) infinite!important;
  }
  .mobile-swipe-nav[data-dir="right"]:hover,.mobile-swipe-nav[data-dir="right"]:focus-visible{
    animation:kevewi-swipe-right-hover .8s cubic-bezier(.2,.8,.2,1) infinite!important;
  }
  .mobile-swipe-nav.is-burst{
    width:38px!important;
    font-size:22px!important;
    letter-spacing:-7px!important;
    color:#f4f0e5!important;
    background:rgba(23,54,58,.38)!important;
  }
  .mobile-swipe-nav[data-dir="left"].is-burst{animation:kevewi-burst-left .36s ease-out 1!important}
  .mobile-swipe-nav[data-dir="right"].is-burst{animation:kevewi-burst-right .36s ease-out 1!important}

  /* Six chronological filters sit as a compact 3 x 2 matrix under genres. */
  .mobile-map-time{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-auto-rows:auto!important;
    gap:4px 7px!important;
  }
  .mobile-map-time button{min-width:0!important;white-space:nowrap!important}
  .mobile-map-time button[data-mobile-time="month"]:before,
  .mobile-map-time button[data-mobile-time="few"]:before,
  .mobile-map-time button[data-mobile-time="all"]:before{
    width:4px!important;height:4px!important;margin-right:6px!important;
    border:0!important;background:rgba(23,54,58,.42)!important;
  }
  .mobile-map-time button[data-mobile-time="month"].active:before,
  .mobile-map-time button[data-mobile-time="few"].active:before,
  .mobile-map-time button[data-mobile-time="all"].active:before{
    background:var(--accent)!important;
  }

  /* Rings are deliberately snug and thin. A selected pin is brighter rather
     than relying on a large hover/focus expansion that can look like a nearby
     event has been selected. */
  .mobile-map-page .pin .pin-tonight-ring,
  .mobile-map-page .pin .pin-week-ring,
  .mobile-map-page .pin .pin-regular-ring{
    fill:none!important;
    stroke-width:1.15!important;
    opacity:.78!important;
    transform:none!important;
  }
  .mobile-map-page .pin .pin-tonight-ring{stroke:#c96658!important}
  .mobile-map-page .pin .pin-week-ring{stroke:#4e8e95!important}
  .mobile-map-page .pin .pin-regular-ring{stroke:var(--lime)!important}
  .mobile-map-page .pin:hover>circle:not(.pin-regular-ring):not(.pin-week-ring):not(.pin-tonight-ring),
  .mobile-map-page .pin:focus>circle:not(.pin-regular-ring):not(.pin-week-ring):not(.pin-tonight-ring){
    transform:scale(1.04)!important;
    transform-origin:center!important;
  }
  .mobile-map-page .pin.is-selected{
    filter:drop-shadow(0 0 4px rgba(244,240,229,.72)) brightness(1.16)!important;
  }
  .mobile-map-page .pin.is-selected>circle:not(.pin-regular-ring):not(.pin-week-ring):not(.pin-tonight-ring){
    transform:scale(1.10)!important;
    transform-origin:center!important;
    stroke:#fff!important;
    stroke-width:4!important;
  }
  .mobile-map-page .pin.is-selected .pin-tonight-ring,
  .mobile-map-page .pin.is-selected .pin-week-ring,
  .mobile-map-page .pin.is-selected .pin-regular-ring{opacity:1!important}

  /* Keep pages inside exactly one viewport. The previous content-box padding
     could make the What's On and editorial pages slightly wider than 100vw. */
  .mobile-list-page,.mobile-editorial-page{
    box-sizing:border-box!important;
    width:100vw!important;
    min-width:100vw!important;
    max-width:100vw!important;
    padding-left:max(18px,env(safe-area-inset-left))!important;
    padding-right:max(18px,env(safe-area-inset-right))!important;
    overflow:hidden!important;
  }
  .mobile-list-scroll,.mobile-editorial-scroll,.mobile-page-head{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .mobile-list-scroll,.mobile-editorial-scroll{overflow-x:hidden!important}
  .mobile-list-row{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    grid-template-columns:31px minmax(0,.9fr) minmax(0,1.15fr) 42px!important;
  }
  .mobile-page-head{grid-template-columns:auto minmax(0,1fr) minmax(0,1.15fr)!important}
  .mobile-page-head em{min-width:0!important;max-width:100%!important}
  .mobile-editorial-jumps{
    white-space:normal!important;
    text-align:right!important;
    line-height:1.35!important;
    pointer-events:auto!important;
  }
  .mobile-editorial-jumps a{position:relative!important;z-index:98!important;pointer-events:auto!important}

  @keyframes kevewi-swipe-left{
    0%,60%,100%{transform:translateY(-50%) translateX(0);opacity:.62}
    68%{transform:translateY(-50%) translateX(-2px);opacity:.82}
    76%{transform:translateY(-50%) translateX(3px);opacity:.96}
    84%{transform:translateY(-50%) translateX(0);opacity:.68}
  }
  @keyframes kevewi-swipe-right{
    0%,60%,100%{transform:translateY(-50%) translateX(0);opacity:.62}
    68%{transform:translateY(-50%) translateX(2px);opacity:.82}
    76%{transform:translateY(-50%) translateX(-3px);opacity:.96}
    84%{transform:translateY(-50%) translateX(0);opacity:.68}
  }
  @keyframes kevewi-swipe-left-hover{
    0%,100%{transform:translateY(-50%) translateX(0);opacity:.74}
    50%{transform:translateY(-50%) translateX(6px);opacity:1}
  }
  @keyframes kevewi-swipe-right-hover{
    0%,100%{transform:translateY(-50%) translateX(0);opacity:.74}
    50%{transform:translateY(-50%) translateX(-6px);opacity:1}
  }
  @keyframes kevewi-burst-left{
    0%{transform:translateY(-50%) translateX(0) scale(.92);opacity:.72}
    55%{transform:translateY(-50%) translateX(-9px) scale(1.08);opacity:1}
    100%{transform:translateY(-50%) translateX(0) scale(1);opacity:.8}
  }
  @keyframes kevewi-burst-right{
    0%{transform:translateY(-50%) translateX(0) scale(.92);opacity:.72}
    55%{transform:translateY(-50%) translateX(9px) scale(1.08);opacity:1}
    100%{transform:translateY(-50%) translateX(0) scale(1);opacity:.8}
  }
}

@media (prefers-reduced-motion:reduce){
  .mobile-swipe-nav{animation:none!important}
}