/* Global */
.article {
  display: grid;
  grid-template-columns: var(--columns);
  grid-auto-rows: min-content;
  align-items: baseline;
  padding-bottom: 9rem;
  min-height: 100vh;
}
.article > * { grid-column: 3 / span 4; }
.article h1 {
  margin: 7.5rem 0 4.5rem;
  font: var(--title);
  color: var(--colourMain);
  letter-spacing: -.4rem;
  text-align: center;
}
.article .author { grid-column: 4/span 2; margin-bottom: 4.5rem }
.article .author, .article h2 { font: var(--heading) }
.article h2 { margin: 2.4rem 0 2.4rem var(--indent) }
.article:not(.article.info) h2 { font-weight: bold }
.article h3 { font: var(--main) }

.article a { transition: color .2s }
.article a:hover { color: var(--colourMain) }
.article a.submissionPDF  { 
  font: var(--main);
  margin-top: 2.4rem;
}

.article > hr {
  grid-column: 4/span 1;
  border-top: 2px solid black;
  margin: 3.6rem 0;
}

/* .article > p, .article blockquote { text-align: justify } */
.article > p, .grid p { font: var(--main) }
.article > p + p,
.issue-editorial p + p,
.article--interview dd + dd {
  text-indent: var(--halfIndent);
  margin-top: 1.3rem;
}

.article:not(.info) li:not(.article .footnotes li) {
  font: var(--main);
  margin-left: var(--halfIndent);
}

.article blockquote { margin: 2rem 0 2rem var(--halfIndent); font: var(--secondary) }
.article blockquote + blockquote { margin-top: 0; text-indent: var(--halfIndent) }
.article blockquote + figure { margin-top: 2.4rem }

.article figure { grid-column: 2 / span 4; margin-bottom: 2rem }
.article figure:not( h2 + figure, blockquote + figure ) { margin: 2rem 0 }
.article figure img { max-width: 100%; max-height: 90vh }
.article figcaption { margin-left: calc(var(--indent) + var(--halfIndent)); font: var(--caption) }
.article figure iframe { width:100%;height: 75vh }

.article--bio {
  margin-top: 6rem;
  padding-left: var(--halfIndent);
  font: var(--caption)!important;
}
.article--bio h2 {
  font: var(--caption);
  margin: 0 0 1.5rem var(--halfIndent);
}
.article--bio + .article--bio { margin-top: 3rem }

.article sup { font: var(--caption); line-height: 0!important }
.article .footnotes, .footnote-excerpt, .article .bibliography {
  font: var(--caption);
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.article .footnotes a, .article .bibliography a {
  word-break: break-all;
}
.article .footnotes, .article .bibliography { margin: 6rem 0 0 var(--halfIndent) }
.article .footnotes::before {  content: 'Notes' }
.article .bibliography::before { content: 'Bibliography' }
.article .footnotes::before, .article .bibliography::before { margin-left: var(--halfIndent) }
.article .footnotes hr, .article .bibliography hr { visibility: hidden; margin-bottom: 1.5rem }
.article .footnotes .footnote-backref {
  font-size: smaller;
  vertical-align: baseline;
  text-decoration: none!important;
  padding-top: 10px;
}

.article .footnotes li, .article .bibliography p {
  text-indent: calc((var(--halfIndent)/2) * -1);
  padding-left: calc(var(--halfIndent)/2);
}
/* .article .footnotes ol { list-style-position: inside } */
/* .article .footnotes p { display: inline } */

.footnote-excerpt {
  position: absolute;
  left: calc((100%/7)/2);
  width: calc((100% - 40px)/7);
  color: var(--colourMain);
  opacity: 0;
  transition: opacity .2s;
}
.footnote-excerpt.visible { opacity: 1 }

/* Interview */
.article--interview blockquote {
  margin-top: 2.6rem;
  margin-bottom: 1.3rem;
}
.article--interview > dl { font:var(--main) }
.article--interview > dl dd:not(:last-of-type) { margin-bottom: 1.3rem }
.article--interview dt {
  position: relative;
  font: var(--caption);
  line-height: 0rem;
  margin-top: 1.5rem;
  padding-right: 2ch;
  float: left;
  min-width: var(--halfIndent);
  text-transform: uppercase;
}
.article--interview blockquote dt { margin-top: 1.25rem }

/* Video Essay */
.article--video #player {
  grid-column: 1 / -1;
  margin-top: 1.5rem;
}

/* layout Essay */
.grid {
  margin: 0 var(--halfIndent);
  grid-column: 1/-1;
  display: grid;
  /* grid-template-columns: .5fr repeat(6, 1fr) .5fr; */
  grid-template-columns: repeat(6, 1fr);
  grid-auto-flow: column;
}
.grid + .grid, p + .grid { margin-top: 4.5rem }
.grid:last-of-type { margin-bottom: 4.5rem }
.grid figure { margin: 0!important; width: 100% }
.grid figcaption { margin-left: 0 }
.grid p + p { margin-top: 1.3rem }
.column { grid-column: span var(--span) }
.column:first-of-type figure { padding-right: var(--halfIndent) }
.column:last-of-type figure { padding-left: var(--halfIndent) }
.column:only-of-type figure { padding-left: 0!important; padding-right: 0!important; }
.blocks {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
}
.blocks .audio { width:100% }
.blocks #player {
  width: 100%;
}

/* Audio Essay */

/* About */
aside {
  position: fixed;
  margin-top: 7.5rem;
  font: var(--secondary);
}
aside ul { list-style-type: none }
aside a { text-decoration: none; color: black; transition: color .2s }
aside a.active, aside a:hover { color: var(--colourMain) }

.info { padding-top: 5.1rem }
.manifesto { display: grid }
.about h2:nth-child(3), .support h2:nth-child(3)  { padding-top: 1.2rem }
.about h2:not(:first-of-type), .support h2:not(:first-of-type) { margin-bottom: 1.2rem }
.about h3, .support h3 {  text-indent: var(--halfIndent) }
.about ul, .support ul { font: var(--main); list-style-type: none }
.about li div, .support li div {
  display: none;
  margin-bottom: 1.2rem;
}
.expand {
  display: inline;
  margin-left: var(--halfIndent);
  text-decoration: underline dotted;
  cursor: pointer;
  transition: color .2s;
}
.expand:hover { color: var(--colourMain) }
.contact li + li { margin-top: 1.2rem; }
.contact a { padding-left: var(--halfIndent) }
.imprint p+p,
.submissions p+p,
.support p+p {
  margin-top: 2.4rem;
  text-indent: 0;
}

@media (max-width: 830px) {
  body { 
    --indent: calc((100% / 10.4))!important;
    --halfIndent: calc(var(--indent) / 2)!important;
  }
  .grid {
    margin: 0 var(--indent);
    grid-column: 1/-1!important;
  }
  .grid figcaption { margin-left: 0!important }
}

@media (max-width: 630px) {
  .grid {
    margin: 0;
    grid-column: 1/-1!important;
    column-gap: 20px
  }
  .column:first-of-type figure, .column:last-of-type figure, .column:only-of-type figure { padding: 0 }
}