:root{--fg:#131c25;--mut:#6a6e72;--acc:#356497;--accf:#356497;--acct:#356497;--bg:#f0f4f8;--surf:#ffffff;--bd:rgba(46, 88, 132, 0.14);--sh:rgba(41, 77, 116, 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:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;line-height:1.65;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}
.hvj7ep5{max-width:1029px;margin:0 auto;padding:0 22px}
.hvjbfy9l{display:flex;gap:22px;flex-wrap:wrap;padding:22px 0;border-bottom:1px solid var(--bd);align-items:center;justify-content:space-between}
.hvjxqvh svg{height:32px;width:auto;display:block}
.hvjn8wo{display:flex;gap:14px;flex-wrap:wrap;font-size:0.841rem}
.hvjsag{color:var(--mut);padding:4px 2px;border-bottom:2px solid transparent}

.hvjsag:hover{color:var(--fg);border-bottom-color:var(--acc);text-decoration:none}
.hvja9l0z{padding:38px 0 26px;max-width:64ch}
.hvjilt7{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;font-size:1.999rem;line-height:1.12;margin:0;font-weight:800;letter-spacing:-.01em}
.hvjjyd{color:var(--mut);margin:.65em 0 0;font-size:1.414rem;line-height:1.65}
.hvjhcpoj{padding:32px 0;border-top:1px solid var(--bd)}
.hvjmbej{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;font-size:1.414rem;margin:0 0 .15em;font-weight:700;letter-spacing:-.005em}
.hvjcjs{color:var(--mut);margin:0;font-size:0.841rem}
.hvjwfj{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:22px}
.hvjwfj[data-l="grid"]{grid-template-columns:repeat(auto-fill,minmax(306px,1fr))}
.hvjwfj[data-l="row"]{grid-template-columns:repeat(auto-fill,minmax(358px,1fr))}
.hvjwfj[data-l="feature"]{grid-template-columns:repeat(auto-fill,minmax(410px,1fr))}
.hvjwfj[data-l="list"]{grid-template-columns:1fr}
.hvjkgoj{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}
.hvjkgoj:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--sh);border-color:var(--acc)}
.hvjkgoj:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--sh)}
.hvjwctmw{position:relative;aspect-ratio:16 / 9;background:var(--bd);flex:0 0 auto}
.hvjwctmw img{width:100%;height:100%;object-fit:cover}
.hvjesuzf{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)}
.hvjbez8s{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}
.hvjq2jdz{padding:21px 20px;display:flex;flex-direction:column;gap:9px;flex:1 1 auto}
.hvjk03{align-self:flex-start;font-size:0.707rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--acct)}
.hvjc9m81{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;font-size:1rem;margin:0;font-weight:700;line-height:1.28}
.hvjwdw{margin:0;color:var(--mut);font-size:0.841rem;line-height:1.5999999999999999}
.hvjgn5{margin:auto 0 0;padding-top:9px;border-top:1px solid var(--bd);color:var(--mut);font-size:0.707rem}
.hvjt1gkq: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. */
.hvjc9m81{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hvjwdw{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* The lead card: the first item of the first collection, spanning its row.
   A uniform grid gives a reader nowhere to start, and a lead item is the one
   thing a real catalogue does that this template did not. It lays out as a row
   from the small breakpoint up, because a card the width of the page with its
   image stacked on top is a billboard. */
.hvjd38j8{grid-column:1/-1}
@media(min-width:576px){.hvjd38j8{flex-direction:row;align-items:stretch}
.hvjd38j8 .hvjwctmw{width:42%;aspect-ratio:auto;min-height:190px}
.hvjd38j8 .hvjq2jdz{justify-content:center;padding:27px 24px}
.hvjd38j8 .hvjc9m81{font-size:1.414rem;line-height:1.12;-webkit-line-clamp:2;line-clamp:2}
.hvjd38j8 .hvjwdw{-webkit-line-clamp:4;line-clamp:4}
.hvjd38j8 .hvjgn5{margin:9px 0 0}}
.hvjamy9b{padding:32px 0;border-top:1px solid var(--bd);max-width:70ch}
.hvj36ssj{padding:13px 0;border-bottom:1px solid var(--bd)}
.hvj36ssj b{display:block;margin-bottom:.3em;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}
.hvj36ssj span{color:var(--mut)}
.hvjc7z{text-align:center;padding:28px 0}
.hvjihi8{display:inline-block;background:var(--accf);color:#ffffff;font-weight:700;padding:13px 26px;border-radius:20px;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;transition:filter .18s ease}
.hvjihi8:hover{filter:brightness(1.08);text-decoration:none}
.hvj2ttyy{margin-top:34px;padding:22px 0 44px;border-top:2px solid var(--bd);color:var(--mut);font-size:0.841rem}
.hvj1vt{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 22px;padding:0;list-style:none}
.hvj1vt a{color:var(--mut)}
.hvj1vt a:hover{color:var(--fg)}
.hvjviw dt{font-weight:700;color:var(--fg);margin-top:.6em}
.hvjviw dd{margin:0 0 .3em}

@media(min-width:756px){.hvjilt7{font-size:2.827rem}body{font-size:18px}.hvjmbej{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. */
.hvjc9m81{font-size:1.414rem;line-height:1.2000000000000002}
.hvjd38j8 .hvjc9m81{font-size:1.999rem}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}.hvjkgoj:hover{transform:none}}