/* ========================================================== street tiles
   The real New Orleans street-corner alphabet, used as a CSS sprite off one
   SVG. Every tile keeps its own width and its own chips and stains, so a word
   set in them is as uneven as it is on a sidewalk -- that is the point.

   Usage:  <span class="tiles" aria-label="Bulbancha">
             <i class="t-B"></i><i class="t-U"></i>...
           </span>
   Set --th on .tiles to change the tile height. Everything scales from it.
   ====================================================================== */
.tiles {
  --th: 58px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: calc(var(--th) * 0.055);
  line-height: 0;
}
.tiles i {
  display: block;
  background-image: url("../assets/nola-tiles.svg");
  background-repeat: no-repeat;
  background-size: calc(537.762 * var(--th) / 73.18) calc(450.839 * var(--th) / 73.18);
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.35));
}

.tiles .t-A { width: calc(52.51 * var(--th) / 73.18); height: calc(72.81 * var(--th) / 73.18); background-position: calc(-4.98 * var(--th) / 73.18) calc(0.00 * var(--th) / 73.18); }
.tiles .t-B { width: calc(52.20 * var(--th) / 73.18); height: calc(73.18 * var(--th) / 73.18); background-position: calc(-71.78 * var(--th) / 73.18) calc(0.00 * var(--th) / 73.18); }
.tiles .t-C { width: calc(52.75 * var(--th) / 73.18); height: calc(73.18 * var(--th) / 73.18); background-position: calc(-139.20 * var(--th) / 73.18) calc(0.00 * var(--th) / 73.18); }
.tiles .t-D { width: calc(51.49 * var(--th) / 73.18); height: calc(72.80 * var(--th) / 73.18); background-position: calc(-207.53 * var(--th) / 73.18) calc(0.00 * var(--th) / 73.18); }
.tiles .t-E { width: calc(52.21 * var(--th) / 73.18); height: calc(73.17 * var(--th) / 73.18); background-position: calc(-274.86 * var(--th) / 73.18) calc(0.00 * var(--th) / 73.18); }
.tiles .t-F { width: calc(51.49 * var(--th) / 73.18); height: calc(72.81 * var(--th) / 73.18); background-position: calc(-342.92 * var(--th) / 73.18) calc(0.00 * var(--th) / 73.18); }
.tiles .t-G { width: calc(51.50 * var(--th) / 73.18); height: calc(72.80 * var(--th) / 73.18); background-position: calc(-410.60 * var(--th) / 73.18) calc(0.00 * var(--th) / 73.18); }
.tiles .t-H { width: calc(52.98 * var(--th) / 73.18); height: calc(72.81 * var(--th) / 73.18); background-position: calc(-475.45 * var(--th) / 73.18) calc(0.00 * var(--th) / 73.18); }
.tiles .t-I { width: calc(30.54 * var(--th) / 73.18); height: calc(74.07 * var(--th) / 73.18); background-position: calc(-10.66 * var(--th) / 73.18) calc(-93.89 * var(--th) / 73.18); }
.tiles .t-J { width: calc(50.64 * var(--th) / 73.18); height: calc(73.18 * var(--th) / 73.18); background-position: calc(-57.23 * var(--th) / 73.18) calc(-93.89 * var(--th) / 73.18); }
.tiles .t-K { width: calc(53.77 * var(--th) / 73.18); height: calc(73.18 * var(--th) / 73.18); background-position: calc(-123.58 * var(--th) / 73.18) calc(-93.89 * var(--th) / 73.18); }
.tiles .t-L { width: calc(52.20 * var(--th) / 73.18); height: calc(73.18 * var(--th) / 73.18); background-position: calc(-191.11 * var(--th) / 73.18) calc(-93.89 * var(--th) / 73.18); }
.tiles .t-M { width: calc(69.89 * var(--th) / 73.18); height: calc(73.73 * var(--th) / 73.18); background-position: calc(-259.60 * var(--th) / 73.18) calc(-93.89 * var(--th) / 73.18); }
.tiles .t-N { width: calc(51.49 * var(--th) / 73.18); height: calc(72.95 * var(--th) / 73.18); background-position: calc(-343.31 * var(--th) / 73.18) calc(-93.89 * var(--th) / 73.18); }
.tiles .t-O { width: calc(54.06 * var(--th) / 73.18); height: calc(72.80 * var(--th) / 73.18); background-position: calc(-405.40 * var(--th) / 73.18) calc(-93.89 * var(--th) / 73.18); }
.tiles .t-P { width: calc(51.49 * var(--th) / 73.18); height: calc(72.80 * var(--th) / 73.18); background-position: calc(-474.49 * var(--th) / 73.18) calc(-93.89 * var(--th) / 73.18); }
.tiles .t-Q { width: calc(52.52 * var(--th) / 73.18); height: calc(72.81 * var(--th) / 73.18); background-position: calc(-7.17 * var(--th) / 73.18) calc(-187.30 * var(--th) / 73.18); }
.tiles .t-R { width: calc(51.63 * var(--th) / 73.18); height: calc(73.18 * var(--th) / 73.18); background-position: calc(-73.49 * var(--th) / 73.18) calc(-187.30 * var(--th) / 73.18); }
.tiles .t-S { width: calc(52.20 * var(--th) / 73.18); height: calc(73.18 * var(--th) / 73.18); background-position: calc(-139.08 * var(--th) / 73.18) calc(-187.30 * var(--th) / 73.18); }
.tiles .t-T { width: calc(52.21 * var(--th) / 73.18); height: calc(73.18 * var(--th) / 73.18); background-position: calc(-204.01 * var(--th) / 73.18) calc(-187.30 * var(--th) / 73.18); }
.tiles .t-U { width: calc(52.21 * var(--th) / 73.18); height: calc(73.18 * var(--th) / 73.18); background-position: calc(-268.94 * var(--th) / 73.18) calc(-187.30 * var(--th) / 73.18); }
.tiles .t-V { width: calc(52.20 * var(--th) / 73.18); height: calc(73.18 * var(--th) / 73.18); background-position: calc(-332.72 * var(--th) / 73.18) calc(-187.30 * var(--th) / 73.18); }
.tiles .t-W { width: calc(70.82 * var(--th) / 73.18); height: calc(72.80 * var(--th) / 73.18); background-position: calc(-397.04 * var(--th) / 73.18) calc(-187.30 * var(--th) / 73.18); }
.tiles .t-X { width: calc(51.21 * var(--th) / 73.18); height: calc(73.18 * var(--th) / 73.18); background-position: calc(-479.88 * var(--th) / 73.18) calc(-187.30 * var(--th) / 73.18); }
.tiles .t-Y { width: calc(50.73 * var(--th) / 73.18); height: calc(73.18 * var(--th) / 73.18); background-position: calc(-7.04 * var(--th) / 73.18) calc(-281.29 * var(--th) / 73.18); }
.tiles .t-Z { width: calc(51.21 * var(--th) / 73.18); height: calc(73.18 * var(--th) / 73.18); background-position: calc(-72.62 * var(--th) / 73.18) calc(-281.30 * var(--th) / 73.18); }
.tiles .t-space { width: calc(34.37 * var(--th) / 73.18); height: calc(72.48 * var(--th) / 73.18); background-position: calc(-173.96 * var(--th) / 73.18) calc(-281.59 * var(--th) / 73.18); }
.tiles .t-amp { width: calc(57.34 * var(--th) / 73.18); height: calc(73.18 * var(--th) / 73.18); background-position: calc(-218.85 * var(--th) / 73.18) calc(-281.29 * var(--th) / 73.18); }
.tiles .t-dash { width: calc(32.70 * var(--th) / 73.18); height: calc(74.07 * var(--th) / 73.18); background-position: calc(-290.45 * var(--th) / 73.18) calc(-281.35 * var(--th) / 73.18); }
.tiles .t-query { width: calc(45.66 * var(--th) / 73.18); height: calc(73.18 * var(--th) / 73.18); background-position: calc(-336.65 * var(--th) / 73.18) calc(-281.29 * var(--th) / 73.18); }
.tiles .t-fleur { width: calc(55.41 * var(--th) / 73.18); height: calc(72.39 * var(--th) / 73.18); background-position: calc(-475.50 * var(--th) / 73.18) calc(-281.29 * var(--th) / 73.18); }
.tiles .t-1 { width: calc(35.03 * var(--th) / 73.18); height: calc(74.07 * var(--th) / 73.18); background-position: calc(0.00 * var(--th) / 73.18) calc(-376.77 * var(--th) / 73.18); }
.tiles .t-2 { width: calc(48.91 * var(--th) / 73.18); height: calc(72.81 * var(--th) / 73.18); background-position: calc(-41.43 * var(--th) / 73.18) calc(-377.92 * var(--th) / 73.18); }
.tiles .t-3 { width: calc(47.94 * var(--th) / 73.18); height: calc(73.18 * var(--th) / 73.18); background-position: calc(-96.59 * var(--th) / 73.18) calc(-376.71 * var(--th) / 73.18); }
.tiles .t-4 { width: calc(51.21 * var(--th) / 73.18); height: calc(73.18 * var(--th) / 73.18); background-position: calc(-150.68 * var(--th) / 73.18) calc(-377.23 * var(--th) / 73.18); }
.tiles .t-5 { width: calc(50.11 * var(--th) / 73.18); height: calc(73.18 * var(--th) / 73.18); background-position: calc(-208.01 * var(--th) / 73.18) calc(-377.35 * var(--th) / 73.18); }
.tiles .t-6 { width: calc(48.91 * var(--th) / 73.18); height: calc(72.81 * var(--th) / 73.18); background-position: calc(-264.33 * var(--th) / 73.18) calc(-377.92 * var(--th) / 73.18); }
.tiles .t-7 { width: calc(47.94 * var(--th) / 73.18); height: calc(73.18 * var(--th) / 73.18); background-position: calc(-319.49 * var(--th) / 73.18) calc(-376.71 * var(--th) / 73.18); }
.tiles .t-8 { width: calc(51.21 * var(--th) / 73.18); height: calc(73.18 * var(--th) / 73.18); background-position: calc(-374.63 * var(--th) / 73.18) calc(-377.24 * var(--th) / 73.18); }
.tiles .t-9 { width: calc(48.91 * var(--th) / 73.18); height: calc(72.81 * var(--th) / 73.18); background-position: calc(-432.56 * var(--th) / 73.18) calc(-377.92 * var(--th) / 73.18); }
.tiles .t-0 { width: calc(47.94 * var(--th) / 73.18); height: calc(73.18 * var(--th) / 73.18); background-position: calc(-489.82 * var(--th) / 73.18) calc(-376.71 * var(--th) / 73.18); }