.chapter-countdown {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 18px;
  margin-top: 62px;
  padding: 17px 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
  font-family: "DM Mono", monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.chapter-countdown > span,
.chapter-countdown small {
  color: #52605c;
  font-size: 10px;
}

.chapter-countdown strong {
  color: var(--rust);
  font-size: clamp(17px, 2.3vw, 25px);
  font-weight: 500;
  letter-spacing: .03em;
  text-align: center;
}

.chapter-countdown + .chapter-end {
  margin-top: 32px;
}

.chapter-feedback {
  margin-top: 52px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

.chapter-feedback h2 {
  margin: 0 0 22px;
  font: 600 clamp(28px, 4vw, 38px)/1.15 "Playfair Display", serif;
  letter-spacing: -.035em;
}

.chapter-feedback p { font: 17px/1.65 "DM Sans", sans-serif; }
.chapter-feedback label { display: block; margin: 24px 0 10px; font: 12px "DM Mono", monospace; }
.chapter-feedback textarea {
  display: block;
  width: 100%;
  resize: vertical;
  padding: 14px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  font: 16px/1.5 "DM Sans", sans-serif;
}
.chapter-feedback .feedback-help { font-size: 13px; color: #52605c; }
.chapter-feedback button { border: 0; cursor: pointer; }
.chapter-feedback textarea:focus-visible,
.chapter-feedback button:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }

@media (max-width: 700px) {
  .chapter-countdown {
    grid-template-columns: 1fr;
    gap: 7px;
    margin-top: 47px;
  }

  .chapter-countdown strong {
    text-align: left;
  }
}