/* Slide: one screen, two pages. The map page swipes left to reveal every stockist,
   and swipes back the same way. Edge tabs (or a sideways swipe) move between them. */
html, body.slide { height: 100%; }
body.slide {
  height: 100dvh; overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
}
.slide .masthead { width: 100%; padding-top: clamp(14px, 2.6vh, 28px); }
.slide .masthead img { width: clamp(170px, 16vw, 230px); margin-bottom: clamp(10px, 1.8vh, 18px); }

.slide .stage { position: relative; overflow: hidden; min-height: 0; touch-action: pan-y; }
.slide .track {
  display: flex; height: 100%;
  transition: transform .8s cubic-bezier(.7, 0, .15, 1);
  will-change: transform;
}
.slide.listing .track { transform: translateX(-100%); }
.slide .track.dragging { transition: none; }
.slide .pane {
  flex: 0 0 100%; height: 100%; min-width: 0;
  padding: clamp(14px, 2.6vh, 30px) max(calc(var(--gutter) + 48px), calc((100% - var(--max)) / 2 + var(--gutter)));
  transition: opacity .8s;
}
.slide.listing .pane-map, .slide:not(.listing) .pane-list { opacity: .25; }

/* Map page: words on top, the map takes whatever height is left */
.slide main.pane-map { max-width: none; margin: 0; display: flex; flex-direction: column; }
.slide .lead { padding: 0; flex: none; }
.slide h1 { font-size: clamp(40px, min(6.6vw, 9.5vh), 104px); margin-bottom: clamp(4px, 1vh, 12px); }
.slide .standfirst { margin-bottom: clamp(10px, 2.4vh, 28px); }
.slide .aside { margin-top: 8px; display: flex; gap: 20px; justify-content: center; }
.slide .aside .link { margin: 0; }
.slide #zreset[hidden] { display: none; }
.slide .status { margin-top: 6px; min-height: 1.3em; }
.slide .map-fig { flex: 1 1 auto; min-height: 0; display: flex; margin-top: clamp(4px, 1vh, 12px); }
.slide .map-frame { flex: 1; aspect-ratio: auto; min-height: 0; }
/* Soft edges: the map fades into the paper instead of stopping at a hard line.
   A paper-coloured wash over the edges (cheaper than masking the SVG while zooming). */
.slide .map-frame::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--paper), rgba(248, 248, 244, 0) 9%, rgba(248, 248, 244, 0) 88%, var(--paper)),
    linear-gradient(to right, var(--paper), rgba(248, 248, 244, 0) 7%, rgba(248, 248, 244, 0) 93%, var(--paper));
}

/* Zoomed in: the headline steps back and the search tightens, giving the map the room */
.slide h1, .slide .standfirst, .slide .search, .slide .search input {
  transition: font-size .7s cubic-bezier(.45, 0, .2, 1), max-height .7s cubic-bezier(.45, 0, .2, 1), opacity .45s ease, margin .7s cubic-bezier(.45, 0, .2, 1), max-width .7s cubic-bezier(.45, 0, .2, 1);
}
.slide .standfirst { max-height: 4em; overflow: visible; }
.slide.zoomed h1 { font-size: clamp(26px, min(2.6vw, 4.4vh), 40px); margin-bottom: 6px; }
.slide.zoomed .standfirst { max-height: 0; opacity: 0; margin: 0; overflow: hidden; pointer-events: none; }
.slide.zoomed .search { max-width: 360px; }
.slide.zoomed .search input { font-size: 19px; }

/* Results: one quiet row under the map */
.slide .results {
  flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 28px; margin: clamp(8px, 1.6vh, 18px) 0 0;
}
.slide .results li:nth-child(n+5) { display: none; }
.slide .result .city { font-size: 19px; }
.slide .result .addr { font-size: 14px; }
.slide .results .dir { font-size: 14px; }

/* List page */
.slide .pane-list { display: flex; flex-direction: column; }
.list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; flex-wrap: wrap; flex: none; margin-bottom: clamp(12px, 2.6vh, 28px); }
.list-head h2 { font: 400 clamp(40px, min(5.4vw, 8vh), 84px)/.95 var(--f-title); color: var(--red); margin: 0; }
.list-head .filter {
  flex: 0 1 380px; border: 0; border-bottom: 0.75px solid var(--ink); background: transparent;
  font: 300 22px/1.2 var(--f-cond); padding: 6px 0 8px; color: var(--ink);
}
.list-head .filter:focus { outline: none; border-bottom-color: var(--red); }
.list-head .filter::-webkit-search-cancel-button { -webkit-appearance: none; }
.stock-list {
  flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--hair) transparent;
  /* Soft edges, like the map: fade top and bottom only where there is more to scroll to */
  --ft: 0px; --fb: 0px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--ft), #000 calc(100% - var(--fb)), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 var(--ft), #000 calc(100% - var(--fb)), transparent);
}
.stock-list.more-up { --ft: 56px; }
.stock-list.more-down { --fb: 72px; }
.stock-cols { columns: 4 220px; column-gap: calc(var(--u) * 4); padding-bottom: 40px; }
.stock-state { break-inside: avoid; margin: 0 0 calc(var(--u) * 2.5); }
.stock-state h3 {
  display: flex; justify-content: space-between; align-items: baseline;
  font: 400 22px/1.1 var(--f-cond); margin: 0 0 6px; padding-bottom: 6px;
  border-bottom: 0.75px solid var(--hair);
}
.stock-state h3 span { font: 400 14px var(--f-body); color: var(--muted); font-variant-numeric: lining-nums; }
.stock-state ul { list-style: none; margin: 0; padding: 0; }
.stock-state li { padding: 4px 0; }
.stock-state li button {
  display: block; border: 0; background: none; padding: 0; cursor: pointer; text-align: left;
  font: 400 15px/1.35 var(--f-body); color: var(--ink);
}
.stock-state li button span { display: block; font-weight: 300; color: var(--muted); }
.stock-state li button:hover, .stock-state li button:hover span { color: var(--red-ink); }
.stock-state [hidden] { display: none; }

/* Zoom buttons: two quiet squares in the map's corner */
.zoom-ctl { position: absolute; left: 0; bottom: 6px; z-index: 3; display: flex; flex-direction: column; }
.zoom-ctl button {
  width: 30px; height: 30px; padding: 0; border: 0.75px solid var(--hair); background: var(--paper);
  font: 300 20px/1 var(--f-body); color: var(--ink); cursor: pointer; transition: color .2s, border-color .2s;
}
.zoom-ctl button + button { border-top: 0; }
.zoom-ctl button:hover { color: var(--red-ink); border-color: var(--ink); }
.zoom-ctl button:focus-visible { outline: none; color: var(--red-ink); }
@media (hover: none) { .zoom-ctl { display: none; } }

/* A plain shortcut to the list, next to "Use my location" */
.map-all i { font-style: normal; letter-spacing: 0; display: inline-block; transition: transform .3s; }
.map-all:hover i { transform: translateX(4px); }

/* Edge tabs: one on each side, each slides away as you cross over */
.edge-tab {
  position: absolute; top: 50%; z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 18px 12px; border: 0; background: var(--paper); cursor: pointer;
  color: var(--red-ink);
  transition: transform .6s cubic-bezier(.7, 0, .15, 1), opacity .4s;
}
.edge-tab.to-list { right: 0; transform: translateY(-50%); }
.edge-tab.to-map { left: 0; transform: translateY(-50%) translateX(-110%); opacity: 0; pointer-events: none; }
.slide.listing .edge-tab.to-list { transform: translateY(-50%) translateX(110%); opacity: 0; pointer-events: none; }
.slide.listing .edge-tab.to-map { transform: translateY(-50%); opacity: 1; pointer-events: auto; }
.edge-tab.to-list:hover { transform: translateY(-50%) translateX(-4px); }
.slide.listing .edge-tab.to-map:hover { transform: translateY(-50%) translateX(4px); }
.edge-label {
  writing-mode: vertical-rl;
  font: 400 13px var(--f-type); letter-spacing: .16em; text-transform: uppercase;
}
.to-map .edge-label { transform: rotate(180deg); }
.edge-star {
  width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--star-img) center / contain no-repeat; mask: var(--star-img) center / contain no-repeat;
  transition: transform .6s;
}
.edge-tab:hover .edge-star { transform: rotate(90deg); }

.slide .foot { width: 100%; padding-top: 0; padding-bottom: clamp(10px, 2vh, 22px); }
.slide .foot .close { margin: clamp(6px, 1.2vh, 14px) 0 0; font-size: clamp(16px, 1.3vw, 20px); }

/* Phones */
@media (max-width: 860px) {
  .slide .pane { padding: 10px var(--gutter) 64px; }
  .slide h1 { font-size: clamp(34px, 10vw, 48px); }
  .slide .standfirst { font-size: 17px; }
  .slide .status { font-size: 14px; }
  .slide .results {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 18px; scrollbar-width: none;
  }
  .slide .results li { flex: 0 0 80%; scroll-snap-align: start; }
  .slide .results li:nth-child(n+5) { display: block; }
  .list-head { gap: 10px; }
  .list-head .filter { flex-basis: 100%; }
  .edge-tab { top: auto; bottom: 12px; flex-direction: row; padding: 10px 14px; gap: 8px;
    box-shadow: 0 1px 2px rgba(35,31,32,.08), 0 10px 24px -12px rgba(35,31,32,.45); }
  .edge-tab.to-list { right: 12px; transform: none; }
  .edge-tab.to-map { left: 12px; transform: translateX(-140%); }
  .slide.listing .edge-tab.to-list { transform: translateX(140%); }
  .slide.listing .edge-tab.to-map { transform: none; }
  .edge-tab.to-list:hover, .slide.listing .edge-tab.to-map:hover { transform: none; }
  .edge-label { writing-mode: horizontal-tb; font-size: 12px; }
  .to-map .edge-label { transform: none; }
  .slide .foot .close { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .slide .track, .edge-tab, .slide .pane { transition: none; }
}