<style>
  #framer-lock-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff; /* opaque overlay */
    z-index: 99999;
  }
  #framer-lock-modal {
    background: #fff;
    color: #333333;
    border-radius: 12px;
    padding: 16px;
    width: min(520px, 90%);
    text-align: center;
    line-height: 1.6;
  }
  #framer-lock-modal h2 { margin:0 0 8px 0; font-size:24px; font-weight:600; }
  #framer-lock-modal p { margin:0 0 16px 0; font-size:16px; color:#444; }
  #framer-lock-form { display:flex; flex-direction:column; gap:8px; }
  #framer-lock-pw, #framer-lock-submit { height:42px; font-size:14px; border-radius:8px; box-sizing:border-box; }
  #framer-lock-pw { padding:0 12px; border:1px solid #e6e6e6; }
  #framer-lock-submit { border:none; background:#111; color:#fff; cursor:pointer; }
  #framer-lock-error { margin-top:10px; color:#c0392b; min-height:18px; font-size:14px; }
  @media(max-width:480px){ #framer-lock-modal{width:90%; padding:16px;} #framer-lock-pw,#framer-lock-submit{height:40px;} }
</style>

<div id="framer-lock-overlay" role="dialog" aria-modal="true" aria-labelledby="framer-lock-title">
  <div id="framer-lock-modal" role="document">
    <h2 id="framer-lock-title">Password Protected</h2>
    <p> <a href="mailto:courtneylee@gmail.com" style= "color: #6E7277">Email</a> or <a href = "https://www.linkedin.com/in/courtneylee1321/" style= "color: #6E7277"> message me</a> on Linkedin <br> Thank you!</p>
    <form id="framer-lock-form" onsubmit="return false;">
      <input id="framer-lock-pw" type="password" aria-label="Password" placeholder="Enter password" autocomplete="off" />
      <button id="framer-lock-submit" type="button">Submit</button>
    </form>
    <div id="framer-lock-error" aria-live="polite"></div>
  </div>
</div>

<script>
  (function(){
    const PASSWORD="hiking", STORAGE_KEY="framer-page-unlocked";
    const overlay=document.getElementById("framer-lock-overlay");
    const input=document.getElementById("framer-lock-pw");
    const btn=document.getElementById("framer-lock-submit");
    const error=document.getElementById("framer-lock-error");
    if(sessionStorage.getItem(STORAGE_KEY)==="true"){overlay.style.display="none"; return;}
    input.focus();
    btn.addEventListener("click",()=>{check();});
    input.addEventListener("keydown",(e)=>{if(e.key==="Enter")check();});
    function check(){
      if(input.value===PASSWORD){sessionStorage.setItem(STORAGE_KEY,"true");overlay.style.display="none";}
      else{error.textContent="Incorrect password.";input.value="";input.focus();}
    }
  })();
<