/* The calculator list on the home page. */
.title { font-size: clamp(3.75rem, 13vw, 10rem); }

.calcs { width: 100%; margin-top: clamp(28px, 6vh, 64px); border-collapse: collapse; }
.calcs thead th {
  padding: 0 1.5rem .7rem 0;
  border-bottom: 2px solid var(--ink);
  color: var(--graphite);
  font: 600 .8125rem/1 var(--text);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.calcs tbody th, .calcs tbody td {
  padding: 1.15rem 1.5rem 1.25rem 0;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
  text-align: left;
  vertical-align: baseline;
}
.calcs tbody td { white-space: nowrap; }
.calcs th:last-child, .calcs td:last-child { padding-right: 0; }

.calc-name {
  display: inline-block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 5.2vw, 3.5rem);
  line-height: .95;
  text-decoration: none;
}
.calc-name:hover { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em; }
.summary { display: block; margin-top: .5rem; max-width: 60ch; color: var(--graphite); }

.count { margin: 1rem 0 0; color: var(--graphite); font-size: .9375rem; }

@media (max-width: 640px) {
  .calcs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .calcs tbody tr { display: block; padding: 1.1rem 0 1.2rem; border-bottom: 1px solid var(--line); }
  .calcs tbody th, .calcs tbody td { display: block; padding: 0; border: 0; white-space: normal; }
  .calcs tbody td { margin-top: .4rem; }
  .calcs tbody th + td { margin-top: .8rem; }
  .calcs tbody td::before {
    content: attr(data-label);
    margin-right: .6rem;
    color: var(--graphite);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
}