/* ============================================================
   Mindful mit Mady — wachtwoordscherm
   Staat los van de site: dit is het enige wat een bezoeker krijgt
   zolang het wachtwoord niet is ingevuld.
   ============================================================ */
@font-face{
  font-family:"Abhaya Libre";
  src:url("../fonts/AbhayaLibre-ExtraBold.woff2") format("woff2");
  font-weight:800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Montserrat";
  src:url("../fonts/Montserrat-var.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}
:root{
  --ink:#181819;--grey:#F5F5F5;--yellow:#FFFFA9;
  --serif:"Abhaya Libre",Georgia,serif;
  --sans:"Montserrat","Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--sans);font-weight:500;font-size:16px;line-height:1.5;background:var(--grey);color:var(--ink);-webkit-text-size-adjust:100%}

.gate{position:relative;display:flex;flex-direction:column;min-height:100%;overflow:hidden;padding:clamp(24px,5vw,56px) 24px}
.gate__box{position:relative;width:min(400px,100%);margin:auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.gate__mark{width:56px;height:56px;margin-bottom:22px}
.gate__eyebrow{margin:0;font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.gate__title{margin:14px 0 0;font-family:var(--serif);font-weight:800;text-transform:uppercase;line-height:.82;font-size:min(20vw,84px);color:#000}
.gate__lede{margin:22px 0 0;color:rgba(24,24,25,.7)}
.gate__field{display:block;width:100%;margin-top:28px;text-align:left}
.gate__label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:rgba(24,24,25,.55);margin-bottom:8px}
.gate__field input{
  width:100%;padding:14px 16px;font-family:var(--sans);font-size:16px;color:var(--ink);
  background:#fff;border:1px solid rgba(24,24,25,.18);border-radius:12px;transition:border-color .2s ease;
}
.gate__field input:focus{outline:none;border-color:var(--ink)}
.gate__btn{
  width:100%;margin-top:14px;padding:14px 16px;border:0;border-radius:999px;cursor:pointer;
  background:#000;color:var(--yellow);font-family:var(--sans);font-size:16px;font-weight:700;transition:filter .2s ease;
}
.gate__btn:hover{filter:brightness(1.6)}
.gate__err{min-height:22px;margin:14px 0 0;font-size:14px;color:#b3261e;opacity:0;transition:opacity .2s ease}
.gate.is-wrong .gate__err{opacity:1}
.gate.is-wrong .gate__field input{border-color:#b3261e}