/* ══════════════════════════════════════════════════════════════════
   Venn Canteen · the supplier map on the homepage photo ("where it comes from. where it goes.")
   A drawing of mainland Portugal on the right of the spring-onion photo: one dot for each published
   supplier location, each leaping to VENN (the ochre dot, Porto) in a raised arc. No words on it.
   The words on the left stay exactly as they were; this layer sits beside them and never moves them.
   Computer: on the right, beside the words, 440 to 520 px tall. Phone: the words take the left column and the map
   stands centred on the right (.has-map on the section, .is-side on the map); with larger text it sits top right. Drawn, placed and played by /js/home-supplier-map-2.js, which
   adds the .hl-provmap layer after .hl-prov__in only when the producers feed answers.
   Loaded by / and /pt/. Added 2 Oct 2026. Second version (same day, Snider: palette 8 of "Supplier Map Colours"):
   the land in the terracotta of the menu's allergen tags (#8B4A2A at .74) so it stands clear of the soil, cream lines.
   Third version (same day): no ground shadows under the arcs, the arcs end in the middle of VENN's dot, VENN in
   saffron yellow, and on phones the words on the left with the map centred on the right.
   Replaces /css/home-supplier-map-2.css (and the first file), which stay on the server unused.
   Fourth version (same day): on computers this panel and "what remains" share one row (.hl-duo, 1024 px and up),
   rules at the end of this file. Replaces /css/home-supplier-map-3.css.
   Fifth version (same day): in that row the rhubarb panel sits on the left and provenance on the right.
   Replaces /css/home-supplier-map-4.css (the script stays /js/home-supplier-map-4.js).
   Sixth version (same day): the row splits 1fr / 1.15fr like the chef band below, so the seams line up.
   Replaces /css/home-supplier-map-5.css.
   ══════════════════════════════════════════════════════════════════ */
.hl-provmap{position:absolute;z-index:2;margin:0;pointer-events:none;
  --pm-h:clamp(440px,calc(440px + (100vw - 1024px) * .19231),520px);
  top:50%;transform:translateY(-50%);
  right:max(10vw,calc((100vw - 1296px) / 2 + 72px));
  height:var(--pm-h);width:calc(var(--pm-h) * .44425)}
.hl-provmap[hidden]{display:none}
.hl-provmap svg{display:block;width:100%;height:100%;overflow:visible}
/* phones, and tablets where the full drawing would meet the words: top right, height set by the script */
.hl-provmap.is-compact{--pm-h:var(--pm-ch,260px);top:28px;right:22px;transform:none}

/* the drawing; the script sets each part's opacity as it plays */
.hl-provmap .pm-land{fill:#8B4A2A;fill-opacity:.74;stroke:#f6f3ec;stroke-opacity:.85;stroke-width:1.25px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.hl-provmap .pm-arc{fill:#f6f3ec;fill-opacity:.85}
.hl-provmap .pm-dot,.hl-provmap .pm-head{fill:#f6f3ec}
.hl-provmap .pm-ring{fill:none;stroke:#f6f3ec;stroke-width:1px}
/* VENN in saffron yellow, so it stands out on the terracotta (2 Oct, Snider); the arcs end under it, in its middle */
.hl-provmap .pm-porto{fill:#F5C542}
.hl-provmap .pm-ring{stroke-width:1.4px}
.hl-provmap .pm-ripple{fill:none;stroke:#f6f3ec;stroke-width:1px}
.hl-provmap.is-compact .pm-land{stroke-width:1px}

/* phones: the words take the left column and the map stands centred on the right, a little longer than before;
   both sit in the middle of the panel, with the darkening moved to the left behind the words.
   The script adds .has-map to the section only when the map is drawn beside the words, so without a map
   (no data, or larger text) the words keep their full width and their place at the bottom. */
.hl-provmap.is-side{top:50%;right:22px;transform:translateY(-50%);--pm-h:var(--pm-sh,calc(var(--pm-w,140px) / .44425))}
@media (max-width:767px){
  .hl-prov.has-map{--pm-w:clamp(112px,36vw,152px);align-items:center}
  .hl-prov.has-map .hl-prov__in{padding:48px calc(var(--pm-w) + 36px) 48px 22px}
  .hl-prov.has-map::after{background:linear-gradient(90deg,rgba(14,11,8,.82) 0%,rgba(14,11,8,.62) 55%,rgba(14,11,8,.3) 100%)}
}

/* computers (1024 px and up): the provenance panel and "what remains" share one row. The page wraps both sections
   in div.hl-duo; below 1024 px the wrapper does nothing and they stack as before. In the row the map stands beside
   the words (the script adds .has-map / .is-side, as on phones) and the rhubarb note stands in the middle of its
   lavender panel, picture above the words. */
@media (min-width:1024px){
  /* what remains on the left, provenance on the right (Snider, 2 Oct); the page order stays provenance first,
     so phones and tablets keep stacking it above the rhubarb */
  /* the same split as the chef band below (portrait 1fr, words 1.15fr), so the two seams line up */
  .hl-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  .hl-duo .hl-remains{order:-1}
  .hl-duo>.hl{min-width:0}
  .hl-duo .hl-prov__h{font-size:clamp(2.2rem,3vw,3rem);text-wrap:balance}
  .hl-duo .hl-prov.has-map{--pm-w:clamp(150px,12.5vw,196px)}
  .hl-duo .hl-prov.has-map .hl-prov__in{padding:72px calc(var(--pm-w) + 72px) 72px clamp(40px,4.5vw,64px)}
  .hl-duo .hl-prov.has-map .hl-prov__in>*{max-width:none}
  .hl-duo .hl-provmap.is-side{right:clamp(32px,3.2vw,48px)}
  .hl-duo .hl-remains{display:flex;align-items:center}
  .hl-duo .hl-remains>.hl-wrap{width:100%;padding:64px clamp(40px,4.5vw,72px)}
  .hl-duo .hl-note--solo .hl-link{grid-template-columns:minmax(0,1fr);gap:28px;justify-items:start}
  .hl-duo .hl-note--solo .hl-note__img{order:0;width:min(100%,clamp(220px,21vw,320px))}
  .hl-duo .hl-note--solo .hl-title{font-size:clamp(1.8rem,2.2vw,2.3rem)}
}