/* One scoped system. No HOME sizing, transforms or sticky horizontal engine. */
.horizon-page--lassociation .wp-site-blocks > header { position: sticky; top: 0; z-index: 100; background: #f7f6f2; }
.horizon-page--lassociation .wp-site-blocks { padding-inline: 0; }
.association-page {
  --association-ink: #20205f;
  --association-wine: #a03247;
  --association-gutter: clamp(24px, 4vw, 80px);
  --association-content: 1160px;
  --association-inset: max(var(--association-gutter), calc((100% - var(--association-content))/2));
  --association-columns: 3;
  --association-team-width: var(--association-content);
  --association-gap: clamp(24px, 2.5vw, 36px);
  --association-body: clamp(17px, .85rem + .35vw, 21px);
  --association-space: clamp(64px, 6vw, 112px);
  --association-header: 100px;
  --association-navigation-height: 68px;
  --association-anchor-gap: 24px;
  color: var(--association-ink);
  background: #f7f6f2;
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--association-body);
  line-height: 1.65;
}
.association-page *, .association-page *::before, .association-page *::after { box-sizing: border-box; }
.association-page :where(h1,h2,h3,p,figure) { margin: 0; }
.association-page :where(h1,h2,h3) { color: inherit; text-wrap: balance; }
.association-page h1 { font-size: clamp(38px, 3.8vw, 76px); line-height: 1.04; letter-spacing: -.045em; max-width: 17ch; }
.association-page h2 { font-size: clamp(32px, 2.8vw, 48px); line-height: 1.12; letter-spacing: -.035em; font-weight: 700; }
.association-page h3 { font-size: clamp(21px, 1.25vw, 26px); line-height: 1.25; letter-spacing: -.02em; font-weight: 700; }
.association-page p + p { margin-top: 1em; }
.association-page .eyebrow { font-size: 14px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--association-wine); margin-bottom: 18px; }
.association-page a:focus-visible, .association-page button:focus-visible { outline: 3px solid #a03247; outline-offset: 5px; }
.association-page .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 4vw, 64px); align-items: center; padding: var(--association-space) var(--association-inset); background: #20205f; color: #fff; position: relative; isolation: isolate; }
.association-page .hero::before { content: ''; position: absolute; inset: 18% 8% 10% 34%; border: 1px solid #69658f; border-radius: 50%; transform: rotate(-16deg); z-index: -1; opacity: .45; }
.association-page .hero .eyebrow { color: #f1a3b7; }
.association-page .lead { max-width: 40ch; margin-top: 28px; color: #eeeaf7; }
.association-page .community { min-width: 0; }
.association-page .community img { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 3px; }
.association-page .community figcaption { font-size: 15px; color: #e7e4f1; padding-top: 12px; }
.association-navigation { position: sticky; top: var(--association-header); z-index: 20; background: #f7f6f2; border-bottom: 1px solid #d9d6e3; padding-inline: var(--association-gutter); margin: 0 !important; }
.association-navigation nav { display: flex; justify-content: center; gap: clamp(10px, 1.5vw, 24px); padding-block: 8px; }
.association-navigation a { display: flex; align-items: center; justify-content: center; min-height: var(--nav-target, 48px); padding: 10px clamp(14px, 1.7vw, 28px); text-decoration: none; color: #20205f; font-size: var(--nav-type, 17px); line-height: 1.3; border: 1px solid #d4cfdf; border-radius: 9px; background: linear-gradient(160deg, #fff 0%, #eeebf2 100%); box-shadow: inset 0 1px 0 #fff, 0 2px 0 #c9c3d4, 0 5px 12px #20205f12; font-weight: 650; text-align: center; }
.association-navigation a:hover { color: #20205f; border-color: #9d90ad; background: linear-gradient(160deg, #fff, #e6e1ed); }
.association-navigation a[aria-current="location"] { color: #fff; border-color: #4e426e; background: linear-gradient(135deg, #39346f, #20205f 65%, #44304f); box-shadow: inset 0 1px 0 #ffffff30, 0 2px 0 #15143e, 0 5px 14px #20205f24; }
.association-navigation a:active { box-shadow: inset 0 2px 4px #20205f25; }
.association-navigation button { display: none; }
.association-page .section { padding: var(--association-space) var(--association-inset); margin: 0; scroll-margin-top: calc(var(--association-header) + var(--association-navigation-height) + var(--association-anchor-gap) - var(--association-section-start, var(--association-space))); }
.association-page .intro, .association-page .functioning, .association-page .representation { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.association-page .intro h2 { max-width: 20ch; }
.association-page .section p { max-width: 60ch; }
.association-page .intro p:not(.eyebrow), .association-page .functioning p:not(.eyebrow), .association-page .engagement p:not(.eyebrow) { color: #494957; }
.association-page .functioning .eyebrow { color: var(--association-wine); }
.association-page .representation { background: #20205f; color: #fff; }
.association-page .representation .eyebrow { color: #f1a3b7; }
.association-page .representation-heading > p:last-child { margin-top: 24px; }
.association-page .representation-heading > p:last-child, .association-page .representation-details article p { color: #e6e3f0; }
.association-page .representation-details article + article { margin-top: 32px; border-top: 1px solid #66638b; padding-top: 32px; }
.association-page .representation-details article p { margin-top: 18px; }
.association-page .functioning { padding-bottom: 48px; }
.association-page .team { --association-section-start: 40px; padding-top: var(--association-section-start); }
.association-page .section-heading { width: min(100%, var(--association-team-width)); margin: 0 auto 36px; }
.association-page .council { background: linear-gradient(#eeedf3, #f7f6f2); }
.association-people { display: flex; flex-wrap: wrap; justify-content: center; gap: 48px var(--association-gap); width: min(100%, var(--association-team-width)); margin-inline: auto; }
.association-person { flex: 0 0 calc((100% - (var(--association-columns) - 1)*var(--association-gap))/var(--association-columns)); min-width: 0; }
.association-portrait { width: 100%; aspect-ratio: 4/5; margin: 0 0 20px; background: #e8e6ee; border-radius: 3px; overflow: hidden; }
.association-portrait img { display: block; width: 100%; height: 100%; object-fit: contain; }
.association-portrait--avatar { display: grid; place-items: center; }
.association-portrait--avatar img { height: auto; aspect-ratio: 1; }
.association-portrait--silhouette { background: #e8e6ee; }
.association-person-copy { width: 100%; }
.association-person h3 { overflow-wrap: anywhere; }
.association-person .association-function { color: #6c354c; font-size: var(--association-body); margin-top: 7px; line-height: 1.4; }
.association-portrait--vacant { display: flex; align-items: center; justify-content: center; border: 1px dashed #837d99; background: transparent; color: #514966; font-size: 18px; text-align: center; }
.association-page .engagement { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 40px clamp(32px, 4vw, 64px); }
.association-page .engagement h2 { margin-bottom: 24px; }
.association-page .engagement .association-people { grid-column: 1/-1; order: 2; }
.association-page .engagement-note { border-left: 2px solid #a03247; padding-left: 32px; align-self: center; }
.association-page .join { display: inline-flex; align-items: center; gap: 24px; min-height: 48px; margin-top: 24px; padding: 12px 22px; border-radius: 5px; background: #a03247; color: white; text-decoration: none; font-size: 17px; font-weight: 700; }
.association-page .join:hover, .association-page .join:focus-visible { background: #20205f; color: white; }
/* Composition changes, not one breakpoint per device. */
@media (max-width: 1100px) {
  .association-page { --association-columns: 2; --association-team-width: 720px; }
}
@media (max-width: 900px) {
  .association-page .hero { grid-template-columns: 1fr; }
  .association-page .hero-copy { width: min(100%, 640px); margin-inline: auto; }
  .association-page h1 { max-width: 25ch; }
  .association-page .lead { max-width: 60ch; }
  .association-page .community { width: min(100%, 640px); margin-inline: auto; }
  .association-page .intro, .association-page .functioning, .association-page .representation { grid-template-columns: 1fr; gap: 28px; }
  .association-page .engagement { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  /* The shared theme already supplies 16px outside the page. Total inset 24px. */
  .association-page { --association-gutter: 8px; --association-space: 56px; --association-columns: 1; --association-navigation-height: 54px; --association-anchor-gap: 16px; }
  .association-page .hero::before { display: none; }
  .association-navigation button { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 54px; background: transparent; border: 0; padding: 10px 0; color: #20205f; font: inherit; font-weight: 650; }
  .association-navigation nav { flex-direction: column; gap: 10px; padding: 0 0 14px; }
  .association-navigation a { min-height: 48px; padding: 10px 16px; }
  .association-navigation nav { display: none; }
  .association-navigation[data-enhanced][data-open] nav { display: flex; }
  .association-people { gap: 0; }
  .association-person { flex-basis: 100%; display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 20px; align-items: center; padding-block: 22px; border-bottom: 1px solid #d9d6e3; }
  .association-portrait { width: 92px; margin: 0; }
  .association-person-copy { margin: 0; }
  .association-person h3 { font-size: 21px; }
  .association-portrait--vacant { font-size: 15px; padding: 8px; }
  .association-person--vacant { display: block; }
  .association-person--vacant .association-portrait { width: 100%; aspect-ratio: auto; min-height: 92px; }
  .association-page .section-heading { margin-bottom: 12px; }
  .association-page .engagement-note { padding-left: 22px; }
}
@media (prefers-reduced-motion: no-preference) {
  .association-page .join { transition: background-color .18s ease; }
  .association-navigation a { transition: box-shadow .18s ease, border-color .18s ease; }
}