:root {
  --content-width: 85rem;
  --entry-width:46rem;
  --gray-bg: #E7EAEA;
  --gray-midtone: #afafaf;
  --primary-text: #27272B;
  --active-text: #21D1FF;
/*perfect fouth scale based on 16px base */
  --fs-xx-large:4.209rem;
  --fs-xx-large:3.157rem;
  --fs-x-large:2.369rem;
  --fs-large:1.777rem;
  --fs-medium:1.333rem;
  --fs-base:1rem;
  --fs-small:0.75rem;
  --fs-x-small:0.563rem;
  --fs-xx-small:0.422rem;
/* spacing using on 8px grid, sorta*/
  --space-0:.5rem;
  --space-1:1rem;
  --space-2:2rem;
  --space-3:3rem;
  --space-4:4rem;
  --space-5:5rem;
  --space-6:6rem;
  --space-7:7rem;
  --space-8:8rem;
  --fw-thin:200;
  --bp-small:900;
}

.fw-thin{
  font-weight:var(--fw-thin)
}

.fs-large{
  font-size:var(--fs-large);
}

html {
  box-sizing: border-box;
  font-size: 100%;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
}

ol, ul {
  list-style: none;
}



html {
  font-family: 'IBM Plex Mono', Courier, Helvetica, Arial, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" ;
    /* font-family: 'Ubuntu Mono', Courier, Helvetica, Arial, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" ; */
  color:var(--primary-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* background-color:rgb(8 4 30); */
}

p {
font-size:var(--fs-base);
}

a {
  color: currentColor;
  text-decoration: none;
}
.image-fs {
position:absolute;
width:100%;
height: 100vh;
object-fit: cover;
}

.index-card img{
  width:50px;
  padding: .5rem;
}

.header {
  position: absolute;
  top:0px;
  left:0px;
  z-index: 1;
}

.menu ul{
  display:flex;
  flex-direction: row;
}

.nav-link{
  display:inline-block;
  margin-right:1rem;
  font-size:var(--fs-small);
  padding-bottom:.4rem;
  font-weight: 500;
  text-transform: uppercase;
  border-bottom: 1px var(--primary-text) solid;
  letter-spacing: 1px;
  text-align: center;
}

.pagination{
  position:relative;
}

.link-wrapper{
  display: flex;
  justify-content:center;
  max-width:var(--entry-width);
  margin-left: auto;
  margin-right: auto;
}
.btn-back{
  display:inline-block;
  margin-top:var(--space-2);
  margin-bottom:var(--space-2);
  margin-left:var(--space-2);
  /* max-width: 10rem; */
  font-size:var(--fs-small);
  padding-bottom:.4rem;
  font-weight: 500;
  text-transform: uppercase;
  border-bottom: 1px var(--primary-text) solid;
  letter-spacing: 1px;
  text-align: center;
}

video{
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: top;
  object-position: 50% 50%;
  opacity: 1;
}

img{
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: top;
  object-position: 50% 50%;
  opacity: 1;
}

@media screen and (min-width:900px){
  video{
    width: 100%;
    height: 100%;
  }
  img{
    width: 100%;
    height: 100%;
  }
}

/*******************************/
/*******************************/
.diptych{
  position: relative;
  display: grid;
  grid-template-columns: 1fr; 
  grid-template-areas:"two"  
                       "one";
  width: 100%;
  min-height: 100dvh;
  background-color:rgb(8 4 30);
  
}


@media (orientation: landscape) {
  .diptych{
    min-height: 100dvh;
    grid-template-areas:"one two";
    grid-template-columns: 1fr 1fr;
  }
  }

  .panel-text{
    grid-area: one;
    /* overflow-y: auto; */
    width: 100%;
    /* height:66%; */
  }

  
  @media (orientation: landscape) {
    .panel-text{
      /* overflow-y: auto; */
   
      /* width: 50%; */
      /* height:100%; */
    }
  }
  
  .panel-media{
    width: 100%;
    height:33vh;
    min-height: 200px;
    grid-area: two;
    /* border:1px rgb(111, 0, 255) solid; */
  }

  
  @media (orientation: landscape) {
    .panel-media{
      position:sticky;
      top: 0;
      height: 100dvh;
      overflow: hidden;
    }
  }
/*******************************/
/*******************************/
.intro-group{
  width:90%;
  min-height: 66dvh;
  margin-left: auto;
  margin-right: auto;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 800px;
  background-color:rgb(8 4 30);
}

@media (orientation: landscape) {
  .intro-group{
    width:80%;
    min-height: 100dvh;
  }
}

.intro-headline{
  font-weight:var(--fw-thin);
  display:flex;
  flex-direction: column;
  justify-content: center;
}


.latest-collection{
  color: #fff;
  font-size:var(--fs-x-small);
  letter-spacing: .2rem;
  font-weight:400;
  text-transform: uppercase;
}

.list-wrapper{
  width: 100%;
}


.intro-block{
  font-weight:var(--fw-thin);
  font-size:var(--fs-medium);
  color:white;
  margin-top:var(--space-1);
  margin-bottom:var(--space-2);
}

@media screen and (min-width:900px){
  .intro-block{
    font-size:var(--fs-large);
    color:white;
    margin-top:15vh;
    margin-bottom:var(--space-4);
  }
}

.card-holder{
  display: flex;
  flex-direction: column;
  justify-content:space-between;
  width:100%;
}
.index-card{
  display: flex;
  flex-direction: row;
  align-items: center;
  color:#fff;
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
  font-size:var(--fs-base);
  /* background-color: var(--gray-bg); */
  border-bottom: 1px rgba(0, 255, 255, 0.164) solid;
}

.link-01{
  align-self:flex-start;
  color:#fff;
  font-size:var(--fs-x-small);
  text-transform: uppercase;
  letter-spacing: .2rem;
  font-weight:400;
  border-bottom: .5px rgb(208, 255, 229) solid;
  padding-bottom:var(--space-0);
  margin-top:var(--space-2);
  margin-bottom:var(--space-1);
  /* border-radius: 3rem; */
}


footer {
  display: flex;
  justify-content: space-between;
  align-items: center;

}
footer > a {
  color: #fff;
  display: inline-block;
  font-size:var(--fs-x-small);
}

.social a {
  font-size:var(--fs-x-small);
  text-transform: uppercase;
  /* padding: .5rem 1rem;
  border: 1px solid #000; */
  color: #fff;
}
.social a:hover {
  background: #000;
  color: #fff;
}
.active{
  color: red;
}