.blogs{max-width:900px;} .blogintro{margin:0 0 48px;} .blogintro p{max-width:78ch;} .blogcats{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:20px 0 40px;} .blogintro .blogcats{margin-bottom:0;} .blogcats-label{font-size:15px;font-weight:600;margin-inline-end:4px;} .blogcats a{display:inline-flex;align-items:center;padding:10px 14px;border:1px solid var(--rule);border-radius:var(--radius-pill);font-size:15px;font-weight:600;line-height:1.4;color:var(--brand);text-decoration:none;transition:border-color .15s ease,color .15s ease,background-color .15s ease;} .blogcats a:first-of-type{background:var(--brand);border-color:var(--brand);color:var(--on-brand);} .blogcats a:hover,.blogcats a:focus-visible{border-color:var(--accent);color:var(--accent);} .blogcats a:first-of-type:hover,.blogcats a:first-of-type:focus-visible{background:var(--accent);border-color:var(--accent);color:var(--on-brand);} .blogcats a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start;} .posts>.post{padding:28px;} .posts>.post h2{font-size:21px;} .blogs--grid{max-width:none;} .posts + p{margin-top:32px;} /* Cards share their rows,so headings,dates,thumbnails,teasers and links line up across a row of cards instead of each card stacking on its own. */ @supports (grid-template-rows:subgrid){.posts{align-items:stretch;} .posts>.post{display:grid;grid-template-rows:subgrid;grid-row:span 6;row-gap:0;align-content:start;} /* Each element owns its row,so a card missing one (an image,a category line) leaves a hole in that card instead of shuffling the rest up and out of line with the cards beside it. */ .posts>.post>h2{grid-row:1;} .posts>.post>h2 + p{grid-row:2;} .posts>.post>.postThumbnail{grid-row:3;} .posts>.post>.post-teaser{grid-row:4;} .posts>.post>.post-teaser + p{grid-row:5;} .posts>.post>.postcats{grid-row:6;}} .postThumbnail:empty{display:none;} @media (max-width:1000px){.posts{grid-template-columns:repeat(2,1fr);}} /* A trailing card alone in its row spans it and lays out side by side,so the row does not end half empty and the card does not sit in a wide empty box. Each breakpoint uses the class that matches its column count. */ @media (min-width:1001px){.posts.posts--lone3>.post.post--last{grid-column:1 / -1;grid-template-rows:none;grid-template-columns:minmax(0,1fr) minmax(0,340px);column-gap:32px;align-content:start;} .posts--lone3>.post.post--last>h2{grid-column:1;grid-row:1;} .posts--lone3>.post.post--last>h2 + p{grid-column:1;grid-row:2;} .posts--lone3>.post.post--last>.postThumbnail{grid-column:2;grid-row:1 / span 5;align-self:start;} .posts--lone3>.post.post--last>.post-teaser{grid-column:1;grid-row:3;} .posts--lone3>.post.post--last>.post-teaser + p{grid-column:1;grid-row:4;} .posts--lone3>.post.post--last>.postcats{grid-column:1;grid-row:5;}} @media (min-width:701px) and (max-width:1000px){.posts.posts--odd>.post.post--last{grid-column:1 / -1;grid-template-rows:none;grid-template-columns:minmax(0,1fr) minmax(0,340px);column-gap:32px;align-content:start;} .posts--odd>.post.post--last>h2{grid-column:1;grid-row:1;} .posts--odd>.post.post--last>h2 + p{grid-column:1;grid-row:2;} .posts--odd>.post.post--last>.postThumbnail{grid-column:2;grid-row:1 / span 5;align-self:start;} .posts--odd>.post.post--last>.post-teaser{grid-column:1;grid-row:3;} .posts--odd>.post.post--last>.post-teaser + p{grid-column:1;grid-row:4;} .posts--odd>.post.post--last>.postcats{grid-column:1;grid-row:5;}} @media (max-width:700px){.posts{grid-template-columns:1fr;}} .post{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-card);padding:40px;} .post:nth-child(even){background:var(--wash);border-color:transparent;} .post h2{font-size:24px;font-weight:700;line-height:1.25;margin:0 0 .4em;} .post h2 a{text-decoration:none;} .post h2 a:hover{text-decoration:underline;} .post>p:first-of-type{font-size:15px;margin:0 0 1em;} .post-teaser{margin:0 0 1em;} .postThumbnail img{display:block;width:100%;max-width:400px;height:auto;border-radius:var(--radius-card);margin-bottom:1.2em;} .postcats{font-size:15px;margin:0;} .postBody{max-width:78ch;} .postBody img{max-width:100%;height:auto;border-radius:var(--radius-card);} .postBody h2{font-size:30px;margin-top:1.6em;} .postBody h3{margin-top:1.4em;} .postBody li{margin-bottom:.5em;} .blogpager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin:48px 0 0;font-weight:600;} .blogpager a{padding:10px 20px;border:1px solid var(--rule);border-radius:var(--radius-pill);text-decoration:none;} .blogpager a:hover{border-color:var(--accent);color:var(--accent);} .blogpager a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} .blogpager-status{font-size:15px;color:var(--body);font-weight:400;} @media (max-width:700px){.post{padding:24px;} /* Every card thumbnail crops to 300px on a phone;a ratio-driven height makes the listings jump around as covers differ. Declared after the base .postThumbnail rule so it wins on source order. */ .postThumbnail img{max-width:100%;height:300px;object-fit:cover;}} .posts.alternate{display:block;} .alternate details{margin:0 0 28px;} .alternate summary{cursor:pointer;} .alternate summary h2{display:inline;font-size:24px;margin:0;} .alternate ul{list-style:none;margin:14px 0 0;padding:0;} .alternate li{margin:0 0 .55em;line-height:1.5;} .alternate li[hidden],.alternate details[hidden]{display:none !important;} .alternate ~ p,#altreset{margin-top:24px;} .filterpane{border:1px solid var(--rule);border-radius:var(--radius-card);padding:18px 22px;margin:0 0 32px;} .filterpane summary{font-weight:700;cursor:pointer;} .filters{margin-top:16px;} .filters fieldset{border:0;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:10px 24px;} .filters legend{font-weight:700;padding:0;margin-bottom:8px;} .filters label{display:inline-flex;align-items:center;gap:8px;} .filters .actions{display:flex;flex-wrap:wrap;gap:12px;margin:0;} .filters .btn{padding:10px 20px;font-size:15px;} .altnote{font-size:15px;margin:0 0 20px;}