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

body.sadaqah-shelf {
  --paper: var(--ss-parchment);
  --paper-deep: var(--ss-dune);
  --ink: var(--ss-ink);
  --ink-soft: #5E6360;
  --ink-dim: #5E6360;
  --line: #B8ADA0;
  --accent: var(--ss-juniper);
  --accent-2: var(--ss-terracotta);
  --gold: var(--ss-dune);
  border-top: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(90, 70, 54, .045) 47px 48px),
    var(--ss-parchment);
}

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

body.sadaqah-shelf .nav-brand,
body.sadaqah-shelf .nav-brand b {
  color: var(--ss-chalk);
}

body.sadaqah-shelf .nav-brand::before {
  content: "\25A0";
  color: var(--ss-dune);
}

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

body.sadaqah-shelf header {
  position: relative;
  min-height: 740px;
  overflow: hidden;
  border-bottom: 16px solid var(--ss-walnut);
  background:
    linear-gradient(108deg, var(--ss-juniper) 0 65%, var(--ss-walnut) 65% 100%);
}

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

body.sadaqah-shelf header::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 112px;
  right: 5%;
  width: 380px;
  height: 410px;
  border: 10px solid rgba(232, 220, 196, .2);
  background:
    linear-gradient(90deg,
      var(--ss-terracotta) 0 12%,
      transparent 12% 16%,
      var(--ss-dune) 16% 32%,
      transparent 32% 36%,
      var(--ss-celadon) 36% 50%,
      transparent 50% 54%,
      #9C9589 54% 68%,
      transparent 68% 72%,
      var(--ss-parchment) 72% 88%,
      transparent 88%);
  box-shadow: inset 0 -12px 0 rgba(232, 220, 196, .28), 14px 14px 0 rgba(24, 26, 21, .25);
}

body.sadaqah-shelf header::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 238px;
  right: 5%;
  width: 380px;
  height: 10px;
  background: rgba(232, 220, 196, .28);
  box-shadow: 0 126px 0 rgba(232, 220, 196, .28);
}

body.sadaqah-shelf .hex {
  width: 74px;
  height: 58px;
  border: 2px solid var(--ss-dune);
  background:
    linear-gradient(90deg, var(--ss-terracotta) 0 28%, var(--ss-dune) 28% 52%, var(--ss-celadon) 52% 76%, var(--ss-parchment) 76%);
  clip-path: none;
  box-shadow: inset 0 -10px 0 var(--ss-walnut);
}

body.sadaqah-shelf .hex span {
  display: none;
}

body.sadaqah-shelf header .kicker {
  width: max-content;
  padding: 5px 9px;
  border: 1px solid rgba(232, 220, 196, .28);
  color: var(--ss-dune);
}

body.sadaqah-shelf h1 {
  max-width: 800px;
  color: var(--ss-chalk);
  font-size: 78px;
  line-height: .96;
}

body.sadaqah-shelf h1 .gild {
  color: var(--ss-dune);
}

body.sadaqah-shelf .hero-sub {
  color: var(--ss-celadon);
  font-size: 25px;
}

body.sadaqah-shelf .doorway {
  max-width: 670px;
  padding-left: 22px;
  border-left: 5px solid var(--ss-terracotta);
  color: rgba(245, 241, 233, .76);
}

body.sadaqah-shelf .doorway b {
  color: var(--ss-chalk);
}

body.sadaqah-shelf .scroll-hint {
  color: var(--ss-dune);
}

body.sadaqah-shelf main {
  max-width: 1040px;
  padding-top: 88px;
}

body.sadaqah-shelf .letter {
  max-width: 850px;
  padding: 48px 54px;
  border: 10px solid var(--ss-walnut);
  background: var(--ss-chalk);
  box-shadow: 14px 14px 0 var(--ss-dune);
}

body.sadaqah-shelf .letter h2,
body.sadaqah-shelf .gloss-h {
  color: var(--ss-juniper);
  font-size: 42px;
}

body.sadaqah-shelf .pull {
  padding: 30px 38px;
  border: 0;
  border-left: 10px solid var(--ss-terracotta);
  background: var(--ss-juniper);
  color: var(--ss-chalk);
  box-shadow: 10px 10px 0 var(--ss-dune);
}

body.sadaqah-shelf .glossary + .pull {
  margin-top: 36px !important;
}

body.sadaqah-shelf .root {
  padding: 34px 30px;
  border: 1px solid rgba(90, 70, 54, .28);
  border-top: 9px solid var(--ss-juniper);
  background: var(--ss-chalk);
}

body.sadaqah-shelf .root:nth-child(2) {
  border-top-color: var(--ss-terracotta);
  background: var(--ss-parchment);
}

body.sadaqah-shelf .root .ar {
  color: var(--ss-terracotta);
}

body.sadaqah-shelf .toolindex {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 20px 20px 0;
  border-right: 10px solid var(--ss-walnut);
  border-bottom: 14px solid var(--ss-walnut);
  border-left: 10px solid var(--ss-walnut);
}

body.sadaqah-shelf .ti-card {
  min-height: 220px;
  grid-template-columns: 1fr;
  align-content: start;
  border: 1px solid rgba(90, 70, 54, .3);
  border-left: 8px solid var(--ss-terracotta);
  background: var(--ss-chalk);
}

body.sadaqah-shelf .ti-card:nth-child(2n) {
  border-left-color: var(--ss-juniper);
  background: #E7ECE8;
}

body.sadaqah-shelf .ti-card:nth-child(3n) {
  border-left-color: var(--ss-dune);
  background: #F3E7D5;
}

body.sadaqah-shelf .ti-card .n {
  border-radius: 0;
  background: var(--ss-juniper);
  clip-path: none;
}

body.sadaqah-shelf .toolpanel {
  padding: 42px;
  border: 12px solid var(--ss-walnut);
  background:
    repeating-linear-gradient(0deg, transparent 0 33px, rgba(90, 70, 54, .04) 33px 34px),
    var(--ss-chalk);
  box-shadow: 14px 14px 0 var(--ss-dune);
}

body.sadaqah-shelf .toolpanel::before {
  top: -12px;
  width: 190px;
  height: 12px;
  background: linear-gradient(90deg, var(--ss-terracotta), var(--ss-dune), var(--ss-celadon), var(--ss-juniper));
}

body.sadaqah-shelf .tp-h .t {
  color: var(--ss-juniper);
  font-size: 34px;
}

body.sadaqah-shelf .btn-solid {
  border-color: var(--ss-juniper);
  background: var(--ss-juniper);
}

body.sadaqah-shelf footer {
  border-top: 7px double rgba(245, 241, 233, .22);
  background: var(--ss-juniper);
  color: rgba(245, 241, 233, .68);
}

@media (max-width: 900px) {
  body.sadaqah-shelf header::before,
  body.sadaqah-shelf header::after {
    opacity: .15;
  }

  body.sadaqah-shelf h1 {
    font-size: 50px;
  }

  body.sadaqah-shelf .letter,
  body.sadaqah-shelf .toolpanel {
    padding: 40px 22px;
  }

  body.sadaqah-shelf .toolindex {
    grid-template-columns: 1fr;
  }

  body.sadaqah-shelf .ti-card {
    min-height: 0;
  }
}

@media print {
  body.sadaqah-shelf,
  body.sadaqah-shelf .toolpanel {
    background: #FFFFFF !important;
  }
}