/* ============================================================
   articles.css — styles unique to articles.html
   Shared chrome (orbs, noise, brand, footer, language toggle,
   card glow) lives in base.css, which loads first.
   ============================================================ */

.page-wrap { position:relative;z-index:5;max-width:900px;margin:0 auto;padding:max(30px,5vh) 24px }

.top-bar { display:flex;align-items:center;justify-content:space-between;margin-bottom:max(40px,6vh) }

.back-link { display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.6);text-decoration:none;font-size:14px;letter-spacing:1px;transition:color .3s }

.back-link .icon { font-size:12px;transition:transform .3s }

.back-link:hover .icon { transform:translateX(-3px) }

.brand { font-size:clamp(16px,2vw,20px);font-weight:700;letter-spacing:3px;text-transform:uppercase;background:linear-gradient(135deg,#fff,#a0a0b0);-webkit-background-clip:text;-webkit-text-fill-color:transparent }

.page-title { font-size:clamp(36px,5vw,56px);font-weight:900;line-height:1.1;margin-bottom:12px;background:linear-gradient(180deg,#fff,#c0c0c8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:fade-up .7s .1s both ease-out }

.page-sub { font-size:clamp(14px,1.4vw,16px);font-weight:300;color:rgba(255,255,255,.5);margin-bottom:max(40px,5vh);animation:fade-up .7s .2s both ease-out }

.posts-list { display:flex;flex-direction:column;gap:22px }

.post-card {
display:grid;grid-template-columns:220px 1fr;gap:26px;align-items:start;
background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
border-radius:20px;padding:20px;text-decoration:none;color:inherit;
transition:all .4s cubic-bezier(.25,.46,.45,.94)
    
}

.post-card:hover { background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,.35) }

.pc-thumb { border-radius:14px;overflow:hidden;aspect-ratio:16/10;background:rgba(255,255,255,.04) }

.pc-thumb img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s cubic-bezier(.25,.46,.45,.94) }

.post-card:hover .pc-thumb img { transform:scale(1.06) }

.pc-body { min-width:0;padding:4px 4px 4px 0 }

.pc-meta { display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-bottom:11px;font-size:12px;color:rgba(255,255,255,.35) }

.pc-tag { font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#9a42f1 }

.pc-dot { width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.25) }

.pc-read { display:inline-flex;align-items:center;gap:5px }

.pc-title { font-size:clamp(19px,2.2vw,23px);font-weight:700;line-height:1.3;margin-bottom:9px }

.pc-lead { font-size:14.5px;font-weight:300;line-height:1.75;color:rgba(255,255,255,.5) }

.pc-cta { display:inline-flex;align-items:center;gap:8px;margin-top:15px;font-size:13px;font-weight:600;letter-spacing:.5px;color:#9ad48a }

.pc-cta .icon { font-size:11px;transition:transform .3s }

.post-card:hover .pc-cta .icon { transform:translateX(4px) }

@keyframes fade-up { from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)} }

@media(max-width:680px) {
.post-card{grid-template-columns:1fr;gap:16px;padding:16px}
.pc-thumb{aspect-ratio:16/9}
.pc-body{padding:0 4px 4px}
    
}

@media(max-width:600px) { .social-footer{padding:20px 16px}.footer-credit{font-size:11px} }