/* =============================================================
   TechNews Kenya — stylesheet
   Layout inspired by classic Kenyan tabloid news sites: white
   canvas, red masthead accents, dense headline-first grids.
   ============================================================= */

:root{
  --red:#e2001a;
  --red-dark:#b40015;
  --ink:#111418;
  --body:#2b2f36;
  --muted:#6b7280;
  --line:#e3e6ea;
  --bg:#ffffff;
  --grey-bg:#f4f5f7;
  --wrap:1220px;
  --sans:Arial,Helvetica,sans-serif;
  --head:'Arial Narrow',Arial,Helvetica,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:var(--sans);font-size:16px;line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--red)}
h1,h2,h3,h4{font-family:var(--head);color:var(--ink);margin:0;line-height:1.18;font-weight:800}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:8px;top:8px;width:auto;height:auto;overflow:visible;background:#fff;padding:8px 12px;z-index:1000;border:2px solid var(--red)}

/* ---------- Top bar ---------- */
.topbar{background:var(--ink);color:#cfd3d9;font-size:12.5px}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:34px;gap:12px}
.topbar-date{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-social{display:flex;gap:14px}
.topbar-social a{color:#cfd3d9;font-weight:500}
.topbar-social a:hover{color:#fff}

/* ---------- Masthead ---------- */
.masthead{border-bottom:3px solid var(--red);background:#fff;position:relative}
.masthead-inner{display:flex;align-items:center;gap:20px;padding-top:14px;padding-bottom:14px}
.logo{font-family:var(--head);font-size:34px;font-weight:800;letter-spacing:-.5px;line-height:1;display:inline-flex}
.logo-a{color:var(--ink)}
.logo-b{color:#fff;background:var(--red);padding:2px 8px;margin-left:6px;border-radius:2px}
.logo:hover{color:inherit}
.search-form{margin-left:auto;display:flex;border:1px solid var(--line);border-radius:2px;overflow:hidden;background:var(--grey-bg)}
.search-form input{border:0;background:transparent;padding:9px 12px;font:inherit;font-size:14px;width:230px;outline:none}
.search-form button{border:0;background:var(--ink);color:#fff;padding:0 16px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.search-form button:hover{background:var(--red)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.nav-toggle span{width:24px;height:3px;background:var(--ink);display:block}

/* ---------- Primary nav (red band) ---------- */
.primary-nav{background:var(--red)}
.nav-inner{display:flex;flex-wrap:wrap;align-items:center;gap:2px}
.primary-nav a{
  color:#fff;font-family:var(--head);font-weight:700;font-size:15px;
  text-transform:uppercase;letter-spacing:.4px;padding:12px 14px;display:block;
}
.primary-nav a:hover{background:var(--red-dark);color:#fff}
.primary-nav a.active{background:var(--ink);color:#fff}

/* ---------- Breaking ticker (always ONE line) ---------- */
.ticker{background:#fff;border-bottom:1px solid var(--line)}
.ticker-inner{display:flex;align-items:center;gap:12px;height:44px;overflow:hidden}
.ticker-tag{
  flex:0 0 auto;white-space:nowrap;background:var(--red);color:#fff;
  font-family:var(--head);font-weight:800;text-transform:uppercase;letter-spacing:1px;
  font-size:13px;line-height:1;padding:8px 12px;border-radius:2px;
}
.ticker-track{flex:1 1 auto;min-width:0;overflow:hidden;height:44px;display:flex;align-items:center}
.ticker-strip{display:flex;flex-wrap:nowrap;white-space:nowrap;animation:ticker 60s linear infinite}
.ticker-track:hover .ticker-strip{animation-play-state:paused}
.ticker-list{display:flex;flex-wrap:nowrap;white-space:nowrap}
.ticker-list a{
  white-space:nowrap;font-size:14px;font-weight:500;color:var(--ink);
  padding:0 18px;border-right:1px solid var(--line);line-height:1;
}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.ticker-strip{animation:none}}

/* ---------- Page/section label bar ---------- */
.section-bar{background:var(--grey-bg);border-bottom:1px solid var(--line)}
.section-bar-label{
  display:inline-block;font-family:var(--head);font-weight:800;text-transform:uppercase;
  letter-spacing:1px;font-size:14px;color:#fff;background:var(--ink);padding:7px 14px;
}

main{padding-bottom:40px}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin:22px 0 28px}
.hero-lead{position:relative;display:block;overflow:hidden;background:#000;border-radius:2px}
.hero-lead img{width:100%;height:470px;object-fit:cover;opacity:.82;transition:transform .5s ease}
.hero-lead:hover img{transform:scale(1.03)}
.hero-lead .overlay{position:absolute;left:0;right:0;bottom:0;padding:26px;background:linear-gradient(transparent,rgba(0,0,0,.88))}
.hero-lead h1{color:#fff;font-size:38px;margin:10px 0 8px}
.hero-lead p{color:#e6e8ea;font-size:15px;margin:0 0 8px;max-width:46em}
.hero-lead .meta{color:#c9ccd1;font-size:12.5px}
.hero-side{display:flex;flex-direction:column;gap:14px}
.side-story{display:grid;grid-template-columns:110px 1fr;gap:12px;border-bottom:1px solid var(--line);padding-bottom:14px}
.side-story:last-child{border-bottom:0}
.side-story img{width:110px;height:78px;object-fit:cover;border-radius:2px}
.side-story h3{font-size:16px;font-weight:700}
.side-story .meta{font-size:12px;color:var(--muted);margin-top:5px}

.cat-tag{
  display:inline-block;font-family:var(--head);font-weight:800;text-transform:uppercase;
  letter-spacing:.8px;font-size:12px;
}
.hero-lead .cat-tag{background:var(--red);color:#fff;padding:4px 9px;border-radius:2px}

/* ---------- Layout ---------- */
.layout{display:grid;grid-template-columns:1fr 320px;gap:34px;align-items:start}
.content-main{min-width:0}

.section-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:3px solid var(--red);margin:26px 0 16px;padding-bottom:6px;
}
.section-head h2{font-size:22px;text-transform:uppercase;letter-spacing:.5px}
.see-all{font-size:13px;font-weight:700;color:var(--red);text-transform:uppercase;font-family:var(--head)}

/* ---------- Cards ---------- */
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.story-card{display:flex;flex-direction:column}
.story-card img{width:100%;height:172px;object-fit:cover;background:var(--grey-bg);border-radius:2px}
.story-card .cat-tag{margin:10px 0 6px}
.story-card h3{font-size:18px}
.story-card h3 a:hover{color:var(--red)}
.story-card .dek{font-size:14px;color:var(--body);margin:7px 0 6px}
.story-card .meta{font-size:12px;color:var(--muted);margin-top:auto;padding-top:6px}

.story-row{display:grid;grid-template-columns:230px 1fr;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.story-row img{width:100%;height:150px;object-fit:cover;background:var(--grey-bg);border-radius:2px}
.story-row h3{font-size:21px}
.story-row .dek{font-size:14.5px;margin:8px 0 6px}
.story-row .meta{font-size:12px;color:var(--muted)}

/* ---------- Sidebar ---------- */
.sidebar{display:flex;flex-direction:column;gap:22px;position:sticky;top:12px}
.widget{border:1px solid var(--line);border-radius:2px;padding:18px}
.widget h3{font-size:17px;text-transform:uppercase;letter-spacing:.5px;border-bottom:3px solid var(--red);padding-bottom:8px;margin-bottom:12px}
.widget-newsletter{background:var(--ink);border-color:var(--ink);color:#e9ebee}
.widget-newsletter h3{color:#fff}
.widget-newsletter p{font-size:14px;color:#c3c7cd}
.widget-newsletter input[type=email]{width:100%;padding:11px;border:0;border-radius:2px;font:inherit;font-size:14px;margin-bottom:8px}
.widget-newsletter button{width:100%;background:var(--red);color:#fff;border:0;padding:11px;font:inherit;font-weight:700;border-radius:2px;cursor:pointer}
.widget-newsletter button:hover{background:var(--red-dark)}
.trending-list{list-style:none;margin:0;padding:0;counter-reset:t}
.trending-list li{counter-increment:t;display:grid;grid-template-columns:34px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px;font-weight:500}
.trending-list li:last-child{border-bottom:0}
.trending-list li::before{content:counter(t);font-family:var(--head);font-size:24px;font-weight:800;color:var(--red);line-height:1}
.tag-cloud{display:flex;flex-wrap:wrap;gap:8px}
.tag-cloud a{background:var(--grey-bg);padding:6px 11px;font-size:13px;font-weight:600;border-radius:2px}
.tag-cloud a:hover{background:var(--red);color:#fff}

/* ---------- Article ---------- */
.breadcrumb{font-size:13px;color:var(--muted);margin:18px 0 10px}
.breadcrumb span{margin:0 6px}
.article-head{max-width:820px;margin-bottom:16px}
.article-head h1{font-size:40px;margin:8px 0 10px}
.article-head .dek{font-size:18px;color:#41464e}
.article-meta{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;margin-top:12px}
.article-figure{margin:0 0 22px}
.article-figure img{width:100%;max-height:520px;object-fit:cover;border-radius:2px}
.article-figure figcaption{font-size:12.5px;color:var(--muted);padding-top:6px}
.article-body{max-width:760px;font-size:17.5px;line-height:1.75}
.article-body p{margin:0 0 1.1em}
.article-body .standfirst{font-size:19px;font-weight:500;color:var(--ink)}
.article-source{max-width:760px;background:var(--grey-bg);border-left:4px solid var(--red);padding:16px 18px;margin:24px 0;font-size:14.5px}
.article-source h2{font-size:16px;text-transform:uppercase;margin-bottom:6px}
.outbound-btn{display:inline-block;background:var(--ink);color:#fff;padding:9px 16px;border-radius:2px;font-weight:700;font-size:14px}
.outbound-btn:hover{background:var(--red);color:#fff}
.share-row{display:flex;align-items:center;gap:10px;margin:22px 0;font-size:13.5px;font-weight:700}
.share-row a{background:var(--grey-bg);padding:7px 13px;border-radius:2px}
.share-row a:hover{background:var(--red);color:#fff}

/* ---------- Static pages, states, pagination ---------- */
.static-page{max-width:800px;padding-top:22px;padding-bottom:30px}
.static-page h1{font-size:34px;margin-bottom:14px}
.static-page h2{font-size:22px;margin:24px 0 8px}
.page-head{padding:22px 0 6px;border-bottom:1px solid var(--line);margin-bottom:10px}
.page-head h1{font-size:34px;text-transform:uppercase}
.page-head p{font-size:13px;color:var(--muted);margin:6px 0 12px}
.empty-state{background:var(--grey-bg);padding:34px;text-align:center;border-radius:2px;margin:24px 0}
.error-page{text-align:center;padding:70px 0}
.error-page h1{font-size:72px;color:var(--red)}
.btn{display:inline-block;background:var(--red);color:#fff;padding:11px 20px;font-weight:700;border-radius:2px}
.btn:hover{background:var(--red-dark);color:#fff}
.pagination{display:flex;flex-wrap:wrap;gap:6px;margin:26px 0}
.pagination a,.pagination .current{padding:8px 13px;border:1px solid var(--line);font-size:14px;font-weight:600;border-radius:2px}
.pagination .current{background:var(--red);color:#fff;border-color:var(--red)}
.contact-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:18px 0}
.contact-card{border:1px solid var(--line);padding:16px;border-radius:2px}
.code{background:var(--grey-bg);padding:2px 6px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px}

/* ---------- Newsletter band + footer ---------- */
.footer-newsletter{background:var(--ink);color:#fff;padding:34px 0;margin-top:30px}
.fn-inner{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center}
.footer-newsletter h2{color:#fff;font-size:26px}
.footer-newsletter p{color:#b9bec6;margin:8px 0 0;font-size:14.5px}
.newsletter-form{display:flex;flex-wrap:wrap;gap:8px}
.newsletter-form input[type=email]{flex:1 1 240px;padding:13px;border:0;border-radius:2px;font:inherit}
.newsletter-form button{background:var(--red);color:#fff;border:0;padding:13px 22px;font:inherit;font-weight:700;border-radius:2px;cursor:pointer}
.newsletter-form button:hover{background:var(--red-dark)}
.newsletter-status{flex:1 1 100%;font-size:13.5px;margin:0;min-height:1em}
.newsletter-status.ok{color:#4ade80}
.newsletter-status.err{color:#fca5a5}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.site-footer{background:#0b0d10;color:#a9aeb6;padding:36px 0 20px;font-size:14px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:26px}
.footer-brand .logo{font-size:26px;margin-bottom:10px}
.footer-brand p{font-size:13.5px}
.footer-col h3{color:#fff;font-size:15px;text-transform:uppercase;margin-bottom:10px}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{padding:4px 0}
.footer-bottom{border-top:1px solid #1e2228;margin-top:24px;padding-top:14px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:12.5px}
.footer-note{color:#7b8189}

/* ---------- Newsletter pop-up ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(9,11,14,.72);z-index:2000;
  display:flex;align-items:center;justify-content:center;padding:18px;
  opacity:0;transition:opacity .25s ease;
}
.modal-overlay.open{opacity:1}
.modal-overlay[hidden]{display:none}
.modal{
  position:relative;background:#fff;max-width:460px;width:100%;padding:32px 28px 26px;
  border-top:6px solid var(--red);border-radius:3px;text-align:center;
  transform:translateY(14px);transition:transform .25s ease;
}
.modal-overlay.open .modal{transform:translateY(0)}
.modal-kicker{display:inline-block;font-family:var(--head);font-weight:800;text-transform:uppercase;letter-spacing:1px;font-size:12px;color:var(--red)}
.modal h2{font-size:27px;margin:8px 0 10px}
.modal p{font-size:14.5px;color:var(--body)}
.modal .newsletter-form{justify-content:center}
.modal .newsletter-form input[type=email]{border:1px solid var(--line);flex:1 1 100%}
.modal .newsletter-form button{flex:1 1 100%}
.modal-close{position:absolute;top:8px;right:12px;background:none;border:0;font-size:28px;line-height:1;color:var(--muted);cursor:pointer}
.modal-close:hover{color:var(--red)}
.modal-dismiss{background:none;border:0;color:var(--muted);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer;margin-top:12px}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:static}
  .hero{grid-template-columns:1fr}
  .hero-lead img{height:340px}
  .hero-lead h1{font-size:28px}
  .story-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .fn-inner{grid-template-columns:1fr}
}
@media (max-width:700px){
  .nav-toggle{display:flex}
  .search-form{order:3;width:100%;margin-left:0}
  .search-form input{width:100%}
  .masthead-inner{flex-wrap:wrap}
  .primary-nav{display:none}
  .primary-nav.open{display:block}
  .nav-inner{flex-direction:column;align-items:stretch}
  .primary-nav a{border-bottom:1px solid rgba(255,255,255,.15)}
  .story-grid{grid-template-columns:1fr}
  .story-row{grid-template-columns:130px 1fr;gap:12px}
  .story-row img{height:92px}
  .story-row h3{font-size:17px}
  .story-row .dek{display:none}
  .article-head h1{font-size:28px}
  .article-body{font-size:17px}
  .footer-grid{grid-template-columns:1fr}
  .topbar-date{font-size:11.5px}
}

/* Accessibility + Core Web Vitals refinements */
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
button:disabled{cursor:not-allowed;opacity:.7}
.hero-lead img{aspect-ratio:2 / 1}
.side-story img{aspect-ratio:110 / 78}
.story-card img{aspect-ratio:16 / 10;height:auto}
.story-row img{aspect-ratio:23 / 15;height:auto}
.article-figure img{aspect-ratio:16 / 9;height:auto}
@media (max-width:700px){
  .wrap{padding-left:14px;padding-right:14px}
  .hero{gap:14px}
  .hero-lead img{height:auto;min-height:220px;aspect-ratio:16 / 10}
  .hero-lead .overlay{padding:18px}
  .story-card img{min-height:180px}
  .story-row{grid-template-columns:120px 1fr}
  .story-row img{min-height:80px}
  .primary-nav a{min-height:44px;display:flex;align-items:center}
  .nav-toggle{min-width:44px;min-height:44px;align-items:center;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}