*{box-sizing:border-box}
/* The Sugarcraft Circle colours, taken from the card back: cobalt blue, olive gold, terracotta and cream. */
body{margin:0;background:#FDEDD6;color:#2C2416;font:18px/1.5 'Lato','Segoe UI',sans-serif}
/* The Sugarcraft Circle card back fills the page behind the sign-in card, softened with a cream wash. */
body::before{content:'';position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at center,#fdedd6e6 0%,#fdedd6b3 45%,#fdedd640 100%),url('member-cover.jpg') center 20%/cover no-repeat}
main{min-height:100dvh;display:flex;justify-content:center;align-items:center;padding:40px 16px}
.member-entry{position:relative;width:min(420px,100%);text-align:center;background:#FDF7ECf2;border:3px solid #E9CAA7;border-radius:24px;padding:32px 30px;box-shadow:0 12px 48px #2c241640;backdrop-filter:blur(4px)}
h1{font-family:'Playfair Display',Georgia,serif;color:#5B3A2B;font-size:34px;line-height:1.2;margin:0 0 22px;font-weight:700}
h2{font-family:'Playfair Display',Georgia,serif;color:#5B3A2B;font-size:23px;line-height:1.25;margin:0 0 10px;font-weight:700}
p{margin:0 0 18px}strong{color:#5B3A2B}
#opening{font-size:19px;color:#49648A}
form,#sentPanel{text-align:left}
label{display:block;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin:0 0 8px;color:#49648A}
input{width:100%;min-height:54px;padding:13px 14px;background:#FDEDD6;color:#2C2416;border:2px solid #E9CAA7;border-radius:10px;font:20px 'Lato','Segoe UI',sans-serif}
input:focus{border-color:#49648A;outline:none}
button,.button{display:block;width:100%;min-height:54px;text-align:center;text-decoration:none;border:none;border-radius:14px;background:#49648A;color:#FDF7EC;padding:13px 20px;margin-top:18px;font:700 19px 'Playfair Display',Georgia,serif;cursor:pointer}
button.alt{background:transparent;color:#49648A;font:400 16px 'Lato','Segoe UI',sans-serif;text-decoration:underline;margin-top:10px;min-height:44px}
button:disabled{opacity:.55;cursor:wait}
[hidden]{display:none!important}
#appSteps{margin:4px 0 6px;padding-left:28px;font-size:19px}
#appSteps li{margin:0 0 10px;padding-left:4px}
#message{color:#A94A3A;font-size:17px;min-height:24px;margin:16px 0}
#securityCheck{margin-top:16px}
.back{font-size:16px;color:#A9654B;text-decoration:none}.back:hover{text-decoration:underline}
input:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #AA9965;outline-offset:3px}
@media(max-width:600px){h1{font-size:30px}.member-entry{padding:24px 18px;border-radius:18px}}