/* Hallmark · macrostructure: Index-First · genre: editorial · theme: studied-DNA (PVRack) · tone: technical-reference · anchor hue: warm-gold · nav: sitewide N1b retained · footer: sitewide Ft1 retained · enrichment: none · contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57) */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 */
.resources-page {
  padding-top: var(--header-height);
  background: var(--color-paper);
}

.resource-shell {
  width: min(100% - (2 * var(--page-gutter)), var(--page-max));
  margin-inline: auto;
}

.resource-intro {
  padding-block: var(--space-xl) var(--space-2xl);
  color: var(--color-night-ink);
  background: var(--color-night);
  border-bottom: var(--rule-hair) solid var(--color-night-2);
}

.resource-breadcrumb {
  display: flex;
  gap: var(--space-2xs);
  margin-bottom: var(--space-md);
  color: var(--color-night-muted);
  font-size: var(--text-sm);
}

.resource-breadcrumb a:hover {
  color: var(--color-accent);
}

.resource-breadcrumb a:focus-visible,
.resource-jump a:focus-visible,
.resource-list a:focus-visible,
.resource-request-link:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.resource-intro h1 {
  max-width: 18ch;
  color: var(--color-night-ink);
  font-size: clamp(var(--text-2xl), 5vw, var(--text-3xl));
}

.resource-intro p {
  max-width: 66ch;
  margin-top: var(--space-md);
  color: var(--color-night-muted);
  font-size: var(--text-md);
}

.resource-layout {
  display: grid;
  grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: start;
  padding-block: var(--space-xl) var(--space-3xl);
}

.resource-jump {
  position: sticky;
  top: calc(var(--header-height) + var(--space-md));
  display: grid;
  border-top: var(--rule-hair) solid var(--color-rule);
}

.resource-jump a {
  min-height: 44px;
  padding-block: var(--space-xs);
  color: var(--color-muted);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm);
  font-weight: 600;
}

.resource-jump a:hover,
.resource-jump a:active {
  color: var(--color-accent-strong);
}

.resource-directory {
  min-width: 0;
}

.resource-group {
  scroll-margin-top: calc(var(--header-height) + var(--space-lg));
  padding-bottom: var(--space-2xl);
}

.resource-group + .resource-group {
  padding-top: var(--space-xl);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.resource-group > header {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr);
  gap: var(--space-lg);
  align-items: end;
  margin-bottom: var(--space-md);
}

.resource-group h2,
.resource-request h2 {
  font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
}

.resource-group header p,
.resource-request p {
  max-width: 60ch;
  color: var(--color-muted);
}

.resource-list {
  border-top: var(--rule-hair) solid var(--color-rule);
}

.resource-list li {
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.resource-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-lg);
  align-items: center;
  min-height: 88px;
  padding: var(--space-md) var(--space-sm);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.resource-list a:hover {
  color: var(--color-accent-strong);
  background: var(--color-paper-2);
  transform: translateX(var(--space-3xs));
}

.resource-list a:active {
  transform: translateX(var(--space-2xs));
}

.resource-list span {
  display: grid;
  gap: var(--space-3xs);
  min-width: 0;
}

.resource-list strong {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
}

.resource-list small {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.resource-list b {
  color: var(--color-accent-strong);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.resource-list b::after {
  content: " →";
}

.resource-request {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-xl);
  align-items: center;
  scroll-margin-top: calc(var(--header-height) + var(--space-lg));
  padding: var(--space-xl);
  color: var(--color-night-ink);
  background: var(--color-night);
  border-top: var(--rule-hair) solid var(--color-accent);
}

.resource-request h2 {
  color: var(--color-night-ink);
}

.resource-request p {
  margin-top: var(--space-sm);
  color: var(--color-night-muted);
}

.resource-request-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--space-xs) var(--space-md);
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border: var(--rule-hair) solid var(--color-accent);
  border-radius: var(--radius-input);
  font-weight: 700;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.resource-request-link:hover {
  color: var(--color-night-ink);
  background: var(--color-accent-strong);
  transform: translateY(-2px);
}

.resource-request-link:active {
  transform: translateY(0);
}

@media (max-width: 60rem) {
  .resource-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }

  .resource-jump {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .resource-jump a {
    padding-inline: var(--space-sm);
  }
}

@media (max-width: 40rem) {
  .resource-intro {
    padding-block: var(--space-xl) var(--space-2xl);
  }

  .resource-intro h1 {
    font-size: var(--text-2xl);
  }

  .resource-jump,
  .resource-group > header,
  .resource-request,
  .resource-list a {
    grid-template-columns: minmax(0, 1fr);
  }

  .resource-list a {
    gap: var(--space-xs);
    min-height: 108px;
  }

  .resource-list b {
    justify-self: start;
  }

  .resource-request {
    padding: var(--space-lg);
  }

  .resource-request-link {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .resource-list a,
  .resource-request-link {
    transition-duration: var(--dur-fast);
    transform: none;
  }
}