/*----------------------------------------------*\
    BLOCK - Image
	==============

	@package substance

\*----------------------------------------------*/
/*----------------------------------------------*\
    COMPONENTS
	==========

	@package substance

\*----------------------------------------------*/
/*
 *
 * ANCHOR Variables
 * /
------------------------------------------------*/
/* Breakpoints */
/* Responsive type multipliers */
/* Type sizes */
/* See https://type-scale.com */
/* Minor third from here */
/* Major third from here */
/* Max-widths */
/*
 *
 * ANCHOR Mixins
 * /
------------------------------------------------*/
@media screen and (min-width: 34rem) {
  .image--span-text {
    padding: 0 var(--page-padding);
  }
}
.image--span-content {
  grid-column: 2/4 !important; /* overwrite default in pages */
}
@media screen and (min-width: 34rem) {
  .image--span-content {
    padding: 0 var(--page-padding);
  }
}
.image--span-full {
  grid-column: 1/5 !important; /* overwrite default in pages */
  padding: 0;
}
@media screen and (min-width: 44rem) {
  .image--span-full.image--single {
    display: grid;
    grid-template-columns: subgrid;
  }
  .image--span-full.image--single .image__image {
    display: contents;
  }
  .image--span-full.image--single img {
    grid-column: 1/5;
  }
  .image--span-full.image--single .image__caption {
    grid-column: 2/3;
    margin-top: 0;
  }
}
@media screen and (min-width: 44rem) {
  .image--widths-equal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--size-300);
  }
}
@media screen and (min-width: 44rem) {
  .image--widths-emphasize-left {
    display: grid;
    grid-template-columns: 5fr 3fr;
    gap: var(--size-300);
  }
}
@media screen and (min-width: 44rem) {
  .image--widths-emphasize-right {
    display: grid;
    grid-template-columns: 3fr 5fr;
    gap: var(--size-300);
  }
}
.image--extra-space-above {
  margin-top: var(--vertical-article-space);
}
.image--extra-space-below {
  margin-bottom: var(--vertical-article-space);
}
.image__image img {
  display: block;
  margin-top: var(--vertical-article-space);
  width: 100%;
}
@media screen and (min-width: 44rem) {
  .block:not(.image) + .image .image__image img {
    margin-top: 0;
  }
}
.block:not(.image) + .image .image__image:first-child img { /* The first image in an image block following any block (expect another image block) */
  margin-top: 0;
}
.image:has(.image__image--has-caption) + .block:not(.image) { /* Every block (expect image block) following an image block with captions */
  margin-top: var(--vertical-article-space);
}
@media screen and (min-width: 44rem) {
  .image--multiple + .block:not(.image) { /* Every block (expect image block) following an image block with more than one image*/
    margin-top: var(--vertical-article-space);
  }
  .image--multiple {
    margin-top: var(--vertical-article-space); /* Every image block that has two images */
  }
  .image--multiple + .image--multiple { /* Image block that immediately follows another Image block */
    margin-top: 0;
  }
}
.image__caption {
  margin-top: var(--size-200);
  padding: 0 var(--page-padding);
}
@media screen and (min-width: 34rem) {
  .image__caption {
    padding: 0;
  }
}
.image--span-full .image__caption {
  padding: 0 var(--page-padding);
}
.image__caption p {
  font-size: var(--size-300);
  margin-top: var(--size-200);
  max-width: 60ch;
  line-height: 1.4;
}
/*----------------------------------------------*\
    BLOCK - Featured Articles
	=========================

	@package substance

\*----------------------------------------------*/
/*----------------------------------------------*\
    COMPONENTS
	==========

	@package substance

\*----------------------------------------------*/
/*
 *
 * ANCHOR Variables
 * /
------------------------------------------------*/
/* Breakpoints */
/* Responsive type multipliers */
/* Type sizes */
/* See https://type-scale.com */
/* Minor third from here */
/* Major third from here */
/* Max-widths */
/*
 *
 * ANCHOR Mixins
 * /
------------------------------------------------*/
.featured-articles {
  margin: var(--vertical-space) 0;
  padding: 0 var(--page-padding);
}
.featured-articles__wrapper {
  max-width: var(--max-width-text);
  margin: 0 auto;
  line-height: 1.35;
}
.featured-articles__header {
  margin: var(--size-700) 0;
  color: var(--color-accent);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--size-300);
  margin-bottom: var(--size-600);
}
.featured-articles__article {
  padding: var(--size-700) var(--size-500);
  background-color: var(--color-bg-accent);
  border: solid 1px var(--color-text);
  margin-bottom: var(--size-900);
  position: relative;
}
@media screen and (min-width: 66rem) {
  .featured-articles__article {
    padding-right: var(--size-900);
    margin-bottom: var(--size-700);
  }
}
@media screen and (min-width: 34rem) {
  .featured-articles__article--has-image {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--size-500);
  }
}
.featured-articles__image {
  margin-bottom: var(--size-100);
  max-width: 10em;
}
.featured-articles__image a {
  text-decoration: none;
  display: block;
}
.featured-articles__title-author {
  display: inline-block;
}
.featured-articles__title-author a {
  text-decoration: none;
  display: block;
}
.featured-articles__title {
  display: block;
  font-size: var(--size-500);
  font-weight: 600;
}
.featured-articles__author {
  display: block;
  font-size: var(--size-500);
  font-weight: 400;
  margin-bottom: var(--size-200);
}
.featured-articles__summary {
  font-size: var(--size-400);
  font-family: var(--font-text);
  max-width: 65ch;
}
.featured-articles__summary p {
  margin-bottom: var(--size-100);
}
.featured-articles__button {
  margin-top: var(--size-400);
}
.featured-articles__button a {
  padding: var(--size-200);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-block;
  background-color: var(--color-accent);
  color: var(--color-text-reversed);
  font-size: var(--size-300);
}
.featured-articles__button a:focus {
  outline: 0;
}
.featured-articles__button a:focus-visible {
  outline: 3px solid var(--color-bg-accent-shade);
}
.featured-articles__button a:hover, .featured-articles__button a:focus-visible {
  color: var(--color-text-reversed-hover);
  background-color: var(--color-accent-glare);
}
.featured-articles__location {
  font-size: var(--size-300);
  width: 5.5em;
  height: 5.5em;
  display: grid;
  place-content: center;
  border-radius: 50%;
  padding: var(--size-200);
  overflow: hidden;
  color: var(--color-accent);
  background: #D9D9D9;
  border: dashed var(--color-accent) 1px;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.1;
  text-decoration: none;
  position: absolute;
  right: 1em;
  top: -2.75em;
  -webkit-transform: rotate(15deg);
      -ms-transform: rotate(15deg);
          transform: rotate(15deg);
  -webkit-transition: -webkit-transform 3.5s ease;
  transition: -webkit-transform 3.5s ease;
  transition: transform 3.5s ease;
  transition: transform 3.5s ease, -webkit-transform 3.5s ease;
}
@media screen and (min-width: 66rem) {
  .featured-articles__location {
    font-size: var(--size-500);
    right: -4em;
    top: 1em;
    border-width: 2px;
  }
}
.featured-articles__location:hover {
  -webkit-transition-duration: 8s;
          transition-duration: 8s;
  -webkit-transform: rotate(375deg);
      -ms-transform: rotate(375deg);
          transform: rotate(375deg);
}
.featured-articles__location:focus {
  outline: 0;
}
.featured-articles__location:focus-visible {
  border-style: solid;
  border-width: 3px;
}
/*----------------------------------------------*\
    BLOCK - Featured Issue
	======================

	@package substance

\*----------------------------------------------*/
/*----------------------------------------------*\
    COMPONENTS
	==========

	@package substance

\*----------------------------------------------*/
/*
 *
 * ANCHOR Variables
 * /
------------------------------------------------*/
/* Breakpoints */
/* Responsive type multipliers */
/* Type sizes */
/* See https://type-scale.com */
/* Minor third from here */
/* Major third from here */
/* Max-widths */
/*
 *
 * ANCHOR Mixins
 * /
------------------------------------------------*/
.featured-issue {
  max-width: var(--max-width-text);
  margin: var(--vertical-space) auto;
  padding: 0 var(--page-padding);
}
.featured-issue__wrapper {
  display: grid;
  gap: var(--size-500);
}
@media screen and (min-width: 34rem) {
  .featured-issue__wrapper {
    grid-template-columns: 1fr 2fr;
  }
}
@media screen and (min-width: 54rem) {
  .featured-issue__wrapper {
    gap: var(--size-800);
  }
}
.featured-issue__column:last-child {
  margin-top: var(--size-50);
}
@media screen and (min-width: 44rem) {
  .featured-issue__column:last-child {
    margin-top: var(--size-500);
  }
}
.featured-issue__header {
  font-size: var(--size-500);
  font-weight: 500;
}
.featured-issue__title {
  font-size: var(--size-700);
  font-weight: 600;
}
.featured-issue__title a {
  text-decoration: none;
}
.featured-issue__title a:hover {
  color: var(--color-accent);
}
.featured-issue__publication-date {
  font-size: var(--size-300);
  font-weight: 600;
  margin-top: var(--size-50);
  margin-bottom: var(--size-500);
  text-transform: uppercase;
}
.featured-issue__issue-name {
  font-size: var(--size-500);
  line-height: 1.3;
  font-weight: 600;
}
.featured-issue__featured-contributors {
  font-size: var(--size-500);
  line-height: 1.3;
  font-weight: 400;
}
.featured-issue__button {
  margin-top: var(--size-400);
}
@media screen and (min-width: 66rem) {
  .featured-issue__button {
    margin-top: var(--size-800);
  }
}
.featured-issue__button a {
  padding: var(--size-200);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-block;
  background-color: var(--color-accent);
  color: var(--color-text-reversed);
  font-size: var(--size-400);
}
.featured-issue__button a:focus {
  outline: 0;
}
.featured-issue__button a:focus-visible {
  outline: 3px solid var(--color-bg-accent-shade);
}
.featured-issue__button a:hover, .featured-issue__button a:focus-visible {
  color: var(--color-text-reversed-hover);
  background-color: var(--color-accent-glare);
}
/*----------------------------------------------*\
    BLOCK - Body Text
	=================

	@package substance

\*----------------------------------------------*/
/*----------------------------------------------*\
    COMPONENTS
	==========

	@package substance

\*----------------------------------------------*/
/*
 *
 * ANCHOR Variables
 * /
------------------------------------------------*/
/* Breakpoints */
/* Responsive type multipliers */
/* Type sizes */
/* See https://type-scale.com */
/* Minor third from here */
/* Major third from here */
/* Max-widths */
/*
 *
 * ANCHOR Mixins
 * /
------------------------------------------------*/
.code {
  padding: 0 var(--page-padding);
}
/*----------------------------------------------*\
    BLOCK - Video
	=============

	@package substance

\*----------------------------------------------*/
/*----------------------------------------------*\
    COMPONENTS
	==========

	@package substance

\*----------------------------------------------*/
/*
 *
 * ANCHOR Variables
 * /
------------------------------------------------*/
/* Breakpoints */
/* Responsive type multipliers */
/* Type sizes */
/* See https://type-scale.com */
/* Minor third from here */
/* Major third from here */
/* Max-widths */
/*
 *
 * ANCHOR Mixins
 * /
------------------------------------------------*/
.video {
  padding: 0 var(--page-padding);
}
.page .video { /* if used on pages (vs article) */
  max-width: var(--max-width-text);
  margin: 0 auto;
  padding: 0;
}
.page .video__wrapper {
  /* the following counteracts weird things happening with .article-text-block__wrapper */
}
@media screen and (min-width: 24rem) {
  .page .video__wrapper {
    padding-left: var(--size-300);
  }
}
@media screen and (min-width: 34rem) {
  .page .video__wrapper {
    padding-left: var(--size-500);
  }
}
/*
Theme Name: substance
Author: Yay Brigade
Author URI: http://substance.com/
Description: Theme for substance.org
Version: 1.0
*/
/*----------------------------------------------*\
    RESET
	=====

	@package substance

\*----------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, font, ins, kbd, q, s, samp,
small, strike, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  border: 0;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}

html {
  overflow-y: scroll; /* Keeps page centred in all browsers regardless of content height */
  -webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
  -ms-text-size-adjust: 100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
}

* { /* apply a natural box layout model to all elements; see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
  -webkit-box-sizing: border-box; /* Not needed for modern webkit but still used by Blackberry Browser 7.0; see http://caniuse.com/#search=box-sizing */ /* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */
  box-sizing: border-box;
}

body {
  background: #fff;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
  display: block;
}

figure {
  margin: 0;
}

ul {
  list-style: none;
}

table { /* tables still need 'cellspacing="0"' in the markup */
  border-collapse: separate;
  border-spacing: 0;
}

caption, th, td {
  font-weight: normal;
  text-align: left;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
}

blockquote, q {
  quotes: "" "";
}

a {
  color: inherit;
}

a:focus-visible {
  outline: thin dotted;
}

a:hover,
a:active { /* Improves readability when focused and also mouse hovered in all browsers people.opera.com/patrickl/experiments/keyboard/test */
  outline: 0;
}

img {
  border: 0 none;
  height: auto;
  /* width: 100%; */
  max-width: 100%;
}

a img {
  border: 0;
}

button {
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  font-size: 1em;
}

abbr {
  text-decoration: none;
}

/* Text meant only for screen readers */
.screen-reader-text {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
          box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000; /* Above WP toolbar */
}

/* Webkit specific */
input, textarea {
  -webkit-appearance: none;
  border-radius: 0;
}
/*----------------------------------------------*\
    BLOCKS - Shared Styles
	======================

	@package substance

\*----------------------------------------------*/
/*----------------------------------------------*\
    COMPONENTS
	==========

	@package substance

\*----------------------------------------------*/
/*
 *
 * ANCHOR Variables
 * /
------------------------------------------------*/
/* Breakpoints */
/* Responsive type multipliers */
/* Type sizes */
/* See https://type-scale.com */
/* Minor third from here */
/* Major third from here */
/* Max-widths */
/*
 *
 * ANCHOR Mixins
 * /
------------------------------------------------*/
/*
 *
 * 1./
------------------------------------------------*/
/*----------------------------------------------*\
    VARIABLES
	=========

	@package substance

\*----------------------------------------------*/
/*----------------------------------------------*\
    COMPONENTS
	==========

	@package substance

\*----------------------------------------------*/
/*
 *
 * ANCHOR Variables
 * /
------------------------------------------------*/
/* Breakpoints */
/* Responsive type multipliers */
/* Type sizes */
/* See https://type-scale.com */
/* Minor third from here */
/* Major third from here */
/* Max-widths */
/*
 *
 * ANCHOR Mixins
 * /
------------------------------------------------*/
/*
 *
 * ANCHOR 1./ Responsive Text Sizes 
------------------------------------------------*/
:root {
  /* 50 */ /* Note: 50 is simply half of 100 for very small adjustments */
  --size-50: 0.29em;
  /* 100 */
  --size-100: 0.579em;
  /* 200 */
  --size-200: 0.694em;
  /* 300 */
  --size-300: 0.833em;
  /* 400 */
  --size-400: 1em;
  /* 500 */
  --size-500: 1.25em;
  /* 600 */
  --size-600: 1.563em;
  /* 700 */
  --size-700: 1.953em;
  /* 800 */
  --size-800: 2.441em;
  /* 900 */
  --size-900: 3.052em;
}
@media screen and (min-width: 24rem) {
  :root {
    --size-50: 0.3045em;
  }
}
@media screen and (min-width: 34rem) {
  :root {
    --size-50: 0.319em;
  }
}
@media screen and (min-width: 44rem) {
  :root {
    --size-50: 0.3335em;
  }
}
@media screen and (min-width: 54rem) {
  :root {
    --size-50: 0.348em;
  }
}
@media screen and (min-width: 66rem) {
  :root {
    --size-50: 0.36975em;
  }
}
@media screen and (min-width: 78rem) {
  :root {
    --size-50: 0.3915em;
  }
}
@media screen and (min-width: 24rem) {
  :root {
    --size-100: 0.60795em;
  }
}
@media screen and (min-width: 34rem) {
  :root {
    --size-100: 0.6369em;
  }
}
@media screen and (min-width: 44rem) {
  :root {
    --size-100: 0.66585em;
  }
}
@media screen and (min-width: 54rem) {
  :root {
    --size-100: 0.6948em;
  }
}
@media screen and (min-width: 66rem) {
  :root {
    --size-100: 0.738225em;
  }
}
@media screen and (min-width: 78rem) {
  :root {
    --size-100: 0.78165em;
  }
}
@media screen and (min-width: 24rem) {
  :root {
    --size-200: 0.7287em;
  }
}
@media screen and (min-width: 34rem) {
  :root {
    --size-200: 0.7634em;
  }
}
@media screen and (min-width: 44rem) {
  :root {
    --size-200: 0.7981em;
  }
}
@media screen and (min-width: 54rem) {
  :root {
    --size-200: 0.8328em;
  }
}
@media screen and (min-width: 66rem) {
  :root {
    --size-200: 0.88485em;
  }
}
@media screen and (min-width: 78rem) {
  :root {
    --size-200: 0.9369em;
  }
}
@media screen and (min-width: 24rem) {
  :root {
    --size-300: 0.87465em;
  }
}
@media screen and (min-width: 34rem) {
  :root {
    --size-300: 0.9163em;
  }
}
@media screen and (min-width: 44rem) {
  :root {
    --size-300: 0.95795em;
  }
}
@media screen and (min-width: 54rem) {
  :root {
    --size-300: 0.9996em;
  }
}
@media screen and (min-width: 66rem) {
  :root {
    --size-300: 1.062075em;
  }
}
@media screen and (min-width: 78rem) {
  :root {
    --size-300: 1.12455em;
  }
}
@media screen and (min-width: 24rem) {
  :root {
    --size-400: 1.05em;
  }
}
@media screen and (min-width: 34rem) {
  :root {
    --size-400: 1.1em;
  }
}
@media screen and (min-width: 44rem) {
  :root {
    --size-400: 1.15em;
  }
}
@media screen and (min-width: 54rem) {
  :root {
    --size-400: 1.2em;
  }
}
@media screen and (min-width: 66rem) {
  :root {
    --size-400: 1.275em;
  }
}
@media screen and (min-width: 78rem) {
  :root {
    --size-400: 1.35em;
  }
}
@media screen and (min-width: 24rem) {
  :root {
    --size-500: 1.3125em;
  }
}
@media screen and (min-width: 34rem) {
  :root {
    --size-500: 1.375em;
  }
}
@media screen and (min-width: 44rem) {
  :root {
    --size-500: 1.4375em;
  }
}
@media screen and (min-width: 54rem) {
  :root {
    --size-500: 1.5em;
  }
}
@media screen and (min-width: 66rem) {
  :root {
    --size-500: 1.59375em;
  }
}
@media screen and (min-width: 78rem) {
  :root {
    --size-500: 1.6875em;
  }
}
@media screen and (min-width: 24rem) {
  :root {
    --size-600: 1.64115em;
  }
}
@media screen and (min-width: 34rem) {
  :root {
    --size-600: 1.7193em;
  }
}
@media screen and (min-width: 44rem) {
  :root {
    --size-600: 1.79745em;
  }
}
@media screen and (min-width: 54rem) {
  :root {
    --size-600: 1.8756em;
  }
}
@media screen and (min-width: 66rem) {
  :root {
    --size-600: 1.992825em;
  }
}
@media screen and (min-width: 78rem) {
  :root {
    --size-600: 2.11005em;
  }
}
@media screen and (min-width: 24rem) {
  :root {
    --size-700: 2.05065em;
  }
}
@media screen and (min-width: 34rem) {
  :root {
    --size-700: 2.1483em;
  }
}
@media screen and (min-width: 44rem) {
  :root {
    --size-700: 2.24595em;
  }
}
@media screen and (min-width: 54rem) {
  :root {
    --size-700: 2.3436em;
  }
}
@media screen and (min-width: 66rem) {
  :root {
    --size-700: 2.490075em;
  }
}
@media screen and (min-width: 78rem) {
  :root {
    --size-700: 2.63655em;
  }
}
@media screen and (min-width: 24rem) {
  :root {
    --size-800: 2.56305em;
  }
}
@media screen and (min-width: 34rem) {
  :root {
    --size-800: 2.6851em;
  }
}
@media screen and (min-width: 44rem) {
  :root {
    --size-800: 2.80715em;
  }
}
@media screen and (min-width: 54rem) {
  :root {
    --size-800: 2.9292em;
  }
}
@media screen and (min-width: 66rem) {
  :root {
    --size-800: 3.112275em;
  }
}
@media screen and (min-width: 78rem) {
  :root {
    --size-800: 3.29535em;
  }
}
@media screen and (min-width: 24rem) {
  :root {
    --size-900: 3.2046em;
  }
}
@media screen and (min-width: 34rem) {
  :root {
    --size-900: 3.3572em;
  }
}
@media screen and (min-width: 44rem) {
  :root {
    --size-900: 3.5098em;
  }
}
@media screen and (min-width: 54rem) {
  :root {
    --size-900: 3.6624em;
  }
}
@media screen and (min-width: 66rem) {
  :root {
    --size-900: 3.8913em;
  }
}
@media screen and (min-width: 78rem) {
  :root {
    --size-900: 4.1202em;
  }
}

/*
 *
 * ANCHOR 2./ Colors
------------------------------------------------*/
:root {
  --color-bg: #E9E6D3;
  --color-bg-accent: #CCD0BA;
  --color-bg-accent-shade: #B2B5A0;
  --color-bg-accent-glare: #fbfbf2;
  --color-bg-reversed: #4A3C76;
  --color-text: #19161a;
  --color-text-hover: #5e4c9a;
  --color-text-reversed: #E9E6D3;
  --color-text-reversed-hover: #fff;
  --color-accent: #4A3C76;
  --color-accent-glare: #5e4c9a;
}

/*
 *
 * ANCHOR 3./ Fonts
------------------------------------------------*/
:root {
  --font-ui: Inter, sans-serif;
  --font-text: Newsreader, sans-serif;
}

/*
 *
 * ANCHOR 4./ Page Padding
------------------------------------------------*/
:root {
  --page-padding: var(--size-400);
  --vertical-space: var(--size-900); /* vertical space between elements */
  --vertical-article-space: var(--size-700); /* vertical space between elements on article page */
}
@media screen and (min-width: 34rem) {
  :root {
    --page-padding: calc(2 * var(--size-400));
  }
}

/*
 *
 * ANCHOR 5./ Max Widths
------------------------------------------------*/
:root {
  /* max-width-content */
  --max-width-content: 62em;
}
@media screen and (min-width: 24rem) {
  :root {
    --max-width-content: 65.1em;
  }
}
@media screen and (min-width: 34rem) {
  :root {
    --max-width-content: 68.2em;
  }
}
@media screen and (min-width: 44rem) {
  :root {
    --max-width-content: 71.3em;
  }
}
@media screen and (min-width: 54rem) {
  :root {
    --max-width-content: 74.4em;
  }
}
@media screen and (min-width: 66rem) {
  :root {
    --max-width-content: 79.05em;
  }
}
@media screen and (min-width: 78rem) {
  :root {
    --max-width-content: 83.7em;
  }
}

:root {
  /* max-width-text */
  --max-width-text: 46em;
}
@media screen and (min-width: 24rem) {
  :root {
    --max-width-text: 48.3em;
  }
}
@media screen and (min-width: 34rem) {
  :root {
    --max-width-text: 50.6em;
  }
}
@media screen and (min-width: 44rem) {
  :root {
    --max-width-text: 52.9em;
  }
}
@media screen and (min-width: 54rem) {
  :root {
    --max-width-text: 55.2em;
  }
}
@media screen and (min-width: 66rem) {
  :root {
    --max-width-text: 58.65em;
  }
}
@media screen and (min-width: 78rem) {
  :root {
    --max-width-text: 62.1em;
  }
}
/*----------------------------------------------*\
    GLOBAL
	======

	@package substance

\*----------------------------------------------*/
/*----------------------------------------------*\
    COMPONENTS
	==========

	@package substance

\*----------------------------------------------*/
/*
 *
 * ANCHOR Variables
 * /
------------------------------------------------*/
/* Breakpoints */
/* Responsive type multipliers */
/* Type sizes */
/* See https://type-scale.com */
/* Minor third from here */
/* Major third from here */
/* Max-widths */
/*
 *
 * ANCHOR Mixins
 * /
------------------------------------------------*/
/*
 *
 * ANCHOR 1./ Fonts (@font-face)
------------------------------------------------*/
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/themes/substance/css/build/../../fonts/Inter-Regular.woff2?v=3.19) format("woff2"), url(/wp-content/themes/substance/css/build/../../fonts/Inter-Regular.woff?v=3.19) format("woff");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/themes/substance/css/build/../../fonts/Inter-Italic.woff2?v=3.19) format("woff2"), url(/wp-content/themes/substance/css/build/../../fonts/Inter-Italic.woff?v=3.19) format("woff");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/wp-content/themes/substance/css/build/../../fonts/Inter-Medium.woff2?v=3.19) format("woff2"), url(/wp-content/themes/substance/css/build/../../fonts/Inter-Medium.woff?v=3.19) format("woff");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/wp-content/themes/substance/css/build/../../fonts/Inter-MediumItalic.woff2?v=3.19) format("woff2"), url(/wp-content/themes/substance/css/build/../../fonts/Inter-MediumItalic.woff?v=3.19) format("woff");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/themes/substance/css/build/../../fonts/Inter-SemiBold.woff2?v=3.19) format("woff2"), url(/wp-content/themes/substance/css/build/../../fonts/Inter-SemiBold.woff?v=3.19) format("woff");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/themes/substance/css/build/../../fonts/Inter-SemiBoldItalic.woff2?v=3.19) format("woff2"), url(/wp-content/themes/substance/css/build/../../fonts/Inter-SemiBoldItalic.woff?v=3.19) format("woff");
}
/*
 *
 * ANCHOR 2./ Global
------------------------------------------------*/
body {
  font-family: var(--font-ui);
  background-color: var(--color-bg);
  color: var(--color-text);
}

::-moz-selection {
  background-color: var(--color-text-hover);
  color: var(--color-text-reversed);
}

::selection {
  background-color: var(--color-text-hover);
  color: var(--color-text-reversed);
}

/*
 *
 * ANCHOR 3./ Buttons
------------------------------------------------*/
.button-primary {
  padding: var(--size-200);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-block;
  background-color: var(--color-accent);
  color: var(--color-text-reversed);
}
.button-primary:focus {
  outline: 0;
}
.button-primary:focus-visible {
  outline: 3px solid var(--color-bg-accent-shade);
}
.button-primary:hover, .button-primary:focus-visible {
  color: var(--color-text-reversed-hover);
  background-color: var(--color-accent-glare);
}

.button-secondary {
  padding: var(--size-200);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-block;
  background-color: var(--color-text-reversed);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}
.button-secondary:focus {
  outline: 0;
}
.button-secondary:focus-visible {
  outline: 3px solid var(--color-bg-accent-shade);
}
.button-secondary:hover, .button-secondary:focus-visible {
  border-color: var(--color-accent-glare);
  color: var(--color-accent-glare);
  background-color: var(--color-text-reversed-hover);
}
/*----------------------------------------------*\
    HEADER
	======

	@package substance

\*----------------------------------------------*/
/*----------------------------------------------*\
    COMPONENTS
	==========

	@package substance

\*----------------------------------------------*/
/*
 *
 * ANCHOR Variables
 * /
------------------------------------------------*/
/* Breakpoints */
/* Responsive type multipliers */
/* Type sizes */
/* See https://type-scale.com */
/* Minor third from here */
/* Major third from here */
/* Max-widths */
/*
 *
 * ANCHOR Mixins
 * /
------------------------------------------------*/
/*
 *
 * 1./ Header
------------------------------------------------*/
.site-header {
  display: grid;
  grid-template-columns: 1fr auto;
}
@media screen and (min-width: 54rem) {
  .site-header {
    grid-template-columns: 1fr auto auto;
    border-bottom: solid 1px var(--color-text);
    position: relative;
  }
}
.site-header__logo {
  grid-column: 1/3;
  padding: var(--size-500) calc(var(--page-padding) - 3px); /* logo looks better aligned slightly bigger */
  display: grid;
  place-content: center start;
}
@media screen and (min-width: 54rem) {
  .site-header__logo {
    grid-column: 1;
    padding: var(--size-800) var(--page-padding);
  }
}
.site-header__logo a {
  display: block;
}
.site-header__logo a:focus-visible {
  outline: 4px solid var(--color-bg-accent);
  outline-offset: 10px;
}
.site-header__logo a:focus-visible path {
  fill: var(--color-accent-glare);
}
.site-header__logo svg {
  max-width: 100%;
  height: auto;
  display: block;
}
.site-header__nav {
  align-self: stretch;
  background-color: var(--color-bg-accent);
  border-top: solid 1px var(--color-text);
  border-bottom: solid 1px var(--color-text);
  display: grid;
  place-content: stretch;
}
@media print {
  .site-header__nav {
    display: none;
  }
}
@media screen and (min-width: 54rem) {
  .site-header__nav {
    border-top: 0;
    border-bottom: 0;
    border-right: solid 1px var(--color-text);
    border-left: solid 1px var(--color-text);
  }
}
.site-header__nav button { /* Menu toggle bottom */
  padding: var(--size-500) var(--page-padding);
  text-align: left;
  display: grid;
  grid-template-columns: auto 1fr;
  -ms-flex-line-pack: center;
      align-content: center;
  gap: var(--size-100);
  font-family: var(--font-ui);
  color: var(--color-text);
}
@media screen and (min-width: 54rem) {
  .site-header__nav button {
    display: none;
  }
}
.site-header__nav button:hover, .site-header__nav button:focus-visible {
  color: var(--color-text-hover);
}
.site-header__nav button:focus-visible {
  outline: 1px dotted var(--color-accent);
  outline-offset: -5px;
}
.site-header__nav span {
  font-size: var(--size-400);
}
.site-header__search {
  border-top: solid 1px var(--color-text);
  border-bottom: solid 1px var(--color-text);
  background-color: var(--color-accent);
  display: grid;
  place-content: stretch;
  position: relative;
}
@media screen and (min-width: 54rem) {
  .site-header__search {
    width: 9em;
    border-top: 0;
    border-bottom: 0;
  }
}
@media print {
  .site-header__search {
    display: none;
  }
}
.site-header__search button { /* Search toggle button */
  padding: var(--size-200) var(--page-padding);
  color: var(--color-text-reversed);
}
@media screen and (min-width: 54rem) {
  .site-header__search button {
    padding: 0;
    display: grid;
    place-content: center;
  }
}
.site-header__search button:hover, .site-header__search button:focus-visible {
  color: var(--color-text-reversed-hover);
}
.site-header__search button:focus-visible {
  background-color: var(--color-accent-glare);
  outline: 3px solid var(--color-bg);
  outline-offset: -3px;
}
.site-header__search button:active {
  background-color: var(--color-accent);
  outline: 0;
}
.search-toggled-on .site-header__search button {
  background-color: var(--color-accent);
  outline: 0;
}
.site-header__search svg {
  max-width: var(--size-800);
  height: auto;
}
.site-header__search-container {
  grid-column: 1/3;
  position: relative;
  top: -1px;
  padding: var(--size-500) var(--page-padding);
  background-color: var(--color-accent);
  color: var(--color-text-reversed);
  display: none;
}
@media screen and (min-width: 54rem) {
  .site-header__search-container {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    -ms-flex-line-pack: center;
        align-content: center;
  }
}
.search-toggled-on .site-header__search-container {
  display: block;
}
@media screen and (min-width: 54rem) {
  .search-toggled-on .site-header__search-container {
    display: grid;
  }
}

.search-toggle__search-icon {
  display: block;
}
.search-toggled-on .search-toggle__search-icon {
  display: none;
}
.search-toggle__close-icon {
  display: none;
}
.search-toggled-on .search-toggle__close-icon {
  display: block;
}

.site-search__wrapper {
  text-align: center;
}
@media screen and (min-width: 54rem) {
  .site-search__wrapper {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--size-500);
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
  }
}
.site-search__field {
  width: 100%;
  margin-bottom: var(--size-600);
  background-color: transparent;
  border: 0;
  color: var(--color-text-reversed-hover);
  font-size: var(--size-500);
  font-family: var(--font-ui);
  border-bottom: 1px solid var(--color-bg-accent);
  padding-bottom: var(--size-50);
  outline: none;
}
@media screen and (min-width: 54rem) {
  .site-search__field {
    margin-bottom: 0;
  }
}
.site-search__submit {
  background-color: transparent;
  border: 1px solid currentColor;
  color: var(--color-text-reversed);
  font-family: var(--font-ui);
  font-weight: 600;
  text-transform: uppercase;
  padding: var(--size-200) var(--size-300);
  cursor: pointer;
}
.site-search__submit:hover, .site-search__submit:focus-visible {
  color: var(--color-text-reversed-hover);
  outline: none;
}
.site-search__submit:focus-visible {
  background-color: var(--color-accent-glare);
  outline: 1px solid currentColor;
}

/*
 *
 * 2./ Navigation
------------------------------------------------*/
.site-navigation {
  position: relative;
}

.menu-primary-menu-container {
  display: none;
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  z-index: 999;
  padding: var(--size-100) var(--page-padding) var(--size-500);
  background-color: var(--color-bg-accent);
  border-bottom: solid 1px var(--color-text);
}
@media screen and (min-width: 54rem) {
  .menu-primary-menu-container {
    position: static;
    border-bottom: 0;
    display: grid !important; /* in case mobile menu (block) is triggered */
    place-content: center;
    padding: var(--size-200) var(--page-padding);
  }
}
.menu-primary-menu-container .menu {
  position: relative;
}
.menu-toggled-on .menu-primary-menu-container {
  display: block;
}
.menu-primary-menu-container a {
  display: block;
  font-size: var(--size-500);
  padding: var(--size-50) 0;
  font-weight: 600;
  text-decoration: none;
}
@media screen and (min-width: 54rem) {
  .menu-primary-menu-container a {
    padding-left: var(--size-50);
    padding-right: var(--size-50);
    font-size: var(--size-400);
    line-height: 1;
  }
}
@media screen and (min-width: 66rem) {
  .menu-primary-menu-container a {
    font-size: var(--size-500);
  }
}
.menu-primary-menu-container a:hover, .menu-primary-menu-container a:focus-visible {
  color: var(--color-text-hover) !important; /* .current-menu-item */
}
.menu-primary-menu-container a:focus-visible {
  outline: 2px solid var(--color-bg);
}

.menu-primary-menu-container .current-menu-item:before,
.menu-primary-menu-container .current-page-ancestor:before,
.single-issue .menu-primary-menu-container .menu-item-111:before,
.single-journal .menu-primary-menu-container .menu-item-111:before,
.single-at-play .menu-primary-menu-container .menu-item-110:before {
  content: "";
  width: 0.5em;
  height: 1em;
  display: block;
  position: absolute;
  background-color: var(--color-accent);
  left: calc(-1 * var(--page-padding));
  -webkit-transform: translateY(0.6em);
      -ms-transform: translateY(0.6em);
          transform: translateY(0.6em); /* magic number to align with text */
}
@media screen and (min-width: 34rem) {
  .menu-primary-menu-container .current-menu-item:before,
  .menu-primary-menu-container .current-page-ancestor:before,
  .single-issue .menu-primary-menu-container .menu-item-111:before,
  .single-journal .menu-primary-menu-container .menu-item-111:before,
  .single-at-play .menu-primary-menu-container .menu-item-110:before {
    width: 1em;
    -webkit-transform: translateY(0.7em);
        -ms-transform: translateY(0.7em);
            transform: translateY(0.7em); /* magic number to align with text */
  }
}
@media screen and (min-width: 44rem) {
  .menu-primary-menu-container .current-menu-item:before,
  .menu-primary-menu-container .current-page-ancestor:before,
  .single-issue .menu-primary-menu-container .menu-item-111:before,
  .single-journal .menu-primary-menu-container .menu-item-111:before,
  .single-at-play .menu-primary-menu-container .menu-item-110:before {
    -webkit-transform: translateY(0.8em);
        -ms-transform: translateY(0.8em);
            transform: translateY(0.8em); /* magic number to align with text */
  }
}
@media screen and (min-width: 54rem) {
  .menu-primary-menu-container .current-menu-item:before,
  .menu-primary-menu-container .current-page-ancestor:before,
  .single-issue .menu-primary-menu-container .menu-item-111:before,
  .single-journal .menu-primary-menu-container .menu-item-111:before,
  .single-at-play .menu-primary-menu-container .menu-item-110:before {
    -webkit-transform: translateY(0.5em);
        -ms-transform: translateY(0.5em);
            transform: translateY(0.5em); /* magic number to align with text */
  }
}
@media screen and (min-width: 66rem) {
  .menu-primary-menu-container .current-menu-item:before,
  .menu-primary-menu-container .current-page-ancestor:before,
  .single-issue .menu-primary-menu-container .menu-item-111:before,
  .single-journal .menu-primary-menu-container .menu-item-111:before,
  .single-at-play .menu-primary-menu-container .menu-item-110:before {
    -webkit-transform: translateY(0.8em);
        -ms-transform: translateY(0.8em);
            transform: translateY(0.8em); /* magic number to align with text */
  }
}
.menu-primary-menu-container .current-menu-item a,
.menu-primary-menu-container .current-page-ancestor a,
.single-issue .menu-primary-menu-container .menu-item-111 a,
.single-journal .menu-primary-menu-container .menu-item-111 a,
.single-at-play .menu-primary-menu-container .menu-item-110 a {
  color: var(--color-accent);
}
/*----------------------------------------------*\
    FOOTER
	======

	@package substance

\*----------------------------------------------*/
/*----------------------------------------------*\
    COMPONENTS
	==========

	@package substance

\*----------------------------------------------*/
/*
 *
 * ANCHOR Variables
 * /
------------------------------------------------*/
/* Breakpoints */
/* Responsive type multipliers */
/* Type sizes */
/* See https://type-scale.com */
/* Minor third from here */
/* Major third from here */
/* Max-widths */
/*
 *
 * ANCHOR Mixins
 * /
------------------------------------------------*/
/*
 *
 * 1./ Footer
------------------------------------------------*/
.site-footer {
  margin-top: calc(var(--vertical-space) * 2);
  background-color: var(--color-bg-reversed);
}
@media print {
  .site-footer {
    display: none;
  }
}
.single-issue .site-footer, .single-theauthor .site-footer {
  margin-top: 0; /* these pages have a line that needs to extend */
}
.site-footer__wrapper {
  padding: var(--vertical-space) var(--page-padding);
  text-align: center;
}
.site-footer__logo {
  display: inline-block;
  margin-bottom: var(--size-400);
}
.site-footer__logo:focus-visible {
  outline: 1px solid var(--color-bg);
  outline-offset: 10px;
}
.site-footer__logo:focus-visible path {
  fill: var(--color-text-reversed-hover);
}
.site-footer__logo svg {
  font-size: var(--size-400);
  max-width: 14em;
  height: auto;
  display: inline-block;
}

.menu-footer-menu-container .menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: var(--size-50) var(--size-300);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.menu-footer-menu-container a {
  display: block;
  font-size: var(--size-300);
  padding: var(--size-50);
  font-weight: 400;
  text-decoration: none;
  color: var(--color-text-reversed);
}
.menu-footer-menu-container a:focus-visible {
  outline: 1px solid var(--color-bg);
}
.menu-footer-menu-container a:hover, .menu-footer-menu-container a:focus-visible {
  color: var(--color-text-reversed-hover);
}
/*----------------------------------------------*\
    PAGES
	=====

	@package substance

\*----------------------------------------------*/
/*----------------------------------------------*\
    COMPONENTS
	==========

	@package substance

\*----------------------------------------------*/
/*
 *
 * ANCHOR Variables
 * /
------------------------------------------------*/
/* Breakpoints */
/* Responsive type multipliers */
/* Type sizes */
/* See https://type-scale.com */
/* Minor third from here */
/* Major third from here */
/* Max-widths */
/*
 *
 * ANCHOR Mixins
 * /
------------------------------------------------*/
/*
 *
 * ANCHOR 1./ Breadcrumb
------------------------------------------------*/
.breadcrumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: var(--size-700) var(--page-padding);
  border-bottom: 1px solid var(--color-text);
}
@media print {
  .breadcrumb {
    display: none;
  }
}
.breadcrumb > * {
  font-size: var(--size-300);
}
@media screen and (min-width: 34rem) {
  .breadcrumb > * {
    font-size: 1em;
  }
}
.breadcrumb__divider {
  background: url(/wp-content/themes/substance/css/build/../../images/breadcrumb-divider.svg);
  background-repeat: no-repeat;
  background-position: center;
  padding: 0 var(--size-600);
}
.breadcrumb a, .breadcrumb .current-item {
  display: block;
  text-decoration: none;
  color: var(--color-accent);
  font-size: var(--size-300);
  text-transform: uppercase;
  font-weight: 600;
}
.breadcrumb a {
  /* attach to <a> tag */
  display: inline-block;
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--color-text-hover);
}
.breadcrumb a:focus-visible {
  color: var(--color-text-hover);
  outline: solid 1px currentColor;
  outline-offset: 5px;
}
.breadcrumb .current-item {
  max-width: 39ch;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
}

/*
 *
 * ANCHOR 2./ Cover (Snippet)
------------------------------------------------*/
.cover {
  display: block;
}
.cover a {
  display: inline-block;
}
.cover a:focus-visible {
  background-color: var(--color-bg-accent-shade);
  outline: 5px solid var(--color-bg-accent-shade);
}
.cover svg {
  width: 31em;
  max-width: 60vw;
  height: auto;
  display: block;
}
@media screen and (min-width: 34rem) {
  .cover svg {
    max-width: 100%;
  }
}
.cover svg path, .cover svg rect {
  stroke-width: 1.5px;
}
@media screen and (min-width: 54rem) {
  .cover svg path, .cover svg rect {
    stroke-width: unset;
  }
}

/*
 *
 * ANCHOR 3./ Journal Pages (Issues & Authors)
------------------------------------------------*/
.page-journal__nav {
  padding: var(--vertical-space) var(--page-padding);
}
.page-journal__nav-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: var(--size-300);
}
.page-journal__nav-link--active {
  padding: var(--size-200);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-block;
  background-color: var(--color-accent);
  color: var(--color-text-reversed);
}
.page-journal__nav-link--active:focus {
  outline: 0;
}
.page-journal__nav-link--active:focus-visible {
  outline: 3px solid var(--color-bg-accent-shade);
}
.page-journal__nav-link--active:hover, .page-journal__nav-link--active:focus-visible {
  color: var(--color-text-reversed-hover);
  background-color: var(--color-accent-glare);
}
.page-journal__nav-link--inactive {
  padding: var(--size-200);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-block;
  background-color: var(--color-text-reversed);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}
.page-journal__nav-link--inactive:focus {
  outline: 0;
}
.page-journal__nav-link--inactive:focus-visible {
  outline: 3px solid var(--color-bg-accent-shade);
}
.page-journal__nav-link--inactive:hover, .page-journal__nav-link--inactive:focus-visible {
  border-color: var(--color-accent-glare);
  color: var(--color-accent-glare);
  background-color: var(--color-text-reversed-hover);
}
.page-journal__wrapper {
  padding: 0 var(--page-padding) 0 var(--page-padding);
}
@media screen and (min-width: 44rem) {
  .page-journal__wrapper {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--size-300);
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    padding-right: 0;
  }
}
.page-journal__anchor-nav {
  display: grid;
  gap: var(--size-200);
  padding: var(--size-200) var(--size-400);
  border: 1px solid var(--color-accent);
  background-color: var(--color-bg-accent);
  margin-bottom: var(--vertical-space);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.page-journal__anchor-nav--authors {
  grid-template-columns: repeat(auto-fill, 1em);
}
.page-journal__anchor-nav--issues {
  grid-template-columns: repeat(auto-fill, 6em);
}
@media screen and (min-width: 44rem) {
  .page-journal__anchor-nav {
    position: sticky;
    border-right: 0;
    -webkit-box-pack: left;
        -ms-flex-pack: left;
            justify-content: left;
    top: 3em;
    -webkit-box-ordinal-group: 101;
        -ms-flex-order: 100;
            order: 100;
    right: 0;
  }
  .page-journal__anchor-nav--authors {
    min-width: 10em;
  }
  .page-journal__anchor-nav--issues {
    max-width: 10em;
    margin-left: 2em;
    grid-template-columns: 1fr;
  }
}
.page-journal__anchor-nav a {
  text-decoration: none;
  font-weight: 600;
  color: var(--color-accent);
  padding: 0.25em;
  /* attach to <a> tag */
  display: inline-block;
  text-decoration: none;
}
.page-journal__anchor-nav a:hover {
  color: var(--color-text-hover);
}
.page-journal__anchor-nav a:focus-visible {
  color: var(--color-text-hover);
  outline: solid 1px currentColor;
  outline-offset: 5px;
}
.page-journal__anchor-nav a:focus-visible {
  outline-offset: 0;
  background-color: var(--color-bg);
}

/*
 *
 * ANCHOR 4./ Issues Page
------------------------------------------------*/
.page-issues__wrapper {
  position: relative;
}
.page-issues__list {
  --grid-size: 8.6em;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-size), 1fr));
  gap: var(--size-500) var(--size-200);
}
@media screen and (min-width: 34rem) {
  .page-issues__list {
    --grid-size: 10em;
  }
}
.page-issues__cover--decade {
  display: grid;
  place-content: center;
}
.page-issues__cover svg {
  max-width: 100%;
}
.page-issues__cover .cover a {
  will-change: transform;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  -o-transition: transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}
.page-issues__cover .cover a:hover, .page-issues__cover .cover a:focus-visible {
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
}
.page-issues__number {
  font-size: var(--size-200);
  padding-left: var(--size-100);
  padding-top: var(--size-50);
  color: var(--color-accent);
}
.page-issues__number a {
  text-decoration: none;
}
.page-issues__decade {
  font-size: var(--size-300);
  width: 5.5em;
  height: 5.5em;
  display: grid;
  place-content: center;
  border-radius: 50%;
  padding: var(--size-200);
  overflow: hidden;
  color: var(--color-accent);
  background: #D9D9D9;
  border: dashed var(--color-accent) 1px;
  font-weight: 600;
  text-align: center;
  line-height: 1.1;
  -webkit-transform: rotate(-15deg);
      -ms-transform: rotate(-15deg);
          transform: rotate(-15deg);
  -webkit-transition: -webkit-transform 3.5s ease;
  transition: -webkit-transform 3.5s ease;
  -o-transition: transform 3.5s ease;
  transition: transform 3.5s ease;
  transition: transform 3.5s ease, -webkit-transform 3.5s ease;
}
@media screen and (min-width: 66rem) {
  .page-issues__decade {
    font-size: var(--size-400);
    border-width: 2px;
  }
}
.page-issues__decade:hover {
  -webkit-transition-duration: 8s;
       -o-transition-duration: 8s;
          transition-duration: 8s;
  -webkit-transform: rotate(-375deg);
      -ms-transform: rotate(-375deg);
          transform: rotate(-375deg);
  cursor: default;
}

/*
 *
 * ANCHOR 5./ Authors Page
------------------------------------------------*/
.page-authors__wrapper {
  max-width: calc(var(--max-width-content) + (100vw - var(--max-width-content)) / 2);
  margin-left: auto;
}
.page-authors__list-item {
  margin-bottom: var(--size-400);
}
.page-authors__list-item a {
  display: inline-block;
  text-decoration: none;
  /* attach to <a> tag */
  display: inline-block;
  text-decoration: none;
}
.page-authors__list-item a:hover {
  color: var(--color-text-hover);
}
.page-authors__list-item a:focus-visible {
  color: var(--color-text-hover);
  outline: solid 1px currentColor;
  outline-offset: 5px;
}
.page-authors__name {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: var(--size-500);
}
@media screen and (min-width: 24rem) {
  .page-authors__name {
    font-size: var(--size-600);
  }
}
@media screen and (min-width: 34rem) {
  .page-authors__name {
    font-size: var(--size-700);
  }
}
@media screen and (min-width: 44rem) {
  .page-authors__name {
    font-size: var(--size-800);
  }
}
.page-authors__issues {
  font-size: var(--size-300);
  font-weight: 600;
  padding-left: var(--size-300);
  white-space: nowrap;
  color: var(--color-accent);
}
.page-authors__issues a:focus-visible {
  outline-offset: 2px;
}

/*
 *
 * ANCHOR 6./ Single (Issue & Author Detail pages)
------------------------------------------------*/
.single__wrapper {
  display: grid;
  gap: var(--size-500);
  padding: 0 var(--page-padding);
  min-height: 50vh;
}
@media screen and (min-width: 34rem) {
  .single__wrapper {
    grid-template-columns: clamp(20vw, 35vw, 24em) auto;
  }
}
@media screen and (min-width: 54rem) {
  .single__wrapper {
    gap: var(--size-800);
  }
}
.single__meta { /* Column 1 */
  padding-top: var(--vertical-space);
}
@media screen and (min-width: 34rem) {
  .single__meta {
    padding-right: var(--size-500);
    padding-bottom: calc(var(--vertical-space) * 2);
    border-right: solid 1px var(--color-text);
  }
}
.single__content { /* Column 2 */
  padding-top: var(--size-400);
}
@media screen and (min-width: 34rem) {
  .single__content {
    padding-top: var(--vertical-space);
    padding-bottom: calc(var(--vertical-space) * 2);
  }
}
@media screen and (min-width: 54rem) {
  .single__content {
    gap: var(--size-800);
  }
}

/*
 *
 * ANCHOR 7./ Issue Detail
------------------------------------------------*/
@media screen and (min-width: 34rem) {
  .single-issue__wrapper.single-issue__wrapper--no-articles {
    grid-template-columns: clamp(35vw, 100vw, 37em) auto; /* diffirent grid when no articles */
  }
}
@media screen and (min-width: 24rem) {
  .single-issue__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 34rem) {
  .single-issue__meta {
    display: block;
  }
}
@media screen and (min-width: 34rem) {
  .single-issue__wrapper--no-articles .single-issue__meta {
    border-right: 0; /* no border when no articles (border defined via .single__wrapper) */
  }
}
.single-issue__meta__text {
  -webkit-box-ordinal-group: 101;
      -ms-flex-order: 100;
          order: 100; /* Text meta comes after image when shown as grid (on certain screen sizes) */
}
.single-issue__meta__header { /* Issue Number */
  display: block;
  font-size: var(--size-200);
  font-weight: 600;
  margin-bottom: var(--size-500);
  text-transform: uppercase;
}
.single-issue__meta__name {
  display: block;
  font-size: var(--size-500);
  font-weight: 600;
  margin-bottom: var(--size-50);
  line-height: 1.2;
}
.single-issue__meta__publication-date {
  font-size: var(--size-200);
  font-weight: 600;
  margin-bottom: var(--size-400);
}
.single-issue__meta__featured-contributors {
  font-size: var(--size-300);
  margin-bottom: var(--size-600);
  line-height: 1.3;
}
.single-issue__meta__cover {
  margin-right: var(--size-500);
  max-width: 18em;
  position: sticky;
  top: var(--vertical-space);
}
.single-issue__meta__cover svg {
  max-width: 100%;
}
.single-issue__wrapper--no-articles .single-issue__content {
  display: none;
}
.single-issue__content__header {
  margin-bottom: var(--vertical-space);
  text-transform: uppercase;
  font-weight: 600;
  font-size: var(--size-200);
  letter-spacing: 0.015em;
}
.single-issue__content__article {
  margin-bottom: var(--vertical-space);
}
.single-issue__content__article-title {
  font-size: var(--size-600);
  font-family: var(--font-text);
  font-weight: 500;
  margin-bottom: var(--size-50);
  line-height: 1.15;
  max-width: 38ch;
}
.single-issue__content__article-title a {
  /* attach to <a> tag */
  display: inline-block;
  text-decoration: none;
}
.single-issue__content__article-title a:hover {
  color: var(--color-text-hover);
}
.single-issue__content__article-title a:focus-visible {
  color: var(--color-text-hover);
  outline: solid 1px currentColor;
  outline-offset: 5px;
}
.single-issue__content__authors {
  max-width: 25em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: var(--size-100) var(--size-400);
}
.single-issue__content__authors a {
  font-size: var(--size-400);
  font-weight: 500;
  color: var(--color-accent);
  white-space: nowrap;
  /* attach to <a> tag */
  display: inline-block;
  text-decoration: none;
}
.single-issue__content__authors a:hover {
  color: var(--color-text-hover);
}
.single-issue__content__authors a:focus-visible {
  color: var(--color-text-hover);
  outline: solid 1px currentColor;
  outline-offset: 5px;
}

/*
 *
 * ANCHOR 8./ Author Detail
------------------------------------------------*/
.single-author__meta__header { /* Author Name */
  font-family: var(--font-text);
  font-size: var(--size-800);
  line-height: 1.1;
}
@media screen and (min-width: 34rem) {
  .single-author__meta__header {
    font-size: var(--size-600);
  }
}
@media screen and (min-width: 44rem) {
  .single-author__meta__header {
    font-size: var(--size-700);
  }
}
@media screen and (min-width: 54rem) {
  .single-author__meta__header {
    font-size: var(--size-800);
  }
}
@media screen and (min-width: 66rem) {
  .single-author__meta__header {
    font-size: var(--size-900);
  }
}
.single-author__content__cover {
  width: 7em;
}
@media screen and (min-width: 34rem) {
  .single-author__content__cover {
    width: 4em;
  }
}
@media screen and (min-width: 44rem) {
  .single-author__content__cover {
    width: 7em;
  }
}
.single-author__content__cover svg { /* Issue cover */
  width: 100%;
}
.single-author__content__cover img { /* At Play poster image */
  display: block;
  border: 1px solid var(--color-text);
}
.single-author__content__article {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--size-400);
  margin-bottom: var(--size-800);
}
@media screen and (min-width: 66rem) {
  .single-author__content__article {
    gap: var(--size-900);
  }
}
.single-author__content__title-wrapper {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.single-author__content__article-title {
  font-family: var(--font-text);
  font-size: var(--size-500);
  margin-bottom: var(--size-50);
  line-height: 1.2;
  font-weight: 500;
  max-width: 30ch;
}
@media screen and (min-width: 54rem) {
  .single-author__content__article-title {
    font-size: var(--size-600);
  }
}
.single-author__content__article-title a {
  /* attach to <a> tag */
  display: inline-block;
  text-decoration: none;
}
.single-author__content__article-title a:hover {
  color: var(--color-text-hover);
}
.single-author__content__article-title a:focus-visible {
  color: var(--color-text-hover);
  outline: solid 1px currentColor;
  outline-offset: 5px;
}
.single-author__content__issue {
  font-size: var(--size-300);
  color: var(--color-accent);
  font-weight: 500;
  line-height: 1.4;
}
.single-author__content__issue a {
  /* attach to <a> tag */
  display: inline-block;
  text-decoration: none;
}
.single-author__content__issue a:hover {
  color: var(--color-text-hover);
}
.single-author__content__issue a:focus-visible {
  color: var(--color-text-hover);
  outline: solid 1px currentColor;
  outline-offset: 5px;
}

/*
 *
 * ANCHOR 9./ Article Detail
------------------------------------------------*/
.single-article__header {
  max-width: var(--max-width-content);
  margin: var(--vertical-space) auto 0;
  padding: 0 var(--page-padding);
}
.single-article__title {
  font-size: var(--size-800);
  font-weight: 600;
  line-height: 1.05;
  margin-bottom: var(--size-50);
  max-width: 28ch;
}
.single-article__authors {
  margin-bottom: var(--vertical-space);
}
.single-article__authors a {
  font-size: var(--size-600);
  /* attach to <a> tag */
  display: inline-block;
  text-decoration: none;
}
.single-article__authors a:hover {
  color: var(--color-text-hover);
}
.single-article__authors a:focus-visible {
  color: var(--color-text-hover);
  outline: solid 1px currentColor;
  outline-offset: 5px;
}
.single-article__wrapper {
  display: grid;
  grid-template-columns: 1fr minmax(auto, var(--max-width-text)) minmax(auto, 15em) 1fr;
}
@media screen and (min-width: 66rem) {
  .single-article__wrapper {
    grid-template-columns: 1fr minmax(auto, var(--max-width-text)) minmax(auto, calc(var(--max-width-content) - var(--max-width-text))) minmax(var(--page-padding), 1fr);
  }
}
.single-article__wrapper > .block {
  grid-column: 2/4;
}
@media screen and (min-width: 54rem) {
  .single-article__wrapper > .block {
    grid-column: 2/3;
  }
}
.single-article__meta {
  grid-column: 2/4;
  align-self: start;
  margin: 0 var(--page-padding) var(--size-600);
  max-width: 25em;
  /* Meta Info */
  /* Link to full text */
}
@media screen and (min-width: 54rem) {
  .single-article__meta {
    grid-row: 1/5; /* Span first rows */
    grid-column: 3/4;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
}
@media screen and (min-width: 66rem) {
  .single-article__meta {
    margin-left: var(--size-500);
    margin-right: var(--page-padding);
  }
}
.single-article__meta__meta-box-wrapper {
  background-color: var(--color-bg-accent);
  margin-bottom: var(--size-500);
  padding: var(--size-300);
  border: var(--color-text) 1px solid;
}
@media screen and (min-width: 54rem) {
  .single-article__meta__meta-box-wrapper {
    border-right: 0;
  }
}
@media screen and (min-width: 66rem) {
  .single-article__meta__meta-box-wrapper {
    border-right: var(--color-text) 1px solid;
  }
}
.single-article__meta__meta-box-wrapper a {
  /* attach to <a> tag */
  display: inline-block;
  text-decoration: none;
  display: grid;
  grid-template-columns: 3fr 5fr;
  gap: var(--size-300);
}
.single-article__meta__meta-box-wrapper a:hover {
  color: var(--color-text-hover);
}
.single-article__meta__meta-box-wrapper a:focus-visible {
  color: var(--color-text-hover);
  outline: solid 1px currentColor;
  outline-offset: 5px;
}
.single-article__meta__meta-box-wrapper a:focus-visible {
  background-color: var(--color-bg);
  outline: 8px solid var(--color-bg);
  outline-offset: 0;
}
@media print {
  .single-article__meta__meta-box-wrapper img {
    border: solid 1px var(--color-text);
  }
}
.single-article__meta__issue {
  font-size: var(--size-300);
  font-weight: 600;
  margin-bottom: var(--size-100);
}
.single-article__meta__name {
  font-size: var(--size-300);
  margin-bottom: var(--size-400);
}
.single-article__meta__publication-date {
  font-size: var(--size-200);
}
.single-article__meta__link-box-wrapper {
  padding-right: var(--page-padding);
}
@media screen and (min-width: 66rem) {
  .single-article__meta__link-box-wrapper {
    padding-right: 0;
  }
}
@media print {
  .single-article__meta__link-box-wrapper {
    display: none;
  }
}
.single-article__extent {
  padding: 0 var(--page-padding);
  color: var(--color-accent);
  font-weight: 500;
  text-transform: uppercase;
  grid-column: 2/4;
}
@media screen and (min-width: 54rem) {
  .single-article__extent {
    grid-column: 2/3;
  }
}
.single-article__extent span {
  font-size: var(--size-200);
}
.single-article__full-text-link {
  margin-top: var(--vertical-article-space);
  padding: 0 var(--page-padding);
  grid-column: 2/4;
}
@media screen and (min-width: 54rem) {
  .single-article__full-text-link {
    grid-column: 2/3;
  }
}
@media print {
  .single-article__full-text-link {
    display: none;
  }
}
.single-article__spacer {
  grid-column: 2/3;
  min-height: 10vh;
}

.article-text-block { /* for blocks with lighter background color */
  background-color: var(--color-bg-accent-glare);
}
@media screen and (min-width: 34rem) {
  .article-text-block {
    background-color: transparent;
    border: 0;
  }
}
.article-text-block__wrapper {
  padding: var(--size-600) 0;
  background-color: var(--color-bg-accent-glare);
}
.article-text-block + .article-text-block .article-text-block__wrapper {
  padding-top: 0;
}
.article-text-block--extent + .article-text-block .article-text-block__wrapper {
  padding-top: 0;
}
@media screen and (min-width: 24rem) {
  .article-text-block__wrapper {
    padding-right: var(--size-300);
  }
}
@media screen and (min-width: 34rem) {
  .article-text-block__wrapper {
    padding-left: var(--size-500);
    padding-right: var(--size-500);
  }
}
.article-text-block__last-p:after {
  content: "";
  height: 0.55em;
  width: 0.55em;
  display: inline-block;
  background-color: var(--color-accent);
  margin-left: 0.3em;
}

/*
 *
 * ANCHOR 10./ At Play Page
------------------------------------------------*/
.at-play__wrapper {
  max-width: var(--max-width-content);
  margin: var(--vertical-space) auto 0;
  padding: 0 var(--page-padding);
}
.at-play__introduction {
  margin-bottom: var(--vertical-space);
}
.at-play__introduction p {
  font-size: var(--size-500);
  max-width: 45ch;
  font-weight: 600;
  color: var(--color-accent);
  line-height: 1.35;
}
.at-play__article {
  display: grid;
  gap: var(--size-400);
  margin-bottom: var(--vertical-space);
}
@media screen and (min-width: 34rem) {
  .at-play__article {
    grid-template-columns: 1fr 3fr;
    gap: var(--size-700);
  }
}
.at-play__image {
  max-width: 50%;
}
@media screen and (min-width: 34rem) {
  .at-play__image {
    max-width: none;
  }
}
.at-play__image a {
  display: block;
  border: 1px solid var(--color-text);
}
.at-play__image img {
  display: block;
}
.at-play__article-title {
  font-size: var(--size-600);
  margin-bottom: var(--size-50);
  font-weight: 600;
}
.at-play__article-title a {
  /* attach to <a> tag */
  display: inline-block;
  text-decoration: none;
}
.at-play__article-title a:hover {
  color: var(--color-text-hover);
}
.at-play__article-title a:focus-visible {
  color: var(--color-text-hover);
  outline: solid 1px currentColor;
  outline-offset: 5px;
}
.at-play__article-authors {
  font-size: var(--size-400);
  max-width: 25em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: var(--size-100) var(--size-400);
}
.at-play__article-authors a {
  font-weight: 500;
  color: var(--color-accent);
  white-space: nowrap;
  /* attach to <a> tag */
  display: inline-block;
  text-decoration: none;
}
.at-play__article-authors a:hover {
  color: var(--color-text-hover);
}
.at-play__article-authors a:focus-visible {
  color: var(--color-text-hover);
  outline: solid 1px currentColor;
  outline-offset: 5px;
}
.at-play__article-summary {
  font-size: calc(var(--size-400) * 1.2);
  font-family: var(--font-text);
  margin-top: var(--size-300);
  line-height: 1.5;
  max-width: 54ch;
}

/*
 *
 * ANCHOR 11./ Search Results
------------------------------------------------*/
.search-results__wrapper {
  max-width: var(--max-width-content);
  margin: var(--vertical-space) auto 0;
  padding: 0 var(--page-padding);
}
.search-results__form {
  margin-bottom: var(--vertical-space);
}
.search-results__form .site-search__field {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}
.search-results__form .site-search__submit {
  color: var(--color-accent);
}
.search-results__form .site-search__submit:focus-visible {
  color: var(--color-text-reversed-hover);
}
.search-results__result {
  margin: var(--vertical-space) 0;
}
.search-results__type {
  font-size: var(--size-300);
  margin-bottom: var(--size-50);
}
.search-results__title {
  font-size: var(--size-500);
  margin-bottom: var(--size-50);
  font-weight: 600;
  color: var(--color-accent);
}
.search-results__title a {
  /* attach to <a> tag */
  display: inline-block;
  text-decoration: none;
}
.search-results__title a:hover {
  color: var(--color-text-hover);
}
.search-results__title a:focus-visible {
  color: var(--color-text-hover);
  outline: solid 1px currentColor;
  outline-offset: 5px;
}
.search-results__title a:hover {
  color: var(--color-accent-glare);
}
.search-results__meta {
  font-size: var(--size-300);
  margin-bottom: var(--size-50);
  font-weight: bold;
}
.search-results__excerpt {
  font-size: var(--size-400);
  line-height: 1.5;
  max-width: 65ch;
}
.search-results__excerpt strong {
  color: var(--color-accent);
}
.search-results__no-results {
  font-size: var(--size-400);
  line-height: 1.5;
}