/*
The map pin. One glyph for every place marker in the design — block 08 draws it beside each
location — so it is a component and not a shape written inside the block that needed it
first, which is the same argument the arrow and the rating already make.

It is drawn rather than exported, and that was not a preference: the bridge to the design
file returns no vector for it. What the node holds is a grey 40x40 rectangle named "Bounding
box", the placeholder Figma leaves behind a Material icon, so there is nothing in the file to
export and no second typeface is being pulled in for one shape. The geometry was measured on
the render instead — see the note over salt_md_pin() in inc/helpers.php.

Like the arrow, it takes its size from a custom property and holds its proportions in the
viewBox, so one path is correct at 40px and at 30px alike. Unlike the arrow, it does not
inherit its colour from the text around it: it is cyan against ink-coloured type in every
place the design uses it, so the colour is a decision of the component's own and --pin-fg is
where it is taken.

The stroke is in viewBox units, so it thins with the glyph rather than staying 2.5px on a
30px pin.
*/
.pin {
  display: block;
  flex: 0 0 auto;
  width: var(--pin-size);
  height: var(--pin-size);
  color: var(--pin-fg);
}

.pin__outline {
  fill: none;
  stroke: currentcolor;
  stroke-width: var(--pin-stroke);

  /*
  Round, and the tip is why. The two flanks meet at the bottom at an angle sharp enough that
  a mitre would run some 5 units past the point the design draws — on the render that tip is
  visibly blunted, which is what a round join gives for free at exactly half the stroke.
  */
  stroke-linejoin: round;
  stroke-linecap: round;
}

.pin__dot {
  fill: currentcolor;
}