:root{--fg:#eef0f6;--mut:#a7adbf;--acc:#5b3a8c;--accf:#5b3a8c;--acct:#8971ac;--bg:#0d0b16;--surf:#110f1c;--bd:rgba(255, 255, 255, 0.12);--sh:rgba(0, 0, 0, 0.4)}
*{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.5;font-size:17px}
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}
.a4yigq{max-width:1032px;margin:0 auto;padding:0 22px}
.a4yldhzq{display:flex;gap:22px;flex-wrap:wrap;padding:22px 0;border-bottom:1px solid var(--bd);align-items:center;justify-content:space-between}
.a4yvtp svg{height:32px;width:auto;display:block}
.a4y4zmde{display:flex;gap:14px;flex-wrap:wrap;font-size:0.841rem}
.a4ysqvbs{color:var(--mut);padding:4px 2px;border-bottom:2px solid transparent}
.a4y4zmde{padding:0 0 22px;margin:0;border-bottom:1px solid var(--bd)}
.a4ysqvbs:hover{color:var(--fg);border-bottom-color:var(--acc);text-decoration:none}
.a4ymro{padding:38px 0 26px;max-width:64ch}
.a4yo092y{font-family:"Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif;font-size:1.999rem;line-height:1.24;margin:0;font-weight:800;letter-spacing:-.01em}
.a4y68lwn{color:var(--mut);margin:.65em 0 0;font-size:1.414rem;line-height:1.5}
.a4ypmn1{padding:32px 0;border-top:1px solid var(--bd)}
.a4yw0oit{font-family:"Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif;font-size:1.414rem;margin:0 0 .15em;font-weight:700;letter-spacing:-.005em}
.a4ypkyef{color:var(--mut);margin:0;font-size:0.841rem}
.a4ysacd{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:22px}
.a4ysacd[data-l="grid"]{grid-template-columns:repeat(auto-fill,minmax(305px,1fr))}
.a4ysacd[data-l="row"]{grid-template-columns:repeat(auto-fill,minmax(357px,1fr))}
.a4ysacd[data-l="feature"]{grid-template-columns:repeat(auto-fill,minmax(409px,1fr))}
.a4ysacd[data-l="list"]{grid-template-columns:1fr}
.a4yehf{position:relative;display:flex;flex-direction:column;background:var(--surf);border:1px solid var(--bd);border-radius:20px;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.a4yehf:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--sh);border-color:var(--acc)}
.a4yehf:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--sh)}
.a4y2yyi{position:relative;aspect-ratio:16 / 9;background:var(--bd);flex:0 0 auto}
.a4y2yyi img{width:100%;height:100%;object-fit:cover}
.a4y1nbji{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)}
.a4yz5q4{position:absolute;right:8px;bottom:8px;background:var(--fg);color:var(--bg);font-size:0.707rem;font-weight:700;padding:3px 7px;border-radius:4px;letter-spacing:.01em}
.a4ydb8ci{padding:21px 20px;display:flex;flex-direction:column;gap:9px;flex:1 1 auto}
.a4ynrj{align-self:flex-start;font-size:0.707rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--acct)}
.a4y2dk3n{font-family:"Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif;font-size:1rem;margin:0;font-weight:700;line-height:1.4}
.a4yas54{margin:0;color:var(--mut);font-size:0.841rem;line-height:1.45}
.a4yoso2w{margin:auto 0 0;padding-top:9px;border-top:1px solid var(--bd);color:var(--mut);font-size:0.707rem}
.a4yxspf: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. */
.a4y2dk3n{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.a4yas54{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}


.a4y631{padding:32px 0;border-top:1px solid var(--bd);max-width:70ch}
.a4yc6j{padding:13px 0;border-bottom:1px solid var(--bd)}
.a4yc6j b{display:block;margin-bottom:.3em;font-family:"Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif}
.a4yc6j span{color:var(--mut)}
.a4yo7l{text-align:center;padding:28px 0}
.a4ytgk82{display:inline-block;background:var(--accf);color:#ffffff;font-weight:700;padding:13px 26px;border-radius:0px;font-family:"Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif;transition:filter .18s ease}
.a4ytgk82:hover{filter:brightness(1.08);text-decoration:none}
.a4yi0nmy{margin-top:34px;padding:22px 0 44px;border-top:2px solid var(--bd);color:var(--mut);font-size:0.841rem}
.a4yqelu{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 22px;padding:0;list-style:none}
.a4yqelu a{color:var(--mut)}
.a4yqelu a:hover{color:var(--fg)}
.a4y4rri dt{font-weight:700;color:var(--fg);margin-top:.6em}
.a4y4rri dd{margin:0 0 .3em}

@media(min-width:740px){.a4yo092y{font-size:2.827rem}body{font-size:18px}.a4yw0oit{font-size:1.999rem}
/* 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. */
.a4y2dk3n{font-size:1.414rem;line-height:1.32}
.a4yyqbt .a4y2dk3n{font-size:1.999rem}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}.a4yehf:hover{transform:none}}.go94h{margin:22px 0 0;padding:18px;border:1px solid var(--hair);border-radius:20px;background:var(--card)}.zt5f{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.mtou{font:inherit;font-weight:600;cursor:pointer;padding:8px 14px;border:1px solid var(--fg);border-radius:20px;background:var(--fg);color:var(--bg)}.mtou[data-s]{background:transparent;color:var(--fg)}.mtou:hover{opacity:.85}.gocbc{margin:13px 0 0;padding:0;list-style:none;display:grid;gap:6px}.gocbc li{padding:7px 10px;border:1px solid var(--hair);border-radius:20px;font-weight:600}.gocbc li span{font-weight:400;color:var(--mut)}.xn4{margin:8px 0 0;font-size:.85em;color:var(--mut)}