/* Article list page, light kit.
   Markup: body > h2, then a > b (title) + br + small (meta), then h3 and plain a rows.
   Fonts resolve relative to this file (assets/fonts). If inlined into site/index.html, change ../fonts/ to fonts/. */

@font-face{font-family:"Instrument Sans";src:url("../fonts/InstrumentSans.ttf") format("truetype");font-weight:400 700;font-stretch:75% 100%;font-display:swap}

:root{--paper:#F5F8FA;--card:#FFFFFF;--ink:#11181E;--ink-2:#49545E;--ink-3:#66717B;--line:#DEE4E9;--line-2:#CCD4DA;--wire:#9DA6AE;
  --accent:#3F6BBF;--accent-text:color-mix(in oklab,var(--accent) 88%,var(--ink))}

*,*::before,*::after{box-sizing:border-box}
body{max-width:768px;margin:0 auto;padding:72px 24px 120px;background:var(--card);color:var(--ink);
  font:400 16px/24px "Instrument Sans",system-ui,sans-serif;font-synthesis:none;-webkit-font-smoothing:antialiased}

h2{margin:0 0 32px;font-size:32px;line-height:40px;font-weight:600;letter-spacing:-.024em}
h3{margin:56px 0 8px;font-size:20px;line-height:28px;font-weight:600;letter-spacing:-.01em}

a{position:relative;display:block;padding:16px 40px 16px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:500}
h2+a,h3+a{border-top:1px solid var(--line)}
a::after{content:"";position:absolute;right:6px;top:50%;width:8px;height:8px;margin-top:-4px;
  border-top:1.5px solid var(--wire);border-right:1.5px solid var(--wire);transform:rotate(45deg);transition:transform .15s,border-color .15s}
a:hover b,a:hover{color:var(--accent-text)}
a:hover::after{border-color:var(--accent);transform:translateX(3px) rotate(45deg)}
a b{display:block;font-size:18px;line-height:26px;font-weight:600;letter-spacing:-.01em;color:inherit;text-wrap:balance}
a br{display:none}
a small{display:block;margin-top:4px;font-size:14px;line-height:20px;font-weight:400;color:var(--ink-3);font-variant-numeric:tabular-nums;word-spacing:.12em}