/* /articles/ page. Reuses .xs-btn and .xs-share from /spaces/spaces.css */
.ar-section{padding-top:0}
.ar-grid{list-style:none;margin:0;padding:0;display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr))}
.ar-card{background:var(--dark);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s}
.ar-card:hover,.ar-card:focus-within{border-color:var(--rule-strong)}
.ar-media{display:block;aspect-ratio:5/2;background:var(--near-black)}
.ar-media img{width:100%;height:100%;object-fit:cover;display:block}
.ar-noimg{display:flex;align-items:center;justify-content:center;height:100%;font-family:var(--display);color:var(--lime);font-size:22px;letter-spacing:.02em}
.ar-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.ar-meta{margin:0;font-size:13px;color:var(--sage)}
.ar-card h3{margin:0;font-family:var(--display);font-size:19px;line-height:1.28;font-weight:600;letter-spacing:-.01em}
.ar-card h3 a{color:var(--white);text-decoration:none}
.ar-card h3 a:hover,.ar-card h3 a:focus-visible{color:var(--lime)}
.ar-preview{margin:0;font-size:15px;line-height:1.55;color:var(--mint);opacity:.85;flex:1}
.ar-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.ar-card .xs-x{width:14px;height:14px;fill:currentColor}