/* about/affil.css: the affil section of about.html. Owned by affil.
   Affiliations set like the list of abbreviations at the front of a surgical textbook: a ledger ruled
   like a printed table on the grey ground, each standing over its bodies. Each body is its official mark
   in the page ink (a button built by about/affil.js); opening it lifts the mark into its own colours while
   its full name writes itself out beside it, word by word. Everything here is scoped to .a-affil-root.
   The marks are shown with Rod's written permission from each organisation, confirmed by the owner on
   16 Oct 2026; files and sources: about-100x/affil/logos.py. */

.a-affil-root {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  padding: 8rem 5vw;
}
.a-affil-inner { max-width: var(--max-w); margin: 0 auto; }

/* Head: the heading alone, and the one control that spells everything out. */
.a-affil-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.a-affil-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.75rem, 5vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.a-affil-all { flex: none; }
.a-affil-all[hidden] { display: none; }   /* .h-btn sets display; without script the control stays hidden */

/* One containment only: the ledger sits straight on the grey ground, held by a printed table's rules, a
   heavier rule over and under it. Desktop sets it in two columns, the verified standing on the left and
   the societies on the right. */
.a-affil-ledger {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.a-affil-group { padding: clamp(1.25rem, 2.2vw, 1.75rem) 0; --a-affil-slot: 8.25rem; }
.a-affil-group--lead { grid-column: 1; --a-affil-slot: 11.75rem; }
.a-affil-group--societies { grid-column: 2; grid-row: 1 / span 2; }
.a-affil-group--lead + .a-affil-group--lead { border-top: 1px solid rgba(11, 15, 46, 0.16); }

.a-affil-standing {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--text-2);
  transition: color var(--h-t) var(--h-ease-out);
}
/* The standing an open body grants reads in ink while that body is spelled out. */
.a-affil-group:has(.a-affil-abbr[aria-expanded="true"]) .a-affil-standing { color: var(--ink); }

/* A row, like a list of abbreviations: the mark in its slot, the name it stands for beside it. */
.a-affil-entry {
  margin: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: var(--a-affil-slot) minmax(0, 1fr);
  column-gap: clamp(1rem, 2vw, 1.75rem);
  align-items: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.0625rem, 1.4vw, 1.3125rem);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.a-affil-entry + .a-affil-entry { margin-top: 0.85rem; }

/* The marks. Each file is drawn twice in one slot: a one colour mask in the page ink, and the
   organisation's own colour artwork above it. --a-affil-h sets each mark's optical height and
   --a-affil-ar its shape, Chapman's way, so a seal, a monogram and a wordmark sit level. */
.a-affil-entry--aans { --a-affil-art: url(../../images/about/affil/aans.webp); --a-affil-mask: url(../../images/about/affil/aans-mask.webp); --a-affil-ar: 537 / 120; --a-affil-h: 38px; --a-affil-brand: #08445c; }
.a-affil-entry--abns { --a-affil-art: url(../../images/about/affil/abns.webp); --a-affil-mask: url(../../images/about/affil/abns-mask.webp); --a-affil-ar: 1 / 1; --a-affil-h: 66px; --a-affil-brand: #9f1915; }
.a-affil-entry--ama { --a-affil-art: url(../../images/about/affil/ama.webp); --a-affil-mask: url(../../images/about/affil/ama-mask.webp); --a-affil-ar: 296 / 120; --a-affil-h: 38px; --a-affil-brand: #46166b; }
.a-affil-entry--aospine { --a-affil-art: url(../../images/about/affil/ao.webp); --a-affil-mask: url(../../images/about/affil/ao-mask.webp); --a-affil-ar: 134 / 120; --a-affil-h: 46px; --a-affil-brand: #042d98; }
.a-affil-entry--cns { --a-affil-art: url(../../images/about/affil/cns.webp); --a-affil-mask: url(../../images/about/affil/cns-mask.webp); --a-affil-ar: 240 / 68; --a-affil-h: 32px; --a-affil-brand: #001e62; }
.a-affil-entry--nass { --a-affil-art: url(../../images/about/affil/nass.webp); --a-affil-mask: url(../../images/about/affil/nass-mask.webp); --a-affil-ar: 401 / 120; --a-affil-h: 36px; --a-affil-brand: #004990; }

.a-affil-logo {
  position: relative;
  display: block;
  height: calc(var(--a-affil-h) * var(--a-affil-k, 1));   /* --a-affil-k scales every mark together */
  aspect-ratio: var(--a-affil-ar);
  max-width: 100%;
  transition: translate var(--h-spring-dur) var(--h-spring), scale var(--h-spring-dur) var(--h-spring);
}
.a-affil-logo-ink, .a-affil-logo-color { position: absolute; inset: 0; }
.a-affil-logo-ink {
  background-color: var(--ink);
  -webkit-mask: var(--a-affil-mask) left center / contain no-repeat;
  mask: var(--a-affil-mask) left center / contain no-repeat;
  transition: opacity var(--h-t-quick) var(--h-ease) 0ms;   /* returning: ink first ... */
}
.a-affil-logo-color {
  background: var(--a-affil-art) left center / contain no-repeat;
  opacity: 0;
  transition: opacity var(--h-t) var(--h-ease) 140ms;          /* ... then the colour leaves */
}
/* Open (hover, keyboard focus, a tap, or "Show full names"): the mark lifts a touch on the base spring and
   its colour comes up over the ink before the ink goes, so no frame is ever see through. */
.a-affil-entry.a-affil-is-open .a-affil-logo,
.a-affil-root.a-affil-all-on .a-affil-entry--aospine .a-affil-logo { translate: 0 -2px; scale: 1.04; }
.a-affil-entry.a-affil-is-open .a-affil-logo-color,
.a-affil-root.a-affil-all-on .a-affil-entry--aospine .a-affil-logo-color { opacity: 1; transition: opacity var(--h-t-content) var(--h-ease) 0ms; }
.a-affil-entry.a-affil-is-open .a-affil-logo-ink,
.a-affil-root.a-affil-all-on .a-affil-entry--aospine .a-affil-logo-ink { opacity: 0; transition: opacity var(--h-t) var(--h-ease) 220ms; }

/* The mark is the button: the focus ring rings the mark. */
.a-affil-abbr {
  justify-self: start;
  display: block;
  min-height: 44px;
  margin: -0.45rem;
  padding: 0.45rem;
  border: 0;
  border-radius: var(--h-r-ctl);
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: scale var(--h-spring-dur) var(--h-spring);
}
.a-affil-abbr:active { scale: 0.97; transition-duration: var(--h-t-press); }
.a-affil-abbr:focus-visible { outline: 2px solid var(--h-focus); outline-offset: 2px; }
.a-affil-entry > .a-affil-logo { justify-self: start; }

/* No script: the plain abbreviation keeps the browser's own dotted underline and title tooltip. */
.a-affil-root abbr[title] { text-decoration-color: var(--muted); text-underline-offset: 0.18em; cursor: help; }

/* The name, written out only while open. Its capitals take the organisation's colour as an accent that
   echoes the mark; the rest of each word stays text-2, so the letters that make the abbreviation show. */
.a-affil-glyphs { display: none; text-wrap: balance; }
.a-affil-entry.a-affil-is-open .a-affil-glyphs { display: block; }
.a-affil-w, .a-affil-cap, .a-affil-tail { display: inline-block; }
.a-affil-cap { font-weight: 700; transition: color var(--h-t-focus) var(--h-ease); }
.a-affil-tail { color: var(--text-2); font-weight: 500; }
.a-affil-entry.a-affil-is-open .a-affil-cap { color: var(--a-affil-brand, var(--ink)); }

/* A body with no published mark (Puget Sound Spine Interest Group) is set in type across the row. */
.a-affil-name {
  grid-column: 1 / -1;
  font-weight: 700;
  font-size: clamp(1.1875rem, 1.6vw, 1.4375rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Visually hidden, read by screen readers: the full name and its letters. */
.a-affil-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Below 900px one column: the lead groups, then the societies under a hairline. */
@media (max-width: 900px) {
  .a-affil-ledger { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .a-affil-group--lead, .a-affil-group--societies { grid-column: 1; grid-row: auto; }
  .a-affil-group--societies { border-top: 1px solid rgba(11, 15, 46, 0.16); }
}

/* Phones: the name writes out under its mark. */
@media (max-width: 700px) {
  .a-affil-root { padding: 5rem 16px; }
  .a-affil-entry { grid-template-columns: minmax(0, 1fr); row-gap: 0.5rem; font-size: 1.125rem; --a-affil-k: 0.82; }
  .a-affil-entry + .a-affil-entry { margin-top: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  /* instant, whatever state rule set a transition (important beats the open and show all rules) */
  .a-affil-abbr, .a-affil-standing, .a-affil-cap, .a-affil-logo,
  .a-affil-logo-ink, .a-affil-logo-color { transition: none !important; }
}

/* Print: the record spelled out in full, marks in colour. */
@media print {
  .a-affil-all { display: none; }
  .a-affil-glyphs { display: block !important; }
  .a-affil-logo-color { opacity: 1 !important; }
  .a-affil-logo-ink { opacity: 0 !important; }
}