:root {
  --article-bg: #fff;
  --article-gold: #8c6a1b;
  --article-gold-border: #c9a646;
  --article-text: #2b2415;
  --surface: #fff;
  --measure: 860px;
}

body {
  background: var(--article-bg);
  color: var(--article-text);
}

#mainwrapper {
  overflow: visible;
}

.article-shell {
  margin: 0 auto 2rem;
  padding: 1.5rem .5rem 0;
}

.article-shell h1 {
  max-width: var(--measure);
  margin: 0 auto 1.5rem;
  text-align: center;
  color: var(--article-gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.15;
}

.gold-article {
  max-width: var(--measure);
  margin: 0 auto 2rem;
  padding: 1.5rem 1rem 2rem;
  background: var(--surface);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.7;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.gold-article::after {
  content: "";
  display: block;
  clear: both;
}

.gold-article p {
  margin: 16px 0;
  line-height: 1.7;
}

.gold-article p.lead {
  font-size: 18px;
}

.gold-article p.lead:first-letter,
.gold-article .dropcap:first-letter {
  float: left;
  margin: .05em .18em 0 0;
  color: var(--article-gold);
  font-size: 64px;
  font-weight: 700;
  line-height: .9;
}

.gold-article h2,
.gold-article h3 {
  margin: 1.5em 0 .6em;
  color: var(--article-gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 700;
}

.gold-article h2:first-child,
.gold-article h3:first-child {
  margin-top: .7rem;
}

.gold-article a {
  color: var(--article-gold);
  text-decoration: underline;
}

.gold-article blockquote,
.gold-article .scripture {
  margin: 1.2em 0;
  padding: .7em 1em;
  border-left: 3px solid var(--article-gold-border);
  background: transparent;
  font-style: italic;
}

.gold-article blockquote p,
.gold-article .scripture p {
  margin: 0;
}

.gold-article .scripture .ref {
  display: block;
  margin-top: .45em;
  text-align: right;
  font-style: normal;
  font-weight: 600;
}

.gold-article ul {
  margin: .9em 0;
  padding-left: 1.2em;
  list-style: none;
}

.gold-article li {
  margin: .45em 0;
  line-height: 1.55;
}

.gold-article ul li::before {
  content: "\2022";
  margin-right: .5em;
  color: var(--article-gold);
}

.gold-article ol {
  margin: .9em 0 .9em 1.2em;
}

.gold-article .summary-box,
.gold-article .key-points {
  margin: 1.25em 0;
  padding: 1em 1.15em;
  border: 1px solid var(--article-gold-border);
  background: #fffaf1;
}

.gold-article .summary-box > :first-child,
.gold-article .key-points > :first-child {
  margin-top: 0;
}

.gold-article .summary-box > :last-child,
.gold-article .key-points > :last-child {
  margin-bottom: 0;
}

.gold-article img,
.gold-article svg,
.gold-article video,
.gold-article iframe {
  display: block;
  max-width: 100%;
  height: auto;
}

@media (max-width: 600px) {
  .article-shell {
    padding-left: .25rem;
    padding-right: .25rem;
  }

  .gold-article {
    padding-left: .75rem;
    padding-right: .75rem;
  }
}
