:root {
  --hw-ink: #202320;
  --hw-walnut: #5A4636;
  --hw-brick: #9E4A3E;
  --hw-sumac: #5C2B27;
  --hw-juniper: #29403A;
  --hw-sage: #687662;
  --hw-dune: #B79C77;
  --hw-parchment: #E8DCC4;
  --hw-cotton: #F5F1E9;
  --hw-chalk: #FBF9F4;
}

body.hearts-workshop {
  --paper: #F5F1E9;
  --paper-deep: #E8DCC4;
  --ink: #202320;
  --ink-soft: #5E6360;
  --ink-dim: #5E6360;
  --line: #B8ADA0;
  --accent: #5A4636;
  --accent-2: #9E4A3E;
  --gold: #B79C77;
  border-top: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 35px, rgba(90, 70, 54, .04) 35px 36px),
    var(--hw-cotton);
}

body.hearts-workshop nav {
  min-height: 60px;
  border-bottom: 5px solid var(--hw-brick);
  background: rgba(90, 70, 54, .98);
}

body.hearts-workshop .nav-brand,
body.hearts-workshop .nav-brand b {
  color: var(--hw-chalk);
}

body.hearts-workshop .nav-brand::before {
  content: "\25C6";
  color: var(--hw-dune);
}

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

body.hearts-workshop header {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  border-bottom: 12px solid var(--hw-walnut);
  background:
    linear-gradient(108deg, var(--hw-sumac) 0 68%, var(--hw-walnut) 68% 100%);
}

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

body.hearts-workshop header::before {
  content: "";
  position: absolute;
  z-index: 1;
  right: 6%;
  bottom: 96px;
  width: 340px;
  height: 330px;
  border: 8px double rgba(232, 220, 196, .24);
  background:
    linear-gradient(90deg, transparent 0 49%, rgba(232, 220, 196, .17) 49% 51%, transparent 51%),
    linear-gradient(transparent 0 32%, rgba(232, 220, 196, .17) 32% 34%, transparent 34% 66%, rgba(232, 220, 196, .17) 66% 68%, transparent 68%);
  box-shadow: 14px 14px 0 rgba(24, 26, 21, .34);
}

body.hearts-workshop header::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: calc(6% + 139px);
  bottom: 230px;
  width: 54px;
  height: 54px;
  border: 8px solid var(--hw-sumac);
  background: var(--hw-dune);
  box-shadow:
    0 0 0 2px var(--hw-dune),
    -86px -74px 0 -17px var(--hw-sage),
    86px 76px 0 -17px var(--hw-brick);
  transform: rotate(45deg);
}

body.hearts-workshop .hex {
  width: 66px;
  height: 66px;
  border: 2px solid var(--hw-dune);
  background: transparent;
  box-shadow: inset 0 0 0 9px var(--hw-sumac);
}

body.hearts-workshop .hex span {
  width: 18px;
  height: 18px;
  background: var(--hw-dune);
}

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

body.hearts-workshop h1 {
  max-width: 800px;
  color: var(--hw-chalk);
  font-size: 82px;
  line-height: .94;
}

body.hearts-workshop h1 .gild {
  color: #E2C6A4;
}

body.hearts-workshop .hero-sub {
  color: var(--hw-parchment);
  font-size: 25px;
}

body.hearts-workshop .doorway {
  max-width: 670px;
  padding-left: 22px;
  border-left: 5px solid var(--hw-dune);
  color: rgba(245, 241, 233, .76);
}

body.hearts-workshop .doorway b {
  color: var(--hw-chalk);
}

body.hearts-workshop .scroll-hint {
  color: var(--hw-dune);
}

body.hearts-workshop main {
  max-width: 1040px;
  padding-top: 90px;
}

body.hearts-workshop .letter {
  position: relative;
  max-width: 850px;
  padding: 48px 54px;
  border: 7px double rgba(90, 70, 54, .34);
  background:
    linear-gradient(135deg, rgba(158, 74, 62, .1), transparent 38%),
    var(--hw-chalk);
  box-shadow: 15px 15px 0 rgba(90, 70, 54, .16);
}

body.hearts-workshop .letter::before,
body.hearts-workshop .letter::after {
  content: "";
  position: absolute;
  width: 54px;
  height: 54px;
  border-color: var(--hw-brick);
}

body.hearts-workshop .letter::before {
  top: 15px;
  left: 15px;
  border-top: 2px solid;
  border-left: 2px solid;
}

body.hearts-workshop .letter::after {
  right: 15px;
  bottom: 15px;
  border-right: 2px solid;
  border-bottom: 2px solid;
}

body.hearts-workshop .letter h2 {
  color: var(--hw-walnut);
  font-size: 42px;
}

body.hearts-workshop .pull {
  padding: 30px 38px;
  border: 0;
  border-left: 10px solid var(--hw-brick);
  background: var(--hw-walnut);
  color: var(--hw-chalk);
  box-shadow: 10px 10px 0 var(--hw-dune);
}

body.hearts-workshop .gloss-h {
  color: var(--hw-walnut);
  font-size: 42px;
}

body.hearts-workshop .glossary {
  gap: 16px;
}

body.hearts-workshop .root {
  padding: 30px 28px;
  border: 1px solid rgba(90, 70, 54, .28);
  border-top: 7px solid var(--hw-walnut);
  background: var(--hw-chalk);
  box-shadow: 8px 8px 0 rgba(90, 70, 54, .08);
}

body.hearts-workshop .root:nth-child(2n) {
  border-top-color: var(--hw-brick);
  background: var(--hw-parchment);
}

body.hearts-workshop .root:nth-child(3n) {
  border-top-color: var(--hw-sage);
}

body.hearts-workshop .root .ar {
  color: var(--hw-brick);
}

body.hearts-workshop .method {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  counter-reset: heart-tool;
}

body.hearts-workshop .step {
  display: block;
  min-height: 280px;
  padding: 24px 18px;
  border: 1px solid rgba(90, 70, 54, .3);
  border-bottom: 8px solid var(--hw-walnut);
  background: var(--hw-chalk);
  counter-increment: heart-tool;
}

body.hearts-workshop .step:nth-child(2n) {
  border-bottom-color: var(--hw-brick);
  background: var(--hw-parchment);
}

body.hearts-workshop .step:nth-child(3) {
  border-bottom-color: var(--hw-sage);
}

body.hearts-workshop .step .no {
  width: 48px;
  height: 48px;
  margin-bottom: 50px;
  border: 5px double var(--hw-walnut);
  border-radius: 50%;
  background: transparent;
  clip-path: none;
}

body.hearts-workshop .step .no::before {
  content: counter(heart-tool, decimal-leading-zero);
  color: var(--hw-brick);
  font: 500 10px/1 var(--mono);
}

body.hearts-workshop .step .bd h3 {
  color: var(--hw-walnut);
  font-size: 20px;
}

body.hearts-workshop .toolindex {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

body.hearts-workshop .ti-card {
  min-height: 178px;
  grid-template-columns: 1fr;
  align-content: start;
  border: 1px solid rgba(90, 70, 54, .3);
  border-top: 10px solid var(--hw-walnut);
  background: var(--hw-chalk);
  box-shadow: 9px 9px 0 rgba(90, 70, 54, .09);
}

body.hearts-workshop .ti-card:nth-child(2) {
  border-top-color: var(--hw-brick);
  background: var(--hw-parchment);
}

body.hearts-workshop .ti-card:nth-child(3) {
  border-top-color: var(--hw-sage);
  background: #E7ECE8;
}

body.hearts-workshop .ti-card .n {
  width: 38px;
  height: 38px;
  border: 5px double var(--hw-walnut);
  border-radius: 50%;
  background: transparent;
  color: var(--hw-brick);
  clip-path: none;
}

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

body.hearts-workshop .toolpanel::before {
  top: -12px;
  left: 36px;
  width: 160px;
  height: 12px;
  background: linear-gradient(90deg, var(--hw-brick), var(--hw-dune), var(--hw-sage));
}

body.hearts-workshop .tp-h {
  border-bottom: 7px double rgba(90, 70, 54, .26);
}

body.hearts-workshop .tp-h .t {
  color: var(--hw-walnut);
  font-size: 34px;
}

body.hearts-workshop .tp-sec > .tl {
  color: var(--hw-brick);
}

body.hearts-workshop .doorbox {
  border-left-color: var(--hw-brick);
  background: var(--hw-parchment);
}

body.hearts-workshop .btn-solid {
  border-color: var(--hw-brick);
  background: var(--hw-brick);
}

body.hearts-workshop footer {
  border-top: 7px double rgba(232, 220, 196, .22);
  background: var(--hw-walnut);
  color: rgba(245, 241, 233, .68);
}

@media (max-width: 900px) {
  body.hearts-workshop h1 {
    font-size: 54px;
  }

  body.hearts-workshop header::before,
  body.hearts-workshop header::after {
    opacity: .18;
  }

  body.hearts-workshop .letter {
    padding: 42px 24px;
  }

  body.hearts-workshop .method {
    grid-template-columns: 1fr;
  }

  body.hearts-workshop .step {
    min-height: 0;
  }

  body.hearts-workshop .step .no {
    margin-bottom: 22px;
  }

  body.hearts-workshop .toolindex {
    grid-template-columns: 1fr;
  }

  body.hearts-workshop .toolpanel {
    padding: 30px 20px;
  }
}

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