:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #f5f0e7; color: #172322; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
main { width: min(1120px, 100%); margin: auto; padding: 28px 18px 50px; }
.masthead { padding: 10px 4px 24px; }
.eyebrow { margin: 0 0 5px; color: #a44a25; font-weight: 800; font-size: .72rem; letter-spacing: .13em; }
h1 { font-family: Georgia, serif; font-size: clamp(2.6rem, 8vw, 4.8rem); line-height: .92; letter-spacing: -.05em; margin: 0; color: #153f3e; }
.subtitle { margin: 14px 0 0; color: #566360; }
.provider-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; }
.tab { flex: 0 0 auto; border: 1px solid #cfc5b3; background: #fbf8f1; color: #43514e; border-radius: 99px; padding: 9px 14px; text-transform: capitalize; font: 700 .85rem/1 inherit; cursor: pointer; }
.tab.active { color: #fff; background: #153f3e; border-color: #153f3e; }
.status { min-height: 20px; margin: 5px 3px 18px; color: #697570; font-size: .85rem; }
.listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.listing-card { background: #fffdf8; border: 1px solid #e3dbcf; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 4px #342a1710; }
.image-link { display: grid; place-items: center; height: 180px; background: #e5ebe7; overflow: hidden; }
.listing-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.no-image { color: #697570; font-size: .85rem; }
.listing-copy { padding: 13px 14px 15px; }
.listing-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #79827e; font-size: .72rem; }
.provider { color: #a44a25; text-transform: capitalize; font-weight: 800; }
h2 { margin: 8px 0 6px; font-size: 1rem; line-height: 1.3; }
h2 a { color: inherit; text-decoration: none; } h2 a:hover { text-decoration: underline; }
.price { margin: 0; color: #153f3e; font-size: 1.15rem; font-weight: 800; }
.load-more { display: block; width: min(320px, 100%); margin: 24px auto 0; padding: 12px; border: 1px solid #153f3e; border-radius: 8px; color: #153f3e; background: #fbf8f1; font: 800 .9rem/1 inherit; cursor: pointer; }.load-more:hover { background: #153f3e; color: #fff; }
@media (min-width: 720px) { main { padding: 50px 32px 70px; } .image-link { height: 205px; } }