/******************************************
 * RESET & BASE
 ******************************************/
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    background: #000;
    font-family: "Times New Roman";
    color: #23211f;
    text-align: center;
}

/******************************************
 * TYPOGRAPHY
 ******************************************/

.title {
    font-family: "Cormorant Garamond", serif;
    font-size: 32px !important;
    font-weight: 100;
    letter-spacing: 0.11em;
    line-height: 0.8;
    margin-bottom: 0.5rem;
}

.subtitle,
.showroom,
.address,
.desc,
.invite,
.legal {
    font-family: 'EB Garamond', serif;
    opacity: 0.8;
    line-height: 1.1;
}

.showroom {
    font-size: 22px;
}

.subtitle {
    font-size: 24px;
}

.address,
.desc,
.invite {
    font-size: 18px;
}

.address {
    margin-bottom: 1.25rem;
}

.site-logo {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    width: 90px;
    height: auto;
    z-index: 10;
}

.desc {
    margin-bottom: 1.5rem;
}

.invite {
    margin-bottom: 0.5rem;
}

.legal {
    font-size: 14px;
    margin-top: 16px;
    color: rgba(0,0,0,0.55);
}

.legal1{
    margin-bottom: 1rem;
}

a {
    color: rgba(0,0,0,0.55);
}

a:hover {
    color: #000;  
    text-decoration: underline; 
}

a:visited {
    color: rgba(0,0,0,0.55);
}

/******************************************
 * LAYOUT
 ******************************************/

.hero {
    display: flex;
    width: 100%;
    min-height: 100vh;
    background: url("../images/hero-desktop.webp") right center / cover no-repeat;
    background-position: center 80%;

}

.first {
    flex: 1;
}

.overlay {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.37);
}

.block{
    margin-top: 1.5rem;
}

.form-wrapper {
    width: 100%;
    max-width: 640px;
    padding: 2rem 0.2rem 1.5rem 0.2rem;
    background: #f2efeb;
}

.access-header,
.access-description {
    margin-bottom: 1.5rem;
}

.access-header {
    margin-top: 1rem;
}

/******************************************
 * FORM
 ******************************************/

.email-input {
    width: 70%;
    height: 43px;
    background: transparent;
    border: 1.5px solid #cfcfcf;
    font-size: 14px;
    font-weight: 400;
    padding: 0 1rem;
}

.email-input:focus {
    outline: none;
    border-color: #b5b5b5;
    box-shadow: none;
}

.access-btn {
    font-family: 'Cormorant Garamond', serif;
    width: 43%;
    height: 43px;
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
    background: #23211f;
    border: none;
    font-size: 16px;
    color: #ffffff;
    letter-spacing: 0.08em;
}

.access-btn:hover,
.access-btn:focus {
    background: #2b2a28;
    color: #ffffff;
    box-shadow: none;
}

/* --- Tablette --- */
@media (max-width: 992px) {
    .form-wrapper {
        max-width: 480px;
        padding: 2.5rem 2rem;
    }
}


/* --- Mobile --- */
@media (max-width: 768px) {

    .hero {
        flex-direction: column;
        background: url("../images/hero-mobile.webp") center / cover no-repeat;
    }

    .first{
        height: 29vh;
        flex: none;
    }

    .overlay{
        height: 71vh;
        flex: none;
        justify-content: center;
        padding: 2rem 1rem;
        background: linear-gradient(
            to bottom,
            rgba(0,0,0,0) 0%,
            rgba(0, 0, 0, 0.54) 100%
        );
    }

    .block{
        margin-top: 1rem;
    }

    .form-wrapper {
        width: 90% !important;
        max-width: 480px;
        padding: 2rem 1.5rem 1.5rem 1.5rem;
        margin: 0 auto;
        background: #f2efebd2;
        backdrop-filter: blur(1px);
        border: none;
        box-shadow: none;
    }

    .access-header,
    .access-descrition{
        margin-bottom: 0rem;
    }

    .access-header{
    margin-top: 0.7rem;
    }

    /******************************************
    * TYPOGRAPHY
    ******************************************/

    .title {
        font-size: 22px !important;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        font-weight: 100;
        margin-bottom: 5px;
        
    }

    .showroom{
        font-size: 16px !important;
    }

    .subtitle {
        font-size: 17px;
    }

    .address,
    .desc {
        font-size: 13px;
        line-height: 1.2 !important;
    }

    .invite {
        font-size: 13px;
        margin-bottom: 5px;

    }

    .legal {
        font-size: 11px;
        margin-top: 1rem !important;
        line-height: 1.2 !important;
    }
    .legal1{
        margin-bottom: 0.5rem !important;
    }

    /******************************************
    * FORM
    ******************************************/

    .email-input {
        font-size: 12px !important;
        width: 87%;
        border: 1px solid #6666666a;
        border-radius: 0 !important;
        height: 35px;
    }
    .access-btn {
        height: 35px;
        font-size: 0.8rem;
        margin-top: 1rem;
        margin-bottom: 0 ;
    }
}

@media screen and (max-width: 430px) and (max-height: 740px) and (orientation: portrait) {
    .access-btn {
        margin-top: 1rem;
        margin-bottom: 0 ;
    }

    .form-wrapper {
    max-width: 70% !important;
    margin-top: 0.5rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;

    .desc, .address{
        margin-bottom: 0.75rem;
    }

    .legal {
        margin-top: 0.75rem;
    }
        
}
}

/* Desktop */
@media (min-width: 768px) {
    .form-wrapper {
        max-width: 65% !important;
        max-height: 80vh; 
        margin: 0 auto;
    }
}

@media (max-width: 992px) and (orientation: landscape) {

 .form-wrapper {
    width: 50%;
    padding: 0.8rem 0.8rem 0.8rem 0.8rem;
    max-height: 95vh;
    background: #f2efebd2;
  }

  .access-header,
  .access-description,
  .access-action {
    margin-bottom: .6rem;
  }

  .showroom{
    font-size: 14px !important;
  }

  .title { font-size: 20px !important; }
  .subtitle { font-size: 15px; }
  .address,
  .desc,
  .invite { font-size: 12px}
  .legal { font-size: 10px; line-height: 1.15; }

  .email-input {
    height: 30px;
    font-size: 10px;
    border: 1px solid #6666666a;
    width: 90%;
  }

  .access-btn {
    height: 30px;
    font-size: 10px;
    margin-bottom: 0;
    margin-top: 0.5rem;
  }
  .legal{
    margin-top: 0.8rem;
  }

  .desc, .address{
    margin-bottom: 0.8rem;
  }
    .legal1{
        margin-bottom: 0.5rem;
  }
  .block{
    margin-top: 1rem;
  }
}