*{
  box-sizing:border-box;
}

html,
body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}

body{
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#2b0908;
}

/* ==================================================
   CLOSED BOOK COVER — DESKTOP / LANDSCAPE
   Approved closed-book artwork.
   ================================================== */

.book-cover{
  position:relative;
  width:min(100vw, calc(100vh * 1.5));
  aspect-ratio:3 / 2;

  background-image:url("../images/book-cover.png?v=28");
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
}

/* ==================================================
   REAL HTML ENTER INVITATION BUTTON
   Not baked into either image.
   ================================================== */

.enter-invitation{
  position:absolute;
  left:50%;
  top:82%;
  transform:translateX(-50%);

  width:24%;
  min-width:210px;
  height:7.2%;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:0 24px;
  border:2px solid #d7a441;
  border-radius:999px;

  background:
    linear-gradient(180deg,#9d2028 0%,#761419 55%,#5f0d12 100%);

  box-shadow:
    0 4px 12px rgba(0,0,0,.42),
    inset 0 0 0 2px rgba(255,215,128,.22);

  color:#fff5df;
  text-decoration:none;
  text-transform:uppercase;

  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(13px,1.25vw,20px);
  font-weight:700;
  letter-spacing:.045em;

  cursor:pointer;
  z-index:20;
}

.enter-invitation::after{
  content:none !important;
}

.enter-invitation:hover{
  filter:brightness(1.08);
  box-shadow:
    0 5px 18px rgba(0,0,0,.5),
    0 0 20px rgba(238,190,93,.3),
    inset 0 0 0 2px rgba(255,215,128,.25);
}

.enter-invitation:focus-visible{
  outline:3px solid #f2c56b;
  outline-offset:4px;
}

/* ==================================================
   MOBILE / PORTRAIT
   Same top/size geometry as event pages.
   ================================================== */

@media screen and (max-width:700px){

  body{
    display:block;
    position:relative;
    background:#2b0908;
  }

  .book-cover{
    position:absolute;
    top:7%;
    left:0;
    right:0;
    margin:0 auto;

    width:min(
      100vw,
      calc((100dvh - 150px) * .6666667)
    );

    max-width:100vw;
    height:auto;
    aspect-ratio:2 / 3;

    background-image:url("../images/book-cover-mobile.png?v=28");
    background-size:100% 100%;
    background-position:center;
    background-repeat:no-repeat;
  }

  .enter-invitation{
    left:50%;
    top:82.2%;
    transform:translateX(-50%);

    width:48%;
    min-width:0;
    height:5.1%;

    padding:0 10px;

    border-width:1.5px;

    font-size:clamp(8px,2.6vw,12px);
    letter-spacing:.025em;
  }

  .enter-invitation::after{
  content:none !important;
}
}

@media screen and (max-width:380px){
  .enter-invitation{
    width:52%;
    font-size:8px;
  }
}

/* ==================================================
   LANDSCAPE PHONE
   Use desktop closed-book artwork.
   ================================================== */

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

  body{
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .book-cover{
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    margin:0;

    width:min(100vw, calc(100vh * 1.5));
    height:auto;
    aspect-ratio:3 / 2;

    background-image:url("../images/book-cover.png?v=28");
    background-size:100% 100%;
  }

  .enter-invitation{
    left:50%;
    top:82%;
    width:24%;
    min-width:150px;
    height:7.2%;
    font-size:clamp(9px,1.4vw,14px);
  }
}


/* =========================================================
   MOBILE COVER — EXTERNAL ENTER INVITATION CONTROL
   Cover artwork stays clean. Button sits below the book in the
   same lower navigation area used by event pages.
   ========================================================= */
@media screen and (max-width:700px){

  .book-cover{
    background-image:url("../images/book-cover-mobile.png?v=30") !important;
    overflow:visible !important;
  }

  .enter-invitation{
    position:absolute !important;

    /* Outside the book, centered in the lower navigation area. */
    left:50% !important;
    top:calc(100% + 7.5vh) !important;
    transform:translateX(-50%) !important;

    width:42% !important;
    min-width:150px !important;
    max-width:230px !important;
    height:54px !important;
    min-height:54px !important;

    margin:0 !important;
    padding:0 18px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border:1px solid #b8883c !important;
    border-radius:999px !important;

    background:#8b2025 !important;
    box-shadow:none !important;

    color:#fff5e5 !important;
    text-indent:0 !important;
    text-decoration:none !important;
    text-transform:none !important;

    font-family:Georgia,"Times New Roman",serif !important;
    font-size:16px !important;
    font-weight:700 !important;
    line-height:1 !important;
    letter-spacing:0 !important;

    white-space:nowrap !important;
    z-index:30 !important;
    cursor:pointer !important;
  }

  .enter-invitation::after{
    content:none !important;
  }
}

@media screen and (max-width:380px){
  .enter-invitation{
    top:calc(100% + 6vh) !important;
    width:46% !important;
    min-width:140px !important;
    height:50px !important;
    min-height:50px !important;
    font-size:14px !important;
  }
}


/* FINAL MOBILE ENTER BUTTON POSITION */
@media screen and (max-width:700px){
  .enter-invitation{
    top:calc(100% + 2.2vh) !important;
    color:#fff5e5 !important;
    font-size:16px !important;
    text-indent:0 !important;
    visibility:visible !important;
    opacity:1 !important;
  }
}

@media screen and (max-width:380px){
  .enter-invitation{
    top:calc(100% + 1.8vh) !important;
    font-size:14px !important;
  }
}


/* FINAL ENTER BUTTON — ALL INVITATION CODE ENTRY PAGES */
@media screen and (max-width:700px){
  .enter-invitation{
    top:calc(100% + 2.2vh) !important;
    color:#fff5e5 !important;
    -webkit-text-fill-color:#fff5e5 !important;
    font-size:16px !important;
    font-weight:700 !important;
    text-indent:0 !important;
    visibility:visible !important;
    opacity:1 !important;
  }
}