:root {
  /* color: primary */
  --black: #000000;
  --white: #ffffff;
  --red: rgb(255 110 80);
  --mint: rgb(129, 214, 195);
  --red-light: rgb(250, 248, 240);
  --grey: rgb(191, 190, 171);
  --grey-light-2: #D7D6CD;
  --grey-light: rgba(191, 190, 171, 0.15);

  /* color: secondary */
  --brown: rgb(129, 97, 65);
  --red-dark: rgb(191, 86, 57);
  --green-dark: rgb(97, 159, 131);
  --red-vivid: rgb(255, 52, 28);
  --red-medium: rgb(250, 211, 180);
  --green-vivid: rgb(65, 180, 149);
  --green-light: rgb(166, 255, 223);
  --blue-light: rgb(0, 175, 220);

  --indent: 2.5rem;
  --pad: 2rem;
  --pad-large: 5rem;
  --pad-medium: 3rem;
  --pad-small: 1rem;
  --pad-xsmall: 0.5rem;

  --size-base: 18px;
  --size-xlarge: 4.8rem;
  --size-large: 1.85rem;
  --size-medium: 1.6rem;
  --size-small: 1.2rem;
  --size-xsmall: 0.9rem;
  --size-xxsmall: 0.6rem;

  --maxwidth-body: 1380px;
  --maxwidth-text: 750px;

  --margin-left: calc((100vw - var(--maxwidth-text))*0.5);

  --flap-width: 420px;
  --width: 80%;

  --height-cover: 86.5vh;

  --font-serif-display: "Noe Standard";
  --font-serif: "Noe Text";
  --font-sans: "Atlas Grotesk";
}

@media (max-width: 1300px) {
  :root {
    --maxwidth-text: 50vw;
    --size-xlarge: 3.6rem;
  }
}

@media (max-width: 1024px) {
  :root {
    --pad-xsmall: 0.5rem;

    --size-xlarge: 2.8rem;
    --size-large: 1.6rem;
    --size-medium: 1.2rem;
    --size-small: 1rem;
    --size-xxsmall: 0.7rem;

    --maxwidth-body: 100%;
    --maxwidth-text: 60%;
  }
}

@media (max-width: 820px) {
  :root {
    --maxwidth-text: none;
    --margin-left: 2rem;
    --size-large: 1.6rem;
    --pad: 20px;
    --height-cover: 500px;
  }
}

/* Fonts */

@font-face { 
  font-family: "Atlas Grotesk";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/AtlasGrotesk/AtlasGrotesk-Black-Web.woff2") format("woff2"),
       url("../fonts/AtlasGrotesk/AtlasGrotesk-Black-Web.woff") format("woff");
} 

@font-face { 
  font-family: "Atlas Grotesk"; 
  font-style: italic;
  font-weight: 900;
  src: url("../fonts/AtlasGrotesk/AtlasGrotesk-BlackItalic-Web.woff2") format("woff2"),
       url("../fonts/AtlasGrotesk/AtlasGrotesk-BlackItalic-Web.woff") format("woff");
} 

@font-face { 
  font-family: "Atlas Grotesk";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/AtlasGrotesk/AtlasGrotesk-Bold-Web.woff2") format("woff2"),
       url("../fonts/AtlasGrotesk/AtlasGrotesk-Bold-Web.woff") format("woff");
} 

@font-face { 
  font-family: "Atlas Grotesk"; 
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/AtlasGrotesk/AtlasGrotesk-BoldItalic-Web.woff2") format("woff2"),
       url("../fonts/AtlasGrotesk/AtlasGrotesk-BoldItalic-Web.woff") format("woff");
} 

@font-face { 
  font-family: "Atlas Grotesk"; 
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/AtlasGrotesk/AtlasGrotesk-Medium-Web.woff2") format("woff2"),
       url("../fonts/AtlasGrotesk/AtlasGrotesk-Medium-Web.woff") format("woff");
} 

@font-face { 
  font-family: "Atlas Grotesk"; 
  font-style: italic;
  font-weight: 500;
  src: url("../fonts/AtlasGrotesk/AtlasGrotesk-MediumItalic-Web.woff2") format("woff2"),
       url("../fonts/AtlasGrotesk/AtlasGrotesk-MediumItalic-Web.woff") format("woff");
} 

@font-face { 
  font-family: "Atlas Grotesk"; 
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/AtlasGrotesk/AtlasGrotesk-Regular-Web.woff2") format("woff2"),
       url("../fonts/AtlasGrotesk/AtlasGrotesk-Regular-Web.woff") format("woff");
} 

@font-face { 
  font-family: "Atlas Grotesk"; 
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/AtlasGrotesk/AtlasGrotesk-RegularItalic-Web.woff2") format("woff2"),
       url("../fonts/AtlasGrotesk/AtlasGrotesk-RegularItalic-Web.woff") format("woff");
} 

@font-face { 
  font-family: "Atlas Grotesk"; 
  font-style: normal;
  font-weight: 200;
  src: url("../fonts/AtlasGrotesk/AtlasGrotesk-Light-Web.woff2") format("woff2"),
       url("../fonts/AtlasGrotesk/AtlasGrotesk-Light-Web.woff") format("woff");
} 

@font-face { 
  font-family: "Atlas Grotesk"; 
  font-style: italic;
  font-weight: 200;
  src: url("../fonts/AtlasGrotesk/AtlasGrotesk-LightItalic-Web.woff2") format("woff2"),
       url("../fonts/AtlasGrotesk/AtlasGrotesk-LightItalic-Web.woff") format("woff");
} 

@font-face { 
  font-family: "Atlas Grotesk"; 
  font-style: normal;
  font-weight: 100;
  src: url("../fonts/AtlasGrotesk/AtlasGrotesk-Thin-Web.woff2") format("woff2"),
       url("../fonts/AtlasGrotesk/AtlasGrotesk-Thin-Web.woff") format("woff");
} 

@font-face { 
  font-family: "Atlas Grotesk"; 
  font-style: italic;
  font-weight: 100;
  src: url("../fonts/AtlasGrotesk/AtlasGrotesk-ThinItalic-Web.woff2") format("woff2"),
       url("../fonts/AtlasGrotesk/AtlasGrotesk-ThinItalic-Web.woff") format("woff");
} 

@font-face { 
  font-family: "Noe Text";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/Noe/NoeText-Bold.woff2") format("woff2"),
       url("../fonts/Noe/NoeText-Bold.woff") format("woff");
} 

@font-face { 
  font-family: "Noe Text"; 
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/Noe/NoeText-BoldItalic.woff2") format("woff2"),
       url("../fonts/Noe/NoeText-BoldItalic.woff") format("woff");
} 

@font-face { 
  font-family: "Noe Text"; 
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Noe/NoeText-Book.woff2") format("woff2"),
       url("../fonts/Noe/NoeText-Book.woff") format("woff");
} 

@font-face { 
  font-family: "Noe Text"; 
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/Noe/NoeText-BookItalic.woff2") format("woff2"),
       url("../fonts/Noe/NoeText-BookItalic.woff") format("woff");
}

@font-face { 
  font-family: "Noe Standard"; 
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/Noe/NoeStandard-Black.woff2") format("woff2"),
       url("../fonts/Noe/NoeStandard-Black.woff") format("woff");
} 

@font-face { 
  font-family: "Noe Standard"; 
  font-style: italic;
  font-weight: 900;
  src: url("../fonts/Noe/NoeStandard-BlackItalic.woff2") format("woff2"),
       url("../fonts/Noe/NoeStandard-BlackItalic.woff") format("woff");
}

@font-face { 
  font-family: "Noe Standard"; 
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/Noe/NoeStandard-Semibold.woff2") format("woff2"),
       url("../fonts/Noe/NoeStandard-Semibold.woff") format("woff");
} 

@font-face { 
  font-family: "Noe Standard"; 
  font-style: italic;
  font-weight: 600;
  src: url("../fonts/Noe/NoeStandard-SemiboldItalic.woff2") format("woff2"),
       url("../fonts/Noe/NoeStandard-SemiboldItalic.woff") format("woff");
} 

@font-face { 
  font-family: "Noe Standard"; 
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Noe/NoeStandard-Regular.woff2") format("woff2"),
       url("../fonts/Noe/NoeStandard-Regular.woff") format("woff");
} 

@font-face { 
  font-family: "Noe Standard"; 
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/Noe/NoeStandard-RegularItalic.woff2") format("woff2"),
       url("../fonts/Noe/NoeStandard-RegularItalic.woff") format("woff");
} 

@font-face { 
  font-family: "Noe Standard"; 
  font-style: normal;
  font-weight: 100;
  src: url("../fonts/Noe/NoeStandard-Thin.woff2") format("woff2"),
       url("../fonts/Noe/NoeStandard-Thin.woff") format("woff");
} 

@font-face { 
  font-family: "Noe Standard"; 
  font-style: italic;
  font-weight: 100;
  src: url("../fonts/Noe/NoeStandard-ThinItalic.woff2") format("woff2"),
       url("../fonts/Noe/NoeStandard-ThinItalic.woff") format("woff");
} 

/* Base Styles */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html {
  max-width: 100%;
  min-height: 100%;
  -webkit-text-size-adjust: none;
  font-size: var(--size-base);
  scroll-behavior: smooth;
}

/* Basic Type */

body {
  background-color: var(--red-light);
  font-family: var(--font-serif);
  font-variant-ligatures: normal;
  font-weight: normal;
}

em,
i {
  font-style: italic;
}

ul,
li,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
strong,
b {
  font-weight: bold;
}

p,
blockquote {
  margin-bottom: var(--pad-small);
}

h1,
h2,
h3,
h4 {
  & i, & em {
    font-weight: bold;
    font-style: italic;
  }
}

h1 {
  font-weight: 100;
  font-size: var(--size-large);
}

h2 {
  font-size: var(--size-small);
  font-weight: bold;
  padding: var(--pad) 0 var(--pad-small) 0;
}

h4,
h5 {
  font-size: var(--size-base);
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.25rem;
  transition: all 0.2s ease-in-out;

  &:hover {
    color: var(--red);
  }
}

/* Element Defaults */

img {
  width: 100%;
  display: block;
}

section {
  padding: var(--pad) 0;
}

figure {
  padding: var(--pad) 0;

  & figcaption {
    font-weight: normal;
    font-size: calc(var(--size-base) * .9);
    line-height: 1.4;
  }
}

/* Navigation */

header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  padding: var(--pad);
  z-index: 100;
}

.menu_toggle,
#logo {
  transition: 200ms ease-in-out;
}

body:not([data-nav]) .nav-up {
  & .menu_toggle,
  & #logo {
    transform: translateY(-250%);
  }
}

@media (min-width: 1024px) {
  & body:not([data-nav]) {
    &.home,
    &.issue {
      & header.nav-up {

        & .menu_toggle,
        & #logo {
          transform: none;
        }
      }
    }
  }
}

.main_menu {
  font-size: var(--size-xsmall);
  font-family: var(--font-sans);
  font-weight: bold;
  position: fixed;
}

.menu_toggle {
  cursor: pointer;
  position: fixed;
  z-index: 200;
  width: 35px;
  transform: rotate(0) translateY(0);
  transition: all 250ms ease-out;

  & .line {
    background-color: var(--black);
    height: 3px;
    margin-bottom: 6px;
  }

  &.light .line {
    height: 5px;
    border: 1px solid var(--red-light);
  }
}

.menu_container {
  background-color: var(--red);
  height: 100vh;
  width: calc(100% - var(--flap-width));
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  padding: var(--pad);
  padding-top: var(--pad-large);
  transform: translateX(-100%);
  pointer-events: none;
  transition: opacity 300ms ease-in, transform 300ms ease-in;

  @media (max-width: 1024px) {
    transition-duration: 200ms;
  }

  & .navlink {
    display: inline-block;
    font-family: var(--font-serif-display);
    font-weight: 100;
    font-size: var(--size-large);
    color: var(--black);
    text-decoration: none;

    &.support-us { 
      margin-top: var(--pad-small);
    }
  }

  & .navlinks_footer {
    display: flex;
    position: absolute;
    bottom: var(--pad-medium);

    & a,
    & span {
      display: inline-block;
      margin-right: var(--pad);
    }

    & a {
      text-decoration: none;

      &:hover {
        color: inherit;
      }
    }
  }
}

body[data-nav] {
  overflow: hidden;
  position: fixed;
  width: 100%;

  & .menu_container {
    transform: translateX(0%);
    opacity: 1;
    pointer-events: auto;
  }

  & .menu_toggle {
    transform: rotate(90deg) translateX(4px) translateY(3px);

    & .line {
      &:first-child {
        transform: rotate(45deg) translate(6px, 6px);
      }

      &:nth-child(2) {
        opacity: 0;
      }

      &:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
      }
    }

    &.light .line {
      height: 3px;
      border: none;
    }
  }
}

#logo {
  position: fixed;
  width: 120px;
  top: var(--pad);
  right: var(--pad);
  z-index: 300;
}

main {
  margin-top: var(--pad-large);
  padding-bottom: var(--pad-large);
}

/* Structures */

.grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-column-gap: var(--pad-small);
  max-width: var(--maxwidth-body);
  margin: auto;
}

footer {
  font-weight: bold;
  font-family: var(--font-sans);
  font-size: var(--size-xsmall);
  background-color: var(--grey-light-2);
  padding: var(--pad-medium) 0 var(--pad) 0;
  padding-top: 60px;
  position: absolute;
  width: 100%;
  padding-bottom: calc( var(--pad) + 1rem);
  padding-top: var(--pad-large);
  display: flex;
  align-items: flex-end;

  & .footer-wrapper {
    max-width: var(--maxwidth-text);
    min-width: var(--maxwidth-text);

    margin: 0 auto;
    display: flex;
    justify-content:space-between;
    align-items: center;

    @media (max-width: 820px) {
      width: calc(100% - var(--pad) * 2);
    }

    @media (max-width: 640px) {
      width: calc(100% - var(--pad) * 2);
      flex-direction: column;
      align-items: flex-start;

      & .copyright {
        padding: var(--pad) 0;
      }
    }
  }

  & .endtag {
    font-family: var(--font-serif);
    font-size: var(--size-small);
    grid-column-start: 2;
    grid-column-end: span 4;
  }

  & .info {
    font-family: var(--font-sans);
    grid-column-start: 7;
    grid-column-end: -1;
  }
}

/* Forms */

.newsletter {
  font-family: var(--font-sans);
  font-size: var(--size-xsmall);

  & p {
    margin-bottom: var(--pad-xsmall);
    line-height: 1.5;
  }

  & .response {
    font-weight: bold;
  }
}

.newsletter-input {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: 60%;
  align-items: flex-end;
}

input.email {
  border: none;
  border-radius: 0;
  border-bottom: solid 1px var(--black);
  background-color: transparent;
  width: 40%;
  min-width: 220px;
  height: auto;
  padding: .25rem 0 .5rem 0;
  font-family: var(--font-serif);
  font-size: var(--size-small);
  text-align: left;
  margin-bottom: 1rem;

  &::placeholder {
    color: var(--black);
    opacity: .7;
  }
}

input.email:focus {
  outline: none;
}

nav input.email::placeholder {
  color: var(--black);
  opacity: 1;
}

button.submit {
  background: transparent;
  display: block;
  border: solid 1px;
  color: inherit;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--size-xsmall);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  padding: 12px 10px;
  min-width: 125px;
  height: fit-content;
  margin-bottom: 1rem;
  margin-left: 1rem;
  transition: all 0.1s ease-in-out;
  text-align: center;
  font-weight: bold;
  font-size: var(--size-xsmall);
  letter-spacing: 0.02em;


  &:hover {
    background-color: var(--red);
    color: var(--white);
  }

  & .submit-arrow {
    display: block;
    top: 10px;
    width: 50px;
    position: absolute;

    & .cls-1 {
      fill: var(--black);
    }
  }

  & .submit-airplane {
    display: none;
  }

  & #arrow-hover {
    opacity: 0;
  }

  &:hover {
    & #arrow {
      opacity: 0;
    }

    & #arrow-hover {
      opacity: 1;

      & .cls-1 {
        fill: var(--black);
      }
    }
  }
}

label {
  display: none;
}

#mce-responses {
  font-style: italic;
  height: 20px;
  margin-left: 10px;
}

#post-thankyou {
  display: none;
}

#mc_embed_signup input.mce_inline_error {
  border-color: var(--red);
}

#mc_embed_signup div.mce_inline_error {
  background: none;
  color: var(--red);
}

#mc_toc_signup {
  margin-top: var(--pad-small);
  margin-left: 60px;
  color: var(--red);

  & input.email {
    border-bottom-color: var(--red);

    &::placeholder {
      color: var(--red);
    }
  }

  & button.submit .submit-arrow .cls-1,
  & button.submit:hover #arrow-hover .cls-1 {
    fill: var(--red);
  }

  & .submit-arrow,
  & .submit-arrow:hover {
    display: block;
  }

  & .submit-airplane {
    display: none;
  }

  @media (max-width: 1248px) {
    margin-left: 0;
  }
}


#mc_article_signup {
  text-align: center;
  text-align: left;
  margin: var(--pad-medium) 0;

  & form {
    width: var(--maxwidth-text);
    margin-left: auto;
    margin-right: auto;
    padding: calc(var(--pad-small)*2);
    color: var(--black);
    background-color: var(--red-medium);

    & button.submit:hover {
      color: var(--red-medium);
      background-color: var(--black);
    }

    @media (max-width: 640px) {
      padding: calc(var(--pad-small) * 1.5);
    }
  }

  & p {
    font-weight: bold;
  }

  & .newsletter-input {
    justify-content: left;
  }

  & input.email {
    border-bottom: 1px solid var(--black);
    width: 100%;

    @media (max-width: 640px) {
      min-width: auto;
    }
  }

  & input,
  & select,
  & textarea,
  & textarea::placeholder,
  & input::placeholder,
  & textarea:focus,
  & input:focus {
    color: var(--black);
  }

  & button.submit .submit-arrow {
    display: none;
  }

  & button.submit .submit-airplane {
    display: block;

    @media (max-width: 640px) {
      width: 100%;
    }
  }
}

#donate-nav-button {
  background: transparent;
  display: block;
  border: solid 1px;
  color: inherit;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--size-xsmall);
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  padding: 12px 10px;
  min-width: 125px;
  height: fit-content;
  margin-bottom: 1rem;
  margin-left: 1rem;
  transition: all 0.2s ease-in-out;
  text-align: center;

  &:hover {
    background-color: var(--black);
    color: #faf8f0;
  }
}

#button-footer-group {
  display: flex;
  width: fit-content;
  justify-content: flex-end;
}

#donate-footer-button {
  margin-left: var(--pad-xsmall);
}

#donate-footer-button,
#signup-footer-button {
  font-family: var(--font-sans);
  transition: all .1s ease-in-out;
  transform: translateY(0px);
  cursor: pointer;
  border: solid 1px var(--black);
  text-align: center;
  font-weight: bold;
  font-size:    var( --size-xsmall);
  letter-spacing: 0.02em;
  padding: 12px 10px;
  min-width: 125px;
  text-decoration: none;

  @media (max-width: 640px) {
    right: var(--pad);
  }

  &:hover {
    background-color: var(--black);
    color: #faf8f0;
  }
}

#signup-footer-popup {
  display: none;
  position: absolute;
  bottom: var(--pad);
  width: 100%;

  @media (max-width: 640px) {
    right: var(--pad);
  }

  & .newsletter {
    display: flex;
    max-width: var(--maxwidth-text);
    margin: 0 auto;
    align-items: flex-start;
    justify-content: space-between;
    background-color: var(--grey-light-2);
    @media (max-width: 820px) {
      width: calc(100% - (var(--pad)*2));
    }
  }

  & form {
    padding: 0;
    color: var(--black);

    @media (max-width: 640px) {
      width: calc(100% - var(--pad) * 1);
      margin: 0 var(--pad);
    }
  }

  & .newsletter p {
    font-weight: bold;
  }

  & .newsletter-input {
    width: 100%;
    justify-content: space-between;
  }

  & input.email {
    font-size: var(--size-base);
    min-width: 340px;
    width: 100%;

    @media (max-width: 640px) {
      min-width: auto;
      width: 60%;
    }
  }

  & button.submit:hover {
    color: var(--white);
    background-color: var(--black);
    border-color: var(--black);
  }

  & .response {
    padding: 12px 0px;
    margin-bottom: 1rem;
  }

  & .close_signup {
    display: block;
    position: relative;
    width: 25px;
    top: 0;
    cursor: pointer;
  }

  &.show {
    display: block;
    z-index: 150;
  }
}

/* Homepage & Issue landing page */

.issue {
  & header {
    position: fixed;

    & #logo {
      width: 240px;
      transition: all ease-in .2s;

      &.hide {
        opacity: 0;
      }
    }
  }

  & main {
    width: 100%;
    display: flex;
    position: absolute;
    margin-top: 0;

    & section {
      padding: 0;
    }

    & .logo_alt {
      opacity: 0;
      width: 100px;
      position: fixed;
      top: calc(var(--pad) - 20px);
      right: var(--pad);

      &.show {
        opacity: 1;
      }
    }

    & .left {
      width: calc(100% - var(--flap-width));

      & .cover {
        position: fixed;
        width: calc(100% - var(--flap-width));

        height: var(--height-cover);

        & figure {
          margin: 0;
          padding: 0;
          width: 100%;
          height: var(--height-cover);
          overflow: hidden;
        }

        & img {
          height: 100%;
          object-fit: cover;
        }
      }

      & .toc {
        position: relative;
        top: var(--height-cover);
        background: var(--red-light);
        padding: 0 var(--pad) calc(var(--pad)*2.5) calc(var(--pad)*3);

        & figcaption {
          width: 100%;
          text-align: right;
          font-family: var(--font-sans);
          padding-top: 12px;
          position: relative;
          right: -20px;
          font-family: var(--font-sans);
          font-size: calc(var(--size-xsmall) *0.85);
        }

        & li {
          padding: calc(var(--pad-small)*1.5) 0;
        }

        & a {
          color: var(--black);
          position: relative;
          display: flex;
          text-decoration: none;

          & svg {
            width: 100%;
            fill: var(--red);
          }
        
          &:hover {
            color: var(--red);

            & .snippet,
            & .asterisk-mark {
              opacity: 1;
            }

            & .title-text {
              color: var(--red);
            }
          }
        }

        & .newsletter {
          & input.email {
            width: 80%;
          }

          & p {
            font-weight: normal;
          }
        }

        & .title-text {
          flex: none;
          padding-left: var(--pad-xsmall);
          width: 53%;
        }

        & .article-category {
          font-size: var(--size-xxsmall);
          letter-spacing: 0.01em;
          padding-bottom: .2rem
        }

        & h1,
        & h2 {
          font-size: calc(var(--size-large)*.8);
          margin-block-start: 0em;
          margin-block-end: 0em;
          padding: 0;
        }

        & h1 {
          line-height: 1.2;
          display: inline-block;
          max-width: 30rem;
        }

        & h2 {
          & span:not(:last-child) {
            &::after {
              content: ',';
            }
          }
        }

        & .asterisk-mark {
          width: 50px;
          opacity: 0;
          transition: opacity ease-in .2s;

          &.has-category {
            padding-top: 14px;
          }
        }

        & .snippet {
          flex: 1;
          position: relative;
          color: var(--red);
          opacity: 0;
          transition: opacity ease-in .2s;
          max-width: 430px;

          position: absolute;
          left: 60%;
          width: 40%;
          height: auto;

          & p {
            position: absolute;
            font-size: calc(var(--size-xsmall)*0.9);
            font-weight: normal;
            top: 0.3em;
          }
        }
      }

      & .coming-soon-header {
        font-family: var(--font-sans);
        font-size: var(--size-xsmall);
        color: var(--red);
        margin-top: var(--pad-large);
        margin-left: 50px;
        padding-left: var(--pad-xsmall);
      }

      & .coming-soon-list {
        color: var(--red);
        opacity: .4;
        margin-left: 50px; //asterisk mark width inset
      }

      & .label-new-article {
        font-family: var(--font-sans);
        color: var(--red);
        font-weight: bold;
        padding-bottom: 4px;
      }

      & .new-article .snippet {
        top: 24px;
      }

      & #mc_toc_signup {
        margin-bottom: var(--pad);
      }

      @media (max-width: 1248px) {
        & .coming-soon-header,
        & .coming-soon-list {
          margin-left: 0;
          padding-left: 0;
        }
      }
    }

    & .right {
      width: var(--flap-width);
      position: fixed;
      height: 100vh;
      top: 0;
      right: 0;
      overflow-y: auto;
      font-family: var(--font-sans);
      font-weight: normal;
      font-size: var(--size-xsmall);
      padding: var(--pad);
      padding-top: 105px;

      & .header {
        display: flex;
        justify-content: space-between;
      }

      & .newsletter {
        & p {
          font-weight: bold;
        }

        & input.email {
          font-size: var(--size-xsmall);
          min-width: 215px;
        }

        & button.submit:hover {
          background-color: var(--black);
          color: var(--white);
          border: solid 1px var(--black);
        }

        & .response {
          position: absolute;
        }
      }

      & h4 {
        font-weight: bold;
        padding-bottom: var(--pad-xsmall);
        width: 50%;
      }

      & h5 {
        width: 80%;
      }

      & .description {
        font-family: var(--font-serif);
        font-size: var(--size-xsmall);
        position: absolute;
        top: 35vh;
        width: calc(var(--flap-width) - 2* var(--pad));

        & p {
          max-width: 34em;
        }
      }

      & .credit {
        position: absolute;
        bottom: var(--pad-small);
        padding-right: var(--pad);
      }

      & .tags {
        position: fixed;
        width: calc(30% - (var(--pad)*2));
        min-width: calc(380px - (var(--pad)*2));
        right: var(--pad);
        top: 50%;

        & h1 {
          margin-bottom: var(--pad);
        }

        & .tag-group-header {
          display: flex;
        }

        & h4 {
          flex: 1;
          padding-bottom: var(--pad-xsmall);
        }

        & .clear {
          flex: none;
          cursor: pointer;

          &:hover {
            font-weight: bold;
          }
        }

        & ul {
          border-top: 1px solid var(--black);

          & li {
            font-weight: normal;
            padding: var(--pad-xsmall) 0;
            cursor: pointer;
            display: inline-block;
            margin-right: var(--pad-small);

            &:hover {
              text-decoration: underline;
            }

            &.selected {
              font-weight: bold;
            }
          }
        }
      }
    }
  }

  & footer {
    display: none;
  }
}

.home-intro {
  & p {
    grid-column-start: 2;
    grid-column-end: span 3;
    font-size: var(--size-large);
    line-height: 1.2;
  }
}

.articles main .left {
  & .toc {
    top: var(--pad-large);
  }
}

.issue-listing {
  border-top: 1px solid;
  border-bottom: 1px solid;
}

.post-index {
  grid-column-start: 2;
  grid-column-end: span 5;
}

.listing-post {
  display: flex;
  border-bottom: 0;
  margin-bottom: var(--pad);
}

.listing-title {
  flex: 3;
  margin-right: var(--pad-small);
}

.listing-summary {
  flex: 2;
  font-size: var(--size-xsmall);
  font-weight: normal;
  color: var(--black);
}

.thumbnail {
  margin-top: var(--pad-small);
  width: 78%;
}

.sorter {
  grid-column-start: 7;
  grid-column-end: -1;
  font-family: var(--font-sans);
  font-size: var(--size-xsmall);

  & .filter-header {
    font-weight: bold;
    padding-bottom: var(--pad-xsmall);
    border-bottom: 1px solid;
    margin-bottom: var(--pad-xsmall);
  }

  & .filter-tags {
    margin-bottom: var(--pad);
  }
}

nav.issue-nav {
  display: flex;

  & .prev,
  & .next {
    width: 50%;

    & a,
    & img {
      display: inline-block;
    }
  }

  & .next img {
    max-width: 17px;
  }

  & .prev img {
    transform: rotate(90deg) translateY(10px);
    width: 27px;
  }

  & .inactive {
    opacity: .2;
  }

  & .next {
    text-align: right;
  }
}

.home #signup-nav,
.issue #signup-nav {
  position: absolute;
  bottom: calc(100vh - var(--height-cover) - 17px);
}

.issue #signup-nav {
  @media (max-width: 1024px) {
    z-index: 100;
    bottom: 0;
  }
}
 
.home #donate-nav,
.issue #donate-nav {
  position: absolute;
  bottom: calc(100vh - var(--height-cover) - 17px);
  right: var(--pad);

  @media (max-width: 640px) {
    position: relative;
    bottom: auto;
    right: auto;
    left: 0;
  }
}

.home #donate-nav-button,
.issue #donate-nav-button {
  @media (max-width: 640px) {
    margin-left: 0;
  }
}

/* Article Layout */

.article,
.page {
  & #logo {
    width: 80px;
    margin-top: -10px;
    transition: all ease-in .2s;

    &.small {
      width: 50px;
    }

    & img {
      opacity: 1;
    }

    &:hover {
      & img {
        opacity: 0;
      }

      background-image: url('/assets/img/asterisk_marks_animated-transparent.gif');
      background-position: left;
      background-size: 100%;
    }
  }

}

.post section {
  max-width: var(--maxwidth-text);
  margin: auto;
}

.post .opener {
  color: var(--red);
  padding: 0;
  position: relative;
  left: calc(-1 * var(--pad-large));
  max-width: calc(var(--maxwidth-text) * 1.1);
  margin-left: var(--margin-left);

  & h1,
  & h2 {
    line-height: 1.0;
  }

  & h2 {
    padding: 0;

    & span:not(:last-child) {
      &::after {
        content: ',';
      }
    }
  }
}

main.post .content {
  position: relative;
  max-width: none;
  font-feature-settings: "onum" 1;

  & .text-container {
    display: flex;
    flex-direction: column;
  }

  & h2,
  & h3,
  & h4,
  & .text p,
  & .intro p,
  & .quote-inline p,
  & blockquote,
  & .code,
  & .line {
    width: var(--maxwidth-text);
    margin-left: auto;
    margin-right: auto;
  }

  & .intro {
    color: var(--red);
    margin-bottom: var(--pad);
  }

  & blockquote {
    text-indent: -0.05em;
    padding: var(--pad) 0;
  }

  & .code {
    margin: var(--pad-small) auto;
    border: 1px solid var(--black);

    & iframe {
      display: block;
      width: 100%;
      min-height: 400px;
    }
  }

  & h3,
  & h4,
  & .intro,
  & blockquote {
    font-family: var(--font-serif-display);
    font-size: var(--size-large);
    line-height: 1.2;
    font-weight: normal;
  }

  & .quote-inline {
    font-size: 0.87em;
    letter-spacing: 0.01em;

    & p {
      padding: 0 var(--pad-large);
      line-height: 1.4;
    }
  }

  & .line {
    padding: var(--pad) 0;
  }

  & hr {
    border: none;

    &:before {
      color: var(--red);
      content: '***';
      display: block;
      font-size: var(--size-large);
      text-align: center;
    }
  }

  & ::selection,
  & .highlighted,
  & .marked {
    background-color: var(--red-medium);
  }
}

figure {
  font-family: var(--font-sans);
  width: var(--maxwidth-text);
  margin: auto;

  & .image-title,
  & .image-caption,
  & .image-credit {
    width: var(--maxwidth-text);
    margin-left: auto;
    margin-right: auto;
  }

  & .image-title {
    font-weight: bold;
    font-size: calc(var(--size-base) * .9);
  }

  & .image-caption {
    font-weight: normal;
    font-size: calc(var(--size-base) * .9);
    line-height: 1.4;
  }

  & .image-credit {
    margin-top: var(--pad-xsmall);
    font-size: calc(var(--size-xsmall) * .95);
  }

  & .image-src {
    margin: var(--pad-xsmall) 0;
  }

  & .lightbox {
    cursor: pointer;
  }

  &.fullwidth {
    max-width: none;
    width: 80%;
  }

  &.small {
    & .image-src {
      width: calc(var(--maxwidth-text) * 0.33);
    }
  }
}

.article-footer {
  font-size: var(--size-xsmall);
  font-family: var(--font-sans);
  margin-top: var(--pad-small);

  & p {
    margin-bottom: 0.25em;
  }
}

p.time {
  display: inline-block;
}

section.authors {
  border-top: solid 1px;
  border-bottom: solid 1px;

  .author-list {
    gap: var(--pad-small);
  }
}

.author-list {
  display: flex;
  flex-direction: column;
  gap: var(--pad);

  & .byline {
    font-size: 0.9em;
    font-family: var(--font-sans);
    line-height: 1.6;

    & p {
      margin-block-end: 0;
    }

    & .articles {
      margin: 0;

      & .article {
        display: inline;

        &:not(:last-child) {
          margin-inline-end: var(--pad-xsmall);
        }

        &:before {
          content: " → "
        }
      }
    }
  }
}

.prev_next {
  font-size: 0.9em;
  font-family: var(--font-sans);
  display: flex;
  justify-content: space-between;

  & a {
    text-decoration: none;
    color: var(--black);
  }

  & .prev,
  & .next {
    position: relative;
    width: 49%;
  }

  & .prev a::before,
  & .next a::after {
    content: '';
    background: url('../../assets/img/asterisk_arrow_08.png') center/30px no-repeat;
    position: absolute;
    top: -4px;
    width: 30px;
    height: 30px;
    opacity: 0;
    display: block;
    transition: opacity 0.2s ease-in-out;
  }

  & .prev {
    & a::before {
      left: -40px;
    }

    & a:hover::before {
      opacity: 1;
    }
  }

  & .next {
    text-align: right;

    & a::after {
      right: -40px;
      transform: rotate(180deg);
    }

    & a:hover::after {
      opacity: 1;
    }
  }
}

.seealso {
  font-size: 0.9em;
  font-family: var(--font-sans);
  padding-top: var(--pad-large);

  & h4 {
    margin-bottom: var(--pad-xsmall);
  }

  & .article-tags {
    font-size: var(--size-xsmall);

    & .btn_tag {
      color: var(--black);
      font-weight: bold;

      &:not(:last-child)::after {
        content: ", ";
      }
    }
  }
}

.related {
  padding: var(--pad-small) 0 var(--pad) 0;

  & li {
    padding: calc(var(--pad-xsmall)*1.5) 0;
    border-top: 1px solid var(--black);

    &:last-child {
      border-bottom: 1px solid var(--black);
    }

    & a {
      display: flex;
      text-decoration: none;
    }

    & h1 {
      flex: 3;
      font-size: var(--size-base);
    }

    & div {
      flex: 2;
      text-align: right;

      & span:not(:last-child) {
        &::after {
          content: ",";
        }
      }
    }
  }
}

.show {
  & .progress-bar {
    transform: translateY(0%);
  }

  & .progress-bookmark {
    transform: translateX(0%);
  }
}

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 0;
  background-color: var(--red);
  transition: opacity linear 0.1s;
  min-height: 0vh;
  z-index: 10;
  transform: translateY(-100%);
  transition: transform ease-in .2s;
}

.progress-bookmark {
  font-size: var(--size-xsmall);
  position: fixed;
  left: 0;
  display: flex;
  z-index: 50;
  cursor: pointer;
  color: var(--black);
  text-decoration: none;

  transform: translateX(-100%);

  & .text {
    margin-left: 5px;
    transition: opacity .2s ease-in;
    width: calc(var(--margin-left) - 60px);

    & img {
      width: 15px;
      height: auto;
      margin-right: 5px;
    }
  }

  & .dot {
    height: 1px;
    transition: transform ease-in .2s;
  }

  &.chaptermark {
    color: var(--black);

    & .dot {
      width: 46px;
      height: 12px;
      border-bottom: 1px solid;
      opacity: 1;
    }

    & .text {
      opacity: 0;
    }
  }

  &.hltmark {
    & .dot {
      background: url('/assets/img/asterisk_mark.png') center right/20px no-repeat;
      height: 20px;
      width: 43px;
      margin-left: 5px;
    }

    & .text {
      font-style: italic;
    }
  }

  &:hover,
  &.flash {

    & .text,
    & img {
      opacity: 1;
    }
  }

}

.bookmark {
  cursor: pointer;
  opacity: 0;
  position: absolute;

  transition: opacity .3s ease-in;
  text-align: right;
  z-index: 100;
  left: var(--margin-left);

  & img {
    position: absolute;
    right: 5px;
    width: 30px;
    margin-top: 1px;
  }

  &[data-mode=add-marker] {
    & #marker {
      display: block;
    }

    & #marker-popup {
      display: none;
    }
  }

  &[data-mode=remove-marker] {
    & #marker {
      display: none;
    }

    & #marker-popup {
      display: block;
    }
  }
}

.chapter-indicators {
  font-family: var(--font-sans);
  font-size: var(--size-xxsmall);
  z-index: 10;

  & .indicator-title {
    position: fixed;
    top: 20vh;
  }
}

#marker-popup {
  position: relative;
}

#eraser {
  width: 24px;
}

#help {
  width: 22px;
  top: 30px;
  right: 8px;
}

.red {
  color: var(--red);
}

.green {
  color: var(--green-vivid);
}

.blue {
  color: var(--blue-light);
}

sup {
  font-weight: bold;
  font-family: var(--font-sans);
  font-size: var(--size-xxsmall);
  display: inline-block;

  &.footnote {
    color: var(--red);

    & a {
      text-decoration: none;
    }
  }
}

.notes-container {
  position: absolute;
  top: 0;
  left: calc(50vw + var(--maxwidth-text)/2);
  margin-left: var(--pad);
  width: calc(var(--margin-left) - 80px);
  max-width: 25em;
}

.footnotes-list li {
  font-family: var(--font-sans);
  font-weight: normal;
  font-size: calc(var(--size-xsmall) * 0.9);
  letter-spacing: 0.01em;
  line-height: 1.4;
  list-style-type: decimal;
  position: absolute;
  opacity: 0;
  transition: opacity 400ms;

  & .close {
    display: none;
  }

  &::marker {
    color: var(--red);
  }
}

.share {
  display: inline-block;
  position: relative;
  top: 4px;
}

.social-icon {
  display: inline-block;
  height: 20px;
  margin-left: 5px;

  & svg {
    height: 100%;
    fill: var(--black);
    transition: fill 0.2s ease-in-out;
  }

  &:hover {
    & svg {
      fill: var(--red);
    }
  }
}

.to-editor {
  font-size: 0.9em;
  font-family: var(--font-sans);
}

.image-overlay {
  position: fixed;
  background-color: rgb(0 0 0 / 80%);
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1000;
  display: flex;
  visibility: hidden;
  pointer-events: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 600ms, visibility 600ms;

  & img.horizontal {
    width: 90%;
  }

  & img.vertical {
    height: 90vh;
    width: auto;
  }

  &.display {
    cursor: pointer;
    pointer-events: auto;
    visibility: visible;
    opacity: 1;

    & img {
      max-width: 90%;
      max-height: 90%;
      width: auto;
      height: auto;
    }
  }
}

#popup {
  position: fixed;
  font-family: var(--font-sans);
  font-size: calc(var(--size-xsmall)*0.9);
  border: solid 1px var(--black);
  background-color: var(--red-light);
  width: 300px;
  right: var(--pad-small);
  bottom: var(--pad-small);
  padding: var(--pad-small);
  padding-bottom: var(--pad-medium);

  pointer-events: none;
  opacity: 0;
  transition: opacity .4s;
  z-index: 10;

  & p {
    margin-bottom: 1em;
  }

  & h2 {
    font-size: calc(var(--size-xsmall)*0.9);
    padding-top: 0;
  }

  &.show {
    opacity: 1;
    pointer-events: all;
  }
}

#popup-trigger {
  cursor: pointer;
  position: fixed;
  bottom: var(--pad);
  right: 30px;
  width: 30px;
  height: 30px;
  padding-bottom: 2.2rem;
  z-index: 10;

  & .close {
    display: none;
  }

  & .help {
    display: block;
  }
}

#popup.show + #popup-trigger {
  & .help {
    display: none;
  }

  & .close {
    display: block;
    width: 25px;
    transform: scaleY(-1);
  }
}

@media (max-width: 768px) {
  #popup,
  #popup-trigger {
    display: none;
  }
}

.inline-icon {
  display: inline-block;
  height: 1em;
  width: auto;
  position: relative;
  bottom: -3px;
}

#logo img.hover {
  background-color: var(--red-light);
  mix-blend-mode: darken;
  position: absolute;
  top: 0;
}

.buttons-group {
  display: flex;
  justify-content: center;
}

details {
  width: var(--maxwidth-text);
  margin: 0 auto;
  font-size: 0.87em;
  letter-spacing: 0.01em;

  & .quote-inline {
    padding-top: var(--pad-small);
    font-size: 1em;
  }
}

.infographic {
  font-family: var(--font-sans);
}

.graphic {
  margin-top: var(--pad-medium);
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  font-weight: normal;
  font-size: calc(var(--size-base) * .9);
  line-height: 1.4;
  margin-bottom: var(--pad-small);

  @media (max-width: 640px) {
    font-size: var(--size-xxsmall);
  }
}

th {
  text-align: left;
  vertical-align: bottom;
}

th,
td {
  padding: 5px;
  border-bottom: 1px solid var(--grey);
  border-left: 1px solid var(--grey);

  &:first-child {
    border-left: 0;
    padding-left: 0;
  }
}

tr:last-child {
  & th,
  & td {
    border-bottom: 0;
  }
}

/* Page Layout */

.page {
  & section {
    max-width: var(--maxwidth-text);
    margin: auto;
    padding: var(--pad-small) 0;
  }

  & .content {
    font-size: var(--size-small);
  }
}

.about {
  font-family: var(--font-sans);
  font-size: var(--size-xsmall);

  & .title {
    font-family: var(--font-serif);
  }

  & .description {
    font-family: var(--font-serif);
    font-size: var(--size-small);
  }

  & .credit-list {
    display: grid;
    grid-template-columns: 4fr 5fr;
    column-gap: var(--pad);
  }

  & .credit-items {
    padding-bottom: var(--pad-xsmall);

    & .item {
      padding-right: var(--pad-xsmall);
      display: inline-block;

      &:first-child {
        font-weight: bold;
      }

      & p {
        margin-bottom: var(--pad-xsmall);
        display: inline-block;
      }
    }
  }

  & .newsletter {
    font-size: var(--size-xsmall);
    font-family: var(--font-sans);
  }
}

/* NewsLetter Layout */

.newsletters {
  & .newsletter-item {
    padding: calc(var(--pad-xsmall) * 1.5) 0;
    border-top: 1px solid var(--black);

    &:last-child {
      border-bottom: 1px solid var(--black);
    }
  }

  & a {
    width: 100%;
    display: flex;

    &:hover {
      color: var(--red);
    }
  }

  & h1.title,.date {
    display: inline-block;
    width: 70%;
    font-size: 0.9em;
    font-family: var(--font-sans);
    font-weight: bold;
    line-height: 1.6;
    margin-block-start: 0;
    margin-block-end: 0;

  }

  & .date {
    width: 30%;
    font-weight: normal;
    text-align: right;
  }
}

.newsletter {
  & .opener{
    color: var(--red);
    padding: 0;
    position: relative;
    left: calc(-1 * var(--pad-large));
    max-width: calc(var(--maxwidth-text) * 1.1);
    margin-left: var(--margin-left);
    
    & h1, & h2 {
      line-height: 1;
      font-size: calc(var(--size-xlarge)*0.6);
      padding: var(--pad-small) 0 0 0;
      letter-spacing: -0.02em;
    }

    & h2 {
      letter-spacing: -0.04em;
      padding-top: 0;
    }
  }
}

/* Issue Index */

section.issue-list {
  max-width: calc(var(--maxwidth-text) + 10rem);

  & .issue-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--pad-small);
    font-family: var(--font-sans);

    @media (max-width: 640px) {
      grid-template-columns: 1fr;
      gap: var(--pad-medium);
    }

    & .issue-item {
      position: relative;

      & a {
        text-decoration: none;
      }

      & .issue-cover,
      & .issue-info {
        transition: opacity 0.2s ease-in-out;
      }

      @media (min-width: 640px) {
        &:hover {
          & .issue-cover {
            opacity: 0;
          }

          & .issue-info {
            opacity: 1;
          }
        }
      }

      & .issue-info {
        padding: var(--pad-small);
        font-weight: bold;
        text-align: center;
        color: var(--black);

        @media (min-width: 640px) {
          opacity: 0;
        }
      }

      @media (min-width: 640px) {
        & .issue-back {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }

      & .issue-asterisk {
        margin-top: var(--pad-small);
        max-width: 100px;
        margin: auto;
        display: block;
      }
    }
  }
}

/* Articles Index */

.articles.issue {
  & header {
    & #logo {
      width: 120px;
    }
  }

  & main.archive {
    width: auto;
    display: block;
    position: relative;
    margin-top: var(--pad-large);
  }

  & section { 
    margin: auto;
    padding: var(--pad-small) 0;
  }
}

.archive {
  padding: 0 var(--pad) var(--pad-large)  var(--pad);

  & .archive-top {
    max-width:var(--maxwidth-text);
  }
  
  & .archive-index {
    font-family: var(--font-sans);
    font-size: var(--size-xsmall);
    line-height: 1.3;
    max-width: none;
    margin: auto;
  }

  @media (min-width: 1600px) {
    & .archive-top, & .archive-index {
      max-width: var(--maxwidth-body);
    }
  }
}

.archive-header, .archive-article-item a {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  padding: var(--pad-xsmall) 0;
  border-bottom: 1px solid;
  position: relative;
  gap: var(--pad-small);
  text-decoration: none;
}

.filter {
  font-weight: bold;

  &:hover{
    cursor: pointer;
  }

  &:not(.archive-tags):after {
    content: "";
    width: 20px;
    height: 25px;
    position: absolute;
  }

  &:hover, &.active-filter {
    &:after {
      background: no-repeat center center url(/assets/img/asterisk_arrow_sort.png);
      background-size: 15px;
    }
  }
  
  & .tag-count {
    display: none;
  }

  &.archive-tags:hover {
    & .tag-count {
      display: inline;
    }
  }

  &.asc:after {
    transform: rotate(180deg);
  }
}

.archive-title, .archive-tags {
  grid-column: span 3;
}

.archive-issue, .archive-author {
  grid-column: span 2;
}

.archive-tags .tag {
  &::after {
    content: ', ';
  }

  &:last-child::after {
    content: '';
  }
}

.archive-article-item {
  & .archive-title {
    font-family: var(--font-serif);
    font-size: 1.08em;
  }

  &:hover {
    background: var(--red-medium);
  }
}

.pagination {
  text-align: right;
  padding-top: var(--pad);
}

.filter.archive-tags {
  position: relative;
}

.tag-group {
  display: none;
  font-weight: normal;
  position: absolute;
  left: 0;
  top: 30px;
  width: 340px;
  height: auto;
  padding: var(--pad-small);
  background: var(--red-light);
  border: 1px solid;
  z-index: 20;

  & .tag-item {
    display: inline-block;
    margin-top: var(--pad-xsmall);
    margin-right: var(--pad-xsmall);

    &.selected{
      font-weight: bold;
    }
  }
}

.showtags {
  & .tag-group {
    display: block;
  }
}

#tags-clear, #tags-close {
  border-bottom: 1px solid;
  display: inline-block;
  margin-top: var(--pad);
}

#tags-close {
  float: right;
}

/* Headings */

.article-category,
.newsletter-time {
  font-family: var(--font-sans);
  font-size: var(--size-xsmall);
  font-weight: bold;
  text-transform: uppercase;
  padding-left: 0.05em;
}

.italic {
  font-style: italic;
}

.serif {
  font-family: var(--font-serif-display);
}

.sans {
  font-family: var(--font-sans);
  margin-top: 0.5rem;
}

.large {
  font-size: var(--size-xlarge);
  position: relative;
  left: -0.01em;

  &.sans {
    letter-spacing: -0.03em;
    font-size: calc(var(--size-xlarge) * 0.9);
  }
}

.small {
  margin-top: 0.5em;
  font-size: var(--size-large);
}

.thin {
  font-weight: 100;

  &.serif.large {
    letter-spacing: -0.02em;
  }

  &.sans.large {
    letter-spacing: -0.05em;
  }
}

.regular {
  font-weight: normal;

  &.serif.large {
    letter-spacing: -0.01em;
  }

  &.sans.large {
    letter-spacing: -0.05em;
  }
}

.bold {
  font-weight: bold;

  &.serif {
    font-weight: 600;
  }
}

.black {
  font-weight: 900;
}

.related {
  --font-serif-display: var(--font-serif);

  & .sans {
    margin-top: 0;
  }

  & .thin {
    font-weight: normal;
  }
}

/* Responsive Layout */

.issue main .left .cover figure {
  @media (max-width: 1300px) {
    background-size: auto 100%;
    background-position: calc(100% - 22vw);
  }
}

@media (max-width: 1300px) {
  .issue main .left .toc {
    & .snippet {
      display: none;
    }

    & a {
      display: block;
    }

    & .asterisk-mark {
      display: none;
    }

    & .title-text {
      width: 100%;
      padding-left: 0;
    }
  }

  .post .opener {
    max-width: var(--maxwidth-body);
  }

  figure.small .image-src {
    width: calc(var(--maxwidth-text) * 0.8);
  }

  .progress-bookmark.hltmark .dot {
    width: 54px;
  }

  .progress-bookmark.chaptermark .dot {
    width: 56px;
  }

  .progress-bookmark {
    width: 24vw;
  }

  .about .credit-list {
    display: block;
  }
}

@media (max-width: 1024px) {
  .main_menu {
    & .menu_container {
      width: 100%;
    }

    & .menu_toggle {
      &.light .line {
        height: 3px;
        border: none;
      }
    }

    & #logo {
      right: var(--pad);
    }
  }

  .issue {
    & header {
      & #logo {
        width: 170px;
        top: calc(var(--pad) - 10px);
      }
    }

    & .cover {
      width: 100%;
    }

    & main {
      flex-direction: column;

      & .right {
        position: static;
        height: auto;
        width: 100%;
        min-width: 100%;
        order: 1;

        display: flex;
        flex-direction: column;
        justify-content: space-between;

        & h4 {
          text-align: left;
        }

        & .description {
          position: relative;
          margin-top: var(--pad-xsmall);
          margin-block-end: 0;
          top: auto;
          width: 100%;
        }
      }

      & .left {
        position: relative;
        width: 100%;
        max-width: 100%;
        order: 2;

        & .cover {
          position: static;
          width: 100%;
        }

        & .toc {
          top: 0;
          padding-left: var(--pad);
          padding-bottom: 150px;
        }
      }
    }
  }

  .article #logo {
    width: 60px;
  }

  .post .opener {
    left: 0;
    max-width: var(--maxwidth-text);
  }

  .progress-bar {
    width: 24px;
  }

  figure {
    & .image-title,
    & .image-caption,
    & .image-credit {
      margin-left: 0;
      margin-right: 0;
      width: 100%;
    }

    & .image-src {
      margin: var(--pad-small) 0;
    }
  }

  figure.small .image-src {
    width: calc(var(--maxwidth-text) * 0.5);
  }

  .prev_next {
    display: block;

    & .prev,
    & .next {
      padding: var(--pad-small) 0;

      & a::before,
      & a::after {
        display: none;
      }

      & a:hover::before,
      & a:hover::after {
        visibility: hidden;
      }
    }

    & .next {
      text-align: left;
    }
  }

  & .seealso {
    padding-top: var(--pad-medium);
  }

  & .related li {
    & a {
      display: block;
    }

    & div {
      text-align: left;
    }
  }


  .notes-container {
    position: absolute;
    left: 0;
    width: 100vw;
    max-width: 50em;
  }

  [id^="fnref-"] {
    cursor: pointer;
  }

  .footnotes-list li {
    display: none;
    border: solid 1px;
    padding: var(--pad-small) var(--pad) var(--pad-small) var(--pad-small);

    background-color: var(--red-light);
    list-style-type: none;
    max-width: 380px;

    & .close {
      position: absolute;
      display: block;
      top: calc(var(--pad-small) * 0.8);
      right: calc(var(--pad-small) * 0.8);
      width: 25px;
      cursor: pointer;
    }

    &.show {
      display: block;
    }
  }

  .progress-bar {
    width: 24px;
  }

  .progress-bookmark.hltmark .dot {
    width: 28px;
  }

  .progress-bookmark.chaptermark .dot {
    width: 32px;
  }

  .progress-bookmark {
    font-size: var(--size-xxsmall);

    & .text {
      width: 60%;
    }
  }

  nav.issue-nav {
    position: relative;
    bottom: 0;
    padding-top: var(--pad);
    width: auto;
  }
}

@media (max-width: 820px) {
  .chapter-indicators,
  .markers {
    display: none;
  }

  .main_menu .menu_container {
    & .navlinks_footer {
      display: flex;
      flex-direction: column;
      bottom: var(--pad-large);

      & .privacy {
        order: 1;
        padding-bottom: var(--pad);
      }

      & .copyright {
        order: 2;
      }
    }
  }

  main {
    padding: var(--pad);
  }

  .issue main {
    padding: 0;
  }

  .issue {
    & header {
      & #logo {
        position: absolute;
        width: 140px;
        top: 15px;
        right: 10px;
      }
    }
  }

  .issue main .left .toc figcaption {
    right: 0px;
  }

  .page {
    & .archive-header,
    & .archive-article-item a {
      gap: 5px;
    }

    & .archive-index {
      font-size: var(--size-xxsmall);

      & .archive-issue {
        display: none;
      }

      & .archive-tags {
        display: none;
      }

      & .archive-title {
        grid-column: span 6;
      }

      & .archive-author {
        grid-column: span 4;
      }

      & .archive-date {
        grid-column: span 2;
      }
    }
  }

  .article {
    & #logo {
      width: 50px;
    }
  }

  .notes-container {
    width: var(--maxwidth-text);
  }

  .progress-bar {
    width: 10px;
  }

  .progress-bookmark.hltmark .dot {
    width: 28px;
  }

  .post .opener {
    margin-left: auto;
  }

  figure {
    & .image-title,
    & .image-caption,
    & .image-credit,
    &.fullwidth {
      width: 100%;
    }

    & .image-src {
      margin: var(--pad-small) 0;
    }

    &.small .image-src {
      width: 100%;
      padding: 0 10%;
    }
  }

  main.post .content .quote-inline p {
    padding: 0 var(--pad);
  }

  .footnotes-list li {
    width: 100vw;
    padding: var(--pad) var(--pad-medium) var(--pad) var(--pad);

    & .close {
      top: calc(var(--pad) * 0.8);
      right: calc(var(--pad) * 0.8);
    }
  }

  .notes-container {
    margin-left: 0;
  }

  #popup,
  #popup-trigger {
    display: none;
  }

  .newsletter-input {
    width: 100%;
  }

  .subscribe {
    & .items {
      display: block;
      
      & img {
        width: 60%;
      }
    }
  }

  nav.issue-nav {
    padding-top: 0;
    width: 70px;
  }

  #signup-nav {
    position: relative;
    bottom: auto;

    & input.email {
      min-width: auto;
      width: 100%;
    }
  }
}

/* Page Specific Overrides */

/* Contributors page */

.contributors .page {
  .author-list {
    margin-block-end: var(--pad-large);
  }
}

.highlights, .copyright{
  line-height: 1.5;
}

#clear {
  cursor: pointer;
}

#clear-confirmation {
  display: none;
}

#endgif {
  width: 50px;
  mix-blend-mode: multiply;
}

/* Subscribe page */

.subscribe {
  & .items {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: var(--pad);

    & img {
      padding-bottom: var(--pad-small);
      cursor: pointer;

    }

    & a {
      font-size: calc(var(--size-xsmall)*0.9);
      cursor: pointer;
      padding-bottom: var(--pad);
      display: block;

      &:hover {
        & .cta::after {
          opacity: 1;
          background: url('../../assets/img/asterisk_arrow_11_diagonal_red.png') center/30px no-repeat;
        }
      }

      & .cta {
        font-family: var(--font-sans);
        font-weight: bold;
        display: inline-block;

        &::after{ 
          content: ' ';
          background: url('../../assets/img/asterisk_arrow_11_diagonal.png') center/30px no-repeat;
          width: 30px;
          height: 30px;
          opacity: 0;
          display: inline-block;
          margin-bottom: -10px;
          transition: all 250ms ease-in;
        }
      }
    }
  }
}

/* Privacy page */

#privacy {
  & .content {
    & p, & li, & ol, & h1, & h2, & h3, & h4 {
      font-family: var(--font-sans);
    }

    & h3 {
      margin: var(--pad) 0 var(--pad-xsmall);
    }

    & p, & li, & ol {
      font-size: var(--size-xsmall);
      line-height: 1.4;
    }

    & li {
      padding-bottom: var(--pad-xsmall);
      padding-left: var(--pad-xsmall);
      margin-left: var(--pad-small);
      list-style-image: url('');
      list-style-type:circle;

      &:last-child {
        padding-bottom: var(--pad-small);
      }
    }
  }
}

/* Issue 3: AI */
#growing-up-overnight {
  & main.post .content .intro {
    font-family: var(--font-sans);
  }
}