body {
  --margin-v: 0.5em;
  --page-margin-h: 3em;
  --small-screen: 600px;
  --gap-row:  0.5em;
  --gap-column:  1em; }
  @media screen and (max-width: 600px) {
    body {
      --page-margin-h: 0.5em; } }
@supports not (font-variation-settings: normal) {
  @font-face {
    font-family: "Alexandria";
    src: url("/fonts/static/Alexandria-Regular.woff2");
    font-weight: normal; }
  @font-face {
    font-family: "Alexandria";
    src: url("/fonts/static/Alexandria-Bold.woff2");
    font-weight: bold; } }

@supports (font-variation-settings: normal) {
  @font-face {
    font-family: "Alexandria";
    src: url("/fonts/Alexandria.woff2") format("woff2 supports variations"), url("/fonts/Alexandria.woff2") format("woff2-variations");
    font-weight: 100 1000;
    font-stretch: 25% 151%; } }

body {
  --background-color: white;
  --color:            black;
  --a-color:          hsl(16 79% 50% / 1);
  --h-color:          hsl(0 0% 10%);
  background: var(--background-color);
  color: var(--color); }
  @media (prefers-color-scheme: dark) {
    body {
      --background-color: black;
      --color:            white;
      --a-color:          hsl(16 79% 60% / 1);
      --h-color:          hsl(0 0% 90%); } }
a, a:focus, a:hover, a:visited {
  color: var(--a-color); }

body {
  font-family: Alexandria, sans-serif;
  max-width: 960px;
  margin-left: var(--page-margin-h);
  margin-right: var(--page-margin-h);
  margin-top: 5em;
  margin-bottom: 7em;
  line-height: 1.33em; }

ul {
  padding-left: 1em;
  margin-block-start: 0.5em;
  margin-block-end: 0.5em; }
  ul li {
    margin-bottom: var(--margin-v); }

a {
  text-decoration: initial; }
  a:hover img {
    filter: saturate(110%) contrast(110%) brightness(110%);
    transition: all 0.1s; }
  a:not(:hover) img {
    transition: all 0.25s; }
  a:hover {
    text-decoration: underline; }
  a false img {
    border-bottom: 2px solid transparent;
    padding-bottom: 2px; }
    a false img:hover {
      border-color: var(--a-color); }
  a[target='_blank'] {
    background-image: url("/images/svg/external-link.svg");
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 0.857em;
    padding-right: 1em; }
    @media (prefers-color-scheme: dark) {
      a[target='_blank'] {
        background-image: url("/images/svg/external-link-dark.svg"); } }
h1,
h2,
h3,
h4,
h5 {
  text-wrap: balance;
  color: var(--h-color);
  margin-top: 0.25em;
  margin-bottom: 0.25em; }

h1 {
  font-size: x-large;
  font-weight: 800;
  margin-top: 1.33em;
  margin-bottom: 1.33em; }
  h1 .tagline {
    font-size: small;
    font-weight: initial; }

h2 {
  font-size: large;
  font-weight: 600;
  margin-top: 1em;
  margin-bottom: 0.5em; }

address {
  white-space: pre;
  font-style: initial; }

section {
  margin-top: var(--gap-row); }

.nav-bar, .footer, .navigation {
  position: fixed;
  left: 0;
  width: calc(100% - 2 * var(--page-margin-h));
  padding-top: var(--margin-v);
  padding-bottom: var(--margin-v);
  padding-left: var(--page-margin-h);
  padding-right: var(--page-margin-h);
  background: var(--background-color);
  box-shadow: 0 0 var(--margin-v) var(--margin-v) var(--background-color);
  z-index: 1; }

.navigation {
  top: 0;
  border-bottom: 1px solid var(--color); }
  .navigation .link-list {
    line-height: 1.5em; }

.footer {
  bottom: 0;
  border-top: 1px solid var(--color); }

.artist-page .artist h1.name {
  display: block;
  margin-block-end: 0; }

@media screen and (min-width: 600px) {
  .artist-page .artist .image {
    float: right;
    width: 256px;
    max-width: 50%;
    margin-left: 3em;
    margin-bottom: 1em; } }

.artist-page .artist .members {
  font-size: smaller; }

.artist-page .artist .title {
  margin-block-end: 0.67em; }

.artist-page .artist .text {
  margin-block-start: 0.67em; }

.home-page .images {
  display: flex;
  flex: auto;
  gap: 0.5em; }
  .home-page .images > * {
    flex-basis: 256px; }
    .home-page .images > * .image {
      width: 100%;
      height: 100%; }
    .home-page .images > * img {
      display: block;
      width: 100%;
      height: auto;
      max-width: 100%; }

.festival-page .festival-flyer {
  float: right;
  margin-left: 3em;
  margin-bottom: 0.5em;
  width: 100%;
  max-width: 50%; }

.festival-page section.artists {
  margin-top: 1.33em; }
  .festival-page section.artists li {
    margin-bottom: 1em; }

.press-page article {
  margin-bottom: 2em; }
  .press-page article .source {
    text-align: right;
    font-style: italic;
    margin-top: 0.25em; }

.artist .title {
  margin-bottom: 0.66em; }
  .artist .title .name {
    font-weight: bold;
    font-size: large;
    margin-bottom: 0.5em; }
  .artist .title h1 .name {
    font-size: x-large; }
  .artist .title .subline {
    font-size: small;
    font-weight: normal;
    line-height: 1.5em; }
    .artist .title .subline > .from,
    .artist .title .subline > .plays {
      display: inline; }
    .artist .title .subline > *::after {
      display: inline-block;
      content: ' '; }
  .artist .title .members > * {
    display: inline; }
  .artist .title .members *:not(:last-child)::after {
    content: ', '; }
  .artist .title .plays > * {
    display: inline; }
  .artist .title .plays *:not(:last-child)::after {
    content: ', '; }
  .artist .title .plays > * {
    display: inline; }
  .artist .title .plays::before {
    content: '('; }
  .artist .title .plays::after {
    content: ')';
    margin-right: 0.25em; }

.artist .text p {
  margin-block-start: 0; }

.artist audio {
  display: block;
  margin-bottom: 0.5em; }

.artists > .artist {
  margin-bottom: 1.5em; }
  .artists > .artist > .body {
    display: flex;
    gap: var(--gap-column); }
    .artists > .artist > .body.geom-64 > a {
      flex-shrink: 0; }

.sponsors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em; }
  .sponsors .sponsor {
    display: flex;
    flex-direction: column;
    text-align: center; }
    .sponsors .sponsor .image {
      flex-grow: 0; }
      .sponsors .sponsor .image img {
        width: unset; }
        @media (prefers-color-scheme: dark) {
          .sponsors .sponsor .image img {
            filter: invert(100%) hue-rotate(180deg); } }
    .sponsors .sponsor .name {
      flex-grow: 0;
      max-width: 8em;
      font-size: smaller; }

.image {
  width: 100%; }
  .image img {
    width: 100%;
    height: auto; }
  .image .credits {
    font-size: smaller; }

.error {
  outline: 4px solid red;
  color: lime;
  font-weight: bold; }