body { min-height:100vh; margin:0; color:#103554; background:#faf9f6; font-family:"source-serif-4-subhead",Georgia,serif; line-height:1.8; }
* { box-sizing:border-box; } a { color:inherit; }
.portal { max-width:820px; margin:40px auto; padding:32px; background:#fff; border:1px solid #d6e1eb; border-radius:16px; box-shadow:0 8px 40px #1035540a; }
.brand { font-family:"geographica-script",cursive; font-size:44px; text-align:center; color:#5e80bd; }
.portal h1 { font-size:32px; line-height:1.3; margin:24px 0; }
.portal h2 { font-family:inherit; font-size:24px; }
label { display:block; margin:18px 0; font-size:18px; }
input,select,textarea { display:block; width:100%; margin-top:6px; padding:12px; font:inherit; color:#103554; background:#faf9f6; border:1px solid #8b9eae; border-radius:6px; }
textarea { min-height:90px; resize:vertical; }
button,.portal-button { display:inline-block; margin:12px 0; padding:12px 24px; background:#103554; color:#fff; border:0; border-radius:6px; font:inherit; cursor:pointer; text-decoration:none; }
button.secondary { background:#edf2f8; color:#103554; }
fieldset,article,aside { padding:20px; margin:24px 0; border:1px solid #d6e1eb; border-radius:8px; }
legend { font-size:22px; font-weight:600; padding:0 8px; }
.hint { font-size:15px; } [role=alert],[role=status] { padding:16px; background:#edf2f8; border-left:3px solid #5e80bd; }
code { overflow-wrap:anywhere; font-size:20px; } ul { padding-left:24px; } li { margin-bottom:16px; }
summary { cursor:pointer; font-size:22px; }
:focus-visible { outline:3px solid #5e80bd; outline-offset:4px; }
.private-tools { padding:14px 24px; text-align:center; border-bottom:1px solid #d6e1eb; }
.private-tools form { display:inline; margin-left:20px; }
.private-tools button { padding:6px 12px; }
@media(max-width:600px) { .portal { margin:16px; padding:20px; } fieldset,article { padding:12px; } }

/* Guest entrance styled as wedding stationery. */
body.guest-login {
  background: #edf4f9;
  color: #36536b;
}
.guest-login .portal {
  position: relative;
  isolation: isolate;
  width: min(560px, calc(100% - 48px));
  max-width: none;
  margin: 56px auto 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.login-card {
  position: relative;
  padding: 38px 48px 42px;
  background: #fbf8ef url("/login-art/paper.jpg") center / 100% 100% no-repeat;
  box-shadow: 0 5px 10px #36536b14, 0 15px 32px #36536b1a;
  text-align: center;
}
.login-tape {
  position: absolute;
  left: 50%;
  top: 0;
  width: 145px;
  aspect-ratio: 3;
  background: url("/login-art/tape.png") center / contain no-repeat;
  transform: translate(-50%, -50%) rotate(-5deg);
  pointer-events: none;
}
.login-monogram {
  display: block;
  margin: 0 auto 3px;
  object-fit: contain;
  opacity: .65;
}
.guest-login .brand {
  font-size: clamp(42px, 7vw, 55px);
  line-height: 1.3;
  color: #7597bf;
  margin: 5px 0 26px;
}
.guest-login .portal h1 {
  font-size: 25px;
  font-weight: 400;
  margin: 0 0 18px;
}
.login-intro {
  max-width: 34ch;
  margin: 0 auto 25px;
  font-size: 17px;
  line-height: 1.8;
  text-wrap: balance;
}
.login-card form {
  max-width: 350px;
  margin: auto;
}
.login-card label {
  margin: 0 0 7px;
  font-size: 16px;
  text-align: left;
}
.login-card input {
  min-height: 52px;
  margin: 0;
  border: 1px solid #a6bdd0;
  border-radius: 2px;
  background: #fffdfa;
  font-size: 18px;
}
.login-card button {
  width: 100%;
  min-height: 50px;
  margin: 20px 0 0;
  border-radius: 2px;
  background: #7899b9;
  color: white;
  font-size: 18px;
}
.login-card button:hover { background: #6385a6; }
.login-card button:disabled { opacity: .65; cursor: wait; }
.login-error { text-align: left; font-size: 16px; }
.login-admin {
  display: block;
  width: fit-content;
  margin: 20px auto;
  padding: 8px;
  font-size: 13px;
  color: #587591;
  text-underline-offset: 4px;
}
.login-flower {
  position: absolute;
  z-index: -1;
  width: 200px;
  height: 245px;
  background: url("/login-art/flowers.png") center / contain no-repeat;
  pointer-events: none;
  opacity: .7;
}
.login-flower-left { left: -115px; bottom: 30px; transform: rotate(-20deg); }
.login-flower-right { right: -105px; top: 45px; transform: rotate(160deg); }
@media (max-width: 650px) {
  .guest-login .portal {
    width: calc(100% - 44px);
    margin: 42px auto 18px;
    padding: 0;
  }
  .login-card { padding: 34px 25px 32px; }
  .login-tape { width: 120px; }
  .login-monogram { width: 85px; height: 90px; }
  .guest-login .brand { margin-bottom: 22px; }
  .guest-login .portal h1 { font-size: 23px; }
  .login-intro { font-size: 16px; }
  .login-flower { display: none; }
}