.npc{--npc-r:26px;border-radius:var(--npc-r);color:inherit;outline:none;flex-direction:column;text-decoration:none;display:flex}.npc-media{position:relative}.npc-cover{aspect-ratio:4/3;border-radius:var(--npc-r);background:var(--cx-card);-webkit-mask-composite:xor;position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(#000 0 0),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108 108'%3E%3Cpath d='M0 108A28 28 0 0 0 28 80V76A48 48 0 0 1 76 28H80A28 28 0 0 0 108 0V108Z'/%3E%3C/svg%3E");mask-image:linear-gradient(#000 0 0),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108 108'%3E%3Cpath d='M0 108A28 28 0 0 0 28 80V76A48 48 0 0 1 76 28H80A28 28 0 0 0 108 0V108Z'/%3E%3C/svg%3E");-webkit-mask-position:0 0,100% 100%;mask-position:0 0,100% 100%;-webkit-mask-size:auto,108px 108px;mask-size:auto,108px 108px;-webkit-mask-repeat:repeat,no-repeat;mask-repeat:repeat,no-repeat;-webkit-mask-clip:border-box,border-box;mask-clip:border-box,border-box;-webkit-mask-origin:border-box,border-box;mask-origin:border-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.npc-cover img{object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .6s}.npc-cover:after{content:"";pointer-events:none;background:linear-gradient(180deg,rgba(var(--cx-deep-rgb),.12),rgba(var(--cx-deep-rgb),.32));position:absolute;inset:0}.npc-badge{z-index:1;white-space:nowrap;border:1px solid rgba(var(--cx-light-cyan-rgb),.4);background:rgba(var(--cx-deep-rgb),.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--cx-text);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:500;line-height:1.3;position:absolute;top:14px;left:50%;transform:translate(-50%)}.npc-go{border:1px solid var(--cx-secondary-border);background:var(--cx-secondary);width:64px;height:64px;color:var(--cx-on-secondary);border-radius:50%;place-items:center;transition:background-color .3s,border-color .3s,color .3s,transform .3s;display:grid;position:absolute;bottom:0;right:0}.npc-go svg{transition:transform .3s}.npc-title{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);color:var(--cx-text);margin-top:20px}.npc-desc{color:var(--cx-text-2);font-size:var(--fs-body);margin-top:8px;line-height:1.65}.npc-note{border-top:1px solid var(--cx-border);color:var(--cx-text-secondary);margin-top:12px;padding-top:12px;font-size:14.5px;line-height:1.6}.npc-tags{flex-wrap:wrap;justify-content:center;gap:8px;margin:16px 0 0;padding:0;list-style:none;display:flex}.npc-tags li{border:1px solid var(--cx-card-border);background:var(--cx-card);color:var(--cx-text-secondary);border-radius:8px;padding:5px 11px;font-size:13px;font-weight:500}.npc:is(:hover,:focus-visible) .npc-cover img{transform:scale(1.04)}.npc:is(:hover,:focus-visible) .npc-go{background:var(--cx-accent);border-color:var(--cx-accent);color:var(--cx-on-accent);transform:scale(1.05)}.npc:is(:hover,:focus-visible) .npc-go svg{transform:translate(2px,-2px)}.npc:focus-visible{outline:2px solid var(--cx-brand-ink);outline-offset:6px}.npc-mono .npc-cover img{filter:grayscale()contrast(1.05)}.npc-mono:is(:hover,:focus-visible) .npc-cover img{filter:none}.npc-grid{container-type:inline-size}.npc-grid>.npc-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,56px) clamp(18px,2.4vw,32px);margin:0;padding:0;list-style:none;display:grid}.npc-grid.cols-2>.npc-list{grid-template-columns:repeat(2,minmax(0,1fr))}.npc-list>li{flex-direction:column;display:flex}.npc-list>li>.npc{flex:1}.npc-grid.cols-4>.npc-list{grid-template-columns:repeat(2,minmax(0,1fr))}@container (min-width:980px){.npc-grid.cols-4>.npc-list{grid-template-columns:repeat(4,minmax(0,1fr))}.npc-grid.cols-4>.npc-list>li,.npc-grid.cols-4>.npc-list>li>.npc{grid-row:span 2;grid-template-rows:subgrid;row-gap:0;display:grid}.npc-grid.cols-4 .npc-cover{aspect-ratio:4/5}}@container (max-width:860px){.npc-grid>.npc-list{grid-template-columns:repeat(2,minmax(0,1fr))}.npc-grid>.npc-list>li:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - clamp(18px,2.4vw,32px)/2)}}@container (max-width:540px){.npc-grid>.npc-list,.npc-grid.cols-2>.npc-list,.npc-grid.cols-4>.npc-list{grid-template-columns:minmax(0,1fr)}.npc-grid>.npc-list>li:last-child:nth-child(odd){justify-self:stretch;width:auto}}
