/* /articles index. coss ui tokens: Badge (rounded-sm, h-5.5), Button outline (rounded-lg, h-9, shadow-xs),
   Input (rounded-lg, h-9, border-input, shadow-xs), Card (rounded-2xl, border, shadow-xs/5). */
*, *::before, *::after{ box-sizing:border-box; }
body{ margin:0; background:var(--ds-bg,#fcfcfc); }
.ai{ --fg:#171717; --body:#525252; --muted:#737373; --line:rgba(0,0,0,.08); --input:rgba(0,0,0,.1);
  --disp:"CS Display","CS UI",ui-sans-serif,system-ui,sans-serif; font-family:"CS UI",ui-sans-serif,system-ui,sans-serif; color:var(--body); }
.ai-shell{ max-width:1200px; margin:0 auto; padding:0 24px; }
.ai-head{ padding:64px 0 40px; }
.ai-badge{ display:inline-flex; align-items:center; height:24px; padding:0 8px; border-radius:6px; border:1px solid var(--input); background:#fff; color:var(--fg); font-size:12.5px; font-weight:500; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.ai-title{ margin:16px 0 0; max-width:820px; color:var(--fg); font-family:var(--disp); font-weight:600; font-size:clamp(2rem,4vw,2.75rem); line-height:1.1; letter-spacing:-.022em; text-wrap:balance; }
.ai-sub{ margin:14px 0 0; max-width:680px; font-size:17px; line-height:1.55; color:var(--muted); }
.ai-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:32px; }
.ai-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.ai-chip{ height:32px; padding:0 12px; border-radius:10px; border:1px solid var(--input); background:#fff; color:var(--fg); font:500 13.5px/1 inherit; font-family:inherit; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.04); transition:background .15s; }
.ai-chip:hover{ background:#f5f5f5; }
.ai-chip[aria-pressed="true"]{ background:#262626; border-color:#262626; color:#fafafa; box-shadow:inset 0 1px 0 rgba(255,255,255,.16); }
.ai-chip:focus-visible, .ai-btn:focus-visible, .ai-icon:focus-visible, .ai-search input:focus-visible{ outline:2px solid #0040ff; outline-offset:2px; }
.ai-search{ position:relative; display:flex; align-items:center; width:280px; flex:none; }
.ai-search svg{ position:absolute; left:10px; width:16px; height:16px; color:var(--muted); pointer-events:none; }
.ai-search input{ width:100%; height:36px; padding:0 12px 0 34px; border-radius:10px; border:1px solid var(--input); background:#fff; color:var(--fg); font:14px inherit; font-family:inherit; box-shadow:0 1px 2px rgba(0,0,0,.04); outline:none; }
.ai-search input:focus{ border-color:rgba(0,0,0,.24); box-shadow:0 0 0 3px rgba(0,0,0,.06); }
.ai-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.ai-list{ padding:56px 0 96px; }
.ai-grid{ width:80%; margin:0 auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.ai-card{ position:relative; display:flex; flex-direction:column; padding:12px 12px 16px; border-radius:16px; border:1px solid var(--line); background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.05); transition:box-shadow .2s, border-color .2s; }
.ai-card:hover{ border-color:rgba(0,0,0,.14); box-shadow:0 4px 16px rgba(0,0,0,.06); }
.ai-cover{ aspect-ratio:16/9; overflow:hidden; border-radius:10px; border:1px solid var(--line); background:#f4f4f5; }
.ai-cover img{ display:block; width:100%; height:100%; object-fit:cover; }
.ai-body{ display:flex; flex-direction:column; flex:1; padding:16px 6px 0; }
.ai-date{ font-size:13px; color:var(--muted); }
.ai-h{ margin:6px 0 0; color:var(--fg); font-family:var(--disp); font-weight:600; font-size:21px; line-height:1.25; letter-spacing:-.015em; text-wrap:balance; }
.ai-h a{ color:inherit; text-decoration:none; outline:none; }
.ai-h a::after{ content:""; position:absolute; inset:0; border-radius:16px; z-index:0; }
.ai-h a:focus-visible::after{ outline:2px solid #0040ff; outline-offset:2px; }
.ai-ex{ margin:8px 0 0; font-size:15px; line-height:1.55; color:var(--body); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ai-actions{ position:relative; z-index:1; display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:18px; }
.ai-btn, .ai-icon{ display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px; border-radius:10px; border:1px solid var(--input); background:#fff; color:var(--fg); font-size:14px; font-weight:500; text-decoration:none; box-shadow:0 1px 2px rgba(0,0,0,.05); transition:background .15s; }
.ai-btn{ padding:0 14px; } .ai-icon{ width:36px; }
.ai-btn:hover, .ai-icon:hover{ background:#f5f5f5; }
.ai-btn svg{ width:15px; height:15px; opacity:.6; } .ai-icon svg{ width:16px; height:16px; }
.ai-empty{ text-align:center; color:var(--muted); font-size:15px; margin:24px 0 0; }
@media (max-width:1000px){ .ai-grid{ width:100%; } }
@media (max-width:720px){
  .ai-shell{ padding:0 18px; }
  .ai-head{ padding:40px 0 28px; }
  .ai-sub{ font-size:16px; }
  .ai-bar{ flex-direction:column; align-items:stretch; }
  .ai-search{ width:100%; }
  .ai-grid{ grid-template-columns:1fr; gap:20px; }
  .ai-list{ padding:32px 0 64px; }
}
.ai-card[hidden], .ai-empty[hidden]{ display:none; }