:root {
  /* Site Max Width Override */
  --site-max: 1182px;
  --radius: 12px;

  --sans: "alternate-gothic-no-2-d", "AvenirNextCondensed-Regular", "Arial Narrow", sans-serif;
  --serif: "shift", "Georgia", serif;

  --site-bkgd: rgba(235,232,230,1); /* #ebe8e6 */
  --main-txt: rgba(8,7,8,1); /* #080708 BLACK */
  --keyline: rgba(8,7,8,1); /* #080708 BLACK */

  --secondary-txt: rgba(83,83,83,1); /* #080708 BLACK 65% */
  --subhead-txt: rgba(156,156,156,1);

  --link-active: rgba(8,7,8,1); /* #080708 BLACK */
  --link-hover: rgba(220,48,60,1); /* #dc303c RED */
  --hover-bkgd: rgba(8,7,8,.05); /* #080708 BLACK 5% */

  --frmt-panel: rgba(251,204,79,1); /* #fbcc4f YELLOW */
  --frmt-interview: rgba(67,251,109,1); /* #436dfb GREEN */
  --frmt-lecture: rgba(67,109,251,1); /* #dc303c BLUE */
  --frmt-soundbite: rgba(220,48,60,1); /* #dc303c RED */

  --focus: rgba(67,109,251,1); /* #dc303c BLUE */

  --about-bkgd: rgba(8,7,8,.1); /* #080708 BLACK */
}

/* CSS Custom Properties - Default Theme */
/* End of Custom Properties */

/* ----------------------------------------------------------------------------
   DEFAULTS */

html {
  font-size: 62.5%; /* Reset to 10px baseline */
}

* {box-sizing: border-box;}

body {
  background-color: var(--site-bkgd);
  color: var(--main-txt);
  font-family: var(--serif);
  font-weight: 300;
  font-style: normal;
  font-size: 1.6rem;
  line-height: 2.4rem;
  margin: 0 auto;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--main-txt);
  cursor: pointer;
  font-weight: 700;
}

a:focus,
button:focus {
  border-radius: var(--radius);
  outline: 3px solid var(--focus);
}

a:link,
a:visited {
  color: var(--main-txt);
  text-decoration: none;
}

a:hover {color: var(--link-hover);}
a:active {color: var(--link-active);}

a,
a h3,
button,
button[type="submit"],
button[type="submit"] svg,
.collection-item {
  transition: all 0.3s ease-in-out 0s;
}

p {
  margin: 0;
  margin-bottom: 2.4rem;
}

p.info-block {
  font-size: 2.8rem;
  line-height: 3.6rem;
}

p.small-print {
  font-size: 1.4rem;
  line-height: 2.4rem;
  margin-top: 3.6rem;
}

ul, ol, dl {
  margin-bottom: 2.4rem;
}

b {
  font-weight: 700;
  font-style: normal;
}

i {
  font-weight: 300;
  font-style: italic;
}

cite {font-style: normal;}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

h1, h2, h3 {
  font-family: var(--sans);
  font-weight: 400;
  font-style: normal;
  font-size: 5.6rem;
  line-height: 4.8rem;
}

h1.main-title {
  font-size: 7.2rem;
  line-height: 6.4rem;
  text-align: left;
  max-width: 100%;
}

h2.main-subtitle {
  color: var(--subhead-txt);
  font-size: 3.2rem;
  letter-spacing: 1px;
  line-height: 3.6rem;
  text-align: left;
  text-transform: uppercase;
  max-width: 100%;
}

dl, dt, dd {
  margin: 0;
  padding: 0;
}

dt {
  font-weight: 700;
}

figure {margin: 0;}

figcaption {
  color: var(--secondary-txt);
  font-size: 1.4rem;
  font-style: italic;
  line-height: 2rem;
  margin: 1.2rem 0 0 0;
}

img,
video,
.cover {
  border-radius: var(--radius);
}

video {object-fit: cover;}

img,
video {
  height: auto;
  margin: 0;
  max-width: 100%;
  vertical-align: top;
}

.media-player,
.media-player .player {
  display: block;
  max-width: 100%;
  position: relative;
}

.skip-link {
  background: var(--link-hover);
  color: var(--site-bkgd);
  display: block;
  margin: 0;
  padding: .8rem;
  width: 100%;
  top: -6.4rem;
  position: absolute;
  z-index: 4;
  transform: translateY(-100%);
  transition: transform: 0.3s;
}

.skip-link:hover {color: var(--site-bkgd);}

/* Show skipnav link when keyboard focus is active */
.skip-link:focus {
  border-radius: 0;
  top: 0;
  transform: translateY(0%);
}

/* ----------------------------------------------------------------------------
   BUTTONS */

a.button {
  border-color: var(--main-txt);
  border-radius: var(--radius);
  color: var(--main-txt);
  display: inline-block;
  font-size: 1.6rem;
  margin-top: 2.4rem;
  padding: .8rem 1.2rem .6rem 1.2rem;
}

a.button:link,
a.button:visited {
  border: 2px solid var(--main-txt);
  color: var(--main-txt);
}

a.button:hover {
  border-color: var(--link-hover);
  color: var(--link-hover);
}

a.button:active {
  border-color: var(--link-active);
  color: var(--link-active);
}

/* ----------------------------------------------------------------------------
   HEADER */

header.mast {
  background: var(--site-bkgd);
  font-size: 1.4rem;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 1.2rem 0;
}

@media screen and (min-width: 40em) {
  header.mast {
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 2.4rem;
  }
}

.logo {
  color: var(--main-txt);
  display: block;
  margin: 0;
  width: 280px;
  height: 60px;
  margin: 0;
}

.logo span {
  height: 0;
  position: absolute;
  text-indent: -9999em;
}

/* ----------------------------------------------------------------------------
   NAVIGATION */

ul.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav[role="navigation"] ul.nav {
  font-family: var(--sans);
  font-size: 2rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  gap: 1.8rem;
  margin-top: .8rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 280px;
}

@media screen and (min-width: 30em) {
  nav[role="navigation"] ul.nav {
    max-width: 340px;
  }
}

@media screen and (min-width: 40em) {
  nav[role="navigation"] ul.nav {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    gap: 2.4rem;
    max-width: 320px;
    margin-left: 0;
    margin-right: 0;
  }
}

@media screen and (min-width: 44em) {
  nav[role="navigation"] ul.nav {
    max-width: 100%;
  }
}

@media screen and (min-width: 60em) {
  nav[role="navigation"] ul.nav {
    font-size: 2.4rem;
  }
}

nav[role="navigation"] ul.nav a {
  font-style: normal;
  font-weight: 400;
}

nav[role="navigation"] ul.nav a:link,
nav[role="navigation"] ul.nav a:visited {color: var(--main-txt);}
nav[role="navigation"] ul.nav a:hover {color: var(--link-hover);}
nav[role="navigation"] ul.nav a:active {color: var(--link-active);}

nav[role="navigation"] ul.nav a.active:link,
nav[role="navigation"] ul.nav a.active:visited {
  border-bottom: 2px solid var(--main-txt);
}

nav[role="navigation"] ul.nav a.active:hover {border-bottom: 2px solid var(--link-hover);}
nav[role="navigation"] ul.nav a.active:active {border-bottom: 2px solid var(--link-active);}

/* ----------------------------------------------------------------------------
   CORE STRUCTURE */

main[role="main"] {
  margin: 0;
  padding: 0;
  position: relative;
  max-width: 100%;
}

.container,
.policy {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 6.4rem 0;
  position: relative;
}

.policy {grid-column: 2 / span 10;}

.container-flex {display: flex;}

.container-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: baseline;
  justify-items: start;
  gap: 2.4rem;
}

/* ----------------------------------------------------------------------------
   FOOTER */

footer[role="contentinfo"] {
  color: var(--secondary-txt);
  font-size: 1.4rem;
  margin: 0 auto;
  padding: 0 0 2.4rem 0;
  max-width: var(--site-max);
}

.footer-info {grid-column: 2 / span 10;} /* 10 cols */
.footer-nav {grid-column: 2 / span 10;} /* 10 cols */

@media screen and (min-width: 40em) {
  .footer-info {grid-column: 2 / span 4;} /* 4 cols */
  .footer-nav {grid-column: 7 / span 4;} /* 4 cols */
}

.footer-nav ul.nav li {
  display: block;
  margin: 0;
  padding: 0;
}

footer[role="contentinfo"] a:link,
footer[role="contentinfo"] a:visited {color: var(--secondary-txt);}
footer[role="contentinfo"] a:hover {color: var(--link-hover);}
footer[role="contentinfo"] a:active {color: var(--link-active);}

/* ----------------------------------------------------------------------------
   INTRODUCTION */

.intro {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  text-align: center;
  padding: 0 2rem;
}

.intro .container-grid {
  margin: 0 auto;
  align-items: start;
}

.intro h1.main-title,
.intro h2.main-subtitle {
  grid-column: 2 / span 10;
  margin-bottom: 4.8rem;
}

.intro h1.main-title {
  margin-bottom: 1.6rem;
}

.intro figure.media-player {grid-column: 1 / span 12;}

.intro .video-snippets {
  grid-column: 1 / span 12;
  /* Set new grid context for this sub-group */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2.4rem;

}

.intro .video-snippets a {display: block;}
.intro .video-snippets a:nth-child(1) {grid-column: 1 / span 6;}
.intro .video-snippets a:nth-child(2) {grid-column: 7 / span 6;}

@media screen and (min-width: 40em) {
  .intro h1.main-title  {
    font-size: 9.6rem;
    line-height: 8.8rem;
    grid-column: 2 / span 9;
  }

  .intro figure.media-player {
    grid-column: 1 / span 8;
  }

  .intro .video-snippets {
    grid-column: 9 / span 4;
    grid-template-columns: repeat(3, 1fr);
  }

  .intro .video-snippets a:nth-child(1) {
    margin-top: 6.4rem;
    grid-column: 1 / span 3;
  }

  .intro .video-snippets a:nth-child(2) {
    grid-column: 2 / span 2;
  }
}

.intro figure.media-player figcaption {text-align: left;}

/* ----------------------------------------------------------------------------
   COLLECTION INFO */

.collection-info {background: var(--about-bkgd);}

.collection-info .container-flex {
  text-align: center;
  flex-flow: column wrap;
  padding: 4.8rem 2rem;
  max-width: var(--site-max);
}

.collection-info h2 {margin-bottom: 4.8rem;}

.collection-info p.info-block {
  font-size: 2rem;
  line-height: 2.8rem;
}

.collection-info .small-print {
  margin: 0 auto;
  max-width: 85%;
}

.collection-info .container-flex div {
  margin: 0 auto;
  max-width: 48em;
}

@media screen and (min-width: 40em) {
  .collection-info .container-flex {
    padding: 6.4rem 0;
  }

  .collection-info p.info-block {
    font-size: 2.8rem;
    line-height: 3.6rem;
  }

  .collection-info .small-print {
    margin: 0 auto;
    max-width: 90%;
  }
}

/* ----------------------------------------------------------------------------
   ABOUT MM */

.about-mm {padding: 6.4rem 0;}

.about-mm figure.portrait {
  grid-column: 2 / span 10; /* 10 cols */
  margin: 0;
}

.about-mm h2 {margin-bottom: 2.4rem;}

.about-mm .info-block {
  grid-column: 2 / span 10; /* 10 cols */
}

.about-mm .info-block p {max-width: 100%;}

.about-mm figure.portrait figcaption {
  margin: 1.6rem auto 0 auto;
}

@media screen and (min-width: 40em) {
  .about-mm {
    align-items: start;
  }

  .about-mm figure.portrait {
    grid-column: 2 / span 3; /* 4 cols */
    margin-top: 0;
  }

  .about-mm .info-block {
    grid-column: 5 / span 7; /* 5 cols */
    padding-top: 0;
  }
}

@media screen and (min-width: 60em) {
  .about-mm figure.portrait {
    grid-column: 2 / span 4; /* 4 cols */
    margin-top: 0;
  }

  .about-mm .info-block {
    grid-column: 6 / span 6; /* 5 cols */
    padding-top: 0;
  }
}

/* ----------------------------------------------------------------------------
   VIDEO CATEGORIES */

.collection-items {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	gap: 0;
  margin-left: 0;
  margin-right: 0;
}

h2.collection-items {
  border-bottom: 1px solid var(--keyline);
  margin: 0 2.4rem;
  padding: 2.4rem 0;
}

.collection-item {
  padding: 2.4rem;
}

.collection-item a {
  color: var(--main-txt);
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  align-content: flex-start;
  width: 100%;
  font-weight: 300;
}

.collection-item:hover {background-color: var(--hover-bkgd);}

.collection-item a {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: start;
  gap: 1.6rem;
}

.collection-item a:link h3,
.collection-item a:visited h3 {color: var(--main-txt);}
.collection-item a:hover h3 {color: var(--link-hover);}
.collection-item a:active h3 {color: var(--link-active);}

.collection-item figure,
.item-info {
  max-width: 50%;
  position: relative;
}

.collection-item figcaption {
  width: 0;
  height: 0;
  overflow: hidden;
  border-top: 8.66px solid transparent;
  border-bottom: 8.66px solid transparent;
  border-left: 13px solid #fff;
  position: absolute;
  bottom: 16px;
  left: 16px;
}

.collection-item h3 {
  font-size: 2.4rem;
  line-height: 2.8rem;
  margin: 0 0 .8rem 0;
}

.collection-item .source {line-height: 2rem;}
.collection-item .show {display: block;}

@media screen and (min-width: 40em) {
  .collection-items {
  	display: flex;
  	flex-flow: row wrap;
  	justify-content: flex-start;
  	align-items: flex-start;
  	align-content: flex-start;
  	row-gap: 2.4rem;
  }

  .collection-item {
    border: none;
    max-width: 50%;
  }

  .collection-item a {
    flex-flow: column wrap;
    justify-content: flex-start;
    gap: 0;
  }

  .collection-item:hover {background-color: var(--site-bkgd);}

  .collection-item figure,
  .item-info {
    max-width: 100%;
  }

  .collection-item h3 {
    font-size: 2.8rem;
    line-height: 2.8rem;
    margin: 1.2rem 0;
  }

  .collection-item .source {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
}

@media screen and (min-width: 50em) {
  .collection-item {
    border: none;
    max-width: 33.333%;
  }
}

@media screen and (min-width: 60em) {
  .collection-item {
    border: none;
    max-width: 25%;
  }
}

/* ----------------------------------------------------------------------------
   COLOPHON */

#pg-credits .video-snippets {
  grid-column: 1 / span 12;
  /* Set new grid context for this sub-group */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(4, minmax(40px,auto));
  column-gap: 2.4rem;
  row-gap: 1.2rem;
}

#pg-credits h1.main-title,
#pg-policy h1.main-title {
  grid-column: 2 / span 10;
  text-align: center;
  width: 100%;
}

#pg-credits .video-snippets a {
  display: block;
  margin: 0;
}

#pg-credits .video-snippets a {
  grid-column: 1 / span 6;
}

#pg-credits .video-snippets a:nth-child(1) {
  grid-column: 1 / span 12;
  grid-row: 1 / span 2;
}

#pg-credits .video-snippets a:nth-child(2) {
  grid-column: 1 / span 4;
  grid-row: 3 / span 1;
}

#pg-credits .video-snippets a:nth-child(3) {
  grid-column: 5 / span 4;
  grid-row: 3 / span 2;
}

#pg-credits .video-snippets a:nth-child(4) {
  grid-column: 9 / span 4;
  grid-row: 3 / span 2;
}

@media screen and (min-width: 40em) {
  #pg-credits .video-snippets {grid-template-rows: repeat(4, minmax(40px,auto));}

  #pg-credits .video-snippets a:nth-child(1) {
    grid-column: 1 / span 6;
    grid-row: 1 / span 3;
  }
  #pg-credits .video-snippets a:nth-child(2) {
    grid-column: 7 / span 3;
    grid-row: 1 / span 2;
  }
  #pg-credits .video-snippets a:nth-child(3) {
    grid-column: 10 / span 3;
    grid-row: 2 / span 2;
  }
  #pg-credits .video-snippets a:nth-child(4) {
    grid-column: 8 / span 2;
    grid-row: 3 / span 1;
  }
}

.producers-info {
  flex-flow: column wrap;
  padding: 0 2rem;
  text-align: center;
}

.producers-info p {margin: 0 auto 4.8rem auto;}

.producers-info h2 {
  font-size: 2.8rem;
  line-height: 3.2rem;
  letter-spacing: .25px;
}

.producers {
  display: flex;
  flex-flow: row wrap;
}

.producer {
  padding: 0 2rem;
  width: 50%;
}

@media screen and (min-width: 40em) {
  .producer {width: 33.333%;}
}

#colophon {padding-top: 0;}
#colophon p {
  grid-column: 2 / span 10;
}

/* ----------------------------------------------------------------------------
   VIDEO DETAILS */

.video-full {
  background-color: var(--main-txt);
  padding: 0 2rem;
}

.video-full-details {margin-top: 1.6rem;}

.video-full .container-flex {
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
}

#video-details {
  padding-top: 0;
  padding-bottom: 2.4rem;
  flex-flow: column wrap;
  justify-content: center;
}

#video-details .meta-info {grid-column: 2 / span 10;}
#video-details #video-source {grid-column: 2 / span 10;}
#video-details .speakers {grid-column: 2 / span 10;}
#video-details .related-videos {grid-column: 2 / span 10;}

.meta-info p {margin-bottom: 0;}

h1.video-title {
  font-size: 3.2rem;
  line-height: 3.6rem;
}

h2.meta-title {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.4rem;
}

.speakers ul,
.related-videos ul,
.speakers li,
.related-videos li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.speakers li,
.related-videos li {margin-bottom: .8rem;}

.related-videos a {font-weight: 300;}
.related-videos a:after {
  content: ' →';
}

.background-info {
  color: var(--secondary-txt);
  display: block;
  font-style: italic;
}

#transcription ul,
#concepts ul,
#transcription li,
#concepts li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#transcription ol li {
  list-style-type: decimal;
}

#transcription .container-grid,
#concepts .container-grid {
  border-top: 1px solid var(--keyline);
  padding-top: 4.8rem;
  row-gap: .8rem;
}

#transcription .container-grid .meta-title,
#concepts .container-grid .meta-title,
#transcription .container-grid ul,
#concepts .container-grid ul {
  grid-column: 2 / span 10;
}

#transcription .name {font-weight: 700;}
#transcription .name:after {content: ':';}

.timestamp {
  -moz-font-feature-settings: "lnum";
  -webkit-font-feature-settings: "lnum";
  font-feature-settings: "lnum";
}

.timestamp:before {content: '↩︎ ';}

@media screen and (min-width: 40em) {
  .video-full-details {
    margin-top: 3.2rem;
    padding: 0 2rem;
  }

  #video-details .meta-info {grid-column: 1 / span 3;}
  #video-details #video-source {grid-column: 4 / span 3;}
  #video-details .speakers {grid-column: 7 / span 3;}
  #video-details .related-videos {grid-column: 10 / span 3;}
}

/* ----------------------------------------------------------------------------
   VIDEO CAPTIONS */

video::cue {
  opacity: 1;
  font-size: 18px;
  line-height: 20px;
}



.linktooltip {
  background-color: var(--main-txt);
  color: var(--site-bkgd);
  display: inline-block;
  font-size: 1.4rem;
  margin-top: .8rem;
  margin-left: 2.2rem;
  padding: 2px 9px;
  border-radius: calc(var(--radius)/2);
}

.copylink-container {
  margin-top: 2.2rem;
}

.copylink-container svg {
  height: 20px;
  width: 20px;
  margin-right: 2px;
  vertical-align: middle;
}

.copylink-container a:link svg,
.copylink-container a:visited svg {
  fill: var(--main-txt);
}

/* ----------------------------------------------------------------------------
   SEARCH */

form {
  display: flex;
  flex-flow: row nowrap;
  margin-bottom: 1.6rem;
  padding-top: 4.8rem;
  position: relative;
  width: 100%;
}

#search-results h1 {
  margin-left: auto;
  margin-right: auto;
}

#search-results .container-flex {
  flex-flow: column wrap;
  width: 100%;
}

input[type="search"],
button[type="submit"] {
  background: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

input[type="search"] {
  border: none;
  border-bottom: 2px solid var(--keyline);
  color: var(--main-txt);
  display: block;
  font-size: 6.4rem;
  line-height: 7.2rem;
  margin-right: 2.4rem;
  width: 100%;
}

button[type="submit"] {
  border-color: var(--main-txt);
  border-radius: var(--radius);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 7.2rem;
  padding: 0 1.2rem;
}

button[type="submit"] svg {
  color: var(--main-txt);
  fill: var(--main-txt);
  height: 50px;
  width: 50px;
  vertical-align: middle;
}

button[type="submit"]:hover {
  border: 2px solid var(--link-hover);
  color: var(--link-hover);
}

button[type="submit"]:hover svg {fill: var(--link-hover);}

button[type="submit"]:active {
  border: 2px solid var(--link-active);
  color: var(--link-active);
}

button[type="submit"]:active svg {fill: var(--link-active);}

#pagination {
  border-top: 1px solid var(--keyline);
  flex-flow: row nowrap;
  justify-content: center;
  margin: 0 2rem;
  padding-top: 1.6rem;
}

#pagination span {
  display: inline-block;
  padding: .8rem 1.2rem;
}

.inactive {
  color: var(--secondary-txt);
}