:root{--ink:#111;--paper:#fffaf4;--white:#fff;--orange:#ff7a1a;--muted:#6d675f;--line:rgba(17,17,17,.12)}
.article-page{padding-top:72px}
.article-hero{padding:28px 0 20px}
.article-hero-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:18px;align-items:center}
.article-intro h1{font-size:clamp(1.8rem,4vw,3rem);line-height:1.03;letter-spacing:-.04em;margin:8px 0 12px;font-weight:860}
.article-lead{font-size:.95rem;line-height:1.6;color:var(--muted);max-width:640px;margin:0 0 18px}
.article-meta-line{padding:12px 14px;background:#fff;border:1px solid var(--line)}
.article-meta-line span{display:block;font-size:.68rem;font-weight:780;text-transform:uppercase;letter-spacing:.08em;color:var(--orange);margin-bottom:6px}
.article-meta-line p{margin:0;font-size:.78rem;line-height:1.5;color:var(--muted)}
.article-visual{position:relative;min-height:360px;overflow:hidden;border-radius:4px;background:#111}
.article-visual img{width:100%;height:100%;object-fit:cover;display:block}
.article-visual::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 24%,transparent 72%,rgba(0,0,0,.16)),radial-gradient(circle at 0 0,rgba(255,255,255,.18),transparent 18%),radial-gradient(circle at 100% 100%,rgba(0,0,0,.18),transparent 22%)}
.article-visual::after{content:"";position:absolute;top:12px;left:12px;width:52px;height:14px;z-index:4;background:repeating-linear-gradient(90deg,rgba(255,255,255,.78) 0 4px,transparent 4px 8px);opacity:.42}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.article-content{background:#fff;border:1px solid var(--line);padding:22px}
.article-content h2{font-size:1.32rem;line-height:1.08;letter-spacing:-.03em;margin:0 0 10px}
.article-content h3{font-size:.96rem;line-height:1.2;margin:18px 0 8px}
.article-content p,.article-content li{font-size:.84rem;line-height:1.65;color:var(--muted)}
.article-content ul{padding-left:18px;margin:0 0 8px}
.article-cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.article-side{display:grid;gap:12px}
.side-card{background:#fff;border:1px solid var(--line);padding:18px}
.side-card.soft{background:#fff3e8}
.side-card strong{display:block;font-size:.92rem;margin-bottom:10px}
.side-card p,.side-card li{font-size:.76rem;line-height:1.55;color:var(--muted)}
.side-card ul{padding-left:17px;margin:0}
.bottom-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.bottom-link{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px;background:#111;color:#fff}
.bottom-link:last-child{background:#ff7a1a;color:#111}
@media (max-width:900px){.article-hero-grid,.article-layout,.bottom-grid{grid-template-columns:1fr}.article-visual{min-height:280px}}
@media (max-width:560px){.article-page{padding-top:68px}.article-content,.side-card{padding:16px}.article-intro h1{font-size:1.65rem}}


/* === V6.4 hero preview polish === */
.article-visual{border-radius:0 !important;min-height:380px}
.article-visual img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.article-visual{min-height:280px}}


/* === V6.5 image treatment: square, vignette + pixel accent === */
.service-visual,.port-card,.mag-thumb,.article-visual,.portfolio-proof-grid img,.work{border-radius:0 !important;box-shadow:none !important;overflow:hidden}
.service-visual img,.port-card img,.mag-thumb img,.article-visual img,.portfolio-proof-grid img,.work img{display:block;width:100%;height:100%;object-fit:cover}
.service-visual::before,.mag-thumb::before,.article-visual::before,.port-card::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at center,transparent 54%,rgba(0,0,0,.16) 100%)}
.service-visual::after,.mag-thumb::after,.article-visual::after,.port-card::after{content:"";position:absolute;z-index:3;right:12px;bottom:12px;width:58px;height:12px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.82) 0 4px,transparent 4px 8px);opacity:.46;pointer-events:none}


/* === V6.7 article hero uses its own editorial preview image === */
.article-visual{border-radius:0!important;overflow:hidden!important;background:#f4f1ec!important}
.article-visual img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;filter:none!important}