/* This site's look. `templates/site.html` links it after site.css, so it
   only has to say what differs — mostly by setting site.css's variables
   rather than restyling anything.

   There is nothing clever about it: it is an ordinary stylesheet in
   static/, linked by the template, which is why every page has it. To give
   one page something else, name a second stylesheet with `css:` in its
   front matter. To give a whole kind of page something else, make it a
   template of its own and link whatever that one needs. */

:root {
  --accent: #147c99;
  --font-heading: Georgia, "Times New Roman", serif;
  --duck: var(--accent); /* the logo's colour (see the Images guide) */
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #5cc1dc;
  }
}

/* Wobbling duck */
@keyframes wobble {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

/* The logo is the shape; the colour is ours. The duck's eye and wing are
   holes in the drawing, so the page shows through them as before. */
#logo {
  display: block;
  width: min(320px, 100%);
  aspect-ratio: 1;
  background: var(--duck, currentColor);
  -webkit-mask: url(/static/images/logo.svg) center / contain no-repeat;
  mask: url(/static/images/logo.svg) center / contain no-repeat;
  transform-origin: bottom center;
}

/* It wobbles only for a reader who hasn't asked for less motion: motion that
   never stops can make some people ill (WCAG 2.2.2). */
@media (prefers-reduced-motion: no-preference) {
  #logo {
    animation: wobble 3s ease-in-out infinite;
  }
}

/* templates/tile.html gives a work its caption under the title; the base
   styles the title, and this site says how the caption sits beneath it. */
.item-caption {
  display: block;
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--muted);
}