:root {
  --hr-ink: #202320;
  --hr-verdigris: #3E5F54;
  --hr-terracotta: #BC6A47;
  --hr-sage: #84998E;
  --hr-celadon: #C4D2CB;
  --hr-fog: #E8E8E3;
  --hr-paper: #F2EEE6;
  --hr-chalk: #FBF9F4;
}

body.humane-rhythm {
  --paper: var(--hr-paper);
  --paper-deep: var(--hr-fog);
  --ink: var(--hr-ink);
  --ink-soft: #5E6360;
  --ink-dim: #5E6360;
  --line: #B4B5B0;
  --accent: var(--hr-verdigris);
  --accent-2: var(--hr-terracotta);
  --gold: var(--hr-sage);
  border-top: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(62, 95, 84, .04) 39px 40px),
    var(--hr-paper);
}

body.humane-rhythm nav {
  min-height: 60px;
  border-bottom: 5px solid var(--hr-terracotta);
  background: rgba(62, 95, 84, .98);
}

body.humane-rhythm .nav-brand,
body.humane-rhythm .nav-brand b {
  color: var(--hr-chalk);
}

body.humane-rhythm .nav-brand::before {
  content: "\25A0";
  color: var(--hr-celadon);
}

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

body.humane-rhythm header {
  position: relative;
  min-height: 710px;
  overflow: hidden;
  border-bottom: 8px double rgba(62, 95, 84, .32);
  background:
    linear-gradient(106deg, var(--hr-paper) 0 67%, #DCE5E0 67% 100%);
}

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

body.humane-rhythm header::before {
  content: "";
  position: absolute;
  z-index: 1;
  right: 5%;
  top: 140px;
  width: 420px;
  height: 260px;
  background:
    linear-gradient(var(--hr-verdigris) 0 31%, transparent 31% 38%, var(--hr-sage) 38% 61%, transparent 61% 68%, var(--hr-celadon) 68% 84%, transparent 84% 90%, var(--hr-terracotta) 90%);
  box-shadow: 12px 12px 0 rgba(62, 95, 84, .12);
}

body.humane-rhythm header::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 5%;
  top: 140px;
  width: 420px;
  height: 260px;
  background:
    repeating-linear-gradient(90deg, transparent 0 48px, rgba(251, 249, 244, .6) 48px 51px);
}

body.humane-rhythm .hex {
  width: 78px;
  height: 48px;
  border: 2px solid var(--hr-verdigris);
  background:
    linear-gradient(90deg, var(--hr-verdigris) 0 46%, transparent 46% 54%, var(--hr-terracotta) 54%);
  clip-path: none;
}

body.humane-rhythm .hex span {
  display: none;
}

body.humane-rhythm header .kicker {
  width: max-content;
  padding: 5px 9px;
  background: var(--hr-verdigris);
  color: var(--hr-chalk);
}

body.humane-rhythm h1 {
  max-width: 780px;
  color: var(--hr-verdigris);
  font-size: 78px;
  line-height: .96;
}

body.humane-rhythm h1 .gild {
  color: var(--hr-terracotta);
}

body.humane-rhythm .hero-sub {
  color: var(--hr-verdigris);
  font-size: 25px;
}

body.humane-rhythm .doorway {
  max-width: 650px;
  padding-left: 22px;
  border-left: 5px solid var(--hr-terracotta);
}

body.humane-rhythm main {
  max-width: 1060px;
  padding-top: 88px;
}

body.humane-rhythm .letter {
  max-width: 850px;
  padding: 48px 54px;
  border: 1px solid rgba(62, 95, 84, .28);
  border-left: 10px solid var(--hr-verdigris);
  background: var(--hr-chalk);
  box-shadow: 13px 13px 0 var(--hr-celadon);
}

body.humane-rhythm .letter h2,
body.humane-rhythm .gloss-h {
  color: var(--hr-verdigris);
  font-size: 42px;
}

body.humane-rhythm .pull {
  padding: 30px 38px;
  border: 0;
  background: var(--hr-verdigris);
  color: var(--hr-chalk);
  box-shadow: 10px 10px 0 var(--hr-terracotta);
}

body.humane-rhythm .root {
  padding: 34px 30px;
  border: 1px solid rgba(62, 95, 84, .28);
  border-top: 7px solid var(--hr-verdigris);
  background: var(--hr-chalk);
}

body.humane-rhythm .root:nth-child(2) {
  border-top-color: var(--hr-terracotta);
  background: #E7ECE8;
}

body.humane-rhythm .method {
  display: grid;
  grid-template-columns: 1.35fr 1fr .72fr;
  align-items: end;
  gap: 14px;
}

body.humane-rhythm .step {
  display: block;
  min-height: 330px;
  padding: 30px 26px;
  border: 1px solid rgba(62, 95, 84, .28);
  border-top: 10px solid var(--hr-verdigris);
  background: var(--hr-chalk);
}

body.humane-rhythm .step:nth-child(2) {
  min-height: 270px;
  border-top-color: var(--hr-sage);
  background: #E7ECE8;
}

body.humane-rhythm .step:nth-child(3) {
  min-height: 210px;
  border-top-color: var(--hr-terracotta);
  background: #F3E7D5;
}

body.humane-rhythm .step .no {
  width: 100%;
  height: 18px;
  margin-bottom: 70px;
  background:
    repeating-linear-gradient(90deg, var(--hr-verdigris) 0 22px, transparent 22px 30px);
  clip-path: none;
}

body.humane-rhythm .step:nth-child(2) .no {
  margin-bottom: 46px;
  background:
    repeating-linear-gradient(90deg, var(--hr-sage) 0 15px, transparent 15px 24px);
}

body.humane-rhythm .step:nth-child(3) .no {
  margin-bottom: 24px;
  background:
    repeating-linear-gradient(90deg, var(--hr-terracotta) 0 9px, transparent 9px 18px);
}

body.humane-rhythm .toolindex {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

body.humane-rhythm .ti-card {
  min-height: 170px;
  grid-template-columns: 1fr;
  align-content: start;
  border: 1px solid rgba(62, 95, 84, .28);
  border-top: 7px solid var(--hr-verdigris);
  background: var(--hr-chalk);
}

body.humane-rhythm .ti-card:nth-child(2n) {
  border-top-color: var(--hr-sage);
  background: #E7ECE8;
}

body.humane-rhythm .ti-card:nth-child(5) {
  border-top-color: var(--hr-terracotta);
  background: #F3E7D5;
}

body.humane-rhythm .ti-card .n {
  border-radius: 50%;
  background: var(--hr-verdigris);
  clip-path: none;
}

body.humane-rhythm .toolpanel {
  padding: 42px;
  border: 7px double var(--hr-verdigris);
  background:
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(62, 95, 84, .04) 47px 48px),
    var(--hr-chalk);
  box-shadow: 14px 14px 0 var(--hr-celadon);
}

body.humane-rhythm .toolpanel::before {
  width: 190px;
  background: linear-gradient(90deg, var(--hr-verdigris), var(--hr-sage), var(--hr-terracotta));
}

body.humane-rhythm .tp-h .t {
  color: var(--hr-verdigris);
  font-size: 34px;
}

body.humane-rhythm .btn-solid {
  border-color: var(--hr-verdigris);
  background: var(--hr-verdigris);
}

body.humane-rhythm footer {
  border-top: 7px double rgba(245, 241, 233, .22);
  background: var(--hr-verdigris);
  color: rgba(245, 241, 233, .68);
}

@media (max-width: 900px) {
  body.humane-rhythm header::before,
  body.humane-rhythm header::after {
    opacity: .16;
  }

  body.humane-rhythm h1 {
    font-size: 50px;
  }

  body.humane-rhythm .letter,
  body.humane-rhythm .toolpanel {
    padding: 40px 22px;
  }

  body.humane-rhythm .method,
  body.humane-rhythm .toolindex {
    grid-template-columns: 1fr;
  }

  body.humane-rhythm .step,
  body.humane-rhythm .step:nth-child(2),
  body.humane-rhythm .step:nth-child(3) {
    min-height: 0;
  }
}

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