:root{--black:#696969;
    --cream:#fffef2;
     --red:#ed1c24;
         --trans: 0.25s ease all;}

*{box-sizing:border-box; -webkit-tap-highlight-color: transparent; }

body{background:var(--cream)}

.site-border{padding:20px; width:100%; min-height:100%; min-width:100%;}


.grid{display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows:  auto;
grid-column-gap: 16px;
grid-row-gap: 16px; width:100%; min-height:100%; min-width:100%; }


.flexi{display: flex;
    flex-direction: column;
    justify-content: flex-end;}
    
    
    .preloader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    z-index: 5000;
    background: var(--cream);
    position: fixed;
    opacity: 1;
    transition: var(--trans);
}
    
  
.fade-1, .fade-2, .fade-3 {
  opacity:0;
  transition: opacity 0.6s ease;
}
    
nav{display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(3, auto);
grid-column-gap: 16px;
grid-row-gap: 16px; height:100%; width:100%; min-height:100%; min-width:100%; grid-column: span 12;}


.col-12{grid-column:span 12;}
.col-6{grid-column:span 6;}
.col-4{grid-column:span 4;}
.col-3{grid-column:span 3;}
.col-8{grid-column:span 8;}


h2 {
    font-size: calc(21px + 1.2vmin);
   font-family: "Cormorant Garamond", serif;
    line-height: 1.3em;
  font-weight:400;
  max-width:60ch;
    margin-bottom: 20px; color: var(--black);
}


h3{    font-size: calc(1em + .2vmin);
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
    margin-bottom: 20px; color: var(--red)}



p{font-size: 22px;
    font-family: "Cormorant Garamond", serif;
    line-height: 1.3em;
  font-weight:500;     margin-bottom: 0px;


 color: var(--black);}

.reg-link{font-size: 22px;
    font-family: "Cormorant Garamond", serif;
    line-height: 1.3em;
  font-weight:500;     margin-bottom: 0px;


 color: var(--black);}




.main-link{display:inline-flex; flex-direction:row; align-items:baseline; position:relative; transition: var(--trans);      width: max-content; }
.arrow{margin-left:6px; transition: var(--trans); color:var(--black);    font-family: "Inter", sans-serif;   }

.link-cont{display:flex; flex-direction:column; border-left: solid #EDECE1 1px; padding:20px; padding-bottom:50px; }


.right-arrow{transform: rotate(-90deg);}

.reg-link{display:flex; border-bottom: 2px #EDECE1 solid ; line-height:1.1em; transition: var(--trans);  margin-top: 15px; padding-bottom:3px;}


.main-link:hover .reg-link{
  border-bottom: 2px var(--red) solid;
}

.main-link:hover .arrow{
  color: var(--red);
}

.main-link:hover .down-arrow{
  transform: translateY(6px);
}

.main-link:hover .right-arrow{
  transform: translateX(6px) rotate(-90deg);
}

.main-link:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
}


.skip-link {
  position: absolute;
  top: -40px;
  left: 10px;
  background: white;
  color: black;
  padding: 8px 12px;
  z-index: 100;
}     

.skip-link:focus {
  top: 10px;
}

a{text-decoration:none; cursor:pointer;}


.border{width:100%; height: 2px; background:var(--red); opacity:50%;}


#fit{  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-style: italic; color: var(--red); margin:0px;     line-height: .9 !important; padding-bottom:30vh;}


.col-top{border-top: solid #EDECE1 1px; width:100%; display:none}


.col-btt{border-top: solid #EDECE1 1px; width:100%; margin-top:auto;}



@media screen and (max-width:1150px) and (min-width:960px) { 

.col-3{grid-column:span 6;}
   .site-border{padding:15px}

  .col-top{border-top: solid #EDECE1 1px; width:100%; display:block}

  .no-show-tab{display:none !important;}
  
}




@media screen and (max-width:960px) and (min-width:260px) { 

.no-show-mob{display:none !important;}








  .main-link:hover .reg-link{border-bottom: 2px #EDECE1 solid ;    }
  .main-link:hover .arrow{color: var(--black)}
  .main-link:hover .down-arrow{transform: translateY(0px);}   
  .main-link:hover .right-arrow{transform: translateX(0px) rotate(-90deg);}   



.main-link:active {
  transform: scale(0.96);
}

.main-link:active .reg-link {
  color: var(--red);
  border-bottom: 2px var(--red) solid;
}

.main-link:active .arrow {
  color: var(--red);
}
  

.col-6{grid-column:span 12;}
.col-4{grid-column:span 12;}
.col-3{grid-column:span 12;}
.col-8{grid-column:span 12;}

    .site-border{padding:10px}

.col-top{display:block; margin-top:20px;}

  .link-cont{display:flex; flex-direction:column; border-left: solid #EDECE1 0px;   padding-bottom:50px; padding:0px}
  
}



@media (prefers-reduced-motion: reduce) {

  * {
    animation: none !important;
    transition: none !important;
  }

}