/* Practical guide links and the guide's return path. */
.practice-link {
  clear: both;
  margin-top: calc(var(--air) * 1.6);
}

.practice-card {
  --card-paper: color-mix(in srgb, var(--verdigris) 6%, var(--sheet));
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1.1rem;
  background: var(--card-paper);
  border: 1px solid color-mix(in srgb, var(--verdigris) 28%, var(--sheet));
  border-radius: 3px;
  text-decoration: none;
  font-family: var(--apparatus);
}

.practice-card:hover {
  border-color: var(--verdigris);
}

.practice-card:focus-visible {
  outline: 2px solid var(--verdigris);
  outline-offset: 4px;
}

.practice-card-icon {
  flex: 0 0 2.8rem;
  width: 2.8rem;
  height: 2.8rem;
  color: var(--verdigris);
}

.practice-card-entrance {
  stroke: var(--card-paper);
  stroke-width: 2;
}

.practice-card-copy {
  min-width: 0;
}

.practice-card-title {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.practice-card-description {
  display: block;
  margin-top: .2rem;
  color: var(--ink-quiet);
  font-size: .8rem;
  line-height: 1.5;
}

.practice-card-arrow {
  margin-left: auto;
  font-size: 1.25rem;
}

.practice-return {
  margin: 0 0 1.5rem;
  font-family: var(--apparatus);
  font-size: .82rem;
}

.practice-return a {
  color: var(--verdigris);
  text-underline-offset: .18em;
}

.practice-guide .prose > ol > li {
  margin-bottom: 1rem;
}

.practice-language {
  font-family: var(--apparatus);
  font-size: .85rem;
  color: var(--ink-quiet);
}

@media (max-width: 30rem) {
  .practice-guide .titlepage h1 {
    font-size: clamp(34px, 11vw, 42px);
  }

  .practice-card {
    gap: .55rem;
    padding: .85rem .7rem;
  }
}