/* ============================================================
   Hadley & District Orpheus Male Choir — site styles
   "Warm heritage institution": deep navy + gold + warm parchment
   ============================================================ */
:root{
  --navy:#15233F; --navy-2:#0E1930; --ink-on-navy:#B7C0D4;
  --gold:#C6A25A; --gold-hi:#E7C56E; --gold-line:rgba(198,162,90,.55);
  --paper:#F4EBD8; --paper-2:#EEE2C9; --paper-line:rgba(21,35,63,.16);
  --ink:#332E23; --ink-head:#182742; --ink-mut:#6E6350; --gold-ink:#8A6A22;
  --cream:#F4EFE3;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--navy); color:var(--cream); font-family:var(--serif);
  -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
.serif{ font-family:var(--serif); }
.cap{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.26em; }

/* ---------- masthead ---------- */
.mast{ background:var(--navy); text-align:center; padding:24px 40px 0; }
.rule{ height:1px; background:var(--gold-line); max-width:1120px; margin:0 auto; }
.crestlink{ display:inline-block; margin:16px auto 12px; }
.crestimg{ width:112px; height:auto; }
.nav{ display:flex; justify-content:center; flex-wrap:wrap; gap:0; padding:6px 0 18px; list-style:none; margin:0; }
.nav a{ font-family:var(--sans); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-on-navy); padding:2px 20px; position:relative; text-decoration:none; transition:color .15s; }
.nav li + li a::before{ content:""; position:absolute; left:0; top:2px; bottom:2px; width:1px; background:var(--gold-line); }
.nav a:hover{ color:var(--cream); }
.nav a.on{ color:var(--gold-hi); }

/* ---------- interior page header ---------- */
.pagehead{ background:radial-gradient(120% 90% at 50% 0%, #1c2f52 0%, var(--navy) 60%, var(--navy-2) 100%);
  text-align:center; padding:66px 40px 58px; border-bottom:1px solid var(--gold-line); }
.pagehead .eyebrow{ font-family:var(--sans); font-size:11.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-hi); margin-bottom:18px; }
.pagehead h1{ font-size:clamp(34px,4.6vw,52px); line-height:1.05; font-weight:600; color:var(--cream);
  margin:0 auto; max-width:20ch; text-wrap:balance; letter-spacing:-.005em; }
.pagehead .sub{ font-size:19px; line-height:1.55; color:var(--ink-on-navy); max-width:60ch; margin:20px auto 0; }

/* ---------- hero (homepage) ---------- */
.hero{ background:radial-gradient(120% 80% at 50% 0%, #1c2f52 0%, var(--navy) 55%, var(--navy-2) 100%);
  padding:52px 40px 60px; text-align:center; }
.hero .eyebrow{ font-family:var(--sans); font-size:11.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-hi); margin-bottom:20px; }
.hero h1{ font-size:clamp(34px,4.6vw,54px); line-height:1.06; font-weight:600; color:var(--cream);
  margin:0 auto 30px; max-width:17ch; text-wrap:balance; letter-spacing:-.005em; }
.plate{ max-width:1000px; margin:0 auto; border:1px solid var(--gold-line); padding:9px; }
.photo{ height:clamp(280px,44vw,470px); border:1px solid rgba(231,197,110,.4);
  background-image:url("choir-hero.jpg"); background-size:cover; background-position:center 26%; }
.hero .actions{ display:flex; gap:26px; justify-content:center; align-items:center; margin-top:30px; flex-wrap:wrap; }

/* ---------- buttons / links ---------- */
.btn{ font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.02em; padding:14px 30px;
  text-decoration:none; display:inline-block; }
.btn.solid{ background:var(--gold); color:#241a06; border-radius:2px; transition:background .15s; }
.btn.solid:hover{ background:var(--gold-hi); }
.link{ font-family:var(--sans); font-size:13px; font-weight:600; color:var(--cream); text-decoration:none;
  border-bottom:1px solid var(--gold); padding-bottom:3px; }
.link:hover{ border-color:var(--gold-hi); color:#fff; }
.link.dark{ color:var(--ink-head); }

/* ---------- honours strip ---------- */
.honours{ background:var(--navy-2); border-top:1px solid var(--gold-line); border-bottom:1px solid var(--gold-line);
  text-align:center; padding:22px 40px; }
.honours .t{ font-size:19px; color:var(--cream); font-family:var(--serif); }
.honours .t em{ font-style:italic; color:var(--gold-hi); }
.honours .y{ font-family:var(--sans); font-size:12px; letter-spacing:.34em; color:var(--gold); margin-top:8px; }

/* ---------- bands ---------- */
.paper{ background:var(--paper); color:var(--ink); padding:74px 40px; }
.paper.alt{ background:var(--paper-2); }
.navy-sec{ background:var(--navy); color:var(--cream); padding:74px 40px; }
.inner{ max-width:1120px; margin:0 auto; }
.inner.narrow{ max-width:760px; }

/* prose */
.prose h2{ font-size:clamp(26px,3vw,34px); color:var(--ink-head); margin:0 0 18px; font-weight:600; text-wrap:balance; }
.prose h3{ font-size:20px; color:var(--ink-head); margin:34px 0 10px; font-weight:600; }
.prose p{ font-size:17px; line-height:1.72; color:var(--ink); margin:0 0 18px; max-width:68ch; }
.prose .lead{ font-size:20px; line-height:1.6; color:var(--ink-mut); margin-bottom:26px; }
.prose .pull{ border-left:2px solid var(--gold); padding:6px 0 6px 22px; margin:28px 0; font-size:21px;
  line-height:1.4; color:var(--ink-head); font-style:italic; max-width:60ch; }

/* two-column story */
.split{ display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:start; }
.split .k{ font-family:var(--sans); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-ink); margin-bottom:16px; }
.split h2{ font-size:clamp(28px,3.4vw,40px); line-height:1.08; color:var(--ink-head); margin:0 0 18px;
  font-weight:600; text-wrap:balance; }
.split .k + h2{ margin-top:0; }

/* ---------- MD band ---------- */
.md{ background:var(--navy); border-top:1px solid var(--gold-line); border-bottom:1px solid var(--gold-line); }
.md-in{ max-width:1120px; margin:0 auto; padding:30px 40px; display:flex; align-items:center;
  justify-content:space-between; gap:28px; flex-wrap:wrap; }
.md .k{ font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin-bottom:9px; }
.md .h{ font-size:23px; color:var(--cream); font-weight:500; font-family:var(--serif); }
.md .h em{ font-style:italic; color:var(--gold-hi); }

/* ---------- cards ---------- */
.sec-label{ font-family:var(--sans); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-ink); text-align:center; margin-bottom:34px; }
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.cards.two{ grid-template-columns:repeat(2,1fr); }
.c{ background:var(--paper); border:1px solid var(--paper-line); padding:30px 28px; }
.paper .c{ background:#FBF6EA; }
.c h3{ font-size:22px; color:var(--ink-head); margin:0 0 12px; font-weight:600; }
.c p{ font-size:15.5px; line-height:1.62; color:var(--ink-mut); margin:0 0 16px; }
.c a.more{ font-family:var(--sans); font-size:12.5px; font-weight:700; letter-spacing:.02em;
  color:var(--ink-head); text-decoration:none; border-bottom:1.5px solid var(--gold); padding-bottom:2px; }

/* ---------- concert diary ---------- */
.diary{ list-style:none; margin:0; padding:0; max-width:840px; }
.event{ display:flex; gap:26px; align-items:baseline; padding:22px 0; border-bottom:1px solid var(--paper-line); }
.event:first-child{ border-top:1px solid var(--paper-line); }
.event .date{ flex:none; width:96px; text-align:center; }
.event .date .d{ font-family:var(--serif); font-size:30px; color:var(--ink-head); line-height:1; font-variant-numeric:tabular-nums; }
.event .date .m{ font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-ink); margin-top:6px; }
.event .info h3{ font-size:20px; color:var(--ink-head); margin:0 0 5px; font-weight:600; }
.event .info .meta{ font-family:var(--sans); font-size:14px; color:var(--ink-mut); }
.empty{ text-align:center; max-width:600px; margin:0 auto; }
.empty p{ color:var(--ink-mut); }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.dl{ display:flex; flex-direction:column; gap:24px; }
.dl .row .t{ font-family:var(--sans); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-ink); margin-bottom:6px; }
.dl .row .v{ font-size:18px; color:var(--ink-head); }
.dl .row .v a{ color:var(--ink-head); text-decoration:none; border-bottom:1px solid var(--gold); }
.form{ display:flex; flex-direction:column; gap:16px; }
.form label{ font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mut); margin-bottom:6px; display:block; }
.form input, .form textarea{ width:100%; font-family:var(--sans); font-size:15px; color:var(--ink-head);
  background:#FBF6EA; border:1px solid var(--paper-line); border-radius:3px; padding:12px 14px; }
.form input:focus, .form textarea:focus{ outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold); }
.form button{ align-self:flex-start; font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.02em;
  background:var(--navy); color:var(--cream); border:0; border-radius:2px; padding:14px 30px; cursor:pointer; }
.form button:hover{ background:var(--navy-2); }

/* MD vacancy layout */
.vac{ display:grid; grid-template-columns:1fr 340px; gap:64px; align-items:start; }
.blk{ margin-bottom:36px; }
.blk h2{ font-family:var(--sans); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-ink);
  margin:0 0 16px; padding-bottom:11px; border-bottom:1px solid var(--paper-line); }
.blk p{ font-size:16.5px; line-height:1.68; color:var(--ink); margin:0; max-width:66ch; }
ul.pts{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
ul.pts li{ position:relative; padding-left:24px; font-size:16.5px; line-height:1.55; color:var(--ink); }
ul.pts li::before{ content:""; position:absolute; left:0; top:9px; width:7px; height:7px; background:var(--gold); border-radius:50%; }
.aside{ position:sticky; top:20px; display:flex; flex-direction:column; gap:18px; }
.card2{ background:#FBF6EA; border:1px solid var(--paper-line); border-radius:6px; padding:24px 22px; }
.card2 h3{ font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-ink); margin:0 0 16px; }
.glance{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.glance li{ display:flex; flex-direction:column; gap:4px; }
.glance .t{ font-family:var(--sans); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mut); }
.glance .v{ font-size:16px; color:var(--ink-head); }
.card2 .mail{ display:block; text-align:center; background:var(--navy); color:var(--cream); font-family:var(--sans);
  font-size:14px; font-weight:700; padding:14px; border-radius:3px; text-decoration:none; margin:4px 0 14px; }
.card2 .mail:hover{ background:var(--navy-2); }
.card2 p{ font-family:var(--sans); font-size:13.5px; line-height:1.6; color:var(--ink-mut); margin:0; }
.card2 p b{ color:var(--ink-head); }

/* ---------- footer ---------- */
.foot{ background:var(--navy-2); color:var(--ink-on-navy); text-align:center; padding:44px 40px; }
.foot .crestimg{ width:64px; margin:0 auto 16px; }
.foot .nm{ font-size:18px; color:var(--cream); margin-bottom:10px; font-family:var(--serif); }
.foot .meta{ font-family:var(--sans); font-size:12px; line-height:1.9; }
.foot .meta span{ color:var(--gold); }
.foot .social{ margin-top:18px; }
.foot .social a{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-on-navy); text-decoration:none;
  font-family:var(--sans); font-size:12.5px; letter-spacing:.04em; border:1px solid var(--gold-line);
  padding:8px 16px; border-radius:100px; transition:color .15s, border-color .15s; }
.foot .social a:hover{ color:var(--gold-hi); border-color:var(--gold-hi); }
.foot .social svg{ width:16px; height:16px; fill:currentColor; }
.foot .fnav{ margin-top:18px; font-family:var(--sans); font-size:12px; letter-spacing:.02em; }
.foot .fnav a{ color:var(--ink-on-navy); text-decoration:none; padding:0 10px; }
.foot .fnav a:hover{ color:var(--gold-hi); }

@media (max-width:820px){
  .split, .contact-grid, .vac{ grid-template-columns:1fr; gap:34px; }
  .cards, .cards.two{ grid-template-columns:1fr; gap:20px; }
  .aside{ position:static; }
  .nav a{ padding:4px 12px; }
  .event .date{ width:74px; }
}

/* ---------- team / profiles ---------- */
.profile{ display:grid; grid-template-columns:300px 1fr; gap:52px; align-items:start; margin-bottom:56px; }
.profile:last-child{ margin-bottom:0; }
.profile.flip{ grid-template-columns:1fr 300px; }
.profile.flip .pf-photo{ order:2; }
.pf-photo{ display:flex; justify-content:center; }
.pf-photo img{ width:264px; height:264px; border-radius:50%; object-fit:cover; object-position:center 26%;
  border:3px solid var(--gold); box-shadow:0 8px 24px rgba(20,25,40,.18); display:block; }
.pf-bio .role{ font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-ink); margin-bottom:10px; }
.pf-bio h2{ font-size:clamp(26px,3vw,34px); color:var(--ink-head); margin:0 0 18px; font-weight:600; letter-spacing:-.005em; }
.pf-bio p{ font-size:16.5px; line-height:1.7; color:var(--ink); margin:0 0 16px; max-width:64ch; }
@media (max-width:820px){
  .profile, .profile.flip{ grid-template-columns:1fr; gap:20px; justify-items:center; text-align:center; }
  .profile.flip .pf-photo{ order:0; }
  .pf-bio p{ margin-left:auto; margin-right:auto; }
}

/* ---------- footer affiliations ---------- */
.foot .affil{ margin-top:18px; }
.foot .affil img{ width:50px; height:auto; margin:0 auto; opacity:.92; }

/* ---------- gallery / through the years ---------- */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1120px; margin:0 auto; }
.gallery figure{ margin:0; }
.gallery img{ width:100%; aspect-ratio:16/10; object-fit:cover; border:1px solid var(--gold-line); display:block; }
.gallery figcaption{ font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); text-align:center; margin-top:10px; }
@media (max-width:760px){ .gallery{ grid-template-columns:1fr; } }

/* ---------- homepage MD recruitment feature ---------- */
.md-feature{ background:radial-gradient(130% 100% at 50% 0%, #1c2f52 0%, var(--navy) 60%, var(--navy-2) 100%);
  border-top:1px solid var(--gold-line); border-bottom:1px solid var(--gold-line); text-align:center; padding:66px 40px; }
.md-feature .k{ font-family:var(--sans); font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-hi); margin-bottom:18px; }
.md-feature h2{ font-family:var(--serif); font-size:clamp(30px,4vw,46px); color:var(--cream); margin:0 auto 18px; max-width:20ch; font-weight:600; text-wrap:balance; letter-spacing:-.005em; }
.md-feature p{ font-size:18px; line-height:1.6; color:var(--ink-on-navy); max-width:56ch; margin:0 auto 30px; }
.md-feature .btn.solid{ font-size:14px; padding:16px 34px; }

/* ---------- map ---------- */
.map-wrap{ position:relative; width:100%; aspect-ratio:16/7; border:1px solid var(--gold-line);
  overflow:hidden; border-radius:3px; max-width:1000px; margin:0 auto; }
.map-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.map-addr{ text-align:center; font-family:var(--sans); font-size:14.5px; color:var(--ink-mut); margin:20px auto 0; }
.map-addr a{ color:var(--ink-head); border-bottom:1px solid var(--gold); text-decoration:none; }
@media (max-width:640px){ .map-wrap{ aspect-ratio:4/3; } }

/* ---------- footer credit ---------- */
.foot .credit{ margin-top:18px; font-family:var(--sans); font-size:11.5px; letter-spacing:.02em; color:#7c869b; }
.foot .credit a{ color:var(--gold); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .15s; }
.foot .credit a:hover{ border-color:var(--gold); color:var(--gold-hi); }
.foot .credit .note{ color:var(--gold-hi); font-size:13px; }
.foot .legal{ margin-top:12px; font-family:var(--sans); font-size:11.5px; letter-spacing:.02em; }
.foot .legal a{ color:var(--ink-on-navy); text-decoration:none; border-bottom:1px solid transparent; transition:color .15s; }
.foot .legal a:hover{ color:var(--gold-hi); }