/* Hand oval button: a caps text button ringed by a pen-drawn loop that overshoots its own start, tilted 2deg.
   Measured from Pillars Brewery (theme.css .btn + the 219 x 53 icon-button-style-one ring). The ring itself is
   built by part.js from the button's measured size, so it fits any label with the stroke staying 2px. */

.hob {
  --hob-stroke: #f08347;          /* ring colour (source #F08347) */
  --hob-stroke-w: 2px;            /* ring width (source 2) */
  --hob-tilt: 2deg;               /* ring tilt (source rotate(2)) */
  --hob-ink: #000;                /* label (source #000) */
  --hob-hover: #f15a29;           /* label on hover / focus (source .btn:hover #F15A29) */
  --hob-hover-dur: 0s;            /* source: no transition on .btn, the colour swaps instantly */
  --hob-h: 53px;                  /* button + ring height (source .btn span line-height 53px, svg 53 tall) */
  --hob-pad-x: 64px;              /* label to ring ends (source: 90px label in a 219px ring) */
  --hob-font: "Barlow Semi Condensed", "Arial Narrow", ui-sans-serif, system-ui, sans-serif;  /* source: a caps geometric sans */
  --hob-size: 18.56px;            /* source calc(16px * 1.16) */
  --hob-weight: 600;
  --hob-draw-dur: 700ms;          /* optional pen-in (data-hob-draw), ours */
  --hob-draw-ease: cubic-bezier(.55, .1, .35, 1);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--hob-h);
  padding: 0 var(--hob-pad-x);
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--hob-ink);
  font-family: var(--hob-font);
  font-size: var(--hob-size);
  font-weight: var(--hob-weight);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--hob-hover-dur);
}
.hob:hover, .hob:focus-visible, .hob.is-hover { color: var(--hob-hover); }   /* .is-hover: force the look (a parent card's hover, a demo) */
.hob:focus-visible { outline: none; }
.hob:focus-visible .hob__ring path { stroke: var(--hob-hover); }   /* keyboard focus also inks the ring */

.hob__label { position: relative; z-index: 1; }

.hob__ring {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  transform: rotate(var(--hob-tilt));
}
.hob__ring path {
  fill: none;
  stroke: var(--hob-stroke);
  stroke-width: var(--hob-stroke-w);
  stroke-linecap: round;          /* ours (the source path is butt-ended); reads as a pen tip at the tail */
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}