.blog-heading{margin-bottom:32px}.blog-search{max-width:760px;margin:0 auto 42px}.blog-search>label{display:block;margin-bottom:12px;font-size:13px;font-weight:500;color:var(--muted)}.blog-search-field{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 8px 8px 20px;border:1px solid #ffffff30;border-radius:18px;background:var(--glass);box-shadow:0 15px 40px #0002;transition:border-color .2s ease,box-shadow .2s ease}.blog-search-field:focus-within{border-color:var(--coral);box-shadow:0 0 0 3px #ff887b12}.blog-search-field>svg{color:var(--coral)}.blog-search-field input{min-width:0;width:100%;border:0;background:transparent;border-radius:8px;padding:14px 0;color:var(--fg);font-size:14px}.blog-search-field input:focus{outline:none}.blog-search-field input::placeholder{color:#a89fb5}.blog-search-field .button{border:0;cursor:pointer;padding:15px 25px;font-size:13px}.blog-search-reset{display:inline-block;margin-top:14px;color:var(--coral);font-size:12px;text-decoration:underline;text-underline-offset:4px}.blog-search-status{text-align:center;margin:0 0 28px;font-size:14px;overflow-wrap:anywhere}.blog-empty{text-align:center;padding:55px 24px;border:1px solid var(--line);border-radius:24px;background:var(--glass);max-width:760px;margin:auto}.blog-empty h2{font-size:28px;margin-bottom:18px}.blog-empty p{margin-bottom:25px}.blog-pagination{display:flex;align-items:center;justify-content:center;gap:24px;margin:40px 0 0;font-size:13px;color:var(--muted)}.blog-pagination [aria-disabled]{opacity:.45}.blog-results .story-card h2{font-size:21px}.blog-results .story-card p{line-height:1.8}
@media(max-width:760px){.blog-search{margin-bottom:30px}.blog-search-field{grid-template-columns:20px minmax(0,1fr);gap:10px;padding:12px 14px}.blog-search-field .button{grid-column:1/-1;width:100%;padding:13px 20px}.blog-search-field input{font-size:16px;padding:9px 0}.blog-pagination{gap:12px;font-size:11px;flex-wrap:wrap}.blog-pagination .text-link{padding:9px 12px;font-size:12px}}

/* Extend the article title link across the entire card. */
.blog-results .story-card{position:relative}
.blog-results .story-card h2 a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.blog-results .story-card:has(h2 a:focus-visible){outline:2px solid var(--coral);outline-offset:4px}