:root {
  --material-ink: #172a3a;
  --material-teal: #0f766e;
  --material-line: #d4e0e3;
}
body { margin: 0; color: var(--material-ink); background: #f7f5ef; font: 1rem/1.5 "Nunito", system-ui, sans-serif; }
.materials-skip { position: absolute; left: 1rem; top: -5rem; z-index: 20; padding: .7rem 1rem; background: white; }
.materials-skip:focus { top: 1rem; }
.materials-page { max-width: 68rem; margin: auto; padding: clamp(1rem, 3vw, 2rem); }
.materials-intro, .materials-heading { max-width: 48rem; }
.materials-intro h1 { color: #12355b; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.12; margin: .25rem 0; }
.materials-eyebrow { color: var(--material-teal); font-weight: 800; margin: 0; }
.materials-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.75rem 0 1rem; padding: 1.25rem; border: 1px solid var(--material-line); border-radius: 1rem; background: white; }
.materials-picker label { display: block; font-weight: 800; margin-bottom: .35rem; }
.materials-picker select { width: 100%; min-height: 3rem; padding: .45rem; border: 1px solid #889ca9; border-radius: .5rem; background: white; color: var(--material-ink); font: inherit; }
.materials-status { color: #3d5260; }
.materials-heading h2 { color: #12355b; font-size: clamp(1.5rem, 3vw, 2.2rem); margin: .25rem 0; }
.materials-sections, .materials-more, .materials-neighbors { display: flex; flex-wrap: wrap; gap: .65rem 1rem; margin: 1rem 0; }
.materials-sections a, .materials-more a, .materials-neighbors a { color: #075f58; font-weight: 800; }
.materials-group { margin: 2rem 0; scroll-margin-top: 6rem; }
.materials-group h3 { font-size: 1.4rem; margin: 0 0 .75rem; color: #12355b; }
.materials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: .75rem; }
.materials-link { display: flex; flex-direction: column; gap: .2rem; min-height: 5.7rem; padding: .85rem 1rem; border: 1px solid var(--material-line); border-radius: .75rem; background: white; color: var(--material-ink); text-decoration: none; }
.materials-link strong { color: #075f58; font-size: 1.05rem; }
.materials-link span { color: #445b68; }
.materials-link:hover { border-color: var(--material-teal); background: #effaf7; }
a:focus-visible, select:focus-visible { outline: 3px solid #d08724; outline-offset: 3px; }
@media (max-width: 38rem) { .materials-picker { grid-template-columns: 1fr; } }