/* =============================================
   FARWELL — Journal Article
   Editorial layout inspired by The Surfer's Journal
   ============================================= */


/* ----- ARTICLE BODY ----- */

.article {
  max-width: 660px;
  margin: 0 auto;
  padding: 3.5rem 2rem 5rem;
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
  font-size: 1.22rem;
  line-height: 1.82;
  color: rgba(255,255,255,.88);
  -webkit-font-smoothing: antialiased;
}


/* ----- PARAGRAPHS ----- */

.article p {
  margin-bottom: 1.6rem;
}

/* Drop cap on the first paragraph after an hr or at the very start */
.article > p:first-child::first-letter,
.article > hr:first-child + p::first-letter,
.article > hr:first-child + h2 + p::first-letter {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 3.6em;
  float: left;
  line-height: .78;
  margin: .08em .12em 0 0;
  color: rgba(255,255,255,.95);
}


/* ----- HEADINGS (Flapjack subheaders) ----- */

.article h2 {
  font-family: 'Flapjack', 'DM Sans', system-ui, sans-serif;
  font-size: .72rem;
  font-weight: normal;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent, #c8a96e);
  margin: 3.5rem 0 1.4rem;
}

.article h3 {
  font-family: 'Flapjack', 'DM Sans', system-ui, sans-serif;
  font-size: .65rem;
  font-weight: normal;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin: 2.5rem 0 1rem;
}


/* ----- SECTION DIVIDERS ----- */

.article hr {
  border: none;
  width: 48px;
  height: 1px;
  background: rgba(255,255,255,.18);
  margin: 3rem auto;
}


/* ----- IMAGES & FIGURES ----- */

.article figure {
  margin: 2.8rem -2rem 3rem;
}

.article figure img {
  width: 100%;
  height: auto;
  display: block;
}

.article figcaption {
  font-family: 'Flapjack', 'DM Sans', system-ui, sans-serif;
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-top: .9rem;
  padding: 0 2rem;
  text-align: center;
}

/* Markdown-generated images (not in figure) */
.article p > img {
  display: block;
  width: calc(100% + 4rem);
  max-width: calc(100% + 4rem);
  margin: 2.8rem -2rem 3rem;
  height: auto;
}


/* ----- PULL QUOTES ----- */

.article .pullquote,
.article blockquote {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.52rem;
  line-height: 1.55;
  color: rgba(255,255,255,.72);
  border: none;
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding: 2rem 0;
  margin: 2.5rem 0;
  text-align: center;
}

.article .pullquote p,
.article blockquote p {
  margin: 0;
}


/* ----- SONG LIST (On Music entry) ----- */

.article .song-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0 2.5rem;
  border-top: 1px solid rgba(255,255,255,.10);
}

.article .song-list li {
  padding: .65rem 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.05rem;
  color: rgba(255,255,255,.75);
}

.article .song-list .song {
  color: rgba(255,255,255,.9);
  font-style: italic;
}

.article .song-list .dash {
  margin: 0 .35em;
  opacity: .4;
}

.article .song-list .artist {
  font-size: .95rem;
}


/* ----- SIGN-OFF ----- */

.article .signoff {
  margin-top: 3rem;
  font-style: italic;
  opacity: .65;
}


/* =============================================
   RESPONSIVE — Mobile
   ============================================= */

@media (max-width: 700px) {
  .article {
    padding: 2.5rem 1.25rem 3.5rem;
    font-size: 1.08rem;
    line-height: 1.78;
  }

  .article h2 {
    font-size: .65rem;
    margin: 2.5rem 0 1rem;
  }

  .article figure {
    margin: 2rem -1.25rem 2.5rem;
  }

  .article figcaption {
    font-size: .55rem;
    letter-spacing: .13em;
    padding: 0 1.25rem;
  }

  .article p > img {
    width: calc(100% + 2.5rem);
    max-width: calc(100% + 2.5rem);
    margin: 2rem -1.25rem 2.5rem;
  }

  .article .pullquote,
  .article blockquote {
    font-size: 1.2rem;
    padding: 1.5rem 0;
    margin: 2rem 0;
  }

  .article > p:first-child::first-letter,
  .article > hr:first-child + p::first-letter,
  .article > hr:first-child + h2 + p::first-letter {
    font-size: 3em;
  }
}