/* Scoped to the new section, preserving the existing Metrie theme elsewhere. */
.metrie-oi { color: #0e1726; }
.metrie-oi-hero, .metrie-oi-detail-header { padding-top: 3rem; padding-bottom: 2rem; }
.metrie-oi h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.2; margin: 1rem 0; }
.metrie-oi-breadcrumbs { font-size: .875rem; color: #5f6672; overflow-wrap: anywhere; }
.metrie-oi-breadcrumbs a { text-decoration: underline; }
.metrie-oi-section { padding-bottom: 5rem; }
.metrie-oi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.metrie-oi-card { border: 1px solid #e5e7eb; min-width: 0; }
.metrie-oi-card-link { color: inherit; display: block; height: 100%; text-decoration: none; }
.metrie-oi-card-image img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.metrie-oi-card-content { padding: 1.5rem; }
.metrie-oi-card h2, .metrie-oi-card h3 { font-size: 1.4rem; line-height: 1.35; margin: 0 0 1rem; }
.metrie-oi-card p { line-height: 1.6; margin: 0 0 1rem; }
.metrie-oi-link { color: #d90016; font-weight: 600; }
.metrie-oi-card-link:hover .metrie-oi-link, .metrie-oi-card-link:focus-visible .metrie-oi-link { text-decoration: underline; }
.metrie-oi :focus-visible { outline: 2px solid #d90016; outline-offset: 3px; }
.metrie-oi-pagination { margin-top: 2rem; }
.metrie-oi-pagination .nav-links { display: flex; gap: .8rem; flex-wrap: wrap; }
.metrie-oi-lead { font-size: 1.25rem; max-width: 65ch; line-height: 1.6; }
.metrie-oi-date { font-size: .875rem; color: #67717e; margin-top: 1rem; }
.metrie-oi-featured { margin-top: 2rem; }
.metrie-oi-featured img { max-width: 100%; height: auto; }
.metrie-oi-standard-content { line-height: 1.7; padding-bottom: 3rem; }
.metrie-oi-standard-content h2 { font-size: 1.8rem; margin: 2rem 0 1rem; }
.metrie-oi-standard-content p { margin: 0 0 1.25rem; }
.metrie-oi-related { padding-top: 3rem; padding-bottom: 5rem; }
.metrie-oi-related > h2 { font-size: 1.7rem; margin-bottom: 1.5rem; }
.metrie-oi-back { margin-top: 2rem; }
.metrie-oi-back a { color: #d90016; text-decoration: underline; }
@media (max-width: 900px) { .metrie-oi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .metrie-oi-grid { grid-template-columns: 1fr; } .metrie-oi-hero, .metrie-oi-detail-header { padding-top: 1.5rem; } }