.resource-page { padding: var(--space-7) 0 var(--space-8); }
.resource-page > .technical-label { margin-bottom: var(--space-2); }
.resource-filter { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); margin: 0 0 var(--space-6); padding: var(--space-4); border: var(--line-width) solid var(--border); border-inline-start: var(--line-width-strong) solid var(--accent-hyper-cyan); background: var(--surface); }
.resource-filter label { display: grid; gap: var(--space-1); min-width: min(260px, 100%); color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.resource-filter select { min-height: 44px; padding: var(--space-2) var(--space-3); border: var(--line-width) solid var(--border-strong); border-radius: var(--radius-control); background: var(--canvas); color: var(--text-primary); }
.resource-filter button { min-height: 44px; padding: var(--space-2) var(--space-4); border: var(--line-width-strong) solid var(--interactive); border-radius: var(--radius-control); background: var(--interactive); color: var(--on-accent); font-weight: var(--weight-bold); cursor: pointer; }
.resource-grid { border-top: var(--line-width-strong) solid var(--border-strong); }
.resource-card { display: grid; grid-template-columns: 56px minmax(0, 1fr) 120px; align-items: start; gap: var(--space-3) var(--space-4); min-width: 0; padding: var(--space-5) 0; border-bottom: var(--line-width) solid var(--border); }
.resource-index { grid-row: span 3; color: var(--text-subtle); font: var(--weight-medium) var(--text-sm)/1.8 var(--font-mono); }
.resource-category, .resource-type { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; min-height: 25px; overflow-wrap: anywhere; font-size: var(--text-xs); }
.resource-category { padding-inline-start: var(--space-2); border-inline-start: var(--line-width-strong) solid var(--accent-electric-magenta); color: var(--state-danger); }
.resource-type { color: var(--text-subtle); font-family: var(--font-mono); text-align: end; }
.resource-card h2 { grid-column: 2; margin: 0; font-size: clamp(var(--text-lg), 2.4vw, 1.5rem); line-height: var(--leading-heading); }
.resource-card h2 a { color: var(--text-primary); text-decoration: none; }
.resource-card h2 a:hover { color: var(--interactive); }
.resource-card p { grid-column: 2 / 4; max-width: 76ch; margin: 0; color: var(--text-secondary); }
.resource-empty { padding: var(--space-5); border: var(--line-width) solid var(--border); color: var(--text-secondary); }
.resource-detail { max-width: var(--content-width-narrow); margin-inline: auto; padding: var(--space-7) 0 var(--space-8); }
.resource-detail .resource-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: var(--line-width) solid var(--border); }
.resource-detail h1 { margin: var(--space-4) 0; font-size: clamp(2rem, 5vw, 3.4rem); font-weight: var(--weight-heavy); line-height: var(--leading-heading); letter-spacing: -.04em; overflow-wrap: anywhere; }
.resource-summary { margin: 0; color: var(--text-secondary); font-size: var(--text-lg); }
.resource-body { max-width: 72ch; margin-top: var(--space-6); color: var(--text-primary); font-size: 1.05rem; line-height: 2; overflow-wrap: anywhere; }
.resource-body p { margin: 0 0 var(--space-4); }
.resource-action { display: inline-flex; align-items: center; min-height: 46px; margin-top: var(--space-5); padding: var(--space-2) var(--space-4); border: var(--line-width-strong) solid var(--interactive); background: var(--interactive); color: var(--on-accent); font-weight: var(--weight-bold); text-decoration: none; }
.resource-action:hover { background: var(--interactive-hover); color: var(--text-inverse); }
.resource-back { display: block; width: fit-content; margin-top: var(--space-6); }

@media (max-width: 600px) {
  .resource-page, .resource-detail { padding-top: var(--space-6); }
  .resource-card { grid-template-columns: 38px minmax(0, 1fr); gap: var(--space-2) var(--space-3); }
  .resource-index { grid-row: span 4; }
  .resource-type { grid-column: 2; justify-self: start; text-align: start; }
  .resource-card h2, .resource-card p { grid-column: 2; }
  .resource-filter { align-items: stretch; flex-direction: column; }
  .resource-filter select, .resource-filter button { width: 100%; }
}