/* Black Lives Matter in Higher Education. Fonts, colors, imagery and layout carried over from the 2021 site. */
@font-face { font-family: "Bowlby One"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/bowlby-one.woff2") format("woff2"); }
@font-face { font-family: "Londrina Solid"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/londrina-solid.woff2") format("woff2"); }

:root {
  --display: "Bowlby One", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Londrina Solid", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gray: #737373;
}

.nav { position: fixed; top: 0; right: 0; z-index: 10; background: #000; padding: 5px 20px; font-family: var(--body); text-transform: uppercase; font-size: calc(1.1rem + 1vw); line-height: 1.4; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.2em; }
.nav a { color: #fff; text-decoration: none; }
.nav a:hover { text-decoration: underline; }

.hero { height: 75vh; min-height: 320px; background-image: url("/assets/img/intro.png"), url("/assets/img/hero.jpg"); background-size: contain, cover; background-position: center, center; background-repeat: no-repeat; }

.longform { font-family: var(--body); text-transform: uppercase; font-size: calc(1.1rem + 1vw); line-height: 1.4; }
.longform > * + * { margin-top: 1rem; }
.longform em { font-style: italic; }
.longform ul, .longform ol { margin-left: 1.5rem; }
.longform--gray, .longform--gray a { color: var(--gray); }
.longform--small { font-size: 1rem; }
.longform--offset { max-width: 83%; margin-left: auto; padding-block: 3rem 2rem; }
.longform--wide { max-width: 83%; padding-block: 1rem 2rem; }

.blm-title { display: inline-block; margin: 3rem 0 1rem; padding: 0 50px; font-family: var(--display); text-transform: uppercase; font-size: 9vw; line-height: 1; background-position: center; background-size: cover; }
.blm-title span { display: inline-block; }
.blm-title__interviews, .blm-title__bibliography { background-image: url("/assets/img/shape-red.png"); }
.blm-title__timeline { background-image: url("/assets/img/shape-green.png"); }

.interview { display: grid; gap: 1.5rem; margin-bottom: 4rem; }
.interview__video { position: relative; aspect-ratio: 16 / 9; background: #000; }
.interview__video iframe, .interview__video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.interview__text h3 { margin-bottom: .5rem; }
.interview .button { font-size: 1rem; margin-top: .5rem; }
@media (min-width: 768px) {
  .interview { width: 83%; }
  .interview--right { margin-left: auto; }
}

.timeline { position: relative; padding-block: 1rem; background: url("/assets/img/timeline-bar.gif") repeat-y center / 7px; }
.timeline__year { text-align: center; margin: 2rem 0 1rem; }
.timeline__year span { display: inline-block; background: #fff; padding: 10px 20px; font-family: var(--body); text-transform: uppercase; font-size: calc(1.5rem + 3vw); }
.timeline-entry { margin-bottom: 1.5rem; }
.timeline-entry__card { background: #fff; padding: 1rem; }
.timeline-entry__card::after { content: ""; display: block; clear: both; }
.timeline-entry__card img { float: right; max-width: 45%; padding: 0 0 10px 10px; }
.timeline-entry--local .timeline-entry__card img { float: left; padding: 0 10px 10px 0; }
.timeline-entry__card h3 { margin-bottom: .5rem; color: #212529; }
@media (min-width: 576px) {
  .timeline-entry { width: 66%; }
  .timeline-entry--national { margin-left: auto; }
}
@media (min-width: 768px) {
  .timeline-entry { width: 41.6%; }
  .timeline-entry--national { margin-left: 58.4%; }
}

.bibliography { padding-bottom: 3rem; }

.footer { background: #000; color: #fff; padding-block: 2rem 4rem; font-family: var(--body); text-transform: uppercase; }
.footer a { color: #fff; }
.footer__credits { max-width: 60ch; }
.footer__meta { margin-top: 1.5rem; color: #bbb; font-size: .9rem; }