/* Site footer, after the brochure's "Timeline & contact" page: the
   title, the construction timeline on the left, the CBRE contacts in a
   panel on the right, and the credits along the bottom on bordeaux.

   It is at least one screen tall and sticks to the bottom of the
   viewport underneath the page (main sits above it, see
   pages/home.css), so scrolling to the end uncovers it from behind the
   last section. Its content spans the viewport, a gutter from each
   edge, like the header. */

.site-footer {
  --theme-footer-rule: color-mix(in srgb, #fff 22%, transparent);

  position: sticky;
  bottom: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  padding-inline: var(--theme-gutter);
  overflow: clip;
  background: var(--theme-color-inverse-background);
  color: var(--theme-color-inverse-muted);
  font-size: var(--theme-text-md);
  line-height: 1.6;
}

/* The full footer is at least one screen tall (the 404 page only has
   the credits row). */
.site-footer:has(.site-footer__main) {
  min-height: 100svh;
}

/* The sticky header stays over the footer too, so the top padding
   starts below it. */
.site-footer__main {
  flex: 1 0 auto;
  padding-block: calc(var(--theme-header-height) + var(--theme-space-lg)) var(--theme-space-lg);
}

.site-footer__title {
  margin-bottom: var(--theme-space-lg);
  font-size: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  font-weight: var(--theme-font-weight-light);
  line-height: 1.05;
  color: var(--theme-color-inverse-text);
  text-wrap: balance;
}

.site-footer__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--theme-space-lg) clamp(32px, 8vw, 160px);
  align-items: start;
}

/* The brochure's tracked labels, used for these two only. */
.site-footer__label {
  margin-bottom: 12px;
  font-size: 0.6875rem;
  font-weight: var(--theme-font-weight-bold);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--theme-color-inverse-text);
}

.site-footer__timeline {
  max-width: 34rem;
}

.site-footer__year {
  margin-bottom: var(--theme-space-xs);
  font-size: clamp(5rem, 3rem + 9vw, 10rem);
  font-weight: 100;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--theme-color-inverse-text);
  font-variant-numeric: lining-nums;
}

.site-footer__subtitle {
  margin-top: 20px;
  font-size: var(--theme-text-md);
  font-weight: var(--theme-font-weight-bold);
  line-height: 1.4;
  color: var(--theme-color-inverse-text);
}

.site-footer__contact {
  padding: clamp(24px, 3vw, 48px);
  background: color-mix(in srgb, #fff 8%, var(--theme-color-inverse-background));
}

.site-footer__cbre {
  display: block;
  width: clamp(7rem, 10vw, 9rem);
  height: auto;
  margin-block: 12px var(--theme-space-sm);
}

.site-footer__people {
  list-style: none;
}

.site-footer__person {
  display: grid;
  gap: 2px;
  padding-block: 20px;
  border-top: 1px solid var(--theme-footer-rule);
}

.site-footer__name {
  font-size: var(--theme-text-lg);
  font-weight: var(--theme-font-weight-light);
  color: var(--theme-color-inverse-text);
}

.site-footer__email {
  justify-self: start;
  font-size: var(--theme-text-sm);
  color: var(--theme-color-inverse-muted);
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}

.site-footer__email:hover {
  color: var(--theme-color-inverse-text);
}

.site-footer__email:focus-visible {
  outline: 2px solid var(--theme-color-secondary);
  outline-offset: 3px;
}

/* Credits */

.site-footer__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px var(--theme-space-sm);
  align-items: end;
  padding-block: var(--theme-space-sm) var(--theme-space-md);
  font-size: var(--theme-text-sm);
}

.site-footer__credits {
  color: var(--theme-color-inverse-text);
}

.site-footer__disclaimer {
  grid-column: 1;
  max-width: 40rem;
  font-size: 0.75rem;
  font-style: italic;
}

.site-footer__campus {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 7rem;
  height: auto;
}

/* Faint vertical bars rising from the bottom edge, as on the brochure. */
.site-footer__bars {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: min(22rem, 40vw);
  height: clamp(4rem, 10vh, 7rem);
  translate: -50% 0;
  background: repeating-linear-gradient(
    to right,
    color-mix(in srgb, #fff 7%, transparent) 0 6px,
    transparent 6px 18px
  );
  pointer-events: none;
}

@media (width <= 800px) {
  .site-footer__columns {
    grid-template-columns: 1fr;
  }
}

@media (width <= 640px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
  }

  .site-footer__campus {
    grid-column: 1;
    grid-row: auto;
    margin-top: var(--theme-space-xs);
  }
}