.association-page {
  background: #f5f1e9;
}

.association-page .site-header {
  background: #203b35;
}

.association-main {
  padding: 155px 5vw 90px;
  max-width: 1600px;
  margin: 0 auto;
}

.association-heading {
  max-width: 780px;
  margin: 0 auto 52px;
  text-align: center;
}

.association-heading .eyebrow {
  margin-bottom: 20px;
}

.association-heading h1 {
  font-size: clamp(42px, 5vw, 72px);
  line-height: 1.08;
}

.association-heading h1 em {
  color: #255a4e;
}

.association-heading > p:last-child {
  color: #6d635c;
  font-size: 15px;
  line-height: 1.7;
}

.association-chart {
  --association-line: #b7c2b5;
  display: grid;
  justify-items: center;
}

.association-chart[hidden], .association-details[hidden] {
  display: none;
}

.association-node {
  width: min(580px, 100%);
  padding: 24px;
  border: 1px solid var(--association-line);
  background: #fffdfa;
  text-align: center;
  position: relative;
}

.association-node h2 {
  font: 500 clamp(20px, 2vw, 26px)/1.3 "DM Sans", sans-serif;
}

.association-node p {
  font-size: 13px;
  line-height: 1.7;
  margin: 9px 0 0;
}

.association-assembly {
  color: white;
  background: #203b35;
  border-color: #203b35;
  margin-bottom: 36px;
}

.association-assembly::after {
  content: "";
  position: absolute;
  height: 37px;
  width: 1px;
  background: var(--association-line);
  left: 50%;
  top: 100%;
}

.association-council {
  color: #203b35;
}

.association-members {
  display: flex;
  width: 100%;
  list-style: none;
  padding: 48px 0 0;
  margin: 0;
  position: relative;
}

.association-members::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  height: 25px;
  width: 1px;
  background: var(--association-line);
}

.association-person {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 0 10px;
}

.association-person::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -24px;
  height: 1px;
  background: var(--association-line);
}

.association-person:first-child::before { left: 50%; }
.association-person:last-child::before { right: 50%; }

.association-person::after {
  content: "";
  position: absolute;
  top: -24px;
  left: 50%;
  height: 24px;
  width: 1px;
  background: var(--association-line);
}

.association-portrait {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  background: #e5e9df;
  color: #567164;
  overflow: hidden;
}

.association-initials {
  font: 400 clamp(28px, 4vw, 55px)/1 "Italiana", serif;
  letter-spacing: .04em;
}

.association-portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.association-person-copy {
  padding: 19px 12px 23px;
  background: #fffdfa;
  min-height: 135px;
  border-bottom: 2px solid #c4ac76;
}

.association-role {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #255a4e;
  margin: 0 0 10px;
  line-height: 1.6;
}

.association-person h3 {
  font: 500 clamp(15px, 1.35vw, 20px)/1.45 "DM Sans", sans-serif;
  overflow-wrap: anywhere;
}

.association-details {
  margin: 42px 10px 0;
  padding: 24px;
  border-top: 1px solid #d4d8cc;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 30px;
}

.association-details h2 {
  font: 500 13px/1.4 "DM Sans", sans-serif;
  color: #255a4e;
}

.association-details p, .association-status {
  font-size: 13px;
  line-height: 1.8;
  color: #6d635c;
}

.association-status { text-align: center; }
.association-without-people .association-members { display: none; }

@media (max-width: 900px) {
  .association-main { padding-top: 120px; }
  .association-members {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
    max-width: 640px;
    padding-top: 32px;
  }
  .association-person { padding: 0; }
  .association-person::before, .association-person::after, .association-members::before { display: none; }
  .association-person h3 { font-size: 18px; }
  .association-person-copy { min-height: 115px; }
}

@media (max-width: 550px) {
  .association-heading { margin-bottom: 32px; }
  .association-members { grid-template-columns: minmax(0, 1fr); max-width: 300px; }
  .association-details { grid-template-columns: 1fr; gap: 10px; margin-inline: 0; padding-inline: 0; }
}