/* Using a CSS Reset courtesy of joshwcomeau.com

/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
  box-sizing: border-box;
}
/*
  2. Remove default margin
*/
* {
  margin: 0;
}
/*
  Typographic tweaks!
  3. Add accessible line-height
  4. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
  5. Improve media defaults
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
/*
  6. Remove built-in form typography styles
*/
input, button, textarea, select {
  font: inherit;
}
/*
  7. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
/*
  8. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}


/* RESET OVER */

/* Universal values */

body {
  background-color: #F5F5F2;
}

header {
  text-align: center;
}

hr {
  background-color: blanchedalmond;
  border: none;
  border-radius: 5px;
  height: 20%;
}


h1.brand {
  font-family: 'Playfair Display', serif;
}





.hero-bg {
  height: 50vh;
  will-change: transform;
  background-image: url(../images/model_bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  transition: 3s;
}

.hero {

  grid-area: hero;
  overflow: hidden;
}

@keyframes slide {
  0% {
      transform: scale(1.03);
  }
  50% {
      transform: scale(1.0);
  }
  100% {
      transform: scale(1.03);
  }
}

.hero-model {
  will-change: transform;
  background-image: url(../images/model_sole.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  height: 100%;
  transition: 5s;
  animation: slide 20s ease-in-out infinite;
}

.product-gallery {
  padding-top: 2rem;
}


  .img1 {
    grid-area: img1;
  }

  img2 {
    grid-area: img2;
  }

  .txt1 {
    grid-area: txt1;
  }

  .txt2 {
    grid-area: txt2;
  }



/* XL Screens */
@media only screen and (min-width: 1243px) {
  .hero-bg {
   height: 90vh 
  }

  .product-gallery img {
    max-width: 15vw;
  }

    body {
      background-image: linear-gradient(to bottom, #F5F5F2 0%, #F5F5F2 20vh, white 20vh);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: ". header . nav nav nav . ."
                        "hero hero hero hero hero hero hero hero"
                        "break break break break break break break break"
                        ". . section section section section .  ."
                        ". . aside1 aside1 aside2 aside2 . ."
                        ". . story story story story . ."
                        ". . story story story story . ."
                        ". . story story story story . ."
                        "fill fill fill fill fill fill fill fill"
                        ". . more more more colls2 . ."
                        "mov mov colls colls colls colls2 . ."
                        "mov mov footer footer footer footer empt empt";
    grid-template-rows: auto 50vh 50px 1fr 1fr auto auto auto 1fr 1fr 10rem; 
  }

    .empt {
    background-color: #464645;
    grid-area: empt;
  }


}

/* Larger screens begin */
@media only screen and (min-width: 1147px) and (max-width: 1242px) {

  .hero-bg {
    height: 70vh;
  }

  }
/* Larger screens end */



@media only screen and (min-width: 953px) and (max-width: 1146px) {
  .hero-bg {
    height: 70vh;
  }

   
}


@media only screen and (min-width: 761px) and (max-width: 1242px) {

    body {
      background-image: linear-gradient(to bottom, #F5F5F2 0%, #F5F5F2 20vh, white 20vh);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: ". header nav nav nav nav nav ."
                        "hero hero hero hero hero hero hero hero"
                        "break break break break break break break break"
                        ". section section section section section section ."
                        ". aside1 aside1 aside1 aside2 aside2 aside2 ."
                        ". story story story story story story ."
                        ". story story story story story story ."
                        ". story story story story story story ."
                        "fill fill fill fill fill fill fill fill"
                        "mtop more more more more more colls2 ."
                        "mov colls colls colls colls colls colls2 ."
                        "footer footer footer footer footer footer footer footer";
    grid-template-rows: auto 50vh 4rem 1fr 1fr auto auto auto 1fr 1fr 10rem; 
  }


}


/* For mostly shared attributes of non-mobile */ 
@media only screen and (min-width: 761px) {



  
 
  

  .more {
    grid-area: more;
    padding: 0 2rem;
  }

  .mov {
    grid-area: mov;
    height: 100%;
    background-color: #464645;
    bottom: 0;
  }

  .collections {
    grid-area: colls;
    padding: 0 2rem;
    background-color: blanchedalmond;
  }

  .collections-small {
    grid-area: colls2;
    background-color: antiquewhite;
    padding: 1rem;

  }

  .collections-small > figure.quote {
    font-family: 'Nunito Sans', sans-serif;
    font-size-adjust: 0.4;
    padding-top: 1rem;
  }

  .collections-small > figure.quote > figcaption {
   padding-top: 3rem 
  }

  .mission-statement {
    grid-area: aside1;
  }

  .legacy {
    grid-area: aside2;
  }

  .empty-cell {
    background-color: white;
    grid-area: empt;
  }


  header {
    line-height: 0.9;
    text-align: right;
    word-break: break-none;
  }
  nav {
    padding: 10px 20px;
    background-color: #F5F5F2;
  }
  nav ul {
    list-style-type: none;
    margin:0;
    padding: 0;
    display: flex;
    justify-content: space-between;
  }
  nav ul li {
    margin: 0;
    padding: 0;
  }

  nav .nav-item{
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    transition: background 0.3s;
  }
  nav li {
  text-transform: uppercase;
      font-family: 'Nunito Sans', sans-serif;
      font-weight: bolder;
  }
  .nav-item svg {
    display: none;
  }

  .break {
    background-color: #FEFEFE;
   grid-area: break;
   padding-top: 3rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
    grid-template-rows: 1fr;
  grid-template-areas: ". . . line line . . .";
  }

  .break > hr {
    grid-area: line;
  }

  .product-gallery {
    display: flex;
    justify-content: center;
  }

  .product-gallery img {
    max-height: 9rem;
  }

  /* hide mobile images */
  .product-gallery > article > figure > img[src*="_nbg"] {
    display: none;
  }

  .product-gallery > article > figure > figcaption {
    display: none;
  }

  aside > hgroup > h3 {
    display: none
  }

  .more img {
    max-height: 4rem;
  }

  footer {
    min-height: 10rem;
    background-color: #464645;
    color: white;
    display: grid;
    grid-template-areas: ". col1 col2 col2 col3 col3 .";
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
  }

  .col1 {
    grid-area: col1;
  }

  .col2 {
    grid-area: col2;
  }

  .col3 {
    grid-area: col3;
  }

  footer ul li.brand {
    font-family: 'Playfair Display';
    text-align: right;
  }

  .slogan {
    padding-top: 0.4rem;
    font-size: 0.7rem;
  }

  .copyright {
    padding-top: 0.4rem;
    font-size: 0.7rem
  }

  footer ul {
    padding-top: 2rem;
    list-style-type: none;
    font-family: 'Nunito Sans', sans-serif;
  }

  .story {
    display: none;
  }
}
/* End shared non-mobile attributes */

/* Medium screens begin */
@media only screen and (min-width: 761px) and (max-width: 1146px) {



  .product-gallery > article > figure > figcaption {
    display: none;
  }

  .product-gallery article {
    max-width: 20vw;
  }

  .product-gallery img {
    max-width: 20vw;
  }
}
/* Medium screens end */


nav ul {
  list-style-type: none;
}


/* Mobile screens  */
@media only screen and (max-width: 760px) {
  body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "header header header"
                       "hero hero hero"
                       "aside section section"
                       "space space space"
                       "more more story-top"
                       "story-bot story story"
                       "colls colls collections"
                       "footer footer footer"
                       "nav nav nav";
  grid-template-rows: auto 50vh 1fr 10vh 1fr 1fr 20rem 1fr auto;
    }

  

    .legacy {
      display: none;
    }

  .product-gallery {
    text-align: center;
    padding-top: 2rem;
    padding-right: 1rem;
    display: grid;
    grid-row-gap: 1rem;
    grid-column-gap: 1rem;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "prod1 prod4"
                        "prod3 prod2";
  }

  .product-gallery > article > figure > img[src*="_wbg"] {
    display: none;
  }
  
  .product-gallery article:nth-child(4) {
    background-color: #F5F5F2;
  }

  .product-gallery article:nth-child(4):hover {
    background-color: white;
  }

  .product-gallery article:hover {
    background-color: #F5F5F2;
    transition: 3s linear;
    text-decoration-line: underline;
  }

  .product-gallery article {
    padding-bottom: 1rem;
    transition: 3s linear;
  }

  .product-gallery img {
    max-height: 6rem;
  }
  
  .space {
    grid-area: space;
    background-color: white; 
  }

  .story-top {
    background-image: url('../images/story/watch.png');
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-left: 1px solid black;
    border-bottom: 1px solid black;


    grid-area: story-top;
  }

  .more {
    padding: 3rem 2rem;
    grid-area: more;
  }

  .story-bot {
    background-image: url('../images/story/winona.png');
    background-attachment: fixed;
    grid-area: story-bot;
    padding: 3rem 2rem;
    border-top: 1px solid black;
    border-right: 1px solid black;
  }

  .story {
    padding: 3rem 2rem;
    grid-area: story;
  }

/*   .story, .more { */
/*     height: calc(50vh - var(--nav-height) / 2); */
/* } */

  .collections-small {
    padding: 5rem 5rem;
    grid-area: colls;
    background-color: white;
  }

  .collections {
    grid-area: collections;
    background-color: #464645;
  }

  .mov {
    background-color: #464645;
    grid-area: mov;
  }

/* Things not to show FOR NOW -- have to find a way to include them later. 
 * Some of these don't even contain anything yet */
  hr  {
    display: none;
  }


  nav ul {
    height: 5rem;
    justify-content: space-between;
    background-color: #F2F0ED;
    bottom: 0;
    display: flex;
    position: fixed;
    bottom: 0;
    z-index: 1;
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .nav-item {
    display: inline-block;
  }



  nav ul {
    padding-right: 2rem;
  }


  nav ul li a h4 {
    display: none;
  }


  footer {
    background-color: #464645;
    color: white;
    display: grid;
    grid-template-areas: ". col1 col2 col2 col3 col3 .";
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
  }

  .col1 {
    grid-area: col1;
  }

  .col2 {
    grid-area: col2;
  }

  .col3 {
    grid-area: col3;
  }

  footer ul li.brand {
    font-family: 'Playfair Display';
    text-align: right;
  }

  .slogan {
    padding-top: 0.4rem;
    font-size: 0.7rem;
  }

  .copyright {
    padding-top: 0.4rem;
    font-size: 0.7rem
  }

  .more > img:nth-last-child(1) {
    display: inline;
  }

  .story > img:nth-last-child(1) {
    display: inline;
  }

  .story > img:nth-last-child(2) {
    max-width: 7rem;
    padding-left: 0.3rem;
  }

    footer ul {
    padding-top: 6rem;
    list-style-type: none;
    font-family: 'Nunito Sans', sans-serif;
  }

  .siae {
    display: none;
  }

  :root {
    --nav-height: 5rem;
}
} 
/* Mobile screens end */





header {
  grid-area: header;
}

nav {
  grid-area: nav;
}


aside {
  grid-area: aside;
  padding: 2rem;
  font-size: 0.9rem;
}

aside h2, figcaption, .more h2, .story h2  {
  color: #29231B;
  font-family: 'Playfair Display', serif;
}





h2 {
  padding-bottom: 1rem;
}

h3 {
  color: #D3C8BF;
  padding-bottom: 0.75rem;
}

hgroup {
}

figcaption {
  font-size: 0.7rem;
  font-weight: bold
}

.product-gallery {
  grid-area: section;
  height: 100%
}





figure img {
  margin: auto;
}

footer {
  grid-area: footer;
}


.prod1 {
  grid-area: prod1;
}
.prod2 {
  grid-area: prod2;
}
.prod3 {
  grid-area: prod3;
}
.prod4 {
  grid-area: prod4;
}

.hero, aside, .product-gallery  {
  background-color: #FEFEFE;
}

h3 {
  font-size: 1.1rem;
}

p {
  color: #6E4028 
}




.nav-item {
  color: #9B816C;
}

.nav-item:hover {
  color: black;
}

aside p {
      font-family: 'IBM Plex Serif', serif;
}

aside {
  
}