/* Reset via - https://zellwk.com/blog/css-reset/ */

  /* Reset margins and paddings on most elements */
  body,h1,h2,h3,h4,h5,h6,ul,ol,li,p,pre,blockquote,figure,hr { margin: 0; padding: 0; }
  /* Removes discs from ul */
  ul { list-style: none; }
  /* Form styling */
  input,textarea, select, button { color: inherit; font: inherit; letter-spacing: inherit; }
  input,textarea, button { border: 1px solid gray; }
  button { border-radius: 0; padding: 0.75em 1em; background-color: transparent; }
  /* Media Elements */
  embed, iframe, img, object, video { display: block; max-width: 100%; }

  /* Font import */
  body {
  font-family: 'Poppins', sans-serif;
  font-display: swap;
  }

/* Default CSS */
body { background: #f5f5f5; font-size: calc(16px + .3vw); display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }
header { background: #d20014; color: #fff; padding: 15px 10px; }
header img { width: 60vw; }
a { text-decoration: underline; color: #d20014; }
nav { display: none; }
nav ul { margin-top: 10px; }
nav ul li { display: inline; }
nav ul li::after { content: " | "; margin: 0 5px;}
::selection { background: #d20014; color: #fff; }
mark { background-color: #fae6e8; color: #343C48; }
blockquote {
  background: #fae6e8;
  border-left: 10px solid #d20014;
  margin: 1.5em 0px;
  padding: 1em 40px;
  font-style: italic;
  color: #ca0019;
}
blockquote:before {
  display: block;
  content: '“';
  font-size: 3.5em;
  font-style: normal;
  line-height: 0.1em;
  margin: 0 0 0 -0.35em;
}
blockquote p {
  display: inline;
}

.cta { margin: 30px 20px; color: #343C48; }
.cta h1 { font-size: 2.1em; font-weight: 800; line-height: 1.2em; margin: 0 0 10px; }
.cta h2 { font-size: 1.3em; font-weight: 400; }
.cta img { margin: 30px 0; }
.cta form { margin: 0 0 30px 0; }
.cta input[type=email] { width: 100%; box-sizing: border-box; font-weight: 400; padding: 7px 0 7px 10px; border: none; border-bottom: 3px solid #343C48; border-radius: 0px; margin-bottom: 10px; }
.cta input[type=submit] { width: 100%; height: 40px; border: none; border-radius: 0px; -webkit-appearance: none; background: #d20014; color: #FFF5F5; font-weight: 700; letter-spacing: 0.05em; cursor: pointer; }
.cta input[type=submit]:hover { color: #ffffff; }

.benefits { background: #ECEFF4; padding: 20px 20px 20px 20px; color: #343C48; }
.benefits h2 { text-decoration: underline; text-decoration-color: #d20014; text-decoration-thickness: .125em; text-underline-offset: 4px; }
.benefits p { margin: 20px 0; }

.logos { background: #343C48; padding: 20px 20px 50px 20px; color: #343C48; }
.logos h2 { color: #f5f5f5; text-decoration: underline; text-decoration-color: #ECEFF4; text-decoration-thickness: .125em; text-underline-offset: 4px; }
.logos li { display: inline-block; } 

.who { height: 20vh; background: #d20014; color: #ffffff; display: grid; grid-template-columns: 1fr 2fr; grid-column-gap: 20px; margin: -40px 10px 20px 10px;}
.who p { padding: 20px 20px 20px 0; line-height: 1.7em; font-size: 0.8em; align-self: center; }
.who img { height: inherit; object-fit: cover; }

.latest { padding: 20px; }
.latest h3 { color: #343C48; text-transform: uppercase; font-weight: 700; font-size: 1.05em; letter-spacing: 0.3em; margin-bottom: 5px;}
.issues { display: grid; grid-template-rows: repeat(3, 200px); grid-gap: 1.5em; pointer-events: none; margin-top: 20px; }
.issues > .issue { background: #d20014; color: #fff; box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
cursor: pointer; pointer-events: auto; transition: 300ms opacity, 300ms transform }
.issues:hover > *, .issues:focus-within > * { opacity: 0.7; }
.issues:hover > *:hover, .issues:focus-within > :focus { transform: scale(1.03); opacity: 1; }
.issues a { text-decoration: none; color: inherit; }
.latest .issue img { min-width: 100%; height: 150px; object-fit: cover;}
.issue_meta { display: flex; height: 50px; align-items: center; justify-content: center;}

.issue_container { margin-top: 5px; }
.issue_import { margin-top: 10px; padding-top:120px; border-top: 3px solid #d20014; border-bottom: 3px solid #d20014; overflow: hidden;}

.issue h2 { text-transform: uppercase; display: inline; }
.issue p.date { font-style: italic; font-size: 20px; color: #343C48; display: inline; position: relative; bottom: 3px; }

.patreon { background: #ECEFF4; color: #343C48; padding: 20px;  }
.patreon h3 { font-size: 1em; margin-bottom: 10px; }
.patreon p { font-size: 0.8em; margin-bottom: 10px; }
.recent { margin-top: 20px; color: #343C48; }

.cta h2.bottom { font-weight: bold; }
.cta form.bottom { margin: 0px 0px 30px 0px; }

.author { display: grid; margin: 0 0 30px 0; grid-template-columns: 10% 1fr; grid-column-gap: 20px;}
.author img { border-radius: 50%; width: 100%; max-width: 100%; height: auto;}
.author_meta { align-self: center; color: #aaa; font-size: 0.8em; }
.author_meta a { text-decoration: none; color: inherit; }

article.survey { margin-top: 20px; padding: 0 15px;  color: #343C48; }
article.survey a { color: #d20014; }
article.survey h1 { font-size: 2.2em; font-weight: bold; }
article.survey h2.subhead { font-size: 1.4em; color: #999; font-weight: 400; margin: 0 0 20px 0;}
article.survey h3 { font-size: 1.3em; margin-top: 15px; font-weight: 500; }
article.survey p { font-size: 1.1em; line-height: 1.5em; font-weight: 400; margin: 1em 0;}
article.survey figure { grid-column: 1 / -1; margin: 30px 0; }
article.survey figure img { width: 100%; }
article.survey figure + p { padding-top: 0px; }
article.survey p a { text-decoration: none; color: #d20014; }
article.survey ul { list-style-type: square; list-style-position: outside; padding-left: 2em; margin-top: 20px; }
article.survey ol { list-style-position: outside; padding-left: 2em; margin-top: 20px; }
article.survey ul li, article.survey ol li { font-size: 1.1em; line-height: 1.5em; margin-bottom: 1em;  }

.survey section.intro { display: grid; grid-template-columns: none; grid-auto-rows: 1fr auto; grid-gap: 25px; }
section.intro aside { background: #ECEFF4; color: #343C48; height: min-content; padding: 5px 20px 20px 20px; font-size: 0.75em; }

hr { border: 0; border-top: 1px solid #d20014; width: 100%; margin: 30px 0;}
hr.short { border: 0; border-top: 1px solid #d20014; width: 50%; margin: 30px 0;}

footer { background: #343C48; color: #fff; padding: 20px 20px 40px 20px; font-size: 0.75em; font-weight: 200; }
footer a { color: #fff; }

.reviews .review-list {
  background: #ECEFF4; padding: 20px 20px 50px 20px; color: #343C48;
}

.review-list h2 { text-decoration: underline; text-decoration-color: #d20014; text-decoration-thickness: .125em; text-underline-offset: 4px; }
.review-items { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 30px; margin-top: 20px; }
.review-items img { object-fit: cover; height: 150px; }

/* For newsignup.php */
body.newsub { display: grid; grid-template-rows: auto 1fr auto; }
.newsub ul { display: grid; grid-template-rows:  1fr 1fr 1fr; grid-gap: 30px; }
.newsub header { background: #ECEFF4; padding: 30px; color: #343C48; }
.newsub header h2 { font-size: 2em; text-decoration: underline; text-decoration-color: #d20014; text-decoration-thickness: .125em; text-underline-offset: 4px; }
.newsub header p { margin: 20px 0; font-style: italic; }
.newsub h3 { margin-bottom: 15px; }

/* For 50 Journalists */
.journalists { padding: 20px 0; }
.journalists ul { display: grid; grid-template-columns: 1fr; grid-gap: 0px; margin: 0 20px; }
.journalists ul li { display: grid; grid-template-columns: 1fr 2fr; grid-gap: 20px; margin-bottom: 40px; align-items: center; }
.journalists ul li hr { width: 50%; border: 0; border-top: 2px solid #d20014; margin: 5px 0;}
.journalists ul li a { font-size: 0.75em; color: #343c48; text-decoration-style: dotted; }
.resp-sharing-button__link,
.resp-sharing-button__icon { display: inline-block }
.resp-sharing-button__link,
.resp-sharing-button__icon { display: inline-block }

.resp-sharing-button__link { text-decoration: none; color: #fff; margin: 0 0.2em 0.2em 0; }

.resp-sharing-button { border-radius: 5px; transition: 25ms ease-out; padding: 0.5em 0.75em; font-family: Helvetica Neue,Helvetica,Arial,sans-serif }

.resp-sharing-button__icon svg {
  width: 1em;
  height: 1em;
  margin-right: 0.4em;
  vertical-align: top
}

.resp-sharing-button--small svg {
  margin: 0;
  vertical-align: middle
}

/* Non solid icons get a stroke */
.resp-sharing-button__icon {
  stroke: #fff;
  fill: none
}

/* Solid icons get a fill */
.resp-sharing-button__icon--solid,
.resp-sharing-button__icon--solidcircle {
  fill: #fff;
  stroke: none
}

.resp-sharing-button--twitter {
  background-color: #55acee
}

.resp-sharing-button--twitter:hover {
  background-color: #2795e9
}

.resp-sharing-button--facebook {
  background-color: #3b5998
}

.resp-sharing-button--facebook:hover {
  background-color: #2d4373
}

.resp-sharing-button--linkedin {
  background-color: #0077b5
}

.resp-sharing-button--linkedin:hover {
  background-color: #046293
}

.resp-sharing-button--email {
  background-color: #777
}

.resp-sharing-button--email:hover {
  background-color: #5e5e5e
}

.resp-sharing-button--facebook {
  background-color: #3b5998;
  border-color: #3b5998;
}

.resp-sharing-button--facebook:hover,
.resp-sharing-button--facebook:active {
  background-color: #2d4373;
  border-color: #2d4373;
}

.resp-sharing-button--twitter {
  background-color: #55acee;
  border-color: #55acee;
}

.resp-sharing-button--twitter:hover,
.resp-sharing-button--twitter:active {
  background-color: #2795e9;
  border-color: #2795e9;
}

.resp-sharing-button--email {
  background-color: #777777;
  border-color: #777777;
}

.resp-sharing-button--email:hover,
.resp-sharing-button--email:active {
  background-color: #5e5e5e;
  border-color: #5e5e5e;
}

.resp-sharing-button--linkedin {
  background-color: #0077b5;
  border-color: #0077b5;
}

.resp-sharing-button--linkedin:hover,
.resp-sharing-button--linkedin:active {
  background-color: #046293;
  border-color: #046293;
}

  /* Issue(s) fade out via: https://www.trysmudford.com/blog/fade-out-siblings-css-trick/ */

  /* Basic Media Query */
  @media (min-width: 800px) {
    .container { width: 800px; margin: 0 auto; }
    header .container { display: grid; grid-template-columns: 300px 1fr; align-items: center; }
    nav { display: block; text-align: right; font-size: 0.85em; }
    nav ul { margin-top: 0px; }
    nav ul li a { color: #FFF5F5; text-decoration: none;}
    nav ul li a:hover { color: #ffffff; text-decoration: underline; }
    nav ul li:last-of-type::after { content: none; }
    header img { width: 30vw; max-width: 300px; }
    .cta_header { display: grid; grid-template-columns: 2fr 2fr; grid-column-gap: 40px; margin: 40px 0 20px 0; align-items: center; }
    .cta h1 { font-size: 2em; }
    .cta h2 { font-size: 1.2em; }
    .cta img { margin: 10px 0; max-height: 200px; }

    .benefits .container { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 50px; }
    .benefits { padding: 40px 0px 95px 0px; }

    .who { height: 150px; grid-template-columns: 200px 1fr; grid-column-gap: 0; margin: -75px 0px 20px 0px;}
    .who p { font-size: 1em; }

    .cta h2.bottom { margin-top: 50px; }
    .cta form.bottom { margin: 0px 0px 60px 0px; }

    .issue p.date { bottom: 5px; }
    .patron_button { width: 50%; margin-top: 15px; }

    .review-items { grid-template-columns: 1fr 1fr 1fr; }

    /* For newsignup.php */
    .newsub header { padding: 40px; }
    .newsub header .container { display: block; text-align: center; }
    .newsub main { display: grid; align-content: center; }
    .newsub ul { display: grid; grid-template-rows: none; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; }
    .newsub ul li { background: #fff; padding: 30px; border-radius: 5px; text-align: center; }

    /* For 50 Journalists */
    .journalists ul { grid-template-columns: 1fr 1fr; grid-gap: 20px 40px; margin: 0;  }

    /* For Survey 21 */
    .survey section.intro { display: grid; grid-template-columns: 65% 35%; grid-gap: 25px; }
    section.intro aside { background: #ECEFF4; color: #343C48; padding: 5px 20px 20px 20px; font-size: 0.75em; }

  }

  @media (min-width: 1200px) {
    .container { width: 950px; }
    .cta_header { grid-template-columns: 2fr 400px; margin: 60px 0 30px 0; }
    .cta img { justify-self: end; }
    .cta form { display: grid; grid-template-columns: 2fr 400px; grid-column-gap: 15px; margin: 0 0 60px 0; }
    .cta input[type=email] { margin-bottom: 0px; }
    .cta input[type=submit] { height: unset; }

    .issue_container { display: grid; grid-template-columns: 600px 1fr; grid-column-gap: 30px; margin-top: 5px; }

    .aside_container { position: sticky; top: 20px; }

  }