@import url('main.css');

 cite {
   font-style: italic;
   color: var(--text--accent);
 }

 hr {
   width: 60%;
   margin: var(--spacing-2) auto;
 }

 .citation--large {
   font-size: 1.2em;
 }

 .citation--medium {
   font-size: 1.1em;
 }

 .citation--link,
 .citation--link:visited {
   color: var(--text--accent);
 }

 .citation--link::after {
   border-bottom-color: var(--text--accent);
 }

 .essay__content p:first-of-type {
   padding-top: 2em;
 }

 .drop-cap::first-letter {
   font-style: normal;
   float: left;
   color: var(--background--primary);
   margin-top: -0.5em;
   padding: var(--spacing-3);
   background-image: url('../assets/shared/square.svg');
   background-repeat: no-repeat;
   background-position: center;
 }

 .drop-cap--title::first-letter {
   font-size: 5em;
   margin-right: var(--spacing-1);
 }

 .drop-cap--subtitle::first-letter {
   font-size: 2em;
   margin-right: var(--spacing-1);
 }

 .hero {
   align-self: center;
   max-height: 50%;
   aspect-ratio: 1 / 1;
 }

 .cutout {
   position: relative;
 }

 .cutout::before {
   content: '';
   position: absolute;
   inset: -2%;
   background-color: var(--shadow);
 }

 .cutout::after {
   content: '';
   position: absolute;
   inset: -2%;
   background-color: var(--light);
   opacity: 75%;
 }

 .hero__cutout::before {
   clip-path: polygon(80% 0%, 89% 0%, 100% 11%, 100% 20%, 98% 18%, 98% 12%, 89% 2%, 84% 2%, 80% 0%, 0% 0%, 0% 2%, 70% 2%, 98% 30%, 98% 100%, 100% 100%, 100% 30%, 70% 0%);
 }

 .hero__cutout::after {
   clip-path: polygon(84% 2%, 98% 16%, 100% 20%, 80% 0%, 84% 2%, 2% 2%, 2% 78%, 22% 98%, 98% 98%, 100% 100%, 21% 100%, 0% 79%, 0% 0%, 2% 2%);
 }

 .player__cutout::before {
   inset: -4px;
   clip-path: polygon(0px 0px, calc(100% - 12px) 0px, 100% 12px, 100% 100%, calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 12px, calc(100% - 12px)4px, 4px 4px, 0px 0px);
 }

 .player__cutout::after {
   inset: -4px;
   clip-path: polygon(0px 0px, 4px 4px, 4px calc(100% - 12px), 12px calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), 100% 100%, 12px 100%, 0px calc(100% - 12px), 0px 0px);
 }

 .hero img {
   position: relative;
   z-index: 1;
   /* move above paper texture */
   width: 100%;
   height: 100%;
   object-fit: cover;
   clip-path: polygon(100% 0%, 90% 0%, 100% 10%, 100% 15%, 85% 0%, 70% 0%, 100% 30%, 100% 100%, 20% 100%, 0% 80%, 0% 0%);
   opacity: 60%;
   display: flex;
   /* gets rid of weird gap between image and border */
 }

 .essay__title {
   text-align: center;
   margin-top: var(--spacing-3);
 }

 .player__container {
   --height: 42px;
   width: 650px;
   max-width: 90%;
   align-self: center;
   position: relative;
   height: var(--height);
   margin-bottom: var(--spacing-8);
 }

 .player__container:last-child {
   margin-top: var(--spacing-2);
   margin-bottom: var(--spacing-4);
 }

 .player {
   width: 100%;
   height: var(--height);
   overflow: hidden;
   clip-path: polygon(0px 0px, calc(100% - 8px) 0px, 100% 8px, 100% 100%, 8px 100%, 0px calc(100% - 8px), 0px 0px);
 }

 .quote {
   width: 80%;
   margin-left: auto;
   margin-right: auto;
   font-size: .9em;
   color: var(--text--accent);
 }

 .link--underlined--footnote::after {
   bottom: 0.5em;
 }

 .footnote {
   font-size: 0.85em;
   width: 95%;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: var(--spacing-4);
 }