/* UGO — the "ugo" wordmark drawn in CSS (no image).
 *
 *   <span class="ugo-wordmark" role="img" aria-label="UGO"><i></i><i></i><i></i></span>
 *
 * Size it with font-size: 1em is the height of the round letters (the "x-height"), so  font-size:36px  makes a 36px-tall o.
 * The whole mark is 3.008em wide and 1.46em tall (the g's tail hangs below the baseline). Colour is currentColor, so it
 * follows the page's text colour in light and dark themes with no second image.
 *
 * How it is built (measured from img/ugo_logo_placehoder_black.png, 1502x732, H = 494 px = 1em):
 *   the whole logo is ONE ring used three times, plus a u.
 *   ring  = 0.992em x 1em box, border-radius 50%, uneven stroke: sides .1255em, top .1215em, bottom .1154em.
 *   1st <i>  the u     two stems + a rounded bottom (elliptical radii; the original is a slightly squarer curve).
 *   2nd <i>  the g     the ring, plus  ::before  = the flag (a bar that is the ring's top stroke continued to the right)
 *                                       ::after   = the tail (the same ring dropped .4585em, only its lower 35.5% kept)
 *   3rd <i>  the o     the ring.
 * Positions below are in em, measured from the top-left of the ink: 459px/494 etc. Do not round them: the 48px gaps between the
 * letters are exactly .0972em.
 */
.ugo-wordmark {
  position: relative;
  display: inline-block;
  flex: none;
  width: 3.0081em;          /* 1486 / 494 */
  height: 1.4595em;         /* 721 / 494 */
  color: inherit;
  font-size: 1em;
  line-height: 0;
  vertical-align: middle;
}
.ugo-wordmark > i {
  position: absolute;
  display: block;
  box-sizing: border-box;
  border: 0 solid currentColor;
  font-style: normal;
}

/* the u */
.ugo-wordmark > i:nth-child(1) {
  left: 0;
  top: .0121em;             /* 6 / 494: flat tops sit a little below the round letters' tops */
  width: .8340em;           /* 412 */
  height: .9777em;          /* 483 */
  border-width: 0 .1275em .1215em .1235em;   /* right 63, bottom 60, left 61 */
  border-width: 0 round(.1275em, 1px) round(.1215em, 1px) round(.1235em, 1px);   /* whole pixels, see the rings below */
  border-radius: 0 0 .4170em .4170em / 0 0 .3785em .3785em;   /* 206 x 187 px elliptical bottom corners */
}

/* the g: the bowl is the ring itself */
.ugo-wordmark > i:nth-child(2),
.ugo-wordmark > i:nth-child(3),
.ugo-wordmark > i:nth-child(2)::after {
  box-sizing: border-box;
  width: .9919em;           /* 490 */
  height: 1em;              /* 494 */
  border-style: solid;
  border-color: currentColor;
  border-width: .1215em .1255em .1154em;     /* top 60, sides 62, bottom 57 */
  /* Browsers snap border widths DOWN to whole pixels, so at small sizes 2.95 / 3.05 / 2.80px would become 2 / 3 / 2 and the o's top
     and bottom would look a third thinner than its sides. round() makes them 3 / 3 / 3. Browsers without round() keep the line above. */
  border-width: round(.1215em, 1px) round(.1255em, 1px) round(.1154em, 1px);
  /* The original is a true ellipse at the sides but a touch fuller at the top and bottom. 49% / 50% (instead of a perfect 50%)
     flattens just the poles, and scores better against the PNG than any single radius or corner-shape value tried. */
  border-radius: 49% / 50%;
}
.ugo-wordmark > i:nth-child(2) { left: .9291em; top: 0; }      /* 459 */
.ugo-wordmark > i:nth-child(3) { left: 2.0162em; top: 0; }     /* 996 */

/* the g's flag: the ring's top stroke continued to the right, flat-ended */
.ugo-wordmark > i:nth-child(2)::before {
  content: "";
  position: absolute;
  left: .3704em;            /* from the ring's centre line (245px), minus the ring's own side border */
  top: -.1215em;            /* flush with the ring's outer top */
  top: calc(round(.1215em, 1px) * -1);
  width: .5709em;           /* 282 */
  height: .1215em;          /* 60: the ring's top stroke */
  height: round(.1215em, 1px);
  background: currentColor;
}

/* the g's tail: the same ring, dropped 226.5px, with everything above y=549 cut away -> a smile */
.ugo-wordmark > i:nth-child(2)::after {
  content: "";
  position: absolute;
  left: -.1255em;
  top: .3370em;             /* (226.5 - 60) / 494 */
  border-radius: 47% / 50%; /* the smile's bottom is flatter than the rings': this fits it best */
  clip-path: inset(64.47% 0 0 0);            /* keep the lower 35.5% */
}

/* The u's bottom curve in the original is a squircle (superellipse, exponent about 2.3), not a circle. Browsers that support
   corner-shape draw it exactly; the others keep the elliptical-radius version above, which is about 1.5 points less accurate. */
@supports (corner-shape: superellipse(1.2)) {
  .ugo-wordmark > i:nth-child(1) {
    corner-shape: superellipse(1.2);
    border-radius: 0 0 .4170em .4170em / 0 0 .4615em .4615em;   /* 206 x 228 px */
  }
}