body[data-jadey-page="hc"] {
  background: #060606;
  color: #f3f0e8;
}

body[data-jadey-page="hc"] .site-header {
  background: rgba(6, 6, 6, 0.88);
  border-bottom: 1px solid rgba(243, 240, 232, 0.12);
}

.hc-page {
  min-height: calc(100vh - var(--header-height));
  padding: clamp(40px, 8vh, 96px) var(--page-padding) clamp(56px, 10vh, 112px);
}

.tally-field {
  width: min(100%, 1040px);
  margin: 0 auto;
}

.tally-date {
  display: block;
  margin-bottom: clamp(28px, 5vw, 56px);
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 2.4vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
  color: #f3f0e8;
}

.tally-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(8px, 1.25vw, 15px) clamp(9px, 1.35vw, 16px);
  color: rgba(243, 240, 232, 0.64);
}

.tally-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(3px, 0.42vw, 5px);
  width: clamp(24px, 4.8vw, 43px);
  height: clamp(34px, 6.8vw, 56px);
  padding: 1px;
  transform: translateY(var(--group-y, 0)) rotate(var(--group-rotate, 0deg));
}

.tally-mark,
.tally-cross {
  display: block;
  border-radius: 999px;
}

.tally-mark {
  background: currentColor;
}

.tally-mark {
  width: clamp(1.25px, var(--mark-width, 1.8px), 2.5px);
  height: var(--mark-height, 88%);
  opacity: var(--mark-opacity, 0.66);
  transform: translateY(var(--mark-y, 0)) rotate(var(--mark-rotate, 0deg));
  transform-origin: 50% 100%;
}

.tally-cross {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--cross-width, 126%);
  height: clamp(1.25px, var(--cross-thickness, 1.8px), 2.5px);
  opacity: var(--cross-opacity, 0.66);
  background: currentColor;
  transform: translate(calc(-50% + var(--cross-x, 0px)), calc(-50% + var(--cross-y, 0px))) rotate(var(--cross-rotate, -58deg));
  transform-origin: center;
}

.tally-cross::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: var(--cross-secondary-width, 92%);
  height: 100%;
  border-radius: inherit;
  background: currentColor;
  opacity: var(--cross-secondary-opacity, 0.28);
  transform: translate(calc(-50% + var(--cross-secondary-x, 0px)), calc(-50% + var(--cross-secondary-y, 0px))) rotate(var(--cross-secondary-rotate, 0deg));
  transform-origin: center;
}

.hc-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: clamp(36px, 6vw, 72px);
}

@media (max-width: 720px) {
  .hc-page {
    padding-top: var(--jd-space-40);
  }

  .tally-row {
    gap: 8px 9px;
  }

  .tally-group {
    width: clamp(22px, 9vw, 35px);
    height: clamp(31px, 13vw, 48px);
  }

  .hc-actions {
    margin-top: var(--jd-space-32);
  }
}