:root{--navy:#0b1f4b;--teal:#0E9F9A;--teal-dark:#0B7F7B;--light:#f4f6f8;--tint:#E6F6F5}
*{box-sizing:border-box}body{margin:0;font-family:Georgia,'Times New Roman',serif;color:#1d2433;background:#fff;line-height:1.6}
a{color:var(--navy)}a:hover{color:var(--teal-dark)}
header{background:var(--navy);border-bottom:4px solid var(--teal)}
.bar{max-width:1100px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:10px 20px;flex-wrap:wrap;gap:10px}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-size:1.25rem;letter-spacing:.03em}
.brand img{height:56px}.brand small{display:block;color:var(--teal-dark);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase}
nav a{color:#fff;text-decoration:none;margin-left:18px;font-family:Arial,sans-serif;font-size:.95rem}nav a:hover,nav a.on{color:var(--teal)}
main{max-width:1100px;margin:auto;padding:30px 20px}h1,h2,h3{color:var(--navy)}h1{border-bottom:2px solid var(--teal);padding-bottom:6px}
.hero{background:var(--light);border-left:6px solid var(--teal);padding:24px;display:flex;gap:24px;align-items:center}.hero img{width:180px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:24px}
.card{border:1px solid #ddd;border-top:4px solid var(--navy);padding:18px;border-radius:4px;background:#fff}
.tag{display:inline-block;background:var(--tint);color:var(--navy);font:bold .7rem Arial,sans-serif;padding:2px 8px;border-radius:3px;letter-spacing:.05em}
.btn{display:inline-block;background:var(--navy);color:#fff;padding:9px 16px;text-decoration:none;border:0;border-radius:3px;font:1rem Arial,sans-serif;cursor:pointer}
.btn:hover{background:#071536;color:#fff}
.btn.accent{background:var(--teal);color:var(--navy)}
.btn.accent:hover{background:#0D9994;color:var(--navy)}
form label{display:block;margin-top:12px;font-family:Arial,sans-serif;font-size:.95rem}input,textarea,select{width:100%;padding:9px;border:1px solid #bbb;border-radius:3px;font:1rem Arial,sans-serif}
input[type=checkbox]{width:auto}table{width:100%;border-collapse:collapse;font-family:Arial,sans-serif}th{background:var(--navy);color:#fff;text-align:left}th,td{padding:8px;border-bottom:1px solid #ddd}
.note{background:#eef2fb;border-left:4px solid var(--navy);padding:12px 16px;font-family:Arial,sans-serif;font-size:.92rem}
.note.draft{background:var(--tint);border-left-color:var(--teal)}
footer{background:var(--navy);color:#cfd6e6;text-align:center;padding:18px;font:.85rem Arial,sans-serif;margin-top:40px}
@media(max-width:700px){nav a{margin:0 12px 0 0}.hero{flex-direction:column;text-align:center}.hero img{width:130px}}
.brand img{height:46px;width:auto}.brand span{border-left:1px solid rgba(255,255,255,.35);padding-left:12px;font-size:1.05rem}
.hero img{width:340px;max-width:100%}.flogo{width:170px;margin-bottom:8px}
@media(max-width:700px){.brand img{height:38px}.brand span{font-size:.9rem}.hero img{width:260px}}
@media(max-width:420px){.brand span{display:none}}
/* original logo on light header/footer */
header{background:#fff;border-bottom:4px solid var(--teal);box-shadow:inset 0 -1px 0 var(--navy)}
.brand{color:var(--navy)}.brand img{height:64px}.brand span{border-left:1px solid #c9ced9}
nav a{color:var(--navy)}nav a:hover,nav a.on{color:var(--teal-dark)}
footer{background:var(--light);color:#444;border-top:4px solid var(--teal)}.flogo{width:200px}
footer a:hover{color:var(--navy);text-decoration:underline}
@media(max-width:700px){.brand img{height:52px}}

/* Members area: meeting and reading lists */
.meetings{display:flex;flex-direction:column;gap:16px;margin:16px 0 32px}
.meetings .card h3{margin:0 0 4px}
p.meta,p.source{font-family:Arial,sans-serif;font-size:.92rem;color:#555;margin:.15em 0 .7em}
ul.talks{margin:.35em 0 0;padding-left:1.25em}
ul.talks li{margin:.3em 0}
.empty{color:#555;font-family:Arial,sans-serif}
.osler{font-family:Arial,sans-serif;font-size:.85rem}
footer .osler a{color:var(--navy)}
.reading{display:flex;flex-direction:column;gap:16px;margin:16px 0 32px}
.reading .card h3{margin:0 0 6px}
ul.articles{margin:.35em 0 0;padding-left:1.25em}
ul.articles li{margin:.45em 0}
ul.articles .src{display:block;font-family:Arial,sans-serif;font-size:.85rem;color:#555}

/* Free membership and meeting callouts */
.hero-free{margin:.15em 0 .7em;color:var(--navy);font:bold 1.25rem Arial,sans-serif;line-height:1.35}
.badge-free{display:inline-block;background:var(--teal);color:var(--navy);font:bold .75rem Arial,sans-serif;padding:3px 9px;border-radius:3px;letter-spacing:.08em;text-transform:uppercase;vertical-align:middle}
.callout-free{background:var(--tint);border-left:4px solid var(--teal);padding:14px 16px;font-family:Arial,sans-serif;font-size:1rem;margin:0 0 20px}
.callout-free .badge-free{margin-right:8px}
.come-along{margin:24px 0}
.come-along ul{margin:.4em 0 1em;padding-left:1.25em}
.come-along li{margin:.35em 0}

/* Join form: radio groups and conditional fields */
form fieldset{border:1px solid #ddd;border-top:3px solid var(--teal);border-radius:4px;margin:20px 0 8px;padding:12px 16px 16px;background:#fff;min-inline-size:0}
form fieldset legend{font-family:Arial,sans-serif;font-size:.95rem;font-weight:bold;color:var(--navy);padding:0 6px;max-width:100%}
form .choice{display:flex;align-items:flex-start;gap:8px;margin-top:8px;font-family:Arial,sans-serif;font-size:.95rem;width:auto}
form .choice input[type=radio],form .choice input[type=checkbox]{width:auto;margin:3px 0 0;flex-shrink:0;accent-color:var(--teal)}
input[type=radio]{width:auto}
.req{font-weight:normal;color:#444;font-size:.85em}
.field-hint{margin:12px 0 0;font-family:Arial,sans-serif;font-size:.9rem;color:var(--navy);background:var(--tint);border-left:4px solid var(--teal);padding:8px 12px}
#work-region-other-wrap{margin-top:8px}
.js #work-region-other-wrap,.js #whatsapp-hint,.js #whatsapp-group-line{display:none}
.js #work-region-other-wrap.is-open,.js #whatsapp-hint.is-open,.js #whatsapp-group-line.is-open{display:block}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Subtle photographic backgrounds (image ~10% visible under a light overlay) */
.hero{
  background-color:var(--light);
  background-image:linear-gradient(rgba(244,246,248,.90),rgba(244,246,248,.90)),url("img/theatre-lights.webp");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.page-band{
  background-color:var(--light);
  background-image:linear-gradient(rgba(244,246,248,.90),rgba(244,246,248,.90)),url("img/gloves-instruments.webp");
  background-size:cover;
  background-position:center 30%;
  background-repeat:no-repeat;
  margin: -30px calc(50% - 50vw) 24px;
  width: 100vw;
  max-width: 100vw;
  box-sizing: border-box;
  padding: 30px max(20px, calc(50vw - 550px)) 28px;
}
.page-band h1{margin-top:0}
.field-error{color:#8b1e1e;font-family:Arial,sans-serif;font-size:.9rem;margin:8px 0 0}
fieldset.is-invalid{border-color:#8b1e1e}