.poster.tk-futura-pt
  .poster-wrap
  
    // artist title
    .artist-title-row
      // album title
      h1.album-title Turn on the Bright Lights
      h2.artist-title Interpol   
    
    p.poster-number 67_<br/>19
      
    // album artwork
    .artwork
      - for (var x = 0; x < 4; x++)
        .shape
    // album footer
    .album-footer
      // release date
      h3.release-date 2002
      // track list
      .track-list-row
        // track list one
        ul.track-list
          //- "track side" optional
          li.track-side
            h4 Track Side A
          li 
            span Track Title Goes Here
            span 4:35
          li 
            span A Different Track Title On This Line
            span 3:29
          li 
            span One More Track For You
            span 10:35
        // track list two
        ul.track-list
          //- "track side" optional
          li.track-side
            h4 Track Side B
          li 
            span Gimme, Gimme Tracks
            span 3:41
          li 
            span Rock Me Gently Track Title 
            span 12:55
          li 
            span Track Title
            span 6:15
      

$purple: #639;
$blue: #4174CB;

:root {
  font-size: calc( 1rem + (40 - 20) * ( (100vw - 300px) / ( 2000 - 300)));
}

body {
  //background-color: $purple;
  background-color: #000;
  color: #FFF;
  //color: mix(black, $purple, 45%);
  display: flex;
  flex-direction: column;
  height: 100vh;
  letter-spacing: .02em;
  &::before,
  &::after {
    background-color: #000;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
  &::after {
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/97621/brooklyn-bridge-nyc.jpg) no-repeat center;
    background-size: cover;
    filter: opacity(.1) grayscale(1);
    mix-blend-mode: hard-light;
    transition: .4s ease;
  }
  &:hover {
    &:after {
      filter: opacity(.2);
    }
  }
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0;
  //text-transform: uppercase;
}

.icon {
  display: inline-block;
  fill: currentColor;
  height: 1em;
  width: 1em;
  vertical-align: middle;
  position: relative;
  top: -.0625em;
  margin-right: .25rem;
  margin-left: .25rem;
  text-align: center;
  stroke-width: 0;
}

ul {
  list-style-type: none;
  padding-left: 0;
  a {
    text-decoration: none;
  }
}

// modifiers

.hidden {
  display: none !important;
}

// poster styles

.poster {
  display: flex;
  flex-grow: 1;
  flex-shrink: 0;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
}

.poster-wrap {
  align-self: center;
  display: flex;
  flex-grow: 1;
  flex-shrink: 0;
  flex-direction: column;
  justify-content: space-between;
  //padding: 1.5em;
  max-width: 50rem;
  height: 100vh;
  width: 100%;
  
  // grid styles
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-columns: 10vw 5fr 13vw;
  > *:not(.artwork):not(.album-footer) {
    position: relative;
    z-index: 1;
  }
}

// album title

.album-title {
  font-size: .875em;
  //font-weight: 300;
  flex-grow: 0;
  flex-shrink: 0;
  letter-spacing: .05em;
  //padding-top: 2em;
  //padding-left: 2rem;
  //text-transform: uppercase;
}

// artist title

.artist-title-row {
  display: flex;
  font-size: .65em;
  //align-items: center;
  font-weight: 600;
  grid-column: 1 / 3;
  padding-top: 2.25em;
  //padding-right: 2rem;
  padding-left: 2em;
  justify-content: space-between;
  -webkit-font-smoothing: antialiased;
}

.artist-title {
  display: flex;
  font-size: calc(1vw + .875em);
  font-size: .875em;
  letter-spacing: .1em;
  padding-right: 1rem;
  //line-height: .875;
  //margin-right: 17%;
  text-transform: uppercase;
  transition: all .4s ease;
}

// not sure what this represents?

.poster-number {
  //color: mix(black, $purple, 45%);
  display: flex;
  font-size: .65em;
  //font-weight: 600;
  align-self: center;
  justify-self: center;
  margin-bottom: 0;
  grid-column: 3 / 3;
  grid-row: 2 / 2;
}

// artwork

.art-wrap {
  display: flex;
  align-items: center;
  flex-grow: 1;
  position: relative;  
  z-index: 0;
}

.artwork {
  display: grid;
  //align-content: center;
  justify-content: flex-end;
  flex-grow: 1;
  //grid-template-columns: repeat(12, 1fr);
  // grid-template-columns: 5rem 18rem 8rem;
  // grid-template-rows: 8rem 18rem 5rem;
  grid-template-columns: 10vw 5fr 13vw;
  grid-template-rows: 7vw 5fr 9vw;
  grid-template-areas: "top-left ..... top-right" "...... mid-center ....." "bot-left ..... bot-right";
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 0;
}

.shape {
  background-color: #FFF;
  //display: flex;
  //height: 8em;
  //width: 8em;
  opacity: .8;
  padding: 2vmin;
  position: relative;
  &::before {
    content: "";
    position: absolute;
  }
  // grid-column: span 1;
  // grid-row: span 1;
  &:nth-child(1) {
    background-color: mix(black, crimson, 15%);
    max-height: 20vw;
    height: 200%;
    width: 100%;
    grid-area: top-right;
    position: relative;
    //transform: rotate(-25deg);
    &::before {
      display: none;
      background-color: mix(white, $purple, 99%);
      //background-color: #FFF;
      top: 9em;
      left: -7vw;
      height: 15vw;
      width: 18vw;
      //transform: rotate(-45deg);
    }
  }
  &:nth-child(2) {
    //background-color: mix(black, $purple, 55%);
    //background-color: #F3F3F3;
    background-color: #FFF;
    border: .75rem solid #000;
    grid-area: mid-center;
    &::before {
      display: none;
      background-color: rgba($purple, .5);
      //background-color: #FFF;
      //mix-blend-modes: screen;      
      top: -10vw;
      left: -15vw;
      height: 30vw;
      width: 30vw;
      z-index: 1;
      //transform: rotate(-45deg);
    }
  }
  &:nth-child(3) {
    background-color: mix(white, $purple, 20%);
    background-color: $blue;
    grid-area: bot-left;
    &::before {
      background-color: $blue;      
      top: -10vw;
      right: 0;
      height: 10vw;
      width: 100%;
    }
  }
  &:nth-child(4) {
    //display: none;
    background-color: mix(black, $purple, 5%);
    background-color: yellow;
    grid-area: bot-right;
    &::before {
      background-color: yellow;
      top: 0;
      right: 0;
      height: 100%;
      width: 150%;
    }
  }
  
  &.bright-light {
    border-radius: 1em;
    transform: rotate(45deg);
  }
}

// album footer

.album-footer {
  display: flex;
  font-size: .875rem;
  flex-grow: 0;
  flex-shrink: 0;
  //align-items: flex-end;
  justify-content: space-between;
  //max-height: 10em;
  //align-self: center;
  //padding-top: 2em;
  padding-right: 5rem;
  padding-left: 2.25rem;
  padding-bottom: 3rem;
  position: relative;
  //justify-self: flex-end;
}

.release-date {
  //color: mix(black, $purple, 35%);
  display: none;
  font-size: .75em;
  font-weight: 600;
  font-weight: 300;
  letter-spacing: .06em;
  padding-top: 1rem;
  //padding-right: 3rem;
}

.track-list-row {
  display: flex;
  display: none;
  font-size: .875em;
  justify-content: flex-end;
  //padding-top: 5em;
  //padding-bottom: 2em;
  & > ul:last-child {
    margin-bottom: 0;
    padding-left: 2rem;
  }
}

.track-list {  
  > li {
    display: flex;
    line-height: 1.5467;
    justify-content: space-between;
    margin-bottom: .5rem;
    -webkit-font-smoothing: antialiased;
    &:not(.track-side) {
      font-size: .75em;
      mix-blend-mode: difference;
    }
    &:last-child {
      margin-bottom: 0;
    }
    &.track-side {
      margin-bottom: .75em;
    }
    // track time
    > span:nth-child(2) {
      padding-left: 4rem;
    }
  }  
}


// Grid Supported

@supports (grid-gap: 0) {
  .poster-wrap {
    //display: grid;
    //grid-template-columns: repeat(4, 1fr);
  }
}