:root {
  --blue: #111111;
  --orange: #ffb500;
  --lime: #fff3cc;
  --school-primary: #111111;
  --school-accent: #ffb500;
  --school-light: #fff3cc;
}

/* Institution identity: layered campus graphics built around the supplied badge. */
.institution-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 240px;
  padding: 32px max(24px, calc((100vw - 1200px) / 2));
  background: #000;
  color: #fff;
  border-bottom: 6px solid var(--school-accent);
}
.institution-banner::before,
.institution-banner::after {
  content: none;
}
.campus-banner-copy {
  max-width: 760px;
  text-align: left;
  position: relative;
  z-index: 1;
}
.campus-banner-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 800;
  color: #ffffffdb;
  text-transform: uppercase;
}
.campus-banner-kicker::before {
  content: '';
  display: block;
  width: 28px;
  height: 3px;
  background: var(--school-accent);
}
.campus-banner-copy h2 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(25px, 4vw, 52px);
  line-height: 1.04;
  letter-spacing: -1.6px;
  margin: 14px 0 12px;
  color: #fff;
  text-transform: uppercase;
  max-width: 800px;
}
.campus-banner-tagline {
  font-size: 13px;
  line-height: 1.5;
  color: #ffffffdb;
  margin: 0;
}
.campus-banner-badge {
  flex: 0 0 auto;
  width: 260px;
  height: auto;
  aspect-ratio: 1536 / 970;
  object-fit: contain;
  max-width: none !important;
  max-height: none !important;
  display: block;
}
.campus-banner-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 22px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #ffffffbf;
}
.campus-banner-footer span {
  border-left: 2px solid var(--school-accent);
  padding-left: 8px;
}
.demo-sso {
  min-height: calc(100svh - 240px);
  background: var(--paper);
  padding: 36px 20px 48px;
}
.sso-card {
  border-color: var(--school-primary);
  box-shadow: 9px 9px 0 var(--school-accent);
}
.sso-card .section-kicker {
  color: var(--school-primary);
}
.sso-demo-label {
  background: var(--school-light);
  color: var(--school-primary);
  border-left: 4px solid var(--school-accent);
}
.sso-card button[type='submit'] {
  background: var(--school-primary);
  color: #fff;
}
.page-banner {
  background: var(--school-primary);
  color: #fff;
  border-bottom-color: var(--school-accent);
}
.page-banner h1,
.page-banner h2 {
  color: #fff;
}
.page-banner .section-kicker {
  color: var(--school-light);
}
.page-banner p {
  color: #ffffffd9;
}
@media (max-width: 600px) {
  .institution-banner {
    min-height: 205px;
    padding: 24px 18px;
    gap: 12px;
    align-items: center;
  }
  .campus-banner-badge {
    width: 108px;
    height: auto;
  }
  .campus-banner-copy h2 {
    font-size: 25px;
    letter-spacing: -1px;
    margin: 12px 0 10px;
    overflow-wrap: anywhere;
  }
  .campus-banner-kicker {
    font-size: 8px;
    letter-spacing: 1px;
    line-height: 1.5;
  }
  .campus-banner-tagline {
    font-size: 11px;
  }
  .campus-banner-footer {
    margin-top: 16px;
    gap: 8px;
    font-size: 8px;
    letter-spacing: 0.5px;
  }
  .institution-banner::after {
    font-size: 60px;
    bottom: -5px;
    letter-spacing: -3px;
  }
  .demo-sso {
    min-height: calc(100svh - 205px);
    padding: 28px 18px 48px;
  }
}

/* Keep both words readable on the school-color prize banner. */
#drawing .prize-banner h1,
#drawing .prize-banner h1 i {
  color: #fff;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 0;
}

.footer-release {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  margin-left: auto;
  text-align: right;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.footer-release .footer-version {
  font-weight: 700;
  letter-spacing: 1px;
}
@media (max-width: 600px) {
  footer .footer-release {
    align-self: flex-end;
    text-align: right;
  }
}