/* Multi-page layout: the page links in the nav, the first section of each page, and the pieces that only one
   page has (home numbers and track tasks, people, the contribution call). */

/* ---------- nav: one link per page, the current one inked ---------- */
.nav-links a[aria-current="page"] { background: var(--ink); color: var(--bg); }
@media (max-width: 820px) {
  .nav { flex-wrap: wrap; row-gap: 8px; }
  .nav-links { display: flex; width: 100%; margin-left: 0; gap: 2px; overflow-x: auto; }
  .nav-links a { padding: 5px 9px; font-size: 11px; white-space: nowrap; }
  .hero { padding-top: 124px; }
}
@media (max-width: 440px) {
  .nav-links { gap: 0; }
  .nav-links a { padding: 5px 6px; font-size: 10.5px; letter-spacing: 0; }
}

/* the first section of a page clears the fixed nav */
.section.page-top { padding-top: 124px; }
@media (max-width: 820px) { .section.page-top { padding-top: 132px; } }

/* ---------- home: overview numbers ---------- */
.home-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 26px; border: 1.5px solid var(--ink); }
.hs {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 12px; border-right: 1.5px solid var(--ink);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.hs:last-child { border-right: 0; }
.hs b { font: 800 clamp(30px, 3.4vw, 44px)/1 var(--sans); letter-spacing: -0.03em; color: var(--accent-1); }
.hs span { font: 500 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.hs:hover { background: var(--ink); }
.hs:hover b, .hs:hover span { color: var(--bg); }
@media (max-width: 560px) {
  .home-stats { grid-template-columns: 1fr 1fr; }
  .hs:nth-child(2) { border-right: 0; }
  .hs:nth-child(-n + 2) { border-bottom: 1.5px solid var(--ink); }
}

/* ---------- home: each track's tasks, linked to their leaderboard ---------- */
.track-tasks { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1.5px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px; }
.track-tasks a {
  display: inline-block; padding: 3px 8px; border: 1.5px solid var(--ink); color: var(--ink);
  font: 500 11px var(--mono); letter-spacing: 0.04em; text-transform: uppercase;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.track-tasks a:hover { background: var(--accent-1); border-color: var(--accent-1); color: #fff; }
.tracks-more { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ---------- people ---------- */
.people-group { margin-top: 36px; }
.pg-head {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1.5px solid var(--ink);
  font-size: 20px; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase;
}
.pg-n { font: 500 12px var(--mono); letter-spacing: 0.06em; color: var(--accent-1); }
.pg-note { margin-left: 2px; font: 500 11px var(--mono); letter-spacing: 0.06em; text-transform: none; color: var(--ink-3); }
/* organizers: photo, name, role and interests; the whole card links to their homepage */
.org-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.org {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; height: 100%;
  padding: 14px 16px 14px 14px; border: 1.5px solid var(--ink); background: var(--bg);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.org:hover, .org:focus-visible { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--accent-1); outline: none; }
.org-photo { display: block; width: 112px; height: 112px; object-fit: cover; }
.org-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.org-name { display: flex; align-items: baseline; gap: 6px; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; }
.org-link { font-size: 14px; color: var(--accent-1); }
.org-role { font: 500 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-1); }
.org-about { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.pg-empty {
  padding: 16px; border: 1.5px dashed var(--ink-3); color: var(--ink-3);
  font: 500 12px var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
}

/* ---------- contribute: the call for contributions ---------- */
.open-call {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); column-gap: 36px; align-items: end;
  margin-top: 28px; padding: 26px 28px 22px; background: var(--accent-1); color: #fff;
}
.oc-tag { font: 500 12px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; }
.oc-status { grid-column: 1; margin-top: 6px; font: 800 clamp(34px, 5vw, 56px)/1 var(--sans); letter-spacing: -0.04em; text-transform: uppercase; }
.oc-text { grid-column: 2; grid-row: 1 / span 2; font-size: 16px; line-height: 1.6; }
.oc-contact {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 20px; padding-top: 14px;
  border-top: 1.5px solid rgba(255, 255, 255, 0.4); font: 500 13px var(--mono);
}
.oc-contact a:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .open-call { grid-template-columns: 1fr; }
  .oc-text { grid-column: 1; grid-row: auto; margin-top: 14px; }
}

/* affiliations at the foot of the People page, in their own colours, unframed: equal columns on the cards' grid, two
   to a card (6 columns beside 3 cards, 4 beside 2, 2 beside 1), so every column starts on a card edge; each logo
   flush left on its column and centred on its row */
.aff-group { container-type: inline-size; }
.aff-grid { list-style: none; margin: 0; padding: 4px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
@container (min-width: 654px) { .aff-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (min-width: 988px) { .aff-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.aff-grid li { display: flex; align-items: center; min-width: 0; height: 56px; }
.aff-grid img { display: block; height: var(--h); max-width: calc(100% - 28px); object-fit: contain; object-position: left center; }
.aff-track img { display: block; width: auto; }
.aff-text { display: flex; align-items: center; gap: 9px; }
.aff-text span { font: 700 13px/1.15 var(--sans); letter-spacing: -0.01em; color: var(--ink-2); }

/* home: the same logos in a band above the citation, as wide as the text, scrolling left (three copies of the
   row, so the loop never shows an end); hovering pauses it */
.aff-band { margin: 96px 0 0; }
.aff-kicker { margin: 0 0 14px; }
.aff-band .kicker::before { content: none; counter-increment: none; }
.aff-marquee { overflow: hidden; padding: 24px 0; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
/* the logos fade in at the right edge and out at the left; the rules above and below stay whole */
.aff-window { --fade: 72px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); }
.aff-track { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; width: max-content;
  animation: aff-scroll 60s linear infinite; }
.aff-track li { flex: none; margin-right: 64px; }   /* a margin, not a gap, so one copy is exactly a third */
.aff-marquee:hover .aff-track { animation-play-state: paused; }
@keyframes aff-scroll { to { transform: translateX(-33.3333%); } }
@media (prefers-reduced-motion: reduce) {
  .aff-window { overflow-x: auto; }
  .aff-track { animation: none; }
}
@media (max-width: 560px) { .aff-band { margin-top: 72px; } .aff-track li { margin-right: 44px; } .aff-window { --fade: 36px; } }