/* Shared by every page: grey background, white page in a thick black box */
body { background-color: #9fa0a4; padding: 40px; }
.container { outline: 20px solid black; background-color: white; padding: 20px; }
.logo-image { padding: 20px; }
.centered { text-align: center; }
/* width/height attributes on images reserve space while they load; keep them scaling */
img { height: auto; }

/* Libre Franklin (Google Fonts): regular for text, heavy for headings */
body, input, button, .button { font-family: "Libre Franklin", "Franklin Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif; }
body { font-weight: 400; }
h1, h2, h3, h4, h5, h6 { font-weight: 800; }
button, .button { font-weight: 600; }
p { margin-bottom: 1.25rem; }

h1 { font-size: 3.6rem; line-height: 1.15; text-transform: uppercase; letter-spacing: 0; margin: 10px 0 5px; }

/* Issue pages: cover on the left, text on the right (stacked on phones) */
.issue { margin-top: 20px; }
.issue h1 { margin-top: 0; }
.issue .tagline { font-size: 1.8rem; font-weight: 600; color: #555; margin-bottom: 25px; }
.issue .description { margin-bottom: 2.5rem; }
.issue .hero { display: block; margin: 0 auto 30px; width: 100%; max-width: 300px; }
.button.buy-button,
.button.buy-button:hover,
.button.buy-button:focus { background-color: black; border-color: black; color: white; }
.button.buy-button { height: auto; line-height: 1.4; padding: 14px 30px; white-space: normal; }
.button.buy-button:hover,
.button.buy-button:focus { background-color: #333; }
.issue-nav { text-align: center; margin: 40px 0 10px; }
.button.nav-button,
.button.nav-button:hover,
.button.nav-button:focus { background-color: #e4e4e4; border-color: #e4e4e4; color: black; text-decoration: none; }
.button.nav-button { margin: 0 4px 10px; }
.button.nav-button:hover,
.button.nav-button:focus { background-color: #d0d0d0; border-color: #d0d0d0; }

/* Footer on every page: small links on the grey, below the black box.
   The box's 20px outline doesn't take up space, so the margin clears it. */
body { padding-bottom: 0; }
.site-footer { text-align: center; margin-top: 40px; padding-bottom: 20px; font-size: 1.3rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1rem; }
.site-footer a { color: black; text-decoration: none; margin: 0 4px; display: inline-block; }
.site-footer a + a::before { content: "•"; margin-right: 8px; display: inline-block; text-decoration: none; }
.site-footer a:hover,
.site-footer a:focus { text-decoration: underline; }

/* About page: a short block of text */
.about { max-width: 640px; margin: 20px auto 0; }

/* Reviews page: pull quotes flowing in two columns (one on phones) */
.reviews { column-count: 2; column-gap: 40px; margin-top: 30px; }
.review { break-inside: avoid; margin: 0 0 40px; padding-top: 16px; border-top: 6px solid black; }
.review blockquote { margin: 0 0 12px; padding: 0; border: 0; font-size: 2.2rem; line-height: 1.35; font-weight: 600; }
.review.review-big blockquote { font-size: 3rem; line-height: 1.2; font-weight: 800; }
.review figcaption { font-size: 1.4rem; color: #555; }
.review figcaption::before { content: "— "; }
.review cite { font-style: italic; }
.review a { color: inherit; }

@media (max-width: 750px) {
  .reviews { column-count: 1; }
}

/* Home page covers: four per row, two per row on phones */
@media (max-width: 549px) {
  .covers .three.columns { width: 48%; margin-left: 4%; margin-bottom: 4%; }
  .covers .three.columns:nth-child(odd) { margin-left: 0; }
}

@media (max-width: 550px) {
  .site-footer { font-size: 1.2rem; letter-spacing: .05rem; }
  .site-footer a { margin: 0 3px; }
  .site-footer a + a::before { margin-right: 6px; }
  .review.review-big blockquote { font-size: 2.4rem; }
  body { padding: 20px 20px 0; }
  h1 { font-size: 2.6rem; }
}