@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root { --ink:#171916; --paper:#f4f1e8; --lime:#d5ff35; --muted:#6c6d66; --line:#d8d5cb; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,Arial,sans-serif; } header, main { width:min(1160px, calc(100% - 40px)); margin:auto; } header { min-height:130px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--ink); } .brand { color:var(--ink); font-size:34px; font-weight:800; letter-spacing:-2px; text-decoration:none; } .brand span { background:var(--lime); padding:0 3px; } header p, .intro>p { max-width:260px; margin:0; font-size:13px; line-height:1.5; color:var(--muted); } nav { padding:26px 0 14px; display:flex; gap:8px; flex-wrap:wrap; } .chip { border:1px solid var(--ink); color:var(--ink); border-radius:99px; padding:7px 13px; text-decoration:none; font:11px 'DM Mono',monospace; text-transform:uppercase; } .chip.active, .chip:hover { background:var(--ink); color:var(--paper); } .intro { display:flex; justify-content:space-between; padding:38px 0 45px; border-bottom:1px solid var(--line); } .eyebrow, .meta { font:11px 'DM Mono',monospace; letter-spacing:.06em; } .eyebrow { margin:0 0 12px; } h1 { margin:0; font-size:clamp(42px,7vw,84px); line-height:.92; letter-spacing:-.07em; } .feed { display:grid; grid-template-columns:repeat(3,1fr); } .card { min-height:270px; padding:26px 24px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; } .card:nth-child(3n) { border-right:0; } .meta { display:flex; justify-content:space-between; color:var(--muted); text-transform:uppercase; } h2 { font-size:20px; line-height:1.18; letter-spacing:-.04em; margin:28px 0 12px; } h2 a { color:inherit; text-decoration:none; } h2 a:hover { text-decoration:underline; text-decoration-color:var(--lime); text-decoration-thickness:3px; } .card p { font-size:13px; line-height:1.55; color:var(--muted); margin:0; } footer { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:22px; color:var(--muted); font:11px 'DM Mono',monospace; } .actions { display:flex; gap:5px; } .actions form { margin:0; } button { border:0; background:transparent; padding:5px; cursor:pointer; color:var(--ink); font:12px 'DM Mono',monospace; } button:hover { background:var(--lime); } .empty { padding:56px 0; border-bottom:1px solid var(--line); } .empty h2 { margin:0 0 8px; font-size:26px; } .empty p { color:var(--muted); max-width:430px; } @media(max-width:760px){ header { min-height:100px; } header p { display:none; } .intro { display:block; padding:30px 0; } .intro>p { margin-top:26px; } .feed { grid-template-columns:1fr; } .card, .card:nth-child(3n) { border-right:0; } }