:root {
  --ei-ink: #202320;
  --ei-juniper: #29403A;
  --ei-verdigris: #3E5F54;
  --ei-terracotta: #BC6A47;
  --ei-dune: #B79C77;
  --ei-walnut: #5A4636;
  --ei-celadon: #C4D2CB;
  --ei-parchment: #E8DCC4;
  --ei-paper: #F2EEE6;
  --ei-chalk: #FBF9F4;
}

body.epistles-index {
  --paper: var(--ei-paper);
  --paper-deep: var(--ei-parchment);
  --ink: var(--ei-ink);
  --ink-soft: #5E6360;
  --line: #B8ADA0;
  --accent: var(--ei-verdigris);
  --accent-2: var(--ei-terracotta);
  --gold: var(--ei-dune);
  border-top: 0;
  background:
    linear-gradient(90deg, rgba(90, 70, 54, .035) 1px, transparent 1px),
    var(--ei-paper);
  background-size: 64px 100%, auto;
}

body.epistles-index nav {
  min-height: 60px;
  border-bottom: 5px solid var(--ei-terracotta);
  background: rgba(41, 64, 58, .98);
}

body.epistles-index .nav-brand,
body.epistles-index .nav-brand b {
  color: var(--ei-chalk);
}

body.epistles-index .nav-brand::before {
  content: "\25C7";
  color: var(--ei-celadon);
}

body.epistles-index .nav-brand img {
  display: none !important;
}

body.epistles-index .nav-tag {
  color: rgba(245, 241, 233, .66);
}

body.epistles-index header {
  position: relative;
  min-height: 690px;
  align-items: flex-start;
  overflow: hidden;
  border-bottom: 12px solid var(--ei-walnut);
  background:
    linear-gradient(107deg, var(--ei-paper) 0 65%, var(--ei-parchment) 65% 100%);
  text-align: left;
}

body.epistles-index header > * {
  position: relative;
  z-index: 2;
}

body.epistles-index header::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 96px;
  right: 5%;
  width: 410px;
  height: 420px;
  border: 10px solid var(--ei-walnut);
  background:
    linear-gradient(90deg,
      var(--ei-terracotta) 0 9%,
      transparent 9% 13%,
      var(--ei-juniper) 13% 25%,
      transparent 25% 29%,
      var(--ei-dune) 29% 42%,
      transparent 42% 46%,
      var(--ei-celadon) 46% 58%,
      transparent 58% 62%,
      #9C9589 62% 74%,
      transparent 74% 78%,
      var(--ei-parchment) 78% 91%,
      transparent 91%);
  box-shadow: inset 0 -12px 0 rgba(90, 70, 54, .28), 14px 14px 0 rgba(90, 70, 54, .12);
}

body.epistles-index header::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 228px;
  right: 5%;
  width: 410px;
  height: 10px;
  background: var(--ei-walnut);
  box-shadow: 0 132px 0 var(--ei-walnut);
}

body.epistles-index .hex {
  width: 78px;
  height: 60px;
  border: 2px solid var(--ei-walnut);
  background:
    linear-gradient(90deg, var(--ei-terracotta) 0 20%, var(--ei-juniper) 20% 40%, var(--ei-dune) 40% 60%, var(--ei-celadon) 60% 80%, var(--ei-parchment) 80%);
  clip-path: none;
  box-shadow: inset 0 -10px 0 var(--ei-walnut);
}

body.epistles-index .hex span {
  display: none;
}

body.epistles-index header .kicker {
  width: max-content;
  padding: 5px 9px;
  background: var(--ei-juniper);
  color: var(--ei-chalk);
}

body.epistles-index h1 {
  max-width: 760px;
  color: var(--ei-juniper);
  font-size: 84px;
  line-height: .94;
}

body.epistles-index h1 .gild {
  color: var(--ei-terracotta);
}

body.epistles-index .hero-sub {
  max-width: 650px;
  margin-right: 0;
  margin-left: 0;
  color: var(--ei-walnut);
  font-size: 25px;
}

body.epistles-index .doorway {
  max-width: 660px;
  margin-right: 0;
  margin-left: 0;
  padding-left: 22px;
  border-left: 5px solid var(--ei-terracotta);
}

body.epistles-index main {
  max-width: 1180px !important;
  padding-top: 72px;
}

body.epistles-index .lede {
  max-width: 800px;
  margin: 0 auto 66px;
  padding: 30px 36px;
  border: 7px double rgba(90, 70, 54, .28);
  background: var(--ei-chalk);
  color: var(--ei-walnut);
  font-family: var(--display);
  font-size: 20px;
  text-align: left;
}

body.epistles-index .lede b {
  color: var(--ei-juniper);
}

body.epistles-index .fam-h {
  justify-content: flex-start;
  margin: 70px 0 18px;
  color: var(--ei-juniper);
  font-family: var(--mono);
  font-style: normal;
  text-align: left;
}

body.epistles-index .fam-h::before {
  width: 34px;
  height: 4px;
  background: var(--ei-terracotta);
}

body.epistles-index .fam-h::after {
  flex: 1;
  width: auto;
  max-width: 240px;
  background: rgba(90, 70, 54, .28);
}

body.epistles-index .shelf {
  gap: 14px;
  padding: 20px;
  border-right: 10px solid var(--ei-walnut);
  border-bottom: 14px solid var(--ei-walnut);
  border-left: 10px solid var(--ei-walnut);
  background: rgba(232, 220, 196, .42);
}

body.epistles-index .shelf:nth-of-type(1) {
  grid-template-columns: 1fr;
}

body.epistles-index .shelf:nth-of-type(2) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: rgba(196, 210, 203, .32);
}

body.epistles-index .shelf:nth-of-type(3) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.epistles-index .shelf:nth-of-type(4) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: rgba(232, 232, 227, .72);
}

body.epistles-index .shelf:nth-of-type(5) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.epistles-index .shelf:nth-of-type(6) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: rgba(196, 210, 203, .32);
}

body.epistles-index .acard {
  min-height: 190px;
  padding: 26px 24px;
  border: 1px solid rgba(90, 70, 54, .28);
  border-top: 8px solid var(--ei-juniper);
  border-radius: 2px;
  background: var(--ei-chalk);
  box-shadow: 7px 7px 0 rgba(90, 70, 54, .07);
}

body.epistles-index .acard::before {
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: var(--ei-terracotta);
  clip-path: none;
}

body.epistles-index .acard:nth-child(3n + 2) {
  border-top-color: var(--ei-terracotta);
  background: #F3E7D5;
}

body.epistles-index .acard:nth-child(3n) {
  border-top-color: var(--ei-dune);
  background: #E7ECE8;
}

body.epistles-index .acard:hover {
  border-color: var(--ei-verdigris);
  box-shadow: 10px 10px 0 rgba(62, 95, 84, .12);
}

body.epistles-index .acard .t {
  color: var(--ei-juniper);
  font-family: var(--display);
  font-size: 21px;
  text-transform: none;
}

body.epistles-index .acard:hover .t {
  color: var(--ei-terracotta);
}

body.epistles-index .acard .ar {
  color: var(--ei-terracotta);
}

body.epistles-index .acard .d {
  color: #5E6360;
  font-size: 13px;
}

body.epistles-index .acard .open {
  color: var(--ei-verdigris);
  font-family: var(--mono);
  font-style: normal;
}

body.epistles-index .outro {
  max-width: 760px;
  margin-top: 76px;
  padding: 34px 42px;
  border-top: 7px double var(--ei-dune);
  border-bottom: 7px double var(--ei-dune);
  color: var(--ei-walnut);
  font-size: 22px;
}

body.epistles-index footer {
  margin-top: 80px;
  padding: 34px 24px;
  border-top: 7px double rgba(245, 241, 233, .22);
  background: var(--ei-juniper);
  color: rgba(245, 241, 233, .68);
  font-family: var(--mono);
  font-style: normal;
}

body.epistles-index footer a {
  color: var(--ei-parchment);
}

@media (max-width: 900px) {
  body.epistles-index header::before,
  body.epistles-index header::after {
    opacity: .13;
  }

  body.epistles-index h1 {
    font-size: 54px;
  }

  body.epistles-index .shelf,
  body.epistles-index .shelf:nth-of-type(1),
  body.epistles-index .shelf:nth-of-type(2),
  body.epistles-index .shelf:nth-of-type(3),
  body.epistles-index .shelf:nth-of-type(4),
  body.epistles-index .shelf:nth-of-type(5),
  body.epistles-index .shelf:nth-of-type(6) {
    grid-template-columns: 1fr;
  }

  body.epistles-index .acard {
    min-height: 0;
  }
}

@media print {
  body.epistles-index {
    background: #FFFFFF !important;
  }
}