/* Page styles for articles. Every selector is scoped with :where(.pg-articles) (class set on <body>): isolated to this page, zero added specificity. */
:where(.pg-articles) .fbar{position:sticky;top:76px;z-index:40;background:rgba(255,255,255,.93);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);padding:14px 0}
:where(.pg-articles) .fbar .row{display:flex;gap:14px;align-items:center}
:where(.pg-articles) .search{position:relative;flex:0 0 380px;display:block}
:where(.pg-articles) .search.big input{height:54px;border-radius:16px;font-size:16px;padding-left:50px}
:where(.pg-articles) .search.big svg{left:17px;margin-top:-9px}
:where(.pg-articles) .search input{width:100%;height:46px;border-radius:14px;border:1.5px solid var(--line);background:#fff;padding:0 46px 0 44px;font:500 15px/1 'Manrope',system-ui,sans-serif;color:var(--ink);transition:border-color .2s,box-shadow .2s}
:where(.pg-articles) .search input::placeholder{color:var(--mute)}
:where(.pg-articles) .search input:focus{outline:0;border-color:var(--azure);box-shadow:0 0 0 4px rgba(47,125,246,.14)}
:where(.pg-articles) .search svg{position:absolute;left:15px;top:50%;margin-top:-9px;color:var(--mute);pointer-events:none}
:where(.pg-articles) .search kbd{position:absolute;right:12px;top:50%;transform:translateY(-50%);font:700 12px/1 'Manrope',system-ui,sans-serif;border:1px solid var(--line);border-radius:6px;padding:4px 7px;color:var(--mute)}
:where(.pg-articles) .fbar .chips{flex:1}
:where(.pg-articles) .chip em{font-style:normal;font-weight:600;opacity:.85}
:where(.pg-articles) .chip.on em{opacity:.7}
:where(.pg-articles) .tools{display:flex;gap:10px;align-items:center;flex:none}
:where(.pg-articles) .tools .seg button{height:36px;padding:0 13px;font-size:13.5px}
:where(.pg-articles) .tools .seg svg{display:block}
:where(.pg-articles) .feat{display:grid;grid-template-columns:1.12fr .88fr;gap:64px;align-items:center;padding:56px 0 30px}
:where(.pg-articles) .feat .im{position:relative;border-radius:32px;overflow:hidden;aspect-ratio:4/3;box-shadow:var(--sh);background:var(--mist)}
:where(.pg-articles) .feat .im img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
:where(.pg-articles) .feat:hover .im img{transform:scale(1.045)}
:where(.pg-articles) .feat .im .tag{position:absolute;left:18px;top:18px}
:where(.pg-articles) .feat .k{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--azure-d);display:flex;align-items:center;gap:10px}
:where(.pg-articles) .feat h2{font-size:clamp(30px,3.3vw,48px);margin:16px 0 18px;line-height:1.08}
:where(.pg-articles) .feat p{font-size:18px;color:var(--ink2);max-width:30em;margin-bottom:24px}
:where(.pg-articles) .feat .mt{margin-bottom:28px}
:where(.pg-articles) .arow .th::before{content:"";position:absolute;inset:0;z-index:1;background:var(--c);mix-blend-mode:color;opacity:.55;transition:opacity .6s var(--ease);pointer-events:none}
:where(.pg-articles) .arow:hover .th::before{opacity:0}
:where(.pg-articles) .arow:hover .go{background:var(--red);border-color:var(--red);color:#fff;transform:translateX(3px)}
:where(.pg-articles) .alist{display:grid}
:where(.pg-articles) .arow{display:grid;grid-template-columns:148px minmax(0,1fr) 190px 36px;gap:26px;align-items:center;padding:18px 16px;margin:0 -16px;border-bottom:1px solid var(--line2);border-radius:18px;transition:background .25s;color:inherit}
:where(.pg-articles) .arow:hover{background:var(--mist)}
:where(.pg-articles) .arow .th{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:3/2}
:where(.pg-articles) .arow .th img{width:100%;height:100%;object-fit:cover}
:where(.pg-articles) .arow .tag{box-shadow:none;background:transparent;padding:0;height:auto;font-size:12.5px;letter-spacing:.02em;margin-bottom:6px;color:var(--ink2)}
:where(.pg-articles) .arow h3{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
:where(.pg-articles) .arow p{font-size:14.5px;color:var(--ink2);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(.pg-articles) .arow .mt{flex-direction:column;align-items:flex-start;gap:2px}
:where(.pg-articles) .arow .mt .dot{display:none}
:where(.pg-articles) .noart{text-align:center;padding:80px 0 60px;color:var(--ink2)}
:where(.pg-articles) .noart b{display:block;font-size:24px;font-weight:700;color:var(--ink);margin-bottom:6px}
:where(.pg-articles) .noart button{margin-top:18px}
:where(.pg-articles) .endnote{padding:18px 0 80px;color:var(--mute);font-size:13.5px;text-align:center}
@media(max-width:1080px){
  :where(.pg-articles) .feat{grid-template-columns:1fr;gap:28px}
  :where(.pg-articles) .page-h .row{flex-wrap:wrap}
  :where(.pg-articles) .search{flex:1 1 100%}
  :where(.pg-articles) .arow{grid-template-columns:120px minmax(0,1fr) 36px}
  :where(.pg-articles) .arow .mt{display:none}
}
@media(max-width:720px){
  :where(.pg-articles) .arow{grid-template-columns:92px minmax(0,1fr)}
  :where(.pg-articles) .arow .go{display:none}
  :where(.pg-articles) .arow p{display:none}
  :where(.pg-articles) .fbar{top:76px}
}

/* list view: the same cards, laid out as rows */
:where(.pg-articles) .alist{display:grid;gap:0}
:where(.pg-articles) .alist .acard{display:grid;grid-template-columns:200px minmax(0,1fr);gap:26px;align-items:center;padding:20px 0;border-top:1px solid var(--line2)}
:where(.pg-articles) .alist .acard:first-child{border-top:0}
:where(.pg-articles) .alist .acard .im{aspect-ratio:3/2;border-radius:16px}
:where(.pg-articles) .alist .acard .bd h3{font-size:20px;margin:0 0 6px}
:where(.pg-articles) .alist .acard .bd p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 10px}
@media (max-width:640px){:where(.pg-articles) .alist .acard{grid-template-columns:104px minmax(0,1fr);gap:14px}:where(.pg-articles) .alist .acard .bd p{display:none}}