/* ============================================================================
   The About page: what we believe, the staff, directions and the visit form.
   ============================================================================ */

/* ---------- Beliefs that open ---------- */
.beliefs{max-width:880px;margin:0 auto;border-top:1px solid var(--line-dark)}
.belief{border-bottom:1px solid var(--line-dark)}
.belief__btn{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  padding:26px 0;display:flex;justify-content:space-between;align-items:center;gap:24px;
  font-family:var(--serif);font-size:26px;font-weight:700;color:var(--ink);
}
.belief__btn:hover{color:var(--maroon)}
.belief__plus{flex:none;font-family:var(--sans);font-size:26px;font-weight:400;color:var(--tan);transition:transform .25s var(--ease)}
.belief.is-open .belief__plus{transform:rotate(45deg)}
.belief__panel{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.belief__panel-inner{padding:0 0 26px;font-size:17px;line-height:1.7;color:var(--body);max-width:68ch}

/* ---------- Staff ---------- */
.staff-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.person__photo{
  aspect-ratio:1;display:grid;place-items:center;background:var(--bark);
  color:#fff;font-family:var(--display);font-size:52px;text-transform:uppercase;
}
/* The squares run through three grounds in turn, so the order people are
   listed in decides the colour each one gets. */
.person:nth-child(3n) .person__photo{background:var(--maroon)}
.person:nth-child(3n+1) .person__photo{background:var(--brown)}
.person__name{margin-top:14px;font-family:var(--serif);font-size:21px;font-weight:700;color:var(--ink)}
.person__role{
  margin-top:5px;font-family:var(--label);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--maroon);
}
.person__email{margin-top:6px;font-size:14px;color:var(--muted)}

/* ---------- Directions ---------- */
.route{margin-bottom:30px}
.route__heading{font-family:var(--serif);font-size:24px;font-weight:700;color:var(--maroon)}
.route__text{margin-top:8px;font-size:16px;line-height:1.7;color:var(--body);max-width:62ch}
/* A coloured panel standing in for a map. Embedding a real one would mean
   letting a third party run a script on the page, and a photograph of
   somewhere else would be worse than no map at all; see "Still to do". */
.map-panel{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(150deg,var(--tan),var(--brown) 70%,var(--bark));
}
.map-panel__label{
  position:absolute;left:24px;top:24px;padding:10px 16px;background:#fff;
  font-family:var(--label);font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--maroon);
}
.map-panel__pin{position:absolute;inset:0;display:grid;place-items:center;font-size:52px}