/* Base styles for the assembly section pages (about, join, bingo, calendar,
   news, contact, privacy, members). Same look as index.html, whose own copy
   of these rules is still inline. Pair with nav.css for the nav and footer. */
:root{
  --navy:#10233f; --navy2:#1b3560; --gold:#c8a24a; --gold2:#e6cf94;
  --red:#d12b2b; --ink:#12171f; --muted:#5d6875; --line:#e3e7ee;
  --bg:#f6f8fb; --card:#ffffff; --ok:#0f7b4f; --bad:#b3261e;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Open Sans',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);font-size:16px;line-height:1.6;
  -webkit-text-size-adjust:100%}
.wrap{max-width:760px;margin:0 auto;padding:0 18px}
h1,h2,h3{font-family:'Oswald',Impact,sans-serif;font-weight:600;line-height:1.15;
  letter-spacing:.01em}
a{color:var(--navy2)}

/* ---- page hero ---- */
header.hero{background:var(--navy);color:#fff;padding:30px 0 26px;
  border-bottom:5px solid var(--gold)}
.eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold2);font-weight:600}
header.hero h1{font-size:32px;margin:8px 0 6px;color:#fff}
header.hero .sub{color:#c3cddd;font-size:15px}

/* ---- cards ---- */
main{padding:26px 0 10px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:22px 20px;margin-bottom:18px}
.card h2{font-size:21px;color:var(--navy);margin-bottom:10px}
.card h2 .kicker{display:block;font-family:'Open Sans',sans-serif;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700;
  margin-bottom:3px}
.card h3{font-size:17px;color:var(--navy);margin:16px 0 4px}
.card p+p{margin-top:11px}
.card ul.plain{margin:8px 0 0 20px}
.card ul.plain li{margin:4px 0}
.lede{font-size:17px}
.muted{color:var(--muted)}
.small{font-size:14px}

.btn{display:inline-block;background:var(--navy);color:#fff;text-decoration:none;
  font-weight:700;border-radius:10px;padding:13px 20px;margin-top:16px;font-size:16px}
.btn:hover{background:var(--navy2)}
.btn.red{background:var(--red)}
.btn.red:hover{background:#a81f1f}
.btn.ghost{background:#fff;color:var(--navy);border:2px solid var(--navy)}
.btns{display:flex;flex-wrap:wrap;gap:0 10px}

/* two-up choice cards (join) */
.paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:6px}
.path{border:1px solid var(--line);border-radius:12px;padding:16px;background:#fbfcfe}
.path h3{margin-top:0}

/* ---- lists ---- */
.doing{list-style:none;margin-top:6px}
.doing li{padding:12px 0;border-bottom:1px solid var(--line);display:flex;gap:13px}
.doing li:last-child{border-bottom:0;padding-bottom:0}
.doing .ic{font-size:20px;line-height:1.3;flex:0 0 26px;text-align:center}
.doing b{display:block;font-family:'Oswald',sans-serif;font-size:16.5px;
  letter-spacing:.01em;color:var(--navy)}
.doing span.d{font-size:14.5px;color:var(--muted)}

/* ---- calendar ---- */
.ev{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.ev:last-child{border-bottom:0}
.ev .date{flex:0 0 62px;text-align:center;background:var(--navy);color:#fff;border-radius:10px;
  padding:6px 4px;font-family:'Oswald',sans-serif;line-height:1.1;align-self:flex-start}
.ev .date .m{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2)}
.ev .date .d{font-size:26px}
.ev .date .w{font-size:11px;color:#c3cddd}
.ev b{display:block;font-family:'Oswald',sans-serif;font-size:17px;color:var(--navy)}
.ev .meta{font-size:14px;color:var(--muted)}
.tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border-radius:20px;padding:1px 8px;margin-left:6px;vertical-align:2px;background:#eef2f8;color:var(--navy2)}
.tag.bingo{background:#fdecec;color:var(--red)}

/* ---- form ---- */
label{display:block;font-weight:700;font-size:13px;letter-spacing:.04em;
  margin:14px 0 5px;color:var(--navy)}
label .opt{font-weight:400;color:var(--muted);letter-spacing:0}
input,select,textarea{width:100%;font:inherit;font-size:16px;padding:11px 12px;
  border:1px solid #ccd4e0;border-radius:9px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--navy2);
  outline-offset:1px;border-color:var(--navy2)}
textarea{min-height:96px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
button[type=submit]{width:100%;font:inherit;font-weight:700;font-size:16.5px;cursor:pointer;
  background:var(--navy);color:#fff;border:0;border-radius:10px;padding:14px;margin-top:18px}
button[type=submit]:hover{background:var(--navy2)}
button[disabled]{opacity:.55;cursor:default}
.hint{font-size:13px;color:var(--muted);margin-top:7px}
.msg{margin-top:14px;padding:12px 14px;border-radius:10px;font-size:14.5px}
.msg.err{background:#fdecea;border:1px solid #f3c4bf;color:var(--bad)}
.msg.ok{background:#eaf6ef;border:1px solid #bfe3cd;color:var(--ok)}
.done{text-align:center;padding:14px 6px}
.done .tick{width:52px;height:52px;line-height:52px;border-radius:50%;
  background:var(--ok);color:#fff;font-size:27px;margin:0 auto 12px}
.done h3{font-size:22px;color:var(--navy)}

@media(max-width:520px){
  header.hero h1{font-size:26px} .card{padding:18px 15px}
}