.page-utility {
  --ig-editorial-paper: #f2f0e8;
}

.page-utility .utility-main {
  min-height: calc(100vh - 158px);
  display: grid;
  place-items: center;
  padding-block: clamp(2.5rem, 7vw, 6rem);
  color: var(--ig-editorial-ink);
  background: var(--ig-editorial-ivory);
}

.page-utility .utility-panel {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  width: min(920px, 100%);
  padding: clamp(1.5rem, 5vw, 4rem);
  border: 1px solid color-mix(in srgb, var(--ig-editorial-ink) 16%, transparent);
  border-top: 4px solid var(--ig-editorial-lime);
  background: var(--ig-editorial-ivory);
}

.page-utility .utility-panel h1 {
  max-width: 12ch;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 0.96;
  text-wrap: balance;
}

.page-utility .utility-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.page-utility .utility-link {
  min-height: 48px;
}

.page-utility :where(.btn-secondary, .btn-ghost) {
  border-color: var(--ig-editorial-ink);
  background: var(--ig-editorial-paper);
  color: var(--ig-editorial-ink);
}

.page-utility :where(.btn-secondary, .btn-ghost):hover {
  border-color: var(--ig-editorial-forest);
  background: var(--ig-editorial-lime);
  color: var(--ig-editorial-forest);
}

.page-utility .utility-link:focus-visible {
  outline: 3px solid var(--ig-editorial-forest);
  outline-offset: 3px;
}

@media (max-width: 49.9375rem) {
  .page-utility .utility-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 24.375rem) {
  .page-utility .utility-links { grid-template-columns: 1fr; }
  .page-utility .utility-panel { padding: 1.25rem; }
}