/* ─────────────────────────────────────────────────────────────────────────
   PARTNERS — the /partners page and the partner rail it shares with the
   homepage.

   Loaded by both routes from body position (same pattern as emergency.css and
   merit-list.css). Nothing here is global.

   THE PLATE, and why it is light in both themes
   Every mark on this page belongs to someone else, and most of them are dark
   ink on transparency. On the dark theme's graphite canvas half would vanish.
   The common fixes both falsify a brand: `invert()` recolours it outright and
   `grayscale()` throws away the one thing a logo is for. So every mark sits on
   the same near-white plate in both themes — dimmed slightly in dark so it is
   a card rather than a light source.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  /* Pure white, not the warm paper this site uses everywhere else, and not
     tinted in dark either. Two of the nine marks — APIL and Codavatar — ship
     with a WHITE MATTE baked into the file rather than transparency, so any
     plate colour other than #FFF renders a visible rectangle around them. A
     warm plate looked better with six logos and worse with two, which is the
     wrong trade on a page whose whole job is to show partners properly. */
  --partner-plate:#FFFFFF;
  --partner-plate-brd:rgba(19,35,75,.12);
  --partner-plate-shadow:0 1px 2px rgba(19,35,75,.06);
}
html[data-theme="dark"]{
  /* Same white, a heavier border to seat it on graphite. Keeping the marks'
     own colours correct is worth the extra brightness here. */
  --partner-plate-brd:rgba(0,0,0,.4);
  --partner-plate-shadow:0 1px 3px rgba(0,0,0,.4);
}

/* ══ THE RAIL ═══════════════════════════════════════════════════════════ */

.partner-rail{
  padding-block:var(--sec-sm);
  overflow:hidden; /* the track is wider than the page by design */
}

.partner-rail__head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:clamp(24px,3vw,36px);
}
.partner-rail__lead{max-width:56ch}
.partner-rail__eyebrow{
  margin:0 0 10px;
  font-size:var(--ice-type-label-size);
  line-height:var(--ice-type-label-line);
  font-weight:var(--ice-type-label-weight);
  letter-spacing:var(--ice-type-label-track);
  text-transform:uppercase;
  color:var(--ice-color-text-accent);
}
.partner-rail__head h2{
  margin:0 0 var(--ice-space-3,12px);
  font-size:var(--ice-type-h2-size);
  line-height:var(--ice-type-h2-line);
  letter-spacing:var(--ice-type-h2-track);
  font-weight:500;
  text-wrap:balance;
}
.partner-rail__body{
  margin:0;
  font-size:var(--ice-type-body-size);
  line-height:var(--ice-type-body-line);
  color:var(--ice-color-text-muted);
  max-width:62ch;
}
.partner-rail__cta{flex:none}

/* ── The moving part ─────────────────────────────────────────────────────
   The viewport clips; the track holds TWO identical copies of the partner
   list and slides left by exactly one copy (-50%), so the reset frame is
   identical to the opening one. Both copies must stay in the same order. */
.partner-rail__viewport{
  overflow:hidden;
  /* fade the marks into the page edge rather than cutting them off */
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.partner-rail__track{
  display:flex;
  align-items:center;
  gap:clamp(12px,1.6vw,20px);
  margin:0;
  padding:4px 0; /* room for the plate shadow, which the viewport would clip */
  list-style:none;
  width:max-content;
  animation:partner-scroll 64s linear infinite;
}
.partner-rail__item{flex:none;margin:0}

/* Pause when someone is reading or tabbing through it. */
.partner-rail:hover .partner-rail__track,
.partner-rail:focus-within .partner-rail__track{animation-play-state:paused}

@keyframes partner-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ── The plate ───────────────────────────────────────────────────────────── */
.partner-plate{
  display:grid;
  place-items:center;
  width:clamp(150px,17vw,200px);
  height:clamp(76px,8vw,96px);
  padding:12px 20px;
  border-radius:var(--r-l);
  background:var(--partner-plate);
  border:1px solid var(--partner-plate-brd);
  box-shadow:var(--partner-plate-shadow);
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}

/* `min-width:0; min-height:0` is the whole reason these marks stay inside the
   plate. A grid item's default `min-height:auto` is its content-based minimum,
   and a minimum BEATS a maximum in CSS — so `max-height:100%` alone did not
   clamp anything and the IMAC mark rendered 112px tall inside a 92px plate.
   Same trap applies to `.partner-card__plate` below. Do not remove these. */
.partner-plate img,
.partner-card__plate img{
  display:block;
  min-width:0;
  min-height:0;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}
/* A partner with no logo file. Set in the site face on the same plate so the
   rail keeps its rhythm instead of showing a hole where a mark should be. */
.partner-plate__wordmark,
.partner-card__plate .partner-plate__wordmark{
  display:block;
  padding:0 2px;
  font-family:var(--sans);
  font-size:clamp(.9375rem,.88rem + .28vw,1.125rem);
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.2;
  text-align:center;
  text-wrap:balance;
  /* fixed against the plate, which is light in both themes */
  color:#13234B;
}
.partner-card__plate .partner-plate__wordmark{font-size:.9375rem}

.partner-plate:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(19,35,75,.14);
}
.partner-plate:focus-visible{
  outline:2px solid var(--ice-color-action);
  outline-offset:3px;
}

/* ── Reduced motion ──────────────────────────────────────────────────────
   Stop the animation and hand the row back to the reader as something they
   scroll themselves. Without the overflow swap the track would sit clipped
   with no way to reach the partners past the fold. */
@media (prefers-reduced-motion:reduce){
  .partner-rail__track{animation:none}
  .partner-rail__viewport{
    overflow-x:auto;
    scroll-behavior:auto;
    -webkit-overflow-scrolling:touch;
  }
  .partner-plate{transition:none}
  .partner-plate:hover{transform:none}
}

/* ══ THE PAGE ═══════════════════════════════════════════════════════════ */

.page-partners .partners-hero{
  padding-block:clamp(40px,6vw,72px) clamp(28px,4vw,44px);
}
.partners-hero__eyebrow{
  margin:0 0 12px;
  font-size:var(--ice-type-label-size);
  font-weight:var(--ice-type-label-weight);
  letter-spacing:var(--ice-type-label-track);
  text-transform:uppercase;
  color:var(--ice-color-text-accent);
}
.partners-hero h1{
  margin:0 0 18px;
  font-size:var(--ice-type-h1-size);
  line-height:var(--ice-type-h1-line);
  letter-spacing:var(--ice-type-h1-track);
  font-weight:400;
  text-wrap:balance;
  max-width:22ch;
}
.partners-hero__lede{
  margin:0;
  max-width:64ch;
  font-size:var(--ice-type-lede-size);
  line-height:var(--ice-type-lede-line);
  color:var(--ice-color-text-muted);
}

/* Three facts, above the fold, so the page states its own scope. */
.partners-facts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  gap:1px;
  margin-top:clamp(28px,4vw,44px);
  background:var(--hairline);
  border:1px solid var(--hairline);
  border-radius:var(--r-l);
  overflow:hidden;
}
.partners-fact{
  background:var(--ice-color-canvas);
  padding:20px 22px;
  min-width:0;
}
.partners-fact b{
  display:block;
  font-size:var(--ice-type-stat-size);
  line-height:var(--ice-type-stat-line);
  font-weight:500;
  color:var(--ice-color-text);
}
.partners-fact span{
  display:block;
  margin-top:6px;
  font-size:var(--t-meta);
  line-height:1.45;
  color:var(--ice-color-text-muted);
}

.partners-section{padding-block:var(--sec)}
.partners-section__head{max-width:70ch;margin-bottom:clamp(24px,3vw,36px)}
.partners-section__head h2{
  margin:0 0 12px;
  font-size:var(--ice-type-h2-size);
  line-height:var(--ice-type-h2-line);
  letter-spacing:var(--ice-type-h2-track);
  font-weight:500;
}
.partners-section__head p{
  margin:0;
  color:var(--ice-color-text-muted);
  font-size:var(--ice-type-body-size);
  line-height:var(--ice-type-body-line);
}

/* ── One partner ─────────────────────────────────────────────────────────
   Every track is minmax(0,1fr): an `auto` track lets a long partner name or a
   wide plate set the column width and push the card past a phone viewport
   while documentElement.scrollWidth still reads clean. */
.partners-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
  gap:clamp(16px,2vw,24px);
}
.partner-card{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:18px;
  padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--hairline);
  border-radius:var(--r-l);
  background:var(--ice-color-canvas);
  scroll-margin-top:24px; /* deep links from the rail land clear of the header */
}
.partner-card__top{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
}
.partner-card__plate{
  display:grid;
  place-items:center;
  flex:none;
  width:152px;
  height:76px;
  padding:12px 16px;
  border-radius:var(--r-m);
  background:var(--partner-plate);
  border:1px solid var(--partner-plate-brd);
}
.partner-card__id{min-width:0;flex:1 1 220px}
.partner-card__id h3{
  margin:0 0 6px;
  font-size:var(--ice-type-h4-size);
  line-height:var(--ice-type-h4-line);
  letter-spacing:var(--ice-type-h4-track);
  font-weight:600;
  overflow-wrap:anywhere;
}
.partner-card__sector{
  margin:0;
  font-size:var(--t-meta);
  color:var(--ice-color-text-muted);
}

.partner-card__date{
  margin:0;
  font-size:var(--t-meta);
  font-weight:600;
  letter-spacing:.02em;
  color:var(--ice-color-text-accent);
}
.partner-card__what{
  margin:0;
  font-size:var(--ice-type-body-size);
  line-height:var(--ice-type-body-line);
  color:var(--ice-color-text);
}
.partner-card__note{
  margin:0;
  padding-left:14px;
  border-left:2px solid var(--hairline);
  font-size:var(--t-meta);
  line-height:1.55;
  color:var(--ice-color-text-muted);
}

.partner-card__gets{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}
.partner-card__gets li{
  position:relative;
  padding-left:20px;
  font-size:var(--t-body);
  line-height:1.5;
}
.partner-card__gets li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--ice-color-accent);
}
.partner-card__gets-label{
  margin:0 0 2px;
  font-size:var(--ice-type-label-size);
  font-weight:var(--ice-type-label-weight);
  letter-spacing:var(--ice-type-label-track);
  text-transform:uppercase;
  color:var(--ice-color-text-muted);
}

.partner-card__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 16px;
  padding-top:16px;
  border-top:1px solid var(--hairline);
}
.partner-tag{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:99px;
  border:1px solid var(--hairline);
  font-size:var(--t-micro);
  font-weight:600;
  letter-spacing:.04em;
  color:var(--ice-color-text-muted);
  text-decoration:none;
}
a.partner-tag:hover{
  color:var(--ice-color-text);
  border-color:var(--ice-color-border-strong);
}
.partner-card__site{
  margin-left:auto;
  font-size:var(--t-meta);
  font-weight:600;
  color:var(--ice-color-text-action);
}

/* ── The one item that is NOT an MoU ─────────────────────────────────────
   Shaped deliberately unlike a partner card: no plate, no border box, a rule
   down the left instead. Someone skimming the page must not be able to read
   it as a tenth agreement. Do not restyle it to match the cards. */
.record-note{
  margin-top:clamp(32px,4vw,52px);
  padding-left:clamp(18px,2vw,26px);
  /* Same 2px hairline rule `.partner-card__note` uses for an aside, at this
     block's scale. It was a 3px accent rule until the design hook called it a
     side-tab, which was fair — the accent was doing emphasis work the date
     eyebrow and the missing card box already do. */
  border-left:2px solid var(--hairline);
  max-width:74ch;
}
.record-note__date{
  margin:0 0 8px;
  font-size:var(--ice-type-label-size);
  font-weight:var(--ice-type-label-weight);
  letter-spacing:var(--ice-type-label-track);
  text-transform:uppercase;
  color:var(--ice-color-text-accent);
}
.record-note h2{
  margin:0 0 14px;
  font-size:var(--ice-type-h4-size);
  line-height:var(--ice-type-h4-line);
  letter-spacing:var(--ice-type-h4-track);
  font-weight:600;
}
.record-note p:not(.record-note__date){
  margin:0 0 12px;
  font-size:var(--ice-type-body-size);
  line-height:var(--ice-type-body-line);
  color:var(--ice-color-text-muted);
}
.record-note p:last-child{margin-bottom:0}

/* ── The honesty note ────────────────────────────────────────────────────
   What an MoU is and is not. It is here because the alternative is letting a
   parent read "partnership" as "guaranteed job", which is the claim this page
   would otherwise be making by omission. */
.partners-caveat{
  margin-top:clamp(32px,4vw,52px);
  padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--hairline);
  border-radius:var(--r-l);
  background:var(--band-bg);
}
.partners-caveat h2{
  margin:0 0 10px;
  font-size:var(--ice-type-h4-size);
  line-height:var(--ice-type-h4-line);
  font-weight:600;
}
.partners-caveat p{
  margin:0 0 10px;
  max-width:72ch;
  font-size:var(--t-body);
  line-height:1.6;
  color:var(--ice-color-text-muted);
}
.partners-caveat p:last-child{margin-bottom:0}