/* Pixel marks: 16 x 16 bitmaps in one colour (--accent-ink), so they follow the light/dark setting.
   GENERATED by tools/build-pixel-icons.ps1 - edit the bitmaps there, not this file.
   Use:  <span class="px px-plane"></span>   or   <h3 class="px-plane">...</h3>  (the mark replaces the heading bullet). */
:root {
  --px-plane: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M7 0h2v1h-2zM7 1h2v1h-2zM7 2h2v1h-2zM7 3h2v1h-2zM6 4h4v1h-4zM5 5h6v1h-6zM4 6h8v1h-8zM3 7h10v1h-10zM2 8h12v1h-12zM0 9h5v1h-5zM7 9h2v1h-2zM11 9h5v1h-5zM0 10h2v1h-2zM7 10h2v1h-2zM14 10h2v1h-2zM7 11h2v1h-2zM6 12h4v1h-4zM4 13h8v1h-8zM4 14h1v1h-1zM11 14h1v1h-1z'/%3E%3C/svg%3E");
  --px-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M1 4h5v1h-5zM7 4h2v1h-2zM10 4h5v1h-5zM1 5h1v1h-1zM5 5h1v1h-1zM7 5h2v1h-2zM10 5h1v1h-1zM14 5h1v1h-1zM1 6h5v1h-5zM7 6h2v1h-2zM10 6h5v1h-5zM1 7h1v1h-1zM5 7h1v1h-1zM7 7h2v1h-2zM10 7h1v1h-1zM14 7h1v1h-1zM1 8h5v1h-5zM7 8h2v1h-2zM10 8h5v1h-5zM1 9h1v1h-1zM5 9h1v1h-1zM7 9h2v1h-2zM10 9h1v1h-1zM14 9h1v1h-1zM1 10h5v1h-5zM7 10h2v1h-2zM10 10h5v1h-5z'/%3E%3C/svg%3E");
  --px-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M7 1h2v1h-2zM7 2h2v1h-2zM6 3h4v1h-4zM6 4h4v1h-4zM0 5h16v1h-16zM1 6h14v1h-14zM2 7h12v1h-12zM3 8h10v1h-10zM4 9h8v1h-8zM4 10h8v1h-8zM3 11h4v1h-4zM9 11h4v1h-4zM3 12h3v1h-3zM10 12h3v1h-3zM2 13h3v1h-3zM11 13h3v1h-3zM2 14h2v1h-2zM12 14h2v1h-2z'/%3E%3C/svg%3E");
  --px-bike: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M11 2h3v1h-3zM4 3h4v1h-4zM11 3h1v1h-1zM6 4h6v1h-6zM5 5h2v1h-2zM11 5h1v1h-1zM2 6h5v1h-5zM10 6h4v1h-4zM1 7h1v1h-1zM4 7h2v1h-2zM7 7h1v1h-1zM9 7h2v1h-2zM12 7h1v1h-1zM14 7h1v1h-1zM0 8h1v1h-1zM4 8h1v1h-1zM6 8h4v1h-4zM12 8h1v1h-1zM15 8h1v1h-1zM0 9h1v1h-1zM3 9h5v1h-5zM9 9h1v1h-1zM12 9h1v1h-1zM15 9h1v1h-1zM0 10h1v1h-1zM6 10h1v1h-1zM9 10h1v1h-1zM15 10h1v1h-1zM1 11h1v1h-1zM5 11h1v1h-1zM10 11h1v1h-1zM14 11h1v1h-1zM2 12h3v1h-3zM11 12h3v1h-3z'/%3E%3C/svg%3E");
  --px-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M3 2h1v1h-1zM3 3h5v1h-5zM3 4h9v1h-9zM3 5h11v1h-11zM3 6h9v1h-9zM3 7h5v1h-5zM3 8h1v1h-1zM3 9h1v1h-1zM3 10h1v1h-1zM3 11h1v1h-1zM3 12h1v1h-1zM2 13h7v1h-7z'/%3E%3C/svg%3E");
  --px-chest: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M2 3h12v1h-12zM1 4h2v1h-2zM13 4h2v1h-2zM1 5h1v1h-1zM14 5h1v1h-1zM1 6h14v1h-14zM1 7h1v1h-1zM7 7h2v1h-2zM14 7h1v1h-1zM1 8h1v1h-1zM7 8h2v1h-2zM14 8h1v1h-1zM1 9h1v1h-1zM14 9h1v1h-1zM1 10h1v1h-1zM14 10h1v1h-1zM1 11h14v1h-14z'/%3E%3C/svg%3E");
  --px-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M5 1h6v1h-6zM4 2h8v1h-8zM3 3h4v1h-4zM9 3h4v1h-4zM3 4h3v1h-3zM10 4h3v1h-3zM3 5h3v1h-3zM10 5h3v1h-3zM3 6h4v1h-4zM9 6h4v1h-4zM4 7h8v1h-8zM5 8h6v1h-6zM5 9h6v1h-6zM6 10h4v1h-4zM6 11h4v1h-4zM7 12h2v1h-2zM7 13h2v1h-2z'/%3E%3C/svg%3E");
  --px-suitcase: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M5 2h6v1h-6zM5 3h1v1h-1zM10 3h1v1h-1zM2 4h12v1h-12zM2 5h1v1h-1zM13 5h1v1h-1zM2 6h1v1h-1zM13 6h1v1h-1zM2 7h12v1h-12zM2 8h1v1h-1zM7 8h2v1h-2zM13 8h1v1h-1zM2 9h1v1h-1zM7 9h2v1h-2zM13 9h1v1h-1zM2 10h1v1h-1zM13 10h1v1h-1zM2 11h1v1h-1zM13 11h1v1h-1zM2 12h12v1h-12z'/%3E%3C/svg%3E");
  --px-tent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M7 1h2v1h-2zM7 2h2v1h-2zM6 3h4v1h-4zM6 4h4v1h-4zM5 5h6v1h-6zM5 6h6v1h-6zM4 7h8v1h-8zM4 8h8v1h-8zM3 9h10v1h-10zM3 10h4v1h-4zM9 10h4v1h-4zM2 11h5v1h-5zM9 11h5v1h-5zM2 12h5v1h-5zM9 12h5v1h-5zM1 13h6v1h-6zM9 13h6v1h-6zM1 14h6v1h-6zM9 14h6v1h-6z'/%3E%3C/svg%3E");
  --px-house: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M7 1h2v1h-2zM6 2h4v1h-4zM5 3h6v1h-6zM4 4h8v1h-8zM3 5h10v1h-10zM2 6h12v1h-12zM1 7h14v1h-14zM3 8h10v1h-10zM3 9h1v1h-1zM6 9h7v1h-7zM3 10h1v1h-1zM6 10h3v1h-3zM12 10h1v1h-1zM3 11h6v1h-6zM12 11h1v1h-1zM3 12h6v1h-6zM12 12h1v1h-1zM3 13h6v1h-6zM12 13h1v1h-1z'/%3E%3C/svg%3E");
}

/* 16 css px = an exact 1x / 2x multiple of the 16-cell grid on common screens, which keeps the edges sharp. */
.px,
.entry > .accshow > .widget-menu :is(i.fa-bicycle, i.fa-plane-departure, i.fa-campground, i.fa-book) {
  display: inline-block; flex: none; width: 16px; height: 16px; vertical-align: -3px;
  background-color: var(--px-color, var(--accent-ink));
  -webkit-mask: var(--px) center / contain no-repeat; mask: var(--px) center / contain no-repeat;
}
.px-plane { --px: var(--px-plane); }
.px-book { --px: var(--px-book); }
.px-star { --px: var(--px-star); }
.px-bike { --px: var(--px-bike); }
.px-flag { --px: var(--px-flag); }
.px-chest { --px: var(--px-chest); }
.px-pin { --px: var(--px-pin); }
.px-suitcase { --px: var(--px-suitcase); }
.px-tent { --px: var(--px-tent); }
.px-house { --px: var(--px-house); }

/* The old home-page genre buttons still carry Font Awesome <i> tags; they get the matching mark (the other FA icons stay hidden).
   Only the genre lists, which sit directly in the page text: the prefecture list lives inside .accbox and keeps no marks
   (one prefecture, Ehime, happens to carry a bicycle tag). */
.entry > .accshow > .widget-menu i.fa-bicycle { --px: var(--px-bike); }
.entry > .accshow > .widget-menu i.fa-plane-departure { --px: var(--px-suitcase); }
.entry > .accshow > .widget-menu i.fa-campground { --px: var(--px-tent); }
.entry > .accshow > .widget-menu i.fa-book { --px: var(--px-house); }
.entry > .accshow > .widget-menu :is(i.fa-bicycle, i.fa-plane-departure, i.fa-campground, i.fa-book) { margin-right: .5em; }

/* Headings: the mark takes the place of the small square bullet. */
.entry :is(h3, h4):is([class^="px-"], [class*=" px-"])::before {
  content: ""; display: inline-block; width: 16px; height: 16px; margin-right: .45em; vertical-align: -2px; font-size: 1em;
  background-color: var(--px-color, var(--accent-ink));
  -webkit-mask: var(--px) center / contain no-repeat; mask: var(--px) center / contain no-repeat;
}

/* Buttons: pressed look, a one-pixel nudge on hover, and a short hop (pixel.js adds .is-hit just before the page changes). */
.widget-menu a:active { box-shadow: var(--bevel-sunken); }
.widget-menu a:hover i { transform: translateY(-1px); }
@keyframes p95-hop {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-9px) scale(1.75); }
  70%  { transform: translateY(-9px) scale(1.75); }
  100% { transform: translateY(0) scale(1); }
}
.is-hit { --px-color: var(--focus); }
.is-hit > :is(.px, i) { animation: p95-hop .28s steps(5) both; }