/* Harika News Pro 4 — visual system rebuilt from scratch to match the public demo's editorial rhythm. */
:root{
  --hnp-accent:#654cf6;
  --hnp-accent-rgb:101,76,246;
  --hnp-danger:#ef4056;
  --hnp-ink:#17171f;
  --hnp-card-shadow:0 16px 45px rgba(20,20,32,.065);
  --hnp-soft-shadow:0 8px 25px rgba(20,20,32,.055);
  --hnp-hairline:1px solid var(--hnp-border);
}
html{background:var(--hnp-bg)}
body{overflow-x:hidden;background:var(--hnp-bg);letter-spacing:0}
body:not([data-theme=dark]){color-scheme:light}
::selection{background:rgba(var(--hnp-accent-rgb),.18);color:var(--hnp-text)}
a,button{transition:color .2s ease,background-color .2s ease,border-color .2s ease,opacity .2s ease,transform .2s ease,box-shadow .2s ease}
a:hover{color:var(--hnp-accent)}
.hnp-container{width:min(calc(100% - 36px),var(--hnp-container));max-width:var(--hnp-container)}
.home-main{padding-bottom:72px}
.home-block{margin-top:var(--hnp-section-gap)}
.home-block+.home-block{margin-top:var(--hnp-section-gap)}
.category-badge{font-size:10px;line-height:1.4;font-weight:800;gap:7px}
.category-badge:before{width:6px;height:6px}
.post-meta{font-size:var(--hnp-meta-size);gap:12px;line-height:1.6}
.post-meta .hnp-icon{width:14px;height:14px;opacity:.65}

/* Header: compact top utility bar, open brand row and strong navigation baseline. */
.site-header{position:relative;z-index:1000;background:var(--hnp-surface)}
.topbar{background:#17171f;color:#c7c7d0;border:0;font-size:11px}
.topbar-inner{min-height:34px}
.topbar-primary,.topbar-links,.topbar-menu{gap:18px}
.topbar-date{color:#b8b8c2}
.topbar-breaking{color:#fff}
.topbar-breaking strong{padding:2px 8px;border-radius:3px;background:var(--hnp-danger);color:#fff;font-size:9px}
.topbar-breaking i{display:none}
.topbar-links a,.topbar-menu a{color:#b8b8c2}
.topbar-links a:hover,.topbar-menu a:hover{color:#fff}
.brandbar{border-bottom:var(--hnp-hairline)}
.brandbar-inner{min-height:100%;gap:42px}
.hnp-logo img{width:auto;max-width:190px;max-height:64px}
.brand-mark{gap:11px}
.brand-mark b{width:48px;height:48px;border-radius:9px;background:var(--hnp-accent);box-shadow:none;font-size:24px}
.brand-mark span{font-size:24px;font-weight:900;letter-spacing:-.5px}
.brand-mark small{font-size:9px;letter-spacing:0;color:var(--hnp-muted)}
.header-ad-wrap{width:min(100%,730px);max-width:730px}
.header-ad-placeholder{height:74px;min-width:0;border-radius:7px;background:#f3f3f6;color:var(--hnp-text);border:var(--hnp-hairline);box-shadow:none}
.header-ad-placeholder small{color:var(--hnp-muted)}
.navbar{border-top:0;border-bottom:var(--hnp-hairline);box-shadow:none}
.nav-inner{gap:10px}
.primary-nav{min-width:0}
.primary-menu{gap:0}
.primary-menu>li>a{position:relative;padding-inline:14px;font-weight:700;color:#2b2b34;white-space:nowrap}
.primary-menu>li>a:after{content:"";position:absolute;right:14px;left:14px;bottom:-1px;height:2px;background:var(--hnp-accent);transform:scaleX(0);transform-origin:center;transition:transform .2s}
.primary-menu>li:hover>a:after,.primary-menu>.current-menu-item>a:after,.primary-menu>li:focus-within>a:after{transform:scaleX(1)}
.primary-menu>li>a:hover,.primary-menu>.current-menu-item>a{color:var(--hnp-accent)}
.primary-menu .sub-menu{padding:9px 8px;border-radius:0 0 8px 8px;border-top:2px solid var(--hnp-accent);box-shadow:0 18px 45px rgba(20,20,30,.13)}
.primary-menu .sub-menu a{padding:8px 10px;border-radius:5px;font-size:12px}
.topics-toggle{height:34px;padding:0 12px;border:1px solid rgba(var(--hnp-accent-rgb),.14);border-radius:5px;background:rgba(var(--hnp-accent-rgb),.07);color:var(--hnp-accent);font-size:11px}
.topics-toggle b{font-size:17px}
.nav-actions{gap:6px}
.icon-button,.account-button{border:0;border-radius:6px;background:transparent}
.icon-button{width:38px;height:38px}
.icon-button:hover,.account-button:hover{background:var(--hnp-surface-2);box-shadow:none}
.account-button{padding-inline:8px;font-size:11px}
.site-header.is-scrolled .navbar{box-shadow:0 12px 35px rgba(18,18,28,.08)}
.site-header.is-scrolled .nav-inner{height:56px}

/* Mega menus */
.hnp-menu-mega{padding:24px;border-radius:0 0 10px 10px;border-top:2px solid var(--hnp-accent);box-shadow:0 22px 60px rgba(18,18,28,.14)}
.hnp-mega-posts{gap:18px}
.hnp-mega-story img{height:132px;border-radius:7px}
.hnp-mega-story h4{margin:9px 0 3px;font-size:13px;line-height:1.65}
.hnp-mega-categories strong{font-size:13px}
.hnp-mega-categories a{font-size:12px;border-bottom:1px dashed var(--hnp-border)}
.topics-mega{border-top:2px solid var(--hnp-accent)}
.topics-mega-grid{padding-block:28px}
.topics-mega-posts img{border-radius:7px}

/* Intro */
.page-intro{display:flex;align-items:end;justify-content:space-between;padding-top:42px;padding-bottom:26px;border-bottom:var(--hnp-hairline)}
.page-intro>div>span{display:block;margin-bottom:5px;color:var(--hnp-accent);font-size:10px;font-weight:800}
.page-intro h1{margin:0;font-size:34px;line-height:1.35;letter-spacing:-.8px}
.page-intro>b{display:flex;align-items:center;gap:8px;color:var(--hnp-muted);font-size:10px}
.page-intro>b i{width:8px;height:8px;border-radius:50%;background:#ff334f;box-shadow:0 0 0 5px rgba(255,51,79,.1)}

/* Hero — same dense 1+3 editorial composition used by the demo. */
.home-hero{padding-top:28px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.72fr) minmax(260px,.86fr);grid-template-rows:repeat(3,minmax(0,1fr));gap:12px;height:var(--hnp-hero-height)}
.hero-card{position:relative;overflow:hidden;min-height:0;border-radius:var(--hnp-radius);background:#15151d;color:#fff;box-shadow:none}
.hero-card.hero-1{grid-row:1/4}
.hero-card.hero-2{grid-column:2;grid-row:1}
.hero-card.hero-3{grid-column:2;grid-row:2}
.hero-card.hero-4{grid-column:2;grid-row:3}
.hero-card:nth-child(n+5){display:none}
.hero-image,.hero-image img,.hero-image span{position:absolute;inset:0;width:100%;height:100%}
.hero-image img{object-fit:cover;transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .4s}
.hero-image span{background:linear-gradient(180deg,rgba(8,8,14,.02) 25%,rgba(8,8,14,.88) 100%)}
.hero-card:hover .hero-image img{transform:scale(1.035)}
.hero-copy{position:absolute;right:0;bottom:0;left:0;z-index:2;padding:18px 19px;color:#fff}
.hero-1 .hero-copy{padding:32px 34px}
.hero-copy .category-badge{color:#fff}
.hero-copy h2{margin:7px 0 6px;font-size:17px;line-height:1.65}
.hero-1 .hero-copy h2{max-width:720px;margin-top:10px;font-size:30px;line-height:1.55}
.hero-copy p{max-width:700px;margin:8px 0;color:rgba(255,255,255,.76);font-size:12px}
.hero-copy .post-meta{color:rgba(255,255,255,.7)}
.hero-slider{height:var(--hnp-hero-height);overflow:hidden;border-radius:var(--hnp-radius)}
.hero-slide-copy{right:5.5%;bottom:12%;max-width:650px}
.hero-slide-copy h2{font-size:34px}

/* Hot topics */
.topic-strip{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px;margin-top:18px;padding:0 16px;height:48px;overflow:hidden;border:var(--hnp-hairline);border-radius:7px;background:var(--hnp-surface)}
.topic-strip>strong{display:flex;align-items:center;align-self:stretch;padding-inline:14px;margin-right:-16px;background:var(--hnp-accent);color:#fff;font-size:11px;white-space:nowrap}
.topic-marquee{overflow:hidden}
.topic-marquee>div{display:flex;align-items:center;gap:24px;white-space:nowrap}
.topic-marquee a{position:relative;color:var(--hnp-muted);font-size:11px}
.topic-marquee a:before{content:"";position:absolute;right:-13px;top:50%;width:4px;height:4px;border-radius:50%;background:var(--hnp-accent);transform:translateY(-50%)}
.topic-marquee a:first-child:before{display:none}

/* Section headings */
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px;padding-bottom:12px;border-bottom:var(--hnp-hairline)}
.section-heading>div{position:relative;display:flex;align-items:center;gap:10px}
.section-heading>div:after{content:"";position:absolute;right:0;bottom:-14px;width:48px;height:2px;background:var(--hnp-accent)}
.section-heading span{order:2;padding:3px 8px;border-radius:3px;background:rgba(var(--hnp-accent-rgb),.08);color:var(--hnp-accent);font-size:9px;font-weight:800}
.section-heading h2{margin:0;font-size:23px;line-height:1.4}
.section-heading>a{display:flex;align-items:center;gap:5px;color:var(--hnp-muted);font-size:10px;font-weight:700}
.section-heading>a:hover{color:var(--hnp-accent)}
.section-heading>a .hnp-icon{width:14px}

/* State / regional news */
.feature-split{display:grid;grid-template-columns:minmax(0,1.38fr) minmax(280px,.78fr);gap:26px}
.feature-story{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(240px,.92fr);overflow:hidden;border:var(--hnp-hairline);border-radius:var(--hnp-radius);background:var(--hnp-surface);box-shadow:none}
.feature-story>a{min-height:360px;overflow:hidden}
.feature-story>a img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.feature-story:hover>a img{transform:scale(1.025)}
.feature-story>div{display:flex;flex-direction:column;justify-content:center;padding:28px}
.feature-story h3{margin:9px 0 10px;font-size:23px;line-height:1.65}
.feature-story p{margin:0 0 17px;color:var(--hnp-muted);font-size:12px}
.compact-stack{display:grid;align-content:start;gap:0;border-top:var(--hnp-hairline)}
.compact-story{display:grid;grid-template-columns:116px minmax(0,1fr);gap:14px;padding-block:14px;border-bottom:var(--hnp-hairline)}
.compact-story>a{overflow:hidden;border-radius:6px}
.compact-story img{width:116px;height:89px;object-fit:cover;transition:transform .4s}
.compact-story:hover img{transform:scale(1.04)}
.compact-story h3{margin:0 0 5px;font-size:14px;line-height:1.65}
.compact-story p{display:none}

/* Technology mosaic */
.technology-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--hnp-card-gap)}
.tech-story{overflow:hidden;border:var(--hnp-hairline);border-radius:var(--hnp-radius);background:var(--hnp-surface)}
.tech-story.tech-feature{grid-column:span 2;grid-row:span 2;display:grid;grid-template-columns:1.15fr .85fr}
.tech-image{display:block;overflow:hidden}
.tech-image img{width:100%;height:215px;object-fit:cover;transition:transform .45s}
.tech-feature .tech-image img{height:100%;min-height:430px}
.tech-story:hover img{transform:scale(1.03)}
.tech-story>div{padding:17px}
.tech-feature>div{display:flex;flex-direction:column;justify-content:center;padding:30px}
.tech-story h3{margin:7px 0 7px;font-size:16px;line-height:1.65}
.tech-feature h3{font-size:25px}
.tech-story p{margin:0 0 12px;color:var(--hnp-muted);font-size:11px}
.tech-feature p{font-size:12px}

/* Card slider */
.hnp-slider{position:relative}
.hnp-slider-viewport{overflow:hidden}
.hnp-slider-track{display:flex;will-change:transform;transition-property:transform;transition-timing-function:cubic-bezier(.22,.75,.2,1)}
.hnp-slide{flex:0 0 auto;min-width:0;padding-left:var(--hnp-card-gap)}
.card-slider{margin-left:calc(var(--hnp-card-gap) * -1)}
.post-card{overflow:hidden;border:var(--hnp-hairline);border-radius:var(--hnp-radius);background:var(--hnp-surface);box-shadow:none}
.card-image{display:block;overflow:hidden}
.card-image img{width:100%;height:185px;object-fit:cover;transition:transform .45s}
.post-card:hover .card-image img{transform:scale(1.035)}
.post-card>div{padding:15px 16px 17px}
.post-card h3{margin:7px 0 10px;font-size:15px;line-height:1.7}
.slider-controls{position:absolute;top:-63px;left:0;display:flex;gap:5px}
.slider-controls button{width:31px;height:31px;display:grid;place-items:center;padding:0;border:var(--hnp-hairline);border-radius:5px;background:var(--hnp-surface);cursor:pointer}
.slider-controls button:hover{background:var(--hnp-accent);border-color:var(--hnp-accent);color:#fff}
.slider-controls .hnp-icon{width:15px}
.slider-dots{display:flex;justify-content:center;gap:5px;padding-top:16px}
.slider-dots button{width:6px;height:6px;padding:0;border:0;border-radius:50%;background:#d5d5dc}
.slider-dots button.is-active{width:18px;border-radius:6px;background:var(--hnp-accent)}

/* Editors */
.editors-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--hnp-card-gap)}
.editors-grid article{position:relative;overflow:hidden;border:var(--hnp-hairline);border-radius:var(--hnp-radius);background:var(--hnp-surface)}
.editor-rank{position:absolute;z-index:3;top:10px;right:10px;display:grid;place-items:center;width:32px;height:32px;border-radius:5px;background:#fff;color:var(--hnp-accent);font-size:11px;font-weight:900;box-shadow:var(--hnp-soft-shadow)}
.editor-image{display:block;overflow:hidden}
.editor-image img{width:100%;height:185px;object-fit:cover;transition:transform .45s}
.editors-grid article:hover img{transform:scale(1.035)}
.editors-grid article>div{padding:15px}
.editors-grid h3{margin:7px 0 10px;font-size:15px;line-height:1.7}

/* Latest list + sidebar */
.latest-shell,.archive-shell{display:grid;grid-template-columns:minmax(0,1fr) var(--hnp-sidebar);gap:var(--hnp-sidebar-gap);align-items:start}
.latest-shell.without-sidebar{grid-template-columns:1fr}
.latest-list{display:grid;gap:0;border-top:var(--hnp-hairline)}
.list-story{display:grid;grid-template-columns:250px minmax(0,1fr);gap:0;padding-block:20px;border-bottom:var(--hnp-hairline);border-radius:0;background:transparent;box-shadow:none}
.list-image{overflow:hidden;border-radius:7px}
.list-image img{width:250px;height:180px;object-fit:cover;transition:transform .45s}
.list-story:hover .list-image img{transform:scale(1.025)}
.list-copy{padding:4px 22px 4px 0}
.list-copy h3{margin:8px 0 8px;font-size:20px;line-height:1.65}
.list-copy p{margin:0 0 13px;color:var(--hnp-muted);font-size:12px;line-height:1.9}
.pagination{display:flex;gap:6px;padding-top:26px}
.pagination .page-numbers{min-width:34px;height:34px;display:grid;place-items:center;padding-inline:9px;border:var(--hnp-hairline);border-radius:5px;background:var(--hnp-surface);font-size:11px}
.pagination .current,.pagination a:hover{background:var(--hnp-accent);border-color:var(--hnp-accent);color:#fff}
.sidebar-column{display:grid;gap:20px}
.hnp-sticky-sidebar .sidebar-column{position:sticky;top:82px}
.widget{padding:20px;border:var(--hnp-hairline);border-radius:var(--hnp-radius);background:var(--hnp-surface);box-shadow:none}
.widget-title{position:relative;margin:0 0 18px;padding-bottom:10px;border-bottom:var(--hnp-hairline);font-size:15px}
.widget-title:after{content:"";position:absolute;right:0;bottom:-1px;width:36px;height:2px;background:var(--hnp-accent)}
.widget ul{margin:0;padding:0;list-style:none}
.widget li+li{border-top:1px dashed var(--hnp-border)}
.widget li a{display:flex;justify-content:space-between;padding:8px 0;font-size:12px}
.social-widget{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.social-widget a{padding:10px;border-radius:6px;background:var(--hnp-surface-2);font-size:10px}

/* Video zone */
.video-section{margin-top:var(--hnp-section-gap);padding:58px 0 64px;background:#17171f;color:#fff}
.video-section .home-block{margin-top:0}
.video-section .section-heading{border-color:#34343d}
.video-section .section-heading h2,.video-section .section-heading>a{color:#fff}
.video-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.72fr);gap:24px}
.video-feature>a{position:relative;display:block;overflow:hidden;border-radius:8px}
.video-feature img{width:100%;height:455px;object-fit:cover}
.video-feature .play-button{position:absolute;inset:50% auto auto 50%;display:grid;place-items:center;width:68px;height:68px;border:1px solid rgba(255,255,255,.4);border-radius:50%;background:rgba(101,76,246,.86);transform:translate(-50%,-50%);backdrop-filter:blur(6px)}
.video-feature .play-button .hnp-icon{width:30px;height:30px}
.video-feature h3{margin:16px 0 5px;font-size:23px}
.video-feature p{margin:0;color:#aaaab5;font-size:12px}
.video-playlist{display:grid;align-content:start;border-top:1px solid #34343d}
.video-item{display:grid;grid-template-columns:118px minmax(0,1fr);gap:13px;padding-block:13px;border-bottom:1px solid #34343d;color:#fff}
.video-thumb{position:relative;overflow:hidden;border-radius:6px}
.video-thumb img{width:118px;height:80px;object-fit:cover}
.video-thumb i{position:absolute;inset:50% auto auto 50%;display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:rgba(0,0,0,.6);transform:translate(-50%,-50%)}
.video-thumb .hnp-icon{width:16px}
.video-item strong{display:block;font-size:12px;line-height:1.75}
.video-item small{display:inline-flex;margin-top:7px;padding:2px 6px;border-radius:3px;background:#2b2b35;color:#bdbdc7;font-size:9px}
.video-item.is-active strong,.video-item:hover strong{color:#9d8eff}

/* Bottom news and newsletter */
.bottom-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--hnp-card-gap)}
.bottom-story{overflow:hidden;border:var(--hnp-hairline);border-radius:var(--hnp-radius);background:var(--hnp-surface)}
.bottom-story>a{display:block;overflow:hidden}
.bottom-story img{width:100%;height:205px;object-fit:cover;transition:transform .45s}
.bottom-story:hover img{transform:scale(1.03)}
.bottom-story>div{padding:17px}
.bottom-story h3{margin:8px 0;font-size:16px;line-height:1.7}
.bottom-story p{margin:0 0 12px;color:var(--hnp-muted);font-size:11px}
.bottom-feature{grid-column:span 2;grid-row:span 2;display:grid;grid-template-columns:1.1fr .9fr}
.bottom-feature img{height:100%;min-height:430px}
.bottom-feature>div{display:flex;flex-direction:column;justify-content:center;padding:30px}
.bottom-feature h3{font-size:25px}
.newsletter-section{display:grid;grid-template-columns:1fr minmax(320px,.8fr);gap:40px;align-items:center;margin-top:var(--hnp-section-gap);padding:34px 38px;border-radius:var(--hnp-radius);background:linear-gradient(125deg,#5f45ec,#7f67ff);color:#fff}
.newsletter-section span{font-size:9px;font-weight:800;opacity:.8}
.newsletter-section h2{margin:5px 0 4px;font-size:25px}
.newsletter-section p{margin:0;color:rgba(255,255,255,.8);font-size:11px}
.newsletter-form{display:flex;gap:8px}
.newsletter-form input{min-width:0;flex:1;padding:12px 14px;border:0;border-radius:6px;background:#fff;color:#17171f}
.newsletter-form button{padding:10px 18px;border:0;border-radius:6px;background:#17171f;color:#fff;font-weight:800}
.newsletter-section small{display:block;margin-top:6px;color:rgba(255,255,255,.7);font-size:8px}

/* Ads */
.after-header-area,.home-ad-block{margin-top:26px}
.hnp-ad,.hnp-demo-ad{border-radius:7px!important;box-shadow:none!important}
.hnp-demo-ad{min-height:105px;background:#f4f4f7!important;color:var(--hnp-text)!important;border:var(--hnp-hairline)}
.hnp-demo-ad small{background:rgba(var(--hnp-accent-rgb),.08)!important;color:var(--hnp-accent)}
.hnp-demo-ad strong{font-size:18px}

/* Footer */
.site-footer{margin-top:0;padding-top:58px;background:#15151d;color:#d0d0d8}
.footer-grid{display:grid;grid-template-columns:1.3fr .9fr .75fr .75fr;gap:48px;padding-bottom:45px}
.footer-widget-title,.site-footer h3{margin:0 0 18px;color:#fff;font-size:15px}
.footer-about p{color:#9898a5;font-size:11px;line-height:2}
.site-footer a{color:#b3b3bd;font-size:11px}
.site-footer a:hover{color:#fff}
.footer-post{display:grid;grid-template-columns:76px 1fr;gap:11px;padding-block:9px;border-bottom:1px solid #2c2c35}
.footer-post img{width:76px;height:58px;border-radius:5px;object-fit:cover}
.footer-post strong{font-size:11px;line-height:1.7}
.footer-post small{color:#777783;font-size:8px}
.footer-links{margin:0;padding:0;list-style:none}
.footer-links li+li{border-top:1px solid #272730}
.footer-links a{display:block;padding:8px 0}
.footer-bottom{border-top:1px solid #292932;background:#121219}
.footer-bottom>div{min-height:58px;display:flex;align-items:center;justify-content:space-between;color:#777783;font-size:10px}
.back-to-top{border-radius:6px}

/* Drawer and search */
.offcanvas{z-index:1100}
.offcanvas-backdrop{background:rgba(10,10,16,.56)}
.offcanvas-panel{width:min(92vw,var(--hnp-drawer-width));padding:0;background:var(--hnp-surface);box-shadow:-18px 0 60px rgba(0,0,0,.22)}
.offcanvas-head{padding:18px 20px;border-bottom:var(--hnp-hairline)}
.offcanvas-description{padding:0 20px;color:var(--hnp-muted);font-size:11px}
.offcanvas-search{padding:0 20px}
.offcanvas-nav{padding:12px 20px}
.mobile-menu{margin:0;padding:0;list-style:none}
.mobile-menu>li{position:relative;border-bottom:var(--hnp-hairline)}
.mobile-menu a{display:block;padding:11px 0;font-size:13px;font-weight:700}
.mobile-submenu-toggle{position:absolute;top:6px;left:0;width:34px;height:34px;border:0;background:transparent}
.mobile-menu .sub-menu{max-height:0;overflow:hidden;margin:0;padding:0 12px;list-style:none;transition:max-height .3s}
.mobile-menu .sub-menu a{font-size:11px;font-weight:500;color:var(--hnp-muted)}
.offcanvas-block{padding:16px 20px;border-top:var(--hnp-hairline)}
.offcanvas-block h4{margin:0 0 11px;font-size:13px}
.offcanvas-latest a{display:grid;grid-template-columns:72px 1fr;gap:10px;padding-block:8px;border-bottom:var(--hnp-hairline)}
.offcanvas-latest img{width:72px;height:55px;border-radius:5px;object-fit:cover}
.offcanvas-latest strong{display:block;font-size:10px;line-height:1.65}
.offcanvas-latest small{font-size:8px;color:var(--hnp-muted)}
.search-overlay{z-index:1200;background:rgba(15,15,23,.97);color:#fff}
.search-box{width:min(760px,calc(100% - 40px));text-align:center}
.search-box>span{color:#9a8cff;font-size:10px;font-weight:800}
.search-box h2{font-size:36px}
.search-overlay .search-field{height:58px;border:0;border-bottom:1px solid #494953;border-radius:0;background:transparent;color:#fff;font-size:20px;text-align:center}
.search-overlay .search-submit{background:var(--hnp-accent)}
.search-suggestions{justify-content:center}

/* Internal pages */
.archive-header,.search-header{padding-top:44px;padding-bottom:24px;border-bottom:var(--hnp-hairline)}
.archive-header h1,.search-header h1{margin:0;font-size:34px}
.archive-header p,.search-header p{max-width:780px;color:var(--hnp-muted);font-size:12px}
.archive-shell{margin-top:30px}
.archive-grid{gap:var(--hnp-card-gap)}
.archive-grid .post-card{border-radius:var(--hnp-radius)}
.single-page{padding-top:38px;padding-bottom:70px}
.breadcrumbs{margin-bottom:22px;color:var(--hnp-muted);font-size:10px}
.breadcrumbs a:hover{color:var(--hnp-accent)}
.single-header{max-width:980px;margin-inline:auto;text-align:center}
.single-header h1{margin:12px auto 16px;font-size:42px;line-height:1.55;letter-spacing:-.8px}
.single-header .single-meta{justify-content:center}
.single-cover{max-width:1180px;margin:30px auto 0}
.single-cover img{width:100%;max-height:650px;border-radius:10px;object-fit:cover}
.single-content-shell{display:grid;grid-template-columns:minmax(0,1fr);margin-top:32px}
.single-content-shell.has-sidebar{grid-template-columns:minmax(0,1fr) var(--hnp-sidebar);gap:var(--hnp-sidebar-gap)}
.single-article{min-width:0}
.article-layout{display:grid;grid-template-columns:48px minmax(0,var(--hnp-content));justify-content:center;gap:22px}
.entry-content{font-size:16px;line-height:2.15}
.entry-content h2{margin-top:42px;font-size:27px}
.entry-content h3{margin-top:32px;font-size:21px}
.entry-content p{margin:0 0 20px}
.entry-content img{border-radius:8px}
.entry-content blockquote{margin:28px 0;padding:20px 24px;border-right:3px solid var(--hnp-accent);background:var(--hnp-surface-2);font-size:18px}
.share-rail{position:sticky;top:90px;align-self:start;display:grid;gap:7px}
.share-rail a,.share-rail button{width:38px;height:38px;display:grid;place-items:center;border:var(--hnp-hairline);border-radius:5px;background:var(--hnp-surface)}
.share-rail a:hover,.share-rail button:hover{background:var(--hnp-accent);border-color:var(--hnp-accent);color:#fff}
.author-box,.post-navigation,.related-posts,.comments-area{border-radius:var(--hnp-radius);box-shadow:none}
.page-shell{margin-top:38px}
.page-article{border:var(--hnp-hairline);box-shadow:none}
.contact-card,.contact-form-card{border:var(--hnp-hairline);box-shadow:none}

/* Dark adjustments */
body[data-theme=dark] .topbar{background:#0d0d12}
body[data-theme=dark] .primary-menu>li>a{color:#e7e7ec}
body[data-theme=dark] .header-ad-placeholder,body[data-theme=dark] .hnp-demo-ad{background:#22222c!important}
body[data-theme=dark] .hero-card{background:#0d0d12}
body[data-theme=dark] .editor-rank{background:#22222c;color:#b5aaff}

/* Responsive behavior */
@media(max-width:1180px){
  .primary-nav{display:none}
  .menu-toggle,.mobile-logo{display:grid}
  .desktop-logo{display:none}
  .brandbar{display:none}
  .nav-inner{height:var(--hnp-mobile-header)}
  .mobile-logo{flex:1;display:flex;align-items:center}
  .mobile-logo .brand-mark b{width:38px;height:38px;font-size:19px}
  .mobile-logo .brand-mark span{font-size:17px}
  .topics-toggle{margin-right:auto}
  .nav-actions{margin-right:0}
  .hero-grid{grid-template-columns:1.35fr .85fr;height:470px}
  .feature-story{grid-template-columns:1fr}
  .feature-story>a{min-height:280px}
  .feature-story>div{padding:22px}
  .technology-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tech-feature{grid-column:span 2}
  .editors-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .latest-shell,.archive-shell,.single-content-shell.has-sidebar{grid-template-columns:1fr}
  .sidebar-column{position:static!important;grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .hnp-container{width:min(calc(100% - 24px),var(--hnp-container))}
  .topbar-links,.header-ad-wrap,.account-button span,.topics-toggle{display:none}
  .topbar-inner{justify-content:center}
  .page-intro{padding-top:28px;padding-bottom:18px}
  .page-intro h1{font-size:29px}
  .page-intro>b{display:none}
  .home-hero{padding-top:18px}
  .hero-grid{display:flex;height:auto;overflow:auto;gap:10px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .hero-grid::-webkit-scrollbar{display:none}
  .hero-card,.hero-card.hero-1,.hero-card.hero-2,.hero-card.hero-3,.hero-card.hero-4{flex:0 0 88%;height:var(--hnp-hero-mobile-height);display:block;grid-column:auto;grid-row:auto;scroll-snap-align:center}
  .hero-1 .hero-copy{padding:22px}
  .hero-1 .hero-copy h2,.hero-copy h2{font-size:22px}
  .hero-copy p{display:none}
  .topic-strip{grid-template-columns:auto 1fr;margin-top:12px}
  .home-block{margin-top:44px}
  .section-heading h2{font-size:21px}
  .feature-split,.video-layout,.newsletter-section,.contact-grid,.single-split-header{grid-template-columns:1fr}
  .feature-story{display:block}
  .feature-story>a{display:block;min-height:0}
  .feature-story>a img{height:275px}
  .feature-story h3{font-size:20px}
  .compact-story{grid-template-columns:105px 1fr}
  .compact-story img{width:105px;height:82px}
  .technology-grid,.editors-grid,.bottom-grid{grid-template-columns:1fr}
  .tech-feature,.bottom-feature{grid-column:auto;grid-row:auto;display:block}
  .tech-feature .tech-image img,.bottom-feature img{height:275px;min-height:0}
  .tech-feature>div,.bottom-feature>div{padding:20px}
  .tech-feature h3,.bottom-feature h3{font-size:21px}
  .post-card .card-image img,.editors-grid .editor-image img{height:210px}
  .list-story{grid-template-columns:120px 1fr;padding-block:14px}
  .list-image img{width:120px;height:120px}
  .list-copy{padding:2px 13px 2px 0}
  .list-copy h3{margin-top:5px;font-size:15px}
  .list-copy p{display:none}
  .sidebar-column{display:flex;overflow:auto;scroll-snap-type:x mandatory}
  .sidebar-column>.widget{flex:0 0 88%;scroll-snap-align:start}
  .video-section{padding:44px 0}
  .video-feature img{height:310px}
  .video-item{grid-template-columns:105px 1fr}
  .video-thumb img{width:105px;height:75px}
  .newsletter-section{gap:18px;padding:25px}
  .footer-grid{grid-template-columns:1fr;gap:30px}
  .footer-bottom>div{display:grid;gap:4px;padding-block:14px}
  .single-header h1{font-size:var(--hnp-mobile-h1)}
  .single-cover{margin-top:22px}
  .article-layout{grid-template-columns:1fr}
  .share-rail{position:static;display:flex;justify-content:center}
  .entry-content{font-size:15px}
  .archive-header h1,.search-header h1{font-size:29px}
  .mobile-bottom-nav{display:grid}
  .site-footer{padding-bottom:72px}
}
@media(max-width:480px){
  .topbar{display:none}
  .nav-actions{gap:2px}
  .icon-button{width:38px;height:38px}
  .mobile-logo .brand-mark small{display:none}
  .hero-card,.hero-card.hero-1{flex-basis:92%}
  .topic-strip{height:44px;padding-left:10px}
  .topic-strip>strong{padding-inline:10px}
  .section-heading{margin-bottom:17px}
  .section-heading h2{font-size:20px}
  .slider-controls{display:none}
  .compact-story{grid-template-columns:92px 1fr}
  .compact-story img{width:92px;height:74px}
  .list-story{grid-template-columns:100px 1fr}
  .list-image img{width:100px;height:104px}
  .list-copy h3{font-size:13px}
  .post-meta{gap:7px}
  .video-feature img{height:250px}
  .newsletter-form{display:grid}
  .single-header h1{line-height:1.65}
}
@media(prefers-reduced-motion:reduce){
  .hero-image img,.card-image img,.tech-image img,.editor-image img,.bottom-story img,.list-image img{transition:none!important}
}

/* Runtime-connected controls and final parity corrections. */
.brandbar{height:var(--hnp-brandbar-height,104px)}
.nav-inner{height:var(--hnp-nav-height,62px)}
.hero-image span{background:linear-gradient(180deg,rgba(8,8,14,.02) 22%,rgba(8,8,14,var(--hnp-hero-overlay,.62)) 100%)}
.hero-overlay{background:rgba(8,8,14,var(--hnp-hero-overlay,.62))}
.mega-panel,.hnp-menu-mega{max-width:calc(100vw - 32px)}
.archive-image img{width:100%;height:100%;object-fit:cover}
.hnp-boxed-preview{max-width:1500px;margin-inline:auto;box-shadow:0 0 60px rgba(0,0,0,.12)}
.state-inline-ad{margin-top:20px}
@media(max-width:559px){
  .card-slider .hnp-slide{flex-basis:calc(100% - (100% * var(--hnp-mobile-peek,.14)))!important}
}
@media(prefers-reduced-motion:reduce){
  .hnp-reduce-motion *,.hnp-reduce-motion *:before,.hnp-reduce-motion *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}
.hnp-skeleton-loading img[loading="lazy"]{background:linear-gradient(90deg,var(--hnp-surface-2) 25%,var(--hnp-border) 37%,var(--hnp-surface-2) 63%);background-size:400% 100%;animation:hnp-skeleton 1.35s ease infinite}
.hnp-skeleton-loading img[loading="lazy"].is-loaded{animation:none;background:none}
@keyframes hnp-skeleton{0%{background-position:100% 0}100%{background-position:0 0}}
.hnp-mega-animation-none .mega-panel,.hnp-mega-animation-none .hnp-menu-mega{transition:none!important}
.hnp-mega-animation-slide .mega-panel,.hnp-mega-animation-slide .hnp-menu-mega{transform:translateY(18px)}
.hnp-mega-animation-slide .menu-item-has-hnp-mega:hover>.mega-panel,.hnp-mega-animation-slide .menu-item-has-hnp-mega.is-keyboard-open>.mega-panel,.hnp-mega-animation-slide .menu-item-has-hnp-mega:hover>.hnp-menu-mega,.hnp-mega-animation-slide .menu-item-has-hnp-mega.is-keyboard-open>.hnp-menu-mega{transform:none}
.author-socials{display:flex;gap:6px;margin-top:13px}.author-socials a{display:grid;place-items:center;min-width:32px;height:32px;padding-inline:8px;border:1px solid var(--hnp-border);border-radius:5px;font-size:9px}
.archive-loadmore{display:flex;justify-content:center;padding-top:28px}.hnp-button{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border-radius:var(--hnp-button-radius);background:var(--hnp-accent);color:#fff;font-size:11px;font-weight:800}