/* ============================================================================
   Platform credit: built and led by the Institute for Social Equity &
   Sustainability (ISE&S). Technical support is a small footer link.

   A static lockup: the organisation's own mark, a hairline, then a small
   line for the relationship over the organisation's full name. The credit
   links to the institute on the About page; hover only
   changes the colour. They credit; they do not certify: no seal, shield or
   tick goes with them (docs/CLAIMS.md, "Public site").

   Shown in two places only: the strip at the foot of the home page's hero,
   and the footer. Both are night grounds, so they use .credits-dark and the
   mark made for dark grounds (ises-mark-reverse.svg).

   Markup:
   <div class="credits credits-dark">
     <a class="credit" href="/about#institute">
       <img class="credit-mark m-ises" src="/brand/partners/ises-mark-reverse.svg" alt="" width="46" height="34" />
       <span class="credit-text"><span class="credit-rel">Built and led by</span><span class="credit-org">Institute for Social Equity &amp; Sustainability</span></span>
     </a>
   </div>
   ========================================================================== */

.credits { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 600px; }

.credit {
  display: flex; align-items: center; gap: 16px; min-width: 0; min-height: 68px;
  padding: 12px 20px 12px 18px; border-radius: 12px;
  background: var(--bg-card); border: 1px solid var(--border-color);
  color: var(--text-primary); text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.credit-mark { flex: none; display: block; width: auto; }
.credit-mark.m-ises { height: 34px; }
.credit-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-left: 16px; border-left: 1px solid var(--border-color); }
.credit-rel { font-size: 12.5px; line-height: 1.25; font-weight: 500; color: var(--gray-500); }
.credit-org { font-family: var(--font-display); font-size: 15px; line-height: 1.3; font-weight: 600; letter-spacing: -0.005em; color: var(--primary-700); }
.credit:hover { border-color: var(--primary-300); }
.credit:hover .credit-org { color: var(--primary-500); }
.credit:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 3px; }

/* On the night grounds. */
.credits-dark .credit { background: rgba(255, 255, 255, 0.035); border-color: rgba(255, 255, 255, 0.14); color: #fff; }
.credits-dark .credit-text { border-left-color: rgba(255, 255, 255, 0.16); }
.credits-dark .credit-rel { color: rgba(255, 255, 255, 0.62); }
.credits-dark .credit-org { color: #fff; }
.credits-dark .credit:hover { border-color: rgba(236, 198, 217, 0.5); background: rgba(255, 255, 255, 0.06); }
.credits-dark .credit:hover .credit-org { color: var(--primary-200); }
.credits-dark .credit:focus-visible { outline-color: var(--primary-200); }

@media (max-width: 640px) {
  .credit { min-height: 64px; padding: 11px 16px 11px 14px; gap: 14px; }
  .credit-text { padding-left: 14px; }
  .credit-org { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .credit { transition: none; }
}