/* Member pages — welcome, set password, account.
 * Same palette and faces as index.html so these do not read as a bolt-on:
 * cream #FBF7F0, maroon #6E1120, gold #C09A3E, Playfair Display + Libre Franklin.
 */

:root{
  --cream:#FBF7F0;
  --paper:#FFFDFA;
  --maroon:#6E1120;
  --maroon-dp:#490A14;
  --maroon-lt:#8E1A2B;
  --gold:#C09A3E;
  --gold-lt:#DCC183;
  --gold-pale:#F3E9CF;
  --ink:#211A16;
  --ink-soft:#4A3F39;
  --muted:#82746A;
  --line:#E9E0D2;
  --red:#A3182B;
  --green:#2F6B4F;
}

*{box-sizing:border-box}

html,body{margin:0;padding:0}

body{
  background:var(--cream);
  color:var(--ink);
  font-family:"Libre Franklin",system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:16px;
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:32px 20px;
}

/* A hairline of gold across the top, the same trim used on the site. */
body::before{
  content:"";
  position:fixed;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,var(--maroon),var(--gold),var(--maroon));
}

.card{
  width:100%;
  max-width:440px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  padding:36px 32px 32px;
  box-shadow:0 18px 44px rgba(73,10,20,.09);
}

.crest{
  width:38px;
  height:45px;
  color:var(--maroon);
  --cx:var(--paper);
  display:block;
  margin:0 auto 18px;
}

h1{
  font-family:"Playfair Display",Georgia,serif;
  font-weight:700;
  font-size:26px;
  line-height:1.2;
  text-align:center;
  margin:0 0 8px;
  color:var(--maroon);
}

.sub{
  text-align:center;
  color:var(--ink-soft);
  font-size:14.5px;
  margin:0 0 26px;
}

.eyebrow{
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:11px;
  font-weight:600;
  color:var(--gold);
  margin:0 0 10px;
}

label{
  display:block;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 6px;
}

input[type=email],input[type=password],input[type=text]{
  width:100%;
  font:inherit;
  font-size:16px;              /* 16px stops iOS zooming on focus */
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  color:var(--ink);
  margin:0 0 18px;
}
input:focus{
  outline:2px solid var(--gold);
  outline-offset:1px;
  border-color:var(--gold);
}

button,.btn{
  display:block;
  text-align:center;
  text-decoration:none;
  width:100%;
  font:inherit;
  font-weight:600;
  font-size:15px;
  padding:12px 16px;
  border:0;
  border-radius:9px;
  background:var(--maroon);
  color:#fff;
  cursor:pointer;
  transition:background .15s ease;
}
button:hover:not(:disabled),.btn:hover{background:var(--maroon-lt);color:#fff}
button:focus-visible,.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
button:disabled{opacity:.55;cursor:default}

button.quiet,.btn.quiet{
  background:transparent;
  color:var(--maroon);
  border:1px solid var(--line);
}
button.quiet:hover:not(:disabled),.btn.quiet:hover{background:var(--gold-pale);color:var(--maroon)}

.msg{
  border-radius:9px;
  padding:11px 13px;
  font-size:14px;
  margin:0 0 18px;
  display:none;
}
.msg.show{display:block}
.msg.error{background:#FBEDEE;color:var(--red);border:1px solid #F0D2D6}
.msg.good{background:#EDF5F0;color:var(--green);border:1px solid #CFE4D8}
.msg.info{background:var(--gold-pale);color:#6B5320;border:1px solid var(--gold-lt)}

.rows{border-top:1px solid var(--line);margin:4px 0 24px}
.row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:11px 0;
  border-bottom:1px solid var(--line);
  font-size:14.5px;
}
.row dt{color:var(--muted);margin:0}
.row dd{margin:0;font-weight:600;text-align:right}

.pill{
  display:inline-block;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:3px 9px;
  border-radius:999px;
}
.pill.on{background:#E4F0E9;color:var(--green)}
.pill.off{background:#FBEDEE;color:var(--red)}

.stack > * + *{margin-top:10px}

.foot{
  text-align:center;
  font-size:13.5px;
  color:var(--muted);
  margin:22px 0 0;
}
.foot a,a{color:var(--maroon);text-decoration:underline;text-underline-offset:2px}
.foot a:hover,a:hover{color:var(--gold)}

.hint{font-size:12.5px;color:var(--muted);margin:-12px 0 18px}

.spinner{
  width:26px;height:26px;
  margin:8px auto 0;
  border:2.5px solid var(--line);
  border-top-color:var(--maroon);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .spinner{animation-duration:2.4s}
  *{transition:none !important}
}

.hidden{display:none !important}

@media (max-width:420px){
  .card{padding:28px 20px 24px}
  h1{font-size:23px}
}