.op-blog-feed,.op-related { max-inline-size:70rem; margin-inline:auto; padding:clamp(3rem,6vw,5rem) 1.5rem; }
.op-blog-heading { text-align:center; margin-block-end:3rem; .op-kicker { color:var(--op-clay); font-size:.8rem; letter-spacing:.15em; text-transform:uppercase; } h1,h2 { font-size:clamp(2rem,3.5vw,3rem); font-weight:400; line-height:1.25; letter-spacing:.04em; margin:0; } }
.op-blog-cards { display:grid; gap:2.5rem; }
.op-blog-card { min-inline-size:0; h2,h3 { font-size:1.35rem; text-transform:none; letter-spacing:normal; line-height:1.3; font-weight:400; margin:0; a { text-decoration:none; &:hover { color:var(--op-clay); } } } .op-blog-photo { display:block; overflow:hidden; background:#e7e4dd; aspect-ratio:3/2; img { inline-size:100%; block-size:100%; object-fit:cover; transition:transform .25s; } &:hover img { transform:scale(1.025); } } .op-blog-card-copy { padding-block-start:1.1rem; } &.is-lead :is(h2,h3) { font-size:clamp(1.6rem,2.4vw,2.1rem); } .op-read-more { color:var(--op-clay); } }
.op-blog-date { color:#666; font-size:.85rem; margin:0 0 .65rem; }
.op-blog-all { text-align:center; margin:3rem 0 0;
    .op-text-link {
        transition:background-color .2s ease, color .2s ease, border-color .2s ease;
        &:hover, &:focus-visible { background:var(--op-clay); border-color:var(--op-clay); color:#fff; }
        @media (prefers-reduced-motion:reduce) { transition:none; }
    }
}
.op-blog-search { display:grid; gap:1rem; padding:1.5rem; background:#e7dcc0; margin-block-end:1.5rem; align-items:end; label { display:block; font-size:.85rem; } input,select { display:block; inline-size:100%; min-inline-size:0; padding:.75rem; margin-block-start:.4rem; border:1px solid #a59d8d; border-radius:0; background:#fff; color:#242424; font:inherit; } button { min-block-size:3rem; } }
.op-blog-results { font-size:.9rem; color:#666; margin-block-end:2rem; }
.op-blog-pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.65rem; margin-block-start:3rem; .page-numbers { padding:.5rem .85rem; border:1px solid #b4aca1; text-decoration:none; } .current { color:#fff; background:var(--op-slate); border-color:var(--op-slate); } }
.op-blog-empty { padding:3rem 0; text-align:center; }
.op-article { background:#f9f9f9; }
.op-article-heading { max-inline-size:70rem; margin-inline:auto; padding:clamp(3rem,6vw,5rem) 1.5rem 2.5rem; h1 { font-size:clamp(2rem,3.7vw,3.4rem); line-height:1.18; font-weight:400; margin:1.5rem 0 2rem; } .op-article-back { color:var(--op-clay); text-decoration:none; font-size:.9rem; } }
.op-article-meta { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem; padding-block-end:1.5rem; border-block-end:1px solid #d0cbc2; font-size:.85rem; color:#626262; p { margin:0; } nav { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem;
        a { display:inline-flex; align-items:center; justify-content:center; padding:.35rem; color:#e98961; font-size:1.1875rem; line-height:1; text-decoration:none;
            &:hover, &:focus-visible { color:var(--op-slate); }
        }
    } }
.op-article-body { max-inline-size:51rem; padding:0 1.5rem 3rem; margin-inline:auto; font-size:1.1rem; line-height:1.75; overflow-wrap:anywhere;
    h2,h3,h4,h5,h6 { font-weight:400; line-height:1.3; margin-block:2.5rem 1rem; } h2 { font-size:1.8rem; } h3 { font-size:1.5rem; } h4,h5,h6 { font-size:1.2rem; } p { margin-block:0 1.4rem; } li { margin-block-end:.65rem; } a { color:var(--op-clay); } blockquote { margin-inline:0; padding-inline-start:1.5rem; border-inline-start:3px solid var(--op-clay); } .op-article-link { margin-block:1.5rem; } .op-comparison { margin-block:2rem; padding:2rem 1rem; font-size:1rem; } table { display:block; max-inline-size:100%; overflow:auto; }
}
.op-article-gallery { margin-block:2rem; column-gap:1rem; figure { margin:0 0 1rem; break-inside:avoid; } a { display:block; } img { inline-size:100%; } figcaption { color:#666; font-size:.85rem; line-height:1.5; margin-block-start:.5rem; } }
.op-article-video { margin:2rem 0; video,iframe { display:block; inline-size:100%; aspect-ratio:16/9; object-fit:contain; background:#191919; border:0; } figcaption { font-size:.85rem; } }
.op-article-map { padding:1.5rem; margin-block:2rem; background:#e7dcc0; font-size:1rem; }
.op-related { border-block-start:1px solid #d0cbc2; >h2 { text-align:center; font-size:2rem; font-weight:400; margin-block-end:2.5rem; } }
@media (min-width:640px) {
    .op-blog-cards.is-archive { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .op-article-gallery:not(.is-single) { columns:2; }
    .op-blog-search { grid-template-columns:minmax(0,2fr) minmax(0,1fr); button { justify-self:start; } }
}
@media (min-width:900px) {
    .op-blog-cards.is-featured { grid-template-columns:1.1fr 1fr; grid-template-rows:repeat(3,auto); gap:1.75rem 2.5rem; .is-lead { grid-row:1/4; .op-blog-photo { aspect-ratio:4/3; } } .op-blog-card:not(.is-lead) { display:grid; grid-template-columns:1fr 1.7fr; gap:1rem; align-items:start; .op-blog-photo { aspect-ratio:1; } .op-blog-card-copy { padding:0; } h2,h3 { font-size:1.2rem; } } }
    .op-blog-cards.is-archive { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .op-blog-search { grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto; }
}
@media (prefers-reduced-motion:reduce) { .op-blog-card .op-blog-photo img { transition:none; } }