/* A boat's sail insignia beside its name, so a reader can match a sail on the
   water to a boat: in the race tables and the ringtail count
   (partials/boat-name.njk), on the boat's page and in the boats list. Those
   pages name this file in their front matter's `stylesheets` so site.css
   stays inside its weight budget. The drawings are square, so one size sets
   each. The card rule outranks .card img, which would stretch it into a
   photo. site.css gives every img max-width: 100%, and a table sizing its
   columns counts an image with a percentage max-width as no width at all,
   so in the squeezed results table the names ran past the Boat column into
   the next (Tangalooma, on a 430px iPhone). max-width: none counts it. */
.insignia { flex: none; width: 1.5rem; height: 1.5rem; max-width: none; }
/* In the tables the insignia and the name are inline content held on one
   line, so a name never breaks over two lines beside its insignia. */
.boat-name { white-space: nowrap; }
.boat-name .insignia { vertical-align: -.4rem; margin-right: .4rem; }
/* Beside the name, the insignia widens the narrow tables past a phone's
   screen (the handicap changes had 1px to spare at 375px), so up to 400px
   it sits above the name. */
@media (max-width: 25rem) {
  .boat-name { display: inline-block; }
  .boat-name .insignia { display: block; margin: 0 0 .2rem; }
}
.boat-title { display: flex; align-items: center; gap: .75rem; }
.boat-title .insignia { width: 3.5rem; height: 3.5rem; }
.card .boat-card-name { display: flex; align-items: center; gap: .5rem; }
.card .boat-card-name .insignia { width: 2rem; height: 2rem; }