/* partners: styles for ext/partners.js, the Funders and partners page at /about/partners. Use the site's
   --b- tokens only. Three tiers, three surfaces: programme partners on white cards, funders on the ink surface (dark
   in every theme), network members as a light list with no card at all. */

/* ---------------------------------------------------------------- sections */
.ptn-sec { padding-block: var(--sp-section) 0; }
.ptn-top { padding-top: var(--sp-section); }
.ptn-sh { display: flex; flex-direction: column; gap: var(--sp-head-desc); margin-bottom: var(--sp-head); }
.ptn-sh.is-row { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-2) var(--sp-4); }
.ptn-sh h2 { margin: 0; font: 500 var(--h-section)/1.1 var(--font-display); letter-spacing: -0.015em; color: var(--b-ink); }
.ptn-sh p { margin: 0; max-width: 46em; color: var(--b-ink-2); font-size: 16px; line-height: 1.5; }
.ptn-sh h2:focus { outline: none; }

/* ---------------------------------------------------------------- how it fits */
.ptn-fit { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-1-5); counter-reset: fit; }
.ptn-fit-i { position: relative; min-width: 0; }
.ptn-fit-i + .ptn-fit-i::before { content: ""; position: absolute; left: -12px; top: 50%; width: 12px; height: 1.5px; background: var(--b-rule-2); }
.ptn-fit-b { display: grid; gap: var(--sp-1); width: 100%; height: 100%; padding: var(--sp-2) var(--sp-2-5); border: 0; border-radius: 20px; background: var(--b-surface); box-shadow: 0 0 0 1px rgba(var(--b-shadow), .07); color: var(--b-ink); text-align: left; font: inherit; cursor: pointer; transition: box-shadow .2s, transform .2s; }
.ptn-fit-b:hover { box-shadow: 0 0 0 1.5px var(--b-accent-line), 0 6px 20px rgba(var(--b-shadow), .06); }
.ptn-fit-b:focus-visible { outline: 2px solid var(--b-accent-ink-light); outline-offset: 3px; }
.ptn-fit-l { font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--b-ink-3); }
.ptn-fit-b b { font: 500 clamp(1.25rem, 1.8vw, 1.5rem)/1.15 var(--font-display); letter-spacing: -0.01em; }
.ptn-fit-d { font-size: 14px; line-height: 1.4; color: var(--b-ink-2); }
.ptn-fit-i:first-child .ptn-fit-b { background: var(--b-ink-surface); color: var(--b-ink-surface-ink); box-shadow: none; }
.ptn-fit-i:first-child .ptn-fit-l, .ptn-fit-i:first-child .ptn-fit-d { color: color-mix(in srgb, var(--b-ink-surface-ink) 74%, transparent); }
.ptn-fit-i:first-child .ptn-fit-b:hover { box-shadow: 0 0 0 1.5px var(--b-accent-on-dark); }
.ptn-fit-i:last-child .ptn-fit-b { background: transparent; box-shadow: inset 0 0 0 1.5px var(--b-rule-2); }
.ptn-fit-i:last-child .ptn-fit-b:hover { box-shadow: inset 0 0 0 1.5px var(--b-accent-line); }

/* ---------------------------------------------------------------- badges, shared bits */
.ptn-badge { display: inline-flex; align-items: center; width: fit-content; min-height: 24px; padding: 0 var(--sp-1); border-radius: 999px; font: 600 11px/1 var(--font-text); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; background: var(--b-tint-100); color: var(--b-accent-ink-light); }
.ptn-badge.is-lead { background: var(--b-primary); color: var(--b-accent-ink); }
.ptn-badge.is-fund { background: transparent; color: var(--b-ink-surface-ink); box-shadow: inset 0 0 0 1.5px var(--b-accent-on-dark); }
.ptn-where { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-0-5) var(--sp-1); margin: 0; font-size: 14px; color: var(--b-ink-3); }
.ptn-where .ico { width: 15px; height: 15px; color: var(--b-accent-ink-light); }
.ptn-dot { color: var(--b-soft); }
.ptn-lede { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--b-ink-2); }
.ptn-block h4 { margin: 0 0 var(--sp-1); font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--b-ink-3); }
.ptn-gives { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.ptn-gives li { display: flex; gap: var(--sp-1); font-size: 15px; line-height: 1.4; color: var(--b-ink); }
.ptn-gives .ico { width: 17px; height: 17px; margin-top: 1px; color: var(--b-accent-ink-light); stroke-width: 2.2; }
.ptn-ws { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.ptn-ws li { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 32px; padding: var(--sp-0-5) var(--sp-2) var(--sp-0-5) var(--sp-0-5); border-radius: 999px; background: var(--b-paper); font-size: 14px; color: var(--b-ink); }
.ptn-ws b { display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 999px; background: var(--b-surface); font: 600 11px/1 var(--font-mono); color: var(--b-accent-ink-light); box-shadow: inset 0 0 0 1px var(--b-rule); }
.ptn-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-chip-gap); margin-top: auto; padding-top: var(--sp-card-tags); }
.ptn-link { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 40px; padding: 0 var(--sp-2); border-radius: 999px; font: 500 14px/1 var(--font-text); text-decoration: none; color: var(--b-ink); box-shadow: inset 0 0 0 1.5px var(--b-rule-2); transition: box-shadow .15s, background-color .15s; }
.ptn-link:hover { box-shadow: inset 0 0 0 1.5px var(--b-ink); }
.ptn-link .ico { width: 15px; height: 15px; }
.ptn-links .btn { min-height: 44px; padding-inline: var(--sp-2-5); font-size: 15px; }
.ptn-links .btn .ico { width: 16px; height: 16px; }
.ptn-out { display: inline-flex; align-items: center; gap: var(--sp-0-5); color: var(--b-accent-ink-light); font-weight: 500; }
.ptn-out .ico { width: 14px; height: 14px; }
.ptn-out.is-dark { color: var(--b-accent-on-dark); }

/* ---------------------------------------------------------------- tier 1: programme partners */
.ptn-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-grid); }
.ptn-card { display: grid; min-width: 0; border-radius: 28px; background: var(--b-surface); box-shadow: 0 0 0 1px rgba(var(--b-shadow), .07), 0 10px 30px rgba(var(--b-shadow), .04); overflow: hidden; }
.ptn-card-main { display: flex; flex-direction: column; gap: var(--sp-1-5); padding: var(--sp-1) var(--sp-1) var(--sp-card); min-width: 0; }
.ptn-card-main > :not(.ptn-logo) { margin-inline: calc(var(--sp-card) - var(--sp-1)); }
.ptn-logo { display: grid; place-items: center; min-height: 132px; padding: var(--sp-2-5); border-radius: 20px; background: var(--b-ground-card); box-shadow: inset 0 0 0 1px var(--b-rule); }
.ptn-logo img { display: block; width: auto; max-width: 100%; height: var(--h, 40px); filter: brightness(0); opacity: .86; }
/* The logo files are white artwork, made for the dark footer: dark on the light partner plates, as they are on the funders' dark band */
.ptn-card-h { display: grid; gap: var(--sp-1); }
.ptn-card h3 { margin: 0; font: 500 clamp(1.35rem, 1.9vw, 1.65rem)/1.15 var(--font-display); letter-spacing: -0.015em; }
.ptn-card h3 a { color: var(--b-ink); text-decoration: none; }
.ptn-card h3 a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.ptn-card.is-lead { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.ptn-card.is-lead .ptn-logo { min-height: 156px; }
.ptn-card.is-lead .ptn-lede { font-size: 17px; color: var(--b-ink); }
.ptn-ph { position: relative; display: grid; align-content: end; gap: var(--sp-1); margin: var(--sp-1) var(--sp-1) var(--sp-1) 0; padding: var(--sp-2-5); min-height: 280px; border-radius: 20px; border: 1.5px dashed var(--b-rule-2);
  background: repeating-linear-gradient(135deg, var(--b-tint-50) 0 14px, var(--b-paper) 14px 28px); }
.ptn-ph-l { position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; min-height: 26px; padding: 0 var(--sp-1-5); border-radius: 999px; background: var(--b-surface); color: var(--b-ink-2); font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--b-rule); }
.ptn-ph figcaption { max-width: 28em; font-size: 14px; line-height: 1.45; color: var(--b-ink-2); }
.ptn-team { margin: var(--sp-2) 0 0; font-size: 15px; color: var(--b-ink-2); }
.ptn-team a { color: var(--b-accent-ink-light); font-weight: 500; }

/* ---------------------------------------------------------------- tier 2: funders, on the ink surface */
.ptn-funders { margin-top: var(--sp-section); padding-block: var(--sp-section); background: var(--b-ink-surface); color: var(--b-ink-surface-ink); }
.ptn-sh.is-dark h2 { color: var(--b-ink-surface-ink); }
.ptn-sh.is-dark p { color: color-mix(in srgb, var(--b-ink-surface-ink) 80%, transparent); }
.ptn-fund-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-grid); }
.ptn-fund { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-1); border-radius: 28px; background: var(--b-ink-surface-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--b-ink-surface-ink) 14%, transparent); min-width: 0; }
.ptn-fund-logo { display: grid; place-items: center; padding: var(--sp-2-5); border-radius: 20px; background: var(--b-ink-surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--b-ink-surface-ink) 16%, transparent); min-height: 150px; }
.ptn-fund-logo img { display: block; width: auto; max-width: 100%; height: var(--h, 40px); }
.ptn-fund-t { display: flex; flex-direction: column; gap: var(--sp-1); padding-block: var(--sp-2); min-width: 0; }
.ptn-fund h3 { margin: var(--sp-0-5) 0 0; font: 500 clamp(1.3rem, 1.8vw, 1.55rem)/1.15 var(--font-display); letter-spacing: -0.015em; color: var(--b-ink-surface-ink); }
.ptn-full { margin: calc(var(--sp-0-5) * -1) 0 0; font-size: 14.5px; color: color-mix(in srgb, var(--b-ink-surface-ink) 78%, transparent); }
.ptn-fund .ptn-where { color: color-mix(in srgb, var(--b-ink-surface-ink) 72%, transparent); }
.ptn-fund .ptn-where .ico, .ptn-fund .ptn-gives .ico { color: var(--b-accent-on-dark); }
.ptn-fund .ptn-lede { color: color-mix(in srgb, var(--b-ink-surface-ink) 86%, transparent); }
.ptn-fund .ptn-gives li { color: var(--b-ink-surface-ink); }
.ptn-fund .ptn-link { color: var(--b-ink-surface-ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--b-ink-surface-ink) 36%, transparent); }
.ptn-fund .ptn-link:hover { box-shadow: inset 0 0 0 1.5px var(--b-ink-surface-ink); }
.ptn-indep { display: flex; gap: var(--sp-1); margin: var(--sp-3) 0 0; max-width: 52em; font-size: 14.5px; line-height: 1.5; color: color-mix(in srgb, var(--b-ink-surface-ink) 80%, transparent); }
.ptn-indep b { color: var(--b-ink-surface-ink); font-weight: 600; }
.ptn-indep .ico { width: 18px; height: 18px; margin-top: 1px; color: var(--b-accent-on-dark); }

/* ---------------------------------------------------------------- tier 3: network members, type filter + tiles */
.ptn-mem-g { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--b-paper); color: var(--b-ink-2); }
.ptn-mem-g .ico { width: 14px; height: 14px; }

.ptn-tabs { margin-bottom: var(--sp-3); }
.ptn-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: var(--sp-grid); }
.ptn-tile { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-4); height: 100%; min-height: 168px; padding: var(--sp-2) var(--sp-2) var(--sp-2-5); border-radius: 20px; color: var(--b-ink); text-decoration: none; transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s; }
.ptn-tile-m { display: flex; align-items: center; gap: var(--sp-1); font-size: 13.5px; color: var(--b-ink-2); }
.ptn-tile-m .tflag { width: 18px; height: 18px; }
.ptn-tile-b { display: grid; gap: var(--sp-1); }
.ptn-tile-b b { font: 500 17px/1.25 var(--font-display); letter-spacing: -0.01em; }
.ptn-tile-k { font: 500 10.5px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--b-ink-3); }
/* The site's .nc card: its white layer is the background, so no ring (it would frame the notch); the text clears the corner */
.ptn-tile.nc::before { --s: calc(48px * var(--nk)); --r: calc(14px * var(--nk)); }
.ptn-tile .corner { width: 48px; height: 48px; }
.ptn-tile .corner-btn { width: 36px; height: 36px; }
.ptn-tile .corner-btn .ico { width: 15px; height: 15px; }
.ptn-tile-k { padding-right: 44px; }
.ptn-tile:hover { color: var(--b-ink); transform: translateY(-3px); filter: drop-shadow(0 16px 16px rgba(var(--b-shadow), .1)); }


/* ---------------------------------------------------------------- close */
.ptn-join { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.ptn-ways { list-style: none; display: grid; gap: var(--sp-0-5); margin: var(--sp-3) 0 0; padding: 0; }
.ptn-ways a { display: flex; align-items: center; gap: var(--sp-2); margin: 0 calc(var(--sp-1-5) * -1); padding: var(--sp-1-5); border-radius: 18px; color: #fff; text-decoration: none; transition: background-color .2s; }
.ptn-ways a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.ptn-ways a > span { display: grid; gap: 2px; flex: 1; }
.ptn-ways b { font-weight: 500; font-size: 16px; }
.ptn-ways a > span > span { font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, .72); }
.ptn-ways a > .ico:first-child { flex: none; box-sizing: content-box; width: 20px; height: 20px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .08); color: var(--nav-acc, var(--b-accent-on-dark)); }
.ptn-ways a > .ico:last-child { flex: none; width: 16px; height: 16px; color: rgba(255, 255, 255, .7); transition: transform .2s; }
.ptn-ways a:hover > .ico:last-child { transform: translateX(3px); color: #fff; }
.ptn-join-act { margin: var(--sp-4) 0 0; }
@media (max-width: 860px) { .ptn-join { grid-template-columns: 1fr; } .ptn-art { justify-self: center; max-width: 300px; } }

/* ---------------------------------------------------------------- narrower */
@media (max-width: 1100px) {
  .ptn-fund { grid-template-columns: minmax(0, 1fr); padding: var(--sp-1); }
  .ptn-fund-t { padding: var(--sp-1) var(--sp-2) var(--sp-2); }
  .ptn-fund-logo { min-height: 120px; }
}
@media (max-width: 860px) {
  .ptn-fit { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  .ptn-fit-i + .ptn-fit-i::before { left: 28px; top: -10px; width: 1.5px; height: 10px; }
  .ptn-grid, .ptn-fund-grid { grid-template-columns: minmax(0, 1fr); }
  .ptn-card.is-lead { grid-template-columns: minmax(0, 1fr); }
  .ptn-ph { margin: 0 var(--sp-1) var(--sp-1); min-height: 200px; }
}
@media (max-width: 600px) {
  .ptn-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-grid); }
  .ptn-tile { min-height: 150px; gap: var(--sp-3); padding: var(--sp-2) var(--sp-2) var(--sp-2); }
  .ptn-tile-b b { font-size: 15.5px; }
  .ptn-logo { min-height: 112px; }
  .ptn-card.is-lead .ptn-logo { min-height: 120px; }
  .ptn-card.is-lead .ptn-lede { font-size: 16px; }
  .ptn-join-act .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ptn-fit-b, .ptn-link, .ptn-tile, .ptn-ways .ico { transition: none; }
  .ptn-tile:hover { transform: none; }
}

/* Work with the Observatory: the region map fills the card's right side and fades out at its edges */
.ptn-join { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.ptn-map { width: calc(100% + clamp(var(--sp-3), 4vw, var(--sp-6))); max-width: none; margin: calc(clamp(var(--sp-3), 4vw, var(--sp-6)) * -1) calc(clamp(var(--sp-3), 4vw, var(--sp-6)) * -1) calc(clamp(var(--sp-3), 4vw, var(--sp-6)) * -1) 0; justify-self: stretch; overflow: visible;
  -webkit-mask-image: radial-gradient(60% 62% at 55% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(60% 62% at 55% 50%, #000 55%, transparent 100%); }
.ptn-map .pa-c { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .32); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ptn-map .pa-c.on { fill: rgba(255, 255, 255, .12); stroke: rgba(255, 255, 255, .6); }
.ptn-map .pa-arc { fill: none; stroke: var(--b-accent-on-dark); stroke-width: 1.4; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; opacity: .75; }
.ptn-map .pa-dot { fill: #fff; }
.ptn-map .pa-hub { fill: var(--b-accent-on-dark); }
.ptn-map .pa-hub-ring { fill: none; stroke: var(--b-accent-on-dark); stroke-width: 1.5; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .ptn-map .pa-arc { animation: pa-flow 2.4s linear infinite; animation-delay: var(--d); }
  .ptn-map .pa-dot { animation: pa-blink 3s ease-in-out infinite; animation-delay: var(--d); }
  .ptn-map .pa-hub-ring { animation: dm-ring 2.6s ease-out infinite; }
      }
@keyframes pa-flow { to { stroke-dashoffset: -20; } }
@keyframes pa-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (max-width: 860px) { .ptn-join { grid-template-columns: 1fr; } .ptn-map { width: 100%; max-width: none; margin: 0; } }/* The closing card sits one section space above the footer; its map leans to the right edge */
.ptn-end { padding-bottom: var(--sp-section); }
@media (min-width: 861px) { .ptn-map { translate: 9% 0; } }