/* Quiet editorial polish — preserves the original article layout. */
:root { --jh-lime: #c2ff00; --jh-ink: #101110; --jh-paper: #f4f4f1; }
html { scroll-behavior: smooth; }
body { background: var(--jh-paper); }
.nav { position: sticky; top: 0; z-index: 20; box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.nav::after { content: ""; position: absolute; left: 0; bottom: -1px; width: var(--reading-progress, 0%); height: 2px; background: var(--jh-lime); transition: width .12s linear; }
.nav-links a { transition: color .2s ease, transform .2s ease; }
.nav-links a:hover { transform: translateY(-1px); }
.article-hero { position: relative; overflow: hidden; background: linear-gradient(120deg, #101110 0%, #171a16 100%); }
.article-hero::after { content: ""; position: absolute; width: 300px; height: 300px; right: -110px; top: -150px; border: 1px solid rgba(194,255,0,.18); border-radius: 50%; pointer-events: none; animation: gentle-orbit 16s linear infinite; }
.article-hero .wrap, .article-shell { animation: soft-rise .7s ease both; }
.kicker { display: inline-flex; align-items: center; gap: 9px; }
.kicker::before { content: ""; width: 24px; height: 1px; background: var(--jh-lime); }
.article-title { text-wrap: balance; }
.article-image { transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .6s ease; }
.article-image:hover { transform: scale(1.012); filter: saturate(1.04) contrast(1.02); }
.article-shell:has(> .article-image) { position:relative; }
.article-shell:has(> .article-image)::before { content:""; position:absolute; z-index:2; top:76px; right:46px; width:142px; height:40px; background:transparent url('/wp-content/uploads/JustHRlogo-June2026.webp') center/contain no-repeat; mix-blend-mode:screen; pointer-events:none; }
.article-shell:has(> .article-image) .article-image { position:relative; z-index:1; }
.ai-article-visual { position:relative; overflow:hidden; border-radius:8px; margin-bottom:44px; background:#101010; }
.ai-article-visual .article-image { display:block; margin-bottom:0; }
.ai-article-logo { position:absolute; top:18px; right:18px; width:142px; height:auto; mix-blend-mode:screen; }
@media(max-width:700px){.ai-article-logo{top:12px;right:12px;width:108px}}
.article-copy h2 { position: relative; padding-left: 18px; }
.article-copy h2::before { content: ""; position: absolute; left: 0; top: .15em; bottom: .15em; width: 3px; background: var(--jh-lime); }
.article-copy p, .article-copy li { animation: content-in .65s ease both; }
.article-copy h2:nth-of-type(2), .article-copy h2:nth-of-type(2) + p { animation-delay: .08s; }
.article-cta { border: 1px solid rgba(194,255,0,.18); transition: transform .25s ease, border-color .25s ease; }
.article-cta:hover { transform: translateY(-3px); border-color: rgba(194,255,0,.5); }
.article-cta a { transition: transform .2s ease, background .2s ease; }
.article-cta a:hover { transform: translateX(4px); background: #d7ff45; }
.section-indicator { position: fixed; z-index: 18; left: 18px; top: 50%; display: flex; align-items: center; gap: 10px; width: 210px; padding: 11px 13px; border: 1px solid rgba(16,17,16,.12); border-radius: 999px; background: rgba(255,255,255,.88); box-shadow: 0 8px 28px rgba(0,0,0,.08); color: var(--jh-ink); backdrop-filter: blur(10px); transform: translateY(-50%); transition: width .3s ease, box-shadow .3s ease, transform .3s ease; }
.section-indicator:hover { width: 240px; box-shadow: 0 12px 34px rgba(0,0,0,.12); transform: translateY(-50%) translateX(4px); }
.section-indicator span { flex: 0 0 auto; color: #8a8e87; font: 700 9px/1 Manrope, sans-serif; letter-spacing: .11em; text-transform: uppercase; }
.section-indicator strong { overflow: hidden; flex: 1; white-space: nowrap; text-overflow: ellipsis; font: 600 11px/1.2 Manrope, sans-serif; }
.section-indicator i { flex: 0 0 auto; color: #777d75; font: normal 17px/1 Georgia, serif; }
.section-indicator.is-changing strong { animation: indicator-swap .32s ease both; }
@keyframes indicator-swap { 0% { opacity: .2; transform: translateX(7px); } 100% { opacity: 1; transform: none; } }
@keyframes soft-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes content-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gentle-orbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }
@media (max-width: 900px) { .section-indicator { left: 10px; width: 180px; } }
@media (max-width: 620px) { .section-indicator { display: none; } }