:root{--fg:#181a20;--mut:#6c6d70;--acc:#a44126;--accf:#a44126;--acct:#a44126;--bg:#faf2f0;--surf:#ffffff;--bd:rgba(144, 57, 34, 0.14);--sh:rgba(126, 50, 29, 0.12)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:"Segoe UI", "Helvetica Neue", Arial, sans-serif;line-height:1.55;font-size:16px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:2px}
.bpvzomm0{max-width:925px;margin:0 auto;padding:0 14px}
.bpvmed{display:flex;gap:14px;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid var(--bd);flex-direction:column;align-items:center;text-align:center}
.bpv5cw9 svg{height:32px;width:auto;display:block}
.bpv4ovz{display:flex;gap:14px;flex-wrap:wrap;font-size:0.894rem}
.bpvdpf{color:var(--mut);padding:4px 2px;border-bottom:2px solid transparent}

.bpvdpf:hover{color:var(--fg);border-bottom-color:var(--acc);text-decoration:none}
.bpvqx8{padding:30px 0 18px;max-width:64ch}
.bpv44zh{font-family:"Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif;font-size:1.563rem;line-height:1.24;margin:0;font-weight:800;letter-spacing:-.01em}
.bpvom8a8{color:var(--mut);margin:.65em 0 0;font-size:1.25rem;line-height:1.55}
.bpvgmmnz{padding:24px 0;border-top:1px solid var(--bd)}
.bpvjwp{font-family:"Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif;font-size:1.25rem;margin:0 0 .15em;font-weight:700;letter-spacing:-.005em}
.bpv8faw{color:var(--mut);margin:0;font-size:0.894rem}
.bpv2ifbd{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:14px}
.bpv2ifbd[data-l="grid"]{grid-template-columns:repeat(auto-fill,minmax(296px,1fr))}
.bpv2ifbd[data-l="row"]{grid-template-columns:repeat(auto-fill,minmax(348px,1fr))}
.bpv2ifbd[data-l="feature"]{grid-template-columns:repeat(auto-fill,minmax(400px,1fr))}
.bpv2ifbd[data-l="list"]{grid-template-columns:1fr}
.bpvdlk2{position:relative;display:flex;flex-direction:column;background:var(--surf);border:1px solid var(--bd);border-radius:12px;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.bpvdlk2:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--sh);border-color:var(--acc)}
.bpvdlk2:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--sh)}
.bpvrbpa{position:relative;aspect-ratio:16 / 9;background:var(--bd);flex:0 0 auto}
.bpvrbpa img{width:100%;height:100%;object-fit:cover}
.bpvewi{position:absolute;left:10px;top:10px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--surf);color:var(--acc);box-shadow:0 2px 6px var(--sh)}
.bpvcois{position:absolute;right:8px;bottom:8px;background:var(--fg);color:var(--bg);font-size:0.8rem;font-weight:700;padding:3px 7px;border-radius:4px;letter-spacing:.01em}
.bpvvpbhb{padding:13px 13px;display:flex;flex-direction:column;gap:6px;flex:1 1 auto}
.bpvpx6nk{align-self:flex-start;font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--acct)}
.bpv832va{font-family:"Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif;font-size:1rem;margin:0;font-weight:700;line-height:1.4}
.bpvoxas{margin:0;color:var(--mut);font-size:0.894rem;line-height:1.5}
.bpvkt03{margin:auto 0 0;padding-top:6px;border-top:1px solid var(--bd);color:var(--mut);font-size:0.8rem}
.bpvlmw7:not(:last-child)::after{content:"\00b7";margin:0 .45em}
/* Titles and excerpts are clamped so a row of cards shares one set of edges.
   Item titles run 30 to 60 characters and excerpts 16 to 22 words, and left
   unclamped every card in a row got a different text block and a different
   height, which is a good part of what made a grid of them look unfinished.
   The clamp is visual only: the full text is in the DOM and on the item own
   page, so nothing is hidden from a crawler or a screen reader. */
.bpv832va{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bpvoxas{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bpvdlk2{flex-direction:row;align-items:stretch}.bpvdlk2 .bpvrbpa{aspect-ratio:1/1;width:89px;flex:0 0 auto}.bpvdlk2 .bpvvpbhb{justify-content:center}.bpvdlk2 .bpvkt03{margin:6px 0 0;border-top:0;padding-top:0}

.bpvfjnjr{padding:24px 0;border-top:1px solid var(--bd);max-width:70ch}
.bpvrupy6{padding:13px 0;border-bottom:1px solid var(--bd)}
.bpvrupy6 b{display:block;margin-bottom:.3em;font-family:"Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif}
.bpvrupy6 span{color:var(--mut)}
.bpvbht{text-align:center;padding:20px 0}
.bpvd01b{display:inline-block;background:var(--accf);color:#ffffff;font-weight:700;padding:13px 26px;border-radius:12px;font-family:"Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif;transition:filter .18s ease}
.bpvd01b:hover{filter:brightness(1.08);text-decoration:none}
.bpv0smc{margin-top:26px;padding:14px 0 44px;border-top:2px solid var(--bd);color:var(--mut);font-size:0.894rem}
.bpvlpyk{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 14px;padding:0;list-style:none}
.bpvlpyk a{color:var(--mut)}
.bpvlpyk a:hover{color:var(--fg)}
.bpvsx5a dt{font-weight:700;color:var(--fg);margin-top:.6em}
.bpvsx5a dd{margin:0 0 .3em}

@media(min-width:736px){.bpv44zh{font-size:1.953rem}body{font-size:17px}.bpvjwp{font-size:1.563rem}
/* The card title takes a full step up where there is width for it, at the same
   breakpoint the headline and the collection heading do, so all three stay one
   step apart at both sizes. Below this it sat at exactly the page body size
   with the excerpt one step under it: a gap of 9% at the shallowest ratio,
   which is invisible, so the card had a title and a description that read as
   the same kind of thing. */
.bpv832va{font-size:1.25rem;line-height:1.32}
.bpv6hv .bpv832va{font-size:1.563rem}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}.bpvdlk2:hover{transform:none}}