/* =Type
  ----------------------------------------------- */
  /*
  :root {
    --type-noto: "Noto Sans", 'Noto Sans JP', 'Noto Sans HK', 'Noto Sans KR', 'Bai Jamjuree', "Public Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --type-unit: unit, "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  */

  body {
    line-height: 1.5; 
    /*
    font-family: "Public Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-family: 'Noto Sans SC', sans-serif;
    font-family: 'Noto Sans TC', sans-serif;
    font-family:
      "Noto Sans",
      'Noto Sans JP',
      'Noto Sans HK',
      'Noto Sans KR',
      'Bai Jamjuree',
      "Helvetica Neue", Helvetica, Arial, sans-serif;
    */
    font-family:
      "Noto Sans",
      'Noto Sans JP', /* Japanese (& Chinese ?) */
      'Noto Sans KR', /* Korean */
      'Bai Jamjuree', /* Thai */
      "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-size: calc(0.75em + 1vmin);
  }

  /* nav {
    font-family: unit, "Helvetica Neue", Helvetica, Arial, sans-serif;
  } */

  /*
Unit

  Thin
  The quick brown fox jumps over the lazy dog
  100
  normal
  Thin Italic
  The quick brown fox jumps over the lazy dog
  100
  italic
  Light
  The quick brown fox jumps over the lazy dog
  200
  normal
  Light Italic
  The quick brown fox jumps over the lazy dog
  200
  italic
  Regular
  The quick brown fox jumps over the lazy dog
  400
  normal
  Regular Italic
  The quick brown fox jumps over the lazy dog
  400
  italic
  Medium
  The quick brown fox jumps over the lazy dog
  500
  normal
  Medium Italic
  The quick brown fox jumps over the lazy dog
  500
  italic
  Bold
  The quick brown fox jumps over the lazy dog
  700
  normal
  Bold Italic
  The quick brown fox jumps over the lazy dog
  700
  italic
  Black
  The quick brown fox jumps over the lazy dog
  800
  normal
  Black Italic
  The quick brown fox jumps over the lazy dog
  800
  italic
  Ultra
  The quick brown fox jumps over the lazy dog
  900
  normal
  Ultra Italic
  The quick brown fox jumps over the lazy dog
  900
  italic

  */

  /* h1, h2, h3, h4, h5, h6 {
    font-family: unit, "Helvetica Neue", Helvetica, Arial, sans-serif;
  } */
  /* main h1,
  main h1 + p, */
  /* h1, h2, h3, h4 {
    font-family: unit, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 500;
  } */
  h1, h2, h3, h4 {
    /*font-family: var(--type-unit);*/
    font-weight: inherit;
  }
  h1 {
    /* text-transform: uppercase; */
    font-weight: 800;
  }
  h2, h3, h4 {
    font-weight: 600;
  }

  header,
  main,
  footer {
    padding: 1.5em 1.5em;
  }

  header {
    padding: 3em 0 1.5em;
  }


  @media (min-width: 60em) {
    main {
      padding-top: 4.5em;
      padding-bottom: 4.5em;
    }
    footer {
      padding-top: 4.5em;
      padding-bottom: 9em;
    }
    header {
      padding-top: 4rem;
      padding-left: 4rem;
      padding-right: 3rem;
    }
  }


  header h3 {
/*     font-weight: normal; */
    font-style: italic;
    font-size: inherit;
  }
  header a {
    text-decoration: none;
    color: var(--banana);
/* font-weight: bold; */
    /*! text-decoration: none; */
    /*! color: var(--text-color); */
  }
header a:hover,
header a:active,
header a:focus {
  text-decoration: underline;
}

  dt {
    /*! font-weight: bold; */
    font-style: italic;
  }
  dd {
    margin-left: 0;
  }
  dd + dt {
    margin-top: 1.5em;
  }

  figure {
    margin: 3em -1.5em;
  }
  
  main > figure {
    grid-column: 2/-2;
  }

  /* h1 {
    font-weight: inherit;
  } */

  h1.welcome {
    line-height: 1.2;
    font-size: inherit;
    font-weight: inherit;
/*     color: hsl(86,  1%, 30%);
    color: var(--strawberry); */
/*     color: var(--evergreen);
    text-shadow: 0.025em 0.025em 0em var(--lime); */
    color: var(--evergreen);
    margin: 0;
  }
  

h1.welcome em:nth-of-type(2n+1) {
  color: var(--lime);
}
h1.welcome em:nth-of-type(3n+1) {
  color: var(--lime-darker);
}
  h1.welcome em {
    display: inline-block;
    font-style: inherit;
  }
h1.welcome svg {
  vertical-align: middle;
  height: 1em;
  width: auto;
  color: var(--banana-darker);
  color: var(--banana);
  color: var(--lime);
  display: inline-block;
}
h1.welcome .waves {
  height: 2.7em;
  margin: -1em 0 -1.6em;
}
h1.welcome .sun {
  height: 1.75em;
  margin: -1em 0 -1.25em;
}
h1.welcome svg * {
  fill: currentColor;
}

/*
h1.welcome > * {
  margin-right: 0.25em;
}

h1.welcome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
*/

/* main > h1.welcome {
  height: calc(3.675em * 2);
  overflow: hidden;
} */

/* @media (min-width: 20em) {
    main > h1.welcome {
      font-size: 3.2vmax;
    }
} */

main > h1.welcome {
  max-width: none;
  margin-left: -1.5em;
  margin-right: -1.5em;
  width: 100vw;
  overflow: hidden;
  margin-bottom: 3em;
}

main > h1.welcome span {
  font-size: 1.25em;
  display: block;
  margin-left: -1em;
  margin-right: -7em;
  height: 6em;
}
@media (min-width: 30em) {
  main > h1.welcome span {
    font-size: 1.5em;
  }
}
/* @media (max-aspect-ratio: 1/1) {
  main > h1.welcome span {
    height: calc(3.625em * 2);
  }
} */
    
@media (min-width: 60em) {
    main > h1.welcome {
/*       margin-bottom: -5rem; */
      grid-column: 1/-1;
      margin-bottom: 0em;
/*       color: var(--lime); */
    }
/*     h1.welcome em:nth-of-type(2n+1) {
      color: hsl(86,  1%, 45%);
      color: var(--banana-darker);
      text-shadow: none;
    } */
    main > h1.welcome span {
      font-size: 2.4vmax;
      height: 4.825em;
      margin-right: -10em;
    }
  }

  /* h1.welcome em:nth-of-type(3n+1) {
    color: hsl(86,  1%, 60%);
    color: var(--strawberry);
    text-shadow: none;
  } */

.avoid-break {
  display: inline-block;
}

img {
  max-width: 100%;
  height: auto;
}


blockquote {
  border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    color: var(--strawberry);
    margin: 1.5em 0;
}
blockquote p {
  font-family: serif;
  font-size: 2em;
}
blockquote p {
  margin: 0;
}
blockquote p::before {
  content: "“"
}
blockquote p::after {
  content: "”"
}



blockquote caption {
  font-size: 0.5em;
}


@supports (false) {
  header,
  main,
  footer {
    display: grid;
    grid-template-columns: auto;
    --padding: 0;
    padding: var(--padding);
  }

  @media (min-width: 40em) { /* @medium-size-screen */
    header,
    main,
    footer {
      grid-template-columns: 4.854fr 3fr 4.854fr 6fr;
      grid-column-gap: 1.5em;
    }
  }

  header > *:first-child {
    grid-column: 2/3;
  }

  main > nav {
    grid-column: 2/-1;
  }

  main > h1 {
    font-size: 16.18vmin;
    grid-column: 1/-1;
    margin: 0;
    margin-left: 3rem;
  }
  main > h1 + * {
    grid-column: 2/-1;
  }
  main > h2 {
    font-size: 10vmin;
    grid-column: 2/-1 !important;
    margin: 0 !important;
  }
  main > h2 + * {
    grid-column-start: 2;
  }

  footer > .powered-by {
    grid-column: 1/-1;
  }

  .event-list {
    grid-column: 2/-1;
    margin-right: calc(var(--padding) * -1);
  }
  figure {
    grid-column: 1/-2;
    margin-left: 0;
    margin-right: 0;
    margin-left: calc(var(--padding) * -1);
  }
}


h1 {
  font-size: 2em;
/*   font-weight: normal; */
  color: var(--headline-color);
  color: var(--lime);
  line-height: 1.2;
}
h2 {
  color: var(--headline-color);
  font-style: italic;
  margin-top: 1.5em;
  font-size: 1.5em;
  line-height: 1.2;
}
h2 a {
  color: inherit;
}
header h2 {
  color: inherit;
}
h3 {
  margin-top: 1.5rem;
  font-size: 1.25em;
  font-style: italic;
  font-weight: normal;
}
@media (min-width: 60em) {
  h3 {
    margin-top: 3rem;
    font-size: 1.25em;
  }
}
h4, h5, h6 {
  /*! color: rgb(76, 78, 76); */
  font-style: italic;
  font-weight: normal;
}

figcaption {
  font-style: italic;
  font-size: 0.75em;
  padding-left: 0.75em;
  padding-right: 0.75em;
}

  /* Limit line lengths, for readability. */
  h1, h2, h3, h4, h5, h6, p, ol, ul, dl {
    max-width: 45em; /* @max-line-length */
  }


  main > p + h2 {
    /*! margin-top: 4.5em; */
  }

  time {
    display: inline-block;
  }


  /* =Fields
  ----------------------------------------------- */
  textarea {
    margin: 0.725em 0 0 0;
    font-size: inherit;
    font-family: inherit;
    padding: 0;
    border: 2px solid rgb(242, 244, 242);
    background: rgb(242, 244, 242);
    padding: 0.725em 1.45em;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.45;
    min-height: 4.35em;
    text-align: center;
  }