/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1rem;
  line-height: 1.5;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
  height: 0;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  /*
   * Printing Tables:
   * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
   */
  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}

@font-face {
  font-family: 'FoundersGrotesk';
  font-weight: normal;
  font-style: normal;
  src: url('../font/FoundersGrotesk-Regular.woff') format('woff');
  font-display: auto;
}

@font-face {
  font-family: 'FoundersGrotesk';
  font-weight: 500;
  font-style: bold;
  src: url('../font/FoundersGrotesk-Medium.woff') format('woff');
  font-display: auto;
}

body{
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  font-family: 'FoundersGrotesk';
  font-weight: 500;
  color: #FAC0E2;
  letter-spacing: 2px;
  background-color: #fff;
}

.blank,
.blank::before,
.blank::after{
  background: none !important
}

.page-wrapper {
  height: 100vh;
  max-height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nav,
.nav-toggle{
  display: none;
}

.social{
  display: flex;
  margin-left: 30px;
  margin-top: 60px;
}

.social a {
  opacity: 0.5;
  transition: all 0.4s ease;
  height: 30px;
  display: flex;
  align-items: center;
}

.social a:hover {
  opacity: 1;
}

.social a:not(:last-child){
  margin-right: 15px;
}

.social a svg{
  width: 20px;
  height: 20px;
  fill: #FAC0E2;
}

.content{
  display: none;
}

.content:not(.content--no-blur)::before,
.content:not(.content--no-blur)::after{
  opacity: 0;
  transition: opacity 0.4s ease;
}

.content.content--active:not(.content--no-blur)::before,
.content.content--active:not(.content--no-blur)::after{
  opacity: 1;
}

.content--active{
  display: block;
}

.content__wrapper{
  max-width: 800px;
  padding: 60px 15px;
  margin: 0 auto;
}

.content__wrapper.content__wrapper--home {
  padding-top: 0;
  padding-bottom: 0;
  height: calc(100vh);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.content__wrapper--compact{
  padding-top: 0;
  padding-bottom: 0;
}

.main-title{
  text-align: center;
  font-size: 2.5rem;
  font-weight: 500;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: 4px;
  line-height: 1;
}

.main-logo{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 600px;
  width: 90vw;
}

.main-content p{
  text-align: center;
  margin: 0 0 20px 0;
}

.main-link-list{
  display: flex;
  margin: 20px 0 0 0;
  padding: 0;
  justify-content: center;
  list-style-type: none;
  gap: 30px;
}

.main-link-list a{
  display: block;
}

.main-link-list svg {
  width: 25px;
  height: 25px;
}

.main-link-list .fill{
  fill: #FAC0E2;
}

.main-img{
  margin: auto;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  box-shadow: 0 0 20px 10px rgba(0,0,0,0.04);
  max-width: 400px;
  max-height: calc(90vh - 100px);
}

.sub-title{
  text-align: center;
  font-size: 2rem;
  font-weight: normal;
  text-transform: uppercase;
  margin: 0;
  white-space: nowrap;
}

h2{
  font-size: 2.5rem;
  font-weight: 500;
  text-transform: uppercase;
  margin: 0 0 60px 0;
  letter-spacing: 4px;
  line-height: 1;
}

h3{
  font-size: 2rem;
  font-weight: 500;
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
  letter-spacing: 4px;
}

h3 small{
  font-size: 50%;
}

a{
  color: inherit;
}

.margin-top{
  margin-top: 60px;
}

img{
  display: block;
  max-width: 100%;
}

.banner-img {
  margin-bottom: 45px;
}

.link-list ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.link-list ul a{
  display: block;
  line-height: 1;
  position: relative;
  padding-left: 30px;
  text-decoration: none;
  margin-bottom: 0;
  white-space: nowrap;
  width: 20px;
  height: 20px;
  overflow: hidden;
  text-indent: 1000px;
}

.link-list ul a svg{
  position: absolute;
  left: 0;
  top: -5px;
  width: 20px;
  height: 30px;
  transition: 0.2s all ease;
}

.link-list ul a svg .fill{
  fill: #FAC0E2;
}

.link-list.link-list--compact{
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(250, 192, 226, 0.25);
}

.link-list.link-list--compact .link-list__title{
  margin-top: 0;
}

.link-list.link-list--compact ul{
  display: flex;
}

.link-list.link-list--compact ul a{
  display: block;
  line-height: 1;
  position: relative;
  padding-left: 30px;
  text-decoration: none;
  margin-bottom: 0;
  white-space: nowrap;
  width: 20px;
  height: 20px;
  overflow: hidden;
  text-indent: 1000px;
}

.link-list.link-list--compact ul a svg{
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  transition: 0.2s all ease;
}

.shadow{
  margin-bottom: 20px;
  max-width: 240px;
  box-shadow: 0 0 20px 10px rgba(0,0,0,0.04);
}

.content__slider{
  position: relative;
}

.content__slider__item{
  top: 0;
  width: 100%;
}

.content__slider__item:not(:last-child){
  padding-bottom: 60px;
  margin-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.25);
}

.content__slider__nav{
  top: 50%;
  left: -60px;
  right: -60px;
  pointer-events: none;
  display: flex;
  justify-content: space-between;
}

.content__slider__nav__button{
  display: block;
  width: 40px;
  height: 40px;
  pointer-events: all;
  border: none;
  background: none;
  cursor: pointer;
  opacity: 0.5;
  transition: 0.2s all ease;
  background-color: rgba(0,0,0,0.5);
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  background-size: 50%;
}

.content__slider__nav__button:hover{
  opacity: 1;
}

.content__slider__nav__button--prev{
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 200 200' style='enable-background:new 0 0 200 200;' xml:space='preserve'%3E%3Cpolygon style='fill:%23fff;' points='138.6,19.9 144.3,25.5 69.8,100 144.3,174.5 138.6,180.1 58.5,100 '/%3E%3C/svg%3E%0A");
}

.content__slider__nav__button--next{
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 200 200' style='enable-background:new 0 0 200 200;' xml:space='preserve'%3E%3Cpolygon style='fill:%23fff' points='64.2,180.1 58.5,174.5 133,100 58.5,25.5 64.2,19.9 144.3,100 '/%3E%3C/svg%3E%0A");
}

.video-wrapper.shadow{
  display: block;
  position: relative;
  padding-bottom: 56.25%;
  background-color: rgba(0, 0, 0, 0.25);
  max-width: none;
  margin-bottom: 0;
}

.video-wrapper::after{
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%,-50%);
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath style='fill: %23fff' d='M304 48C304 74.51 282.5 96 256 96C229.5 96 208 74.51 208 48C208 21.49 229.5 0 256 0C282.5 0 304 21.49 304 48zM304 464C304 490.5 282.5 512 256 512C229.5 512 208 490.5 208 464C208 437.5 229.5 416 256 416C282.5 416 304 437.5 304 464zM0 256C0 229.5 21.49 208 48 208C74.51 208 96 229.5 96 256C96 282.5 74.51 304 48 304C21.49 304 0 282.5 0 256zM512 256C512 282.5 490.5 304 464 304C437.5 304 416 282.5 416 256C416 229.5 437.5 208 464 208C490.5 208 512 229.5 512 256zM74.98 437C56.23 418.3 56.23 387.9 74.98 369.1C93.73 350.4 124.1 350.4 142.9 369.1C161.6 387.9 161.6 418.3 142.9 437C124.1 455.8 93.73 455.8 74.98 437V437zM142.9 142.9C124.1 161.6 93.73 161.6 74.98 142.9C56.24 124.1 56.24 93.73 74.98 74.98C93.73 56.23 124.1 56.23 142.9 74.98C161.6 93.73 161.6 124.1 142.9 142.9zM369.1 369.1C387.9 350.4 418.3 350.4 437 369.1C455.8 387.9 455.8 418.3 437 437C418.3 455.8 387.9 455.8 369.1 437C350.4 418.3 350.4 387.9 369.1 369.1V369.1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  background-size: cover;
  -webkit-animation:spin 2s linear infinite;
  -moz-animation:spin 2s linear infinite;
  animation:spin 2s linear infinite;
  z-index: -1;
}

.video-wrapper iframe{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

dl dt{
  font-weight: 500;
  text-transform: uppercase;
  font-size: 18px;
}

dl dd{
  margin: 0 0 20px 0;
}

.dl-holder a{
  text-decoration: none;
  margin: 0 10px;
}

.dl-holder a:first-child{
  margin-left: 0;
}

.show-archive{
  list-style-type: none;
  padding: 0;
}

.show-archive li{
  display: flex;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.show-archive li span:first-child{
  flex-basis: 140px;
  min-width: 140px;
}

.show-archive li span a{
  text-decoration: none;
}

@media only screen and (max-width: 639px) {

  .show-archive li{
    flex-wrap: wrap;



    border-bottom: 1px solid rgba(250, 192, 226, 0.25);
    padding-bottom: 10px;
  }

  .show-archive li span:first-child{
    font-size: 70%;
    text-transform: uppercase;
  }
}

@media only screen and (min-width: 640px) {
  .nav__item{
    font-size: 1.25rem;
    color: inherit;
    text-decoration: none;
    margin: 0 30px;
    text-transform: uppercase;
  }

  h2{
    margin-bottom: 80px;
  }

  .col-2-wrapper{
    display: flex;
  }

  .col-2-wrapper > .col-1{
    flex-basis: 400px;
    max-width: 50%;
    margin-right: 30px;
  }

  .col-2-wrapper > .col-2{
    padding-top: 10px;
  }

  .link-list{
    padding-top: 20px;
  }

  .link-list ul{
    display: block;
  }

  .link-list ul a{
    margin-bottom: 20px;
    width: auto;
    height: auto;
    overflow: visible;
    text-indent: 0;
  }

  .link-list ul a svg{
    height: 20px;
  }

  .shadow{
    margin-bottom: 0;
    max-width: 100%;
  }
}

@media only screen and (max-width: 991px) {
  .nav.nav--active{
    display: block;
    position: fixed;
    z-index: 10;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    padding-top: 80px;
  }

  .nav__item{
    display: block;
    font-size: 1.25rem;
    color: inherit;
    text-decoration: none;
    margin: 0 30px;
    text-transform: uppercase;
    padding: 15px 0;
  }

  .nav__item:not(:last-child){
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  }

  .nav-toggle{
    display: block;
    position: fixed;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    z-index: 20;
    border: none;
    cursor: pointer;
    background: none;
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: 100%;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 200 200' style='enable-background:new 0 0 200 200;' xml:space='preserve'%3E%3Cg%3E%3Crect x='33.5' y='62.6' style='fill:%23FAC0E2;' width='133' height='8'/%3E%3Crect x='33.5' y='96' style='fill:%23FAC0E2;' width='133' height='8'/%3E%3Crect x='33.5' y='129.4' style='fill:%23FAC0E2;' width='133' height='8'/%3E%3C/g%3E%3C/svg%3E%0A");  }

  .nav-toggle.nav-toggle--active{
    background-size: 75%;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 200 200' style='enable-background:new 0 0 200 200;' xml:space='preserve'%3E%3Cpolygon style='fill: %23FAC0E2' points='163.3,160.3 102.7,99.7 163.2,39.2 160.4,36.3 99.8,96.9 39.8,36.8 37,39.7 97,99.7 36.9,159.8 39.7,162.6 99.8,102.5 160.5,163.2 '/%3E%3C/svg%3E%0A");
  }

}

@media only screen and (min-width: 992px) {
  .nav{
    display: flex;
    position: fixed;
    z-index: 10;
    top: 30px;
    justify-content: center;
    width: 100%;
  }

  .social{
    display: flex;
    position: fixed;
    z-index: 10;
    top: 30px;
    right: 30px;
    margin: 0;
  }

  .content__wrapper{
    padding-top: 200px;
  }

  .content__wrapper--compact {
    padding-top: 0;
  }

  .col-2-wrapper > .col-1{
    margin-right: 60px;
  }

  .link-list{
    padding-top: 80px;
  }
}


@-moz-keyframes spin {
  100% { -moz-transform: translate(-50%,-50%) rotate(360deg); }
}
@-webkit-keyframes spin {
  100% { -webkit-transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes spin {
  100% {
    -webkit-transform: translate(-50%,-50%) rotate(360deg);
    transform:translate(-50%,-50%) rotate(360deg);
  }
}


.link-list ul a svg .fill{
  fill: #FAC0E2;
}

.button-group{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  gap: 15px;
  background-color: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 7px;
  margin-bottom: 15px;
  background-color: #FAC0E2;
}

.button-group__title{
  /* font-size: 0.875rem; */
  line-height: 1;
}

@media only screen and (min-width: 520px) {
  .button-group__title{
    font-size: 1rem;
  }
}

.button-group__buttons{
  display: flex;
  gap: 15px;
}

.button-group__button{
  display: block;
  width: 24px;
  aspect-ratio: 1;
  font-size: 0;
  display:flex;
  align-items: center;
}

.button-group__button svg {
  flex: 1;
  height: 24px;
}

.button-group__button svg .fill{
  fill: #FAC0E2;
}

.button{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  text-decoration: none;
  background-color: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 7px;
  margin-bottom: 15px;
  transition: all 0.3s ease;
  font-size: 0.875rem;
  line-height: 1;
  background-color: #FAC0E2;
}

@media only screen and (min-width: 520px) {
  .button{
    font-size: 1rem;
  }
}

.button::after {
  content: '';
  display: block;
  width: 24px;
  aspect-ratio: 1;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23ffffff" d="M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM241 377c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l87-87-87-87c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L345 239c9.4 9.4 9.4 24.6 0 33.9L241 377z"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.button.button--playlist::after {
  background-image: url('/img/truurigi-musig.png');
}
.button.button--mail::after {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23ffffff" d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>');
}

.button:hover{
  background-color: rgba(255,255,255,0.225);
  background-color: #FAC0E2;
}

.button:last-child,
.button-group:last-child{
  margin-bottom: 0;
}

.footer {
  box-sizing: border-box;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 15px;
  font-size: 0.875rem;
  white-space: nowrap;
  max-width: 800px;
}

.footer p{
  margin: 0 0 15px;
}

.footer__social{
  display: flex;
}

.footer__social a {
  opacity: 0.5;
  transition: all 0.4s ease;
  height: 30px;
  display: flex;
  align-items: center;
}

.footer__social a:hover {
  opacity: 1;
}

.footer__social a:not(:last-child){
  margin-right: 15px;
}

.footer__social a svg{
  width: 24px;
  aspect-ratio: 1;
  fill: #FAC0E2;
}

.title--links{
  margin: 0 0 15px 0;
  font-weight: 500;
  color: #FAC0E2;;
}