/* /blog — the page's own styles (ported byte-faithful from the 02.10 etalon's
   page-blog.html <style>, briefs/pages/32-blog.md §4; roadmap YATFA-10211 slice
   10, YATFA-11119). The kit (y.css / ui.css) carries the frame; this file only
   the page's own classes.

   Three deliberate departures from the etalon source, all named in the ticket:
     1. the filter buttons are LINKS, not <button> (progressive enhancement —
        the row navigates to the category pages with JS off), so the `.bl-f
        button` rule styles `.bl-f a` with an added text-decoration:none;
     2. `.post[hidden]{display:none}` — the page script hides/shows the
        server-rendered cards, and `.post`'s own `display:flex` would
        otherwise beat the `hidden` attribute's UA rule;
     3. the real-cover `<img>` inside `.cov` (the etalon only ever drew SVG),
        object-fit to the same 16/9 box; and `prefers-reduced-motion` turns
        the code block's per-line transition off, so reduced motion reveals
        every line fully at once. */

  .feat{max-width:1300px;margin:56px auto 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border:1px solid var(--line);border-radius:24px;overflow:hidden;text-align:left}
  .feat .code3{background:#0c0d10;padding:26px;font:500 13.5px/1.8 ui-monospace,"SF Mono",monospace;color:#a9b1bd;position:relative}
  .feat .code3 .c{color:#5c6370}.feat .code3 .k{color:#c792ea}.feat .code3 .g{color:#7fd8a8}.feat .code3 .r{color:#f08a8a}
  .feat .code3 .ln3{display:block;opacity:0;transform:translateX(-6px);transition:all .4s}
  .feat .code3 .ln3.in{opacity:1;transform:none}
  .feat .tx{padding:30px;background:linear-gradient(180deg,#131419,#0f1013);display:flex;flex-direction:column;gap:12px}
  .feat .tx .k{font-size:13px;color:var(--ink3)}
  .feat .tx .k b{color:var(--acc2);font-weight:600}
  .feat .tx h3{font:500 30px/1.2 "Plus Jakarta Sans";letter-spacing:-.02em}
  .feat .tx h3 a{color:inherit;text-decoration:none}
  .feat .tx h3 a:hover{color:var(--ink2)}
  .feat .tx p{font-size:15.5px;line-height:1.6;color:var(--ink2)}
  .feat .tx a{margin-top:auto;font-size:15px;font-weight:600;color:var(--acc2);text-decoration:none}
  .bl-top{max-width:1300px;margin:40px auto 0;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
  .bl-f{display:flex;gap:6px;flex-wrap:wrap}
  .bl-f a{all:unset;cursor:pointer;font-size:14px;font-weight:600;color:var(--ink2);padding:10px 16px;border-radius:12px;border:1px solid var(--line2);transition:all .2s}
  .bl-f a:hover{color:var(--ink);border-color:rgba(255,255,255,.3)}
  .bl-f a.on{background:#fff;color:#0a0b0d;border-color:#fff}
  .bl-s{display:flex;gap:10px;align-items:center;border:1px solid var(--line2);border-radius:12px;padding:9px 14px;min-width:280px}
  .bl-s svg{width:16px;height:16px;color:var(--ink3)}
  .bl-s input{all:unset;flex:1;font-size:14px;color:var(--ink)}
  .posts{max-width:1300px;margin:20px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:left}
  .post{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:linear-gradient(180deg,#131419,#0f1013);display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .3s var(--ease),border-color .3s;animation:uIn .35s var(--ease) both}
  .post:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.22)}
  .post[hidden]{display:none}
  .post .cov{aspect-ratio:16/9;position:relative;overflow:hidden}
  .post .cov svg{width:100%;height:100%;display:block;transition:transform .6s var(--ease)}
  .post .cov img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .6s var(--ease)}
  .post:hover .cov svg,.post:hover .cov img{transform:scale(1.05)}
  .post .bd2{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
  .post .k{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--ink3)}
  .post .k b{font-weight:600}
  .post h4{font-size:18px;font-weight:600;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
  .post p{font-size:14px;line-height:1.55;color:var(--ink2)}
  .post .go{margin-top:auto;font-size:13.5px;font-weight:600;color:var(--acc2)}
  .none2{grid-column:1/-1;text-align:center;padding:40px;color:var(--ink3);font-size:15px}
  .none2 b{color:var(--ink2);font-weight:600}
  .none2[hidden]{display:none}
  @media(max-width:1060px){.feat{grid-template-columns:1fr}.posts{grid-template-columns:1fr}}
  @media(prefers-reduced-motion:reduce){
    .feat .code3 .ln3{transition:none}
    .post{animation:none}
    .post:hover{transform:none}
    .post .cov svg,.post .cov img,.post:hover .cov svg,.post:hover .cov img{transition:none;transform:none}
  }