/* The association page (/xx/association/), alternative A, approved on 28 October 2026 (review/redesign/pages/).
   After the CIPS "About us" page (cips.org/about-us): a breadcrumb strip, a large serif title with the plain statement
   under it and one action, then the parts of the organisation as a row of tiles.
   Header, footer, phone survey bar and reveal safety: web/site.css and web/site.js. Colours only from tokens.css. */
/* Shared pieces */
.caption { font: var(--cap-text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-slate); }
.cta { display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 18px 32px; font: 600 17px/20px var(--cap-font-sans); text-decoration: none; }
a.cta, a.cta:hover { color: var(--cap-white); }
.cap-dark a.cta, .cap-dark a.cta:hover { color: var(--cap-ink); text-decoration: none; }
.cta svg, .arrow-link svg { flex: none; transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .cta:hover svg, .arrow-link:hover svg { transform: translateX(3px); } }
.arrow-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 600 15px/20px var(--cap-font-sans); }
.source { font: var(--cap-text-small); color: var(--cap-slate); }
.source { padding: 8px 0; }
.source a { padding: 12px 0; }
.cap-dark .cap-button:focus-visible { outline: 2px solid var(--cap-gold); outline-offset: 2px; }

/* ---------- 1. Breadcrumb strip (CIPS) ---------- */
.crumbs { background: var(--cap-light); border-bottom: 1px solid var(--cap-ink-20); }
.crumbs ol { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; min-height: 52px; font: var(--cap-text-small); font-weight: 600; }
.crumbs li { display: flex; align-items: center; gap: 4px; }
.crumbs li + li::before { content: ""; width: 7px; height: 7px; margin: 0 8px 0 4px; border-top: 1.5px solid var(--cap-slate); border-right: 1.5px solid var(--cap-slate); transform: rotate(45deg); }
.crumbs a { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 44px; }
.crumbs [aria-current="page"] { color: var(--cap-ink); }

/* ---------- 2. Title, statement, principles ---------- */
.intro { padding: var(--cap-space-8) 0 0; }
.intro h1 { font: var(--cap-text-display); color: var(--cap-ink); max-width: 14em; text-wrap: balance; }
.intro-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--cap-space-8); margin-top: var(--cap-space-6); align-items: end; }
.intro-lede { font: var(--cap-text-body); color: var(--cap-ink); max-width: 34em; text-wrap: pretty; }
.intro-act { justify-self: start; padding-bottom: 4px; }

/* The four principles: one row of four equal tiles on white (two by two on tablets, one column on phones; the CIPS tile row) */
.principles { padding: var(--cap-space-8) 0; }
.p-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--cap-space-6); }
.p-item { position: relative; padding-top: var(--cap-space-5); border-top: 1px solid var(--cap-ink-20); }
.p-item::before { content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 3px; background: var(--cap-turquoise); transform-origin: 0 50%; }
.p-num { display: block; font: var(--cap-text-display); line-height: 1; color: var(--cap-ink); font-variant-numeric: lining-nums; }
.p-item h2 { margin-top: var(--cap-space-4); font: var(--cap-text-h3); color: var(--cap-ink); text-wrap: balance; }
.p-item p { margin-top: var(--cap-space-3); font: var(--cap-text-small); color: var(--cap-slate); text-wrap: pretty; }


/* ---------- 2b. The international network: one ink band with the brand cut, after the home page "about" band ---------- */
.net { --cap-cut: 24px; padding: var(--cap-space-8) 0; }
.net-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--cap-space-8); align-items: start; }
.net h2 { max-width: 16em; font: var(--cap-text-h1); color: var(--cap-white); text-wrap: balance; }
.net-lede { margin-top: var(--cap-space-4); color: var(--cap-ink-10); max-width: 34em; text-wrap: pretty; }
/* The two figures: a short gold rule on a hairline, as the turquoise rule on the principles */
.net-figs { padding-top: var(--cap-space-2); }
/* The first column never narrower than its longest word (the Kazakh label on a 360 px phone) */
.net-figs dl { display: grid; grid-template-columns: minmax(min-content, 2fr) minmax(0, 3fr); gap: var(--cap-space-5); margin: 0; }
.net-fig { position: relative; display: flex; flex-direction: column; padding-top: var(--cap-space-4); border-top: 1px solid var(--cap-ink-80); }
.net-fig::before { content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 3px; background: var(--cap-gold); transform-origin: 0 50%; }
.net-fig dt { font: var(--cap-text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-ink-20); }
/* The numbers share one baseline when a label wraps (phones) */
.net-fig dd { margin: auto 0 0; padding-top: var(--cap-space-2); font: var(--cap-text-display); color: var(--cap-white); font-variant-numeric: lining-nums; white-space: nowrap; }
.net .source { margin-top: var(--cap-space-3); color: var(--cap-ink-20); }

/* The six associations: a quiet list of names, three across, in alphabetical order of country (English order in every language) */
.net-members { margin-top: var(--cap-space-8); }
.net-list-title { font: var(--cap-text-h3); color: var(--cap-white); }
.net-list { list-style: none; margin: var(--cap-space-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--cap-space-6); }
.net-item { display: flex; flex-direction: column; align-items: flex-start; padding: var(--cap-space-5) 0 var(--cap-space-4); border-top: 1px solid var(--cap-ink-80); }
.net-name { margin: 0; padding-bottom: var(--cap-space-3); font: var(--cap-text-small); color: var(--cap-ink-10); text-wrap: pretty; }
/* The country opens the heading, so heading navigation reads "Bulgaria, BASC, ..." */
.net-country { display: block; font: var(--cap-text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-ink-20); }
/* The acronym at the h3 size, no larger than the list title above it */
.net-acr { display: block; margin: var(--cap-space-3) 0 var(--cap-space-1); font: var(--cap-text-h3); color: var(--cap-white); }
.net-full { display: block; max-width: 22em; }
/* The links sit on one line across each row */
.net-site { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; margin-top: auto; font: var(--cap-text-small); font-weight: 600; }

/* ---------- 3. How the association is being founded: the title on the left, the five steps down the right ---------- */
.found { background: var(--cap-light); padding: var(--cap-space-8) 0; }
.found-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--cap-space-8); align-items: start; }
.found-head { position: sticky; top: var(--cap-space-6); }
.found h2, .year h2 { font: var(--cap-text-h1); color: var(--cap-ink); text-wrap: balance; }
.found-lede, .year-lede { margin-top: var(--cap-space-4); color: var(--cap-slate); max-width: 30em; }
.steps { --node: 36px; --pad: var(--cap-space-5); list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); position: relative; }
/* The two current steps sit on one tinted panel, with the cut of this section */
.steps::before { content: ""; grid-column: 1; grid-row: 1 / 3; background: var(--cap-turquoise-12); clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); }
.st { grid-column: 1; position: relative; display: grid; grid-template-columns: var(--node) minmax(0, 1fr); column-gap: var(--cap-space-5); padding: var(--cap-space-5) var(--pad); }
.st:nth-child(1) { grid-row: 1; } .st:nth-child(2) { grid-row: 2; } .st:nth-child(3) { grid-row: 3; } .st:nth-child(4) { grid-row: 4; } .st:nth-child(5) { grid-row: 5; }
.st + .st { border-top: 1px solid var(--cap-ink-20); }
.st.is-now + .st.is-now { border-top-color: var(--cap-turquoise-30); }
.st.is-now + .st:not(.is-now) { border-top: 0; }
/* The rail: one line down the nodes, solid turquoise between the current steps */
.st:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--pad) + var(--node) / 2 - 0.5px); top: calc(var(--cap-space-5) + var(--node)); bottom: calc(-1 * var(--cap-space-5)); width: 1px; background: var(--cap-ink-20); transform-origin: 50% 0; }
.st.is-now:first-child::after { width: 2px; left: calc(var(--pad) + var(--node) / 2 - 1px); background: var(--cap-turquoise-deep); }
.node { display: flex; align-items: center; justify-content: center; width: var(--node); height: var(--node); border: 1.5px solid var(--cap-ink); background: var(--cap-white); font: 700 15px/1 var(--cap-font-sans); color: var(--cap-ink); font-variant-numeric: tabular-nums; }
.is-now .node { background: var(--cap-turquoise-deep); border-color: var(--cap-turquoise-deep); color: var(--cap-white); }
.st .tag { display: block; padding-top: 2px; font: var(--cap-text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-slate); }
.is-now .tag { color: var(--cap-turquoise-deep); }
.st h3 { margin-top: var(--cap-space-2); font: var(--cap-text-h3); color: var(--cap-ink); text-wrap: balance; }
.st p { margin-top: var(--cap-space-2); font: var(--cap-text-small); color: var(--cap-slate); max-width: 36em; text-wrap: pretty; }
.is-now p { color: var(--cap-ink-80); }
.st .arrow-link { margin-top: var(--cap-space-2); }

/* ---------- 4. The first year: the two cities with their photographs, then the three plans ---------- */
.year { padding: var(--cap-space-8) 0; }
.year-head { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--cap-space-8); align-items: end; }
.year-lede { margin-top: 0; padding-bottom: 6px; }
.cities { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cap-space-6); margin-top: var(--cap-space-7); }
.city { margin: 0; }
.city-photo { aspect-ratio: 16 / 9; overflow: hidden; background: var(--cap-ink-10); }
.city-photo img { width: 100%; height: 100%; object-fit: cover; }
.city-photo picture { display: contents; }
/* Each photo carries only its city name; the two initiatives follow, under a line, for both cities (28 October 2026) */
.cities { list-style: none; padding: 0; }
.city-photo { position: relative; }
.city-name { position: absolute; left: 0; bottom: 0; padding: 8px 14px; background: var(--cap-ink); color: var(--cap-white); font: var(--cap-text-caption); letter-spacing: 0.08em; text-transform: uppercase; }
.inits { margin-top: var(--cap-space-6); padding-top: var(--cap-space-5); border-top: 1px solid var(--cap-ink-20); }
.inits-title { margin: 0; font: var(--cap-text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-slate); }
.inits-list { list-style: none; margin: var(--cap-space-3) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--cap-space-6); }
.init h4 { margin: 0; font: var(--cap-text-h3); color: var(--cap-ink); }
.init p { margin: var(--cap-space-2) 0 0; font: var(--cap-text-small); color: var(--cap-slate); max-width: 34em; text-wrap: pretty; }
.init .source { margin-top: var(--cap-space-3); font: 500 13px/20px var(--cap-font-sans); }
.city figcaption { padding-top: var(--cap-space-4); }
.city h3, .plan h3 { margin-top: var(--cap-space-2); font: var(--cap-text-h3); color: var(--cap-ink); }
.city p, .plan p { margin-top: var(--cap-space-2); font: var(--cap-text-small); color: var(--cap-slate); max-width: 34em; text-wrap: pretty; }
.city .source { margin-top: 0; }
.plans { list-style: none; margin: var(--cap-space-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--cap-space-6); }
.plan { padding-top: var(--cap-space-4); border-top: 1px solid var(--cap-ink-20); }
/* The founding group: one neutral line with the link to the Founders page */
.group-line { display: flex; align-items: center; justify-content: space-between; gap: var(--cap-space-3) var(--cap-space-7); flex-wrap: wrap; margin-top: var(--cap-space-7); padding-top: var(--cap-space-5); border-top: 1px solid var(--cap-ink-20); }
.group-line p { font: var(--cap-text-small); color: var(--cap-slate); max-width: 44em; text-wrap: pretty; }
.group-line .arrow-link { flex: none; }

/* ---------- 5. Route to the survey: the closing stage of the home page, without the share row ---------- */
.closing { background: var(--cap-turquoise-12); padding: var(--cap-space-8) 0 72px; }
.stage { --d-cut: 24px; padding: 64px; clip-path: polygon(0 0, calc(100% - var(--d-cut)) 0, 100% var(--d-cut), 100% 100%, 0 100%); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 64px; align-items: end; }
.kicker { display: flex; align-items: center; gap: 12px; font: var(--cap-text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-gold); }
.kicker::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--cap-gold); }
.stage h2 { font: var(--cap-text-h1); color: var(--cap-white); margin-top: 20px; text-wrap: balance; }
.stage-lede { margin-top: var(--cap-space-4); color: var(--cap-ink-10); max-width: 30em; }
.stage .cta { display: flex; justify-content: space-between; gap: 16px; width: 100%; min-height: 80px; padding: 24px 32px; font: 600 20px/24px var(--cap-font-sans); }
.stage .cta svg { width: 22px; height: 22px; }

/* ---------- Under 1200 px: the principles two by two; the figures go under the lede ---------- */
@media (max-width: 1199px) {
  .p-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--cap-space-7); }
  .net-head { grid-template-columns: minmax(0, 1fr); row-gap: var(--cap-space-6); }
  .net-figs { padding-top: 0; max-width: 560px; }
}

/* ---------- Under 1024 px: one column ---------- */
@media (max-width: 1023px) {
  .intro-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--cap-space-5); }
  .net-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .found-grid, .year-head { grid-template-columns: minmax(0, 1fr); }
  .found-head { position: static; margin-bottom: var(--cap-space-6); }
  .steps { max-width: 680px; }
  .year-lede { margin-top: var(--cap-space-3); }
  .plans { grid-template-columns: minmax(0, 1fr); row-gap: var(--cap-space-5); max-width: 640px; }
  .stage { grid-template-columns: minmax(0, 1fr); padding: 56px 40px 48px; gap: 32px; align-items: start; }
  .stage .cta { max-width: 440px; }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  .crumbs ol { min-height: 48px; }
  .intro { padding-top: var(--cap-space-6); }
  .intro-grid { margin-top: var(--cap-space-4); }
  .intro-act { justify-self: stretch; }
  .cta { display: flex; width: 100%; justify-content: center; padding: 18px 16px; }
  .principles { padding: var(--cap-space-7) 0; }
  .p-row { grid-template-columns: minmax(0, 1fr); row-gap: var(--cap-space-6); }
  .net { --cap-cut: 16px; padding: var(--cap-space-7) 0; }
  .net-head { row-gap: var(--cap-space-5); }
  .net-figs dl { gap: var(--cap-space-4); }
  .net-members { margin-top: var(--cap-space-7); }
  .net-list { grid-template-columns: minmax(0, 1fr); margin-top: var(--cap-space-4); }
  .net-item { padding: var(--cap-space-4) 0 var(--cap-space-2); }
  .net-name { padding-bottom: 0; }
  .net-acr { margin-top: var(--cap-space-2); }
  .found, .year { padding: var(--cap-space-7) 0; }
  .found-head { margin-bottom: var(--cap-space-5); }
  .steps { --node: 32px; }
  .steps { --pad: 16px; margin: 0 -16px; }
  .steps::before { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
  .st { column-gap: var(--cap-space-4); padding: var(--cap-space-5) var(--pad); }
  .cities { gap: var(--cap-space-3); margin-top: var(--cap-space-5); }
  .inits-list { grid-template-columns: minmax(0, 1fr); }
  .plans { margin-top: var(--cap-space-6); }
  .closing { padding: 32px 0 48px; }
  .stage { --d-cut: 16px; margin: 0 -16px; padding: 40px 16px 32px; gap: 28px; }
  .stage h2 { margin-top: var(--cap-space-3); }
  .stage .cta { max-width: none; min-height: 64px; padding: 20px; font-size: 18px; }
}

/* ---------- Entry motion: once per block, CSS only; the observer only adds .is-in ---------- */
@media (prefers-reduced-motion: no-preference) {
  .intro h1, .intro-grid > * { animation: rise 520ms var(--ease-out) both; }
  .intro-grid > :nth-child(1) { animation-delay: 80ms; }
  .intro-grid > :nth-child(2) { animation-delay: 160ms; }

  .js-reveal [data-reveal]:not(.is-in) .rv { opacity: 0; }
  .js-reveal [data-reveal]:not(.is-in) .line-in::before { transform: scaleX(0); }
  [data-reveal].is-in .rv { animation: rise 520ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
  [data-reveal].is-in .line-in::before { animation: draw 700ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms + 80ms); }
  [data-reveal].is-in .rv-card { animation: rise-card 620ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
  .js-reveal [data-reveal]:not(.is-in) .rv-card { opacity: 0; }
  .js-reveal [data-reveal]:not(.is-in) .steps::before { opacity: 0; }
  [data-reveal].is-in .steps::before { animation: fade 500ms ease both; }
  .js-reveal [data-reveal]:not(.is-in) .st::after { transform: scaleY(0); }
  [data-reveal].is-in .st::after { animation: draw-y 500ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms + 200ms); }
  .js-reveal [data-reveal]:not(.is-in) .rv-photo img { transform: scale(1.04); opacity: 0.6; }
  [data-reveal].is-in .rv-photo img { animation: photo-in 1100ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes rise-card { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes draw-y { from { transform: scaleY(0); } to { transform: none; } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes photo-in { from { opacity: 0.6; transform: scale(1.04); } to { opacity: 1; transform: none; } }

/* Reduced motion: nothing moves, no animations and no transitions */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cap-button:active, a:hover svg, a:focus-visible svg { transform: none !important; }
}
@media print {
  [data-reveal] *, [data-reveal] *::before, [data-reveal] *::after { opacity: 1 !important; animation: none !important; transform: none !important; }
  .sticky-bar { display: none !important; }
  .found-head { position: static; }
}