.disease-directory { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; scroll-margin-top: 130px; }
.disease-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #d3d9d9; border-radius: 12px; background: #fff; color: #203745; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.disease-card:hover { border-color: #8d684b; box-shadow: 0 8px 24px #20374512; }
.disease-card:focus-visible { outline: 3px solid #9e663b; outline-offset: 4px; }
.disease-card img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; background: #101c24; }
.disease-card > div { display: flex; flex: 1; flex-direction: column; align-items: start; padding: 24px; }
.disease-card small { font-size: 10px; letter-spacing: .1em; line-height: 1.7; color: #716153; }
.disease-card h2,.disease-card h3 { font-size: clamp(22px,2vw,30px); font-weight: 750; line-height: 1.45; margin: 12px 0; overflow-wrap: anywhere; }
.disease-card p { color: #5d6b72; font-size: 15px; line-height: 1.8; margin: 0 0 22px; }
.disease-card strong { margin-top: auto; display: inline-flex; align-items: center; gap: 24px; padding: 10px 15px; border-radius: 6px; background: #263d4d; color: #fff; font-size: 15px; line-height: 1.5; }
.disease-card--compact > div { padding: 18px; }
.disease-card--compact h3 { font-size: 21px; }
.disease-directory--home { margin-bottom: 24px; gap: 18px; }
.disease-masthead h1 { font-size: clamp(30px,4.6vw,68px); line-height: 1.3; overflow-wrap: anywhere; }
.disease-navigation a { line-height: 1.5; }
.disease-navigation a[aria-current="page"] { background: #263d4d; color: #fff; border-color: #263d4d; font-weight: 750; }
.disease-pending { padding: 18px 0; color: #67757b; font-size: 14px; line-height: 1.8; }
.disease-index-date { text-align: right; color: #68777c; font-size: 12px; margin: 20px 0 36px; }
@media(max-width:680px) { .disease-directory { grid-template-columns: minmax(0,1fr); gap: 20px; } .disease-card > div { padding: 20px; } .disease-masthead { gap: 18px; } }
@media(prefers-reduced-motion:reduce) { .disease-card { transition: none; } }