/*
Theme Name: TechNews
Theme URI: https://wordpress.org/themes/technews/
Author: Gaurav Tyagi
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.2
Version: 1.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: TechNews
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

  :root{
    --paper:#F7F6F2;
    --paper-dim:#EFEDE6;
    --ink:#14181F;
    --ink-soft:#4A5160;
    --navy:#1B2A4A;
    --navy-deep:#131E36;
    --red:#B23A2E;
    --gold:#8C6A2F;
    --rule:#DAD5C9;
    --rule-dark:#2C3A5C;
    --serif:'Newsreader', Georgia, serif;
    --sans:'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --max:1240px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;object-fit:cover;}
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;margin:0;padding:0;}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}

  :focus-visible{outline:2px solid var(--red);outline-offset:2px;}

  /* ---------- Utility bar ---------- */
  .utility{
    background:var(--navy-deep);
    color:#C9D2E6;
    font-size:0.8rem;
  }
  .utility .wrap{
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:36px;
  }
  .utility-links{display:flex;gap:20px;}
  .utility-links a:hover{color:#fff;}
  .utility-date{letter-spacing:.01em;}
  .utility-links .subscribe{
    color:#fff;
    font-weight:600;
    border-left:1px solid rgba(255,255,255,.25);
    padding-left:20px;
  }

  /* ---------- Masthead ---------- */
  .masthead{
    background:var(--paper);
    border-bottom:1px solid var(--rule);
  }
  .masthead .wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    padding:28px 24px 20px;
  }
  .logo{
    font-family:var(--serif);
    font-size:2.6rem;
    font-weight:600;
    letter-spacing:-0.01em;
    text-align:center;
    max-width:300px;
  }
  .logo .dot{color:var(--red);}
  .masthead-side{
    position:absolute;
    right:24px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    gap:14px;
  }
  .icon-btn{
    width:38px;height:38px;
    display:flex;align-items:center;justify-content:center;
    border:1px solid var(--rule);
    border-radius:50%;
    background:transparent;
    cursor:pointer;
  }
  .icon-btn svg{width:17px;height:17px;stroke:var(--ink);}

  /* ---------- Nav ---------- */
  nav.primary{
    background:var(--navy);
    position:sticky;
    top:0;
    z-index:50;
  }
  nav.primary .wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:52px;
  }
  .nav-links{
    display:flex;
    gap:2px;
  }
  .nav-links a{
    display:block;
    padding:15px 16px;
    font-size:0.92rem;
    font-weight:500;
    color:#EDEFF5;
    border-bottom:2px solid transparent;
    white-space:nowrap;
  }
  .nav-links a:hover, .nav-links a.active{
    border-bottom-color:var(--red);
    color:#fff;
  }
  .nav-more{position:relative;}
  .hamburger{
    display:none;
    background:none;
    border:none;
    cursor:pointer;
    padding:14px 4px;
    width:32px;
  }
  .hamburger span{
    display:block;
    width:100%;
    height:2px;
    background:#fff;
    margin:6px 0;
  }

  /* ---------- Breaking strip ---------- */
  .breaking{
    background:#EDE6DD;
    border-bottom:1px solid var(--rule);
  }
  .breaking .wrap{
    display:flex;
    align-items:center;
    gap:14px;
    height:42px;
    overflow:hidden;
  }
  .breaking-tag{
    flex:none;
    background:var(--red);
    color:#fff;
    font-size:0.72rem;
    font-weight:700;
    letter-spacing:.04em;
    padding:4px 10px;
    border-radius:2px;
  }
  .breaking-text{
    font-size:0.9rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* ---------- Section label ---------- */
  .section-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    border-bottom:2px solid var(--ink);
    padding-bottom:10px;
    margin:48px 0 22px;
  }
  .section-head h2{
    font-family:var(--serif);
    font-size:1.5rem;
    font-weight:600;
    margin:0;
    color:var(--navy);
  }
  .section-head .see-all{
    font-size:0.85rem;
    font-weight:600;
    color:var(--ink-soft);
  }
  .section-head .see-all:hover{color:var(--red);}

  /* ---------- Hero ---------- */
  main{padding-bottom:60px;}
  .hero{
    display:grid;
    grid-template-columns:1.6fr 1fr;
    gap:36px;
    padding-top:32px;
  }
  .lead-story img{
    width:100%;
    aspect-ratio:16/10;
    border-radius:2px;
  }
  .tag{
    display:inline-block;
    font-size:0.72rem;
    font-weight:700;
    letter-spacing:.04em;
    color:var(--gold);
    margin:16px 0 8px;
  }
  .lead-story h1{
    font-family:var(--serif);
    font-size:2.5rem;
    line-height:1.12;
    font-weight:600;
    margin:0 0 12px;
  }
  .lead-story h1 a:hover{color:var(--navy);}
  .dek{
    font-size:1.05rem;
    color:var(--ink-soft);
    line-height:1.55;
    margin:0 0 14px;
    max-width:60ch;
  }
  .byline{
    font-size:0.82rem;
    color:var(--ink-soft);
  }

  .secondary-stack{
    display:flex;
    flex-direction:column;
    gap:22px;
  }
  .story-row{
    display:flex;
    gap:14px;
    padding-bottom:20px;
    border-bottom:1px solid var(--rule);
  }
  .story-row:last-child{border-bottom:none;padding-bottom:0;}
  .story-row img{
    width:112px;
    height:82px;
    flex:none;
    border-radius:2px;
  }
  .story-row h3{
    font-family:var(--serif);
    font-size:1.08rem;
    line-height:1.28;
    font-weight:600;
    margin:0 0 6px;
  }
  .story-row h3 a:hover{color:var(--navy);}
  .story-row .tag{margin:0 0 4px;font-size:0.68rem;}

  /* ---------- Category grid + sidebar ---------- */
  .content-split{
    display:grid;
    grid-template-columns:1fr 320px;
    gap:48px;
    align-items:start;
  }

  .card-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px;
  }
  .card img{
    width:100%;
    aspect-ratio:16/11;
    border-radius:2px;
    margin-bottom:12px;
  }
  .card h3{
    font-family:var(--serif);
    font-size:1.2rem;
    line-height:1.3;
    font-weight:600;
    margin:0 0 8px;
  }
  .card h3 a:hover{color:var(--navy);}
  .card p{
    font-size:0.9rem;
    color:var(--ink-soft);
    line-height:1.5;
    margin:0;
  }

  /* ---------- Sidebar ---------- */
  aside{
    display:flex;
    flex-direction:column;
    gap:36px;
  }
  /* .most-read{
    background:var(--paper-dim);
    padding:24px;
    border:1px solid var(--rule);
  }
  .most-read h2{
    font-family:var(--serif);
    font-size:1.15rem;
    margin:0 0 16px;
    color:var(--navy);
  }
  .most-read ol{
    list-style:none;
    margin:0;padding:0;
    counter-reset:mr;
  }
  .most-read li{
    counter-increment:mr;
    display:flex;
    gap:14px;
    padding:14px 0;
    border-bottom:1px solid var(--rule);
  }
  .most-read li:last-child{border-bottom:none;padding-bottom:0;}
  .most-read li:first-child{padding-top:0;}
  .most-read li::before{
    content:counter(mr);
    font-family:var(--serif);
    font-size:1.5rem;
    font-weight:600;
    color:var(--rule);
    line-height:1;
    flex:none;
  }
  .most-read h4{
    font-size:0.92rem;
    font-weight:600;
    line-height:1.35;
    margin:0;
  }
  .most-read h4 a:hover{color:var(--red);} */

  .newsletter{
    background:var(--navy);
    color:#fff;
    padding:28px 24px;
  }
  .newsletter h2{
    font-family:var(--serif);
    font-size:1.25rem;
    margin:0 0 8px;
  }
  .newsletter p{
    font-size:0.88rem;
    color:#C9D2E6;
    line-height:1.5;
    margin:0 0 18px;
  }
  .newsletter form{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .newsletter input{
    padding:11px 12px;
    border:1px solid rgba(255,255,255,.25);
    background:rgba(255,255,255,.06);
    color:#fff;
    font-family:var(--sans);
    font-size:0.9rem;
    border-radius:2px;
  }
  .newsletter input::placeholder{color:#9AA6C0;}
  .newsletter button{
    padding:11px 12px;
    background:var(--red);
    color:#fff;
    border:none;
    font-family:var(--sans);
    font-weight:600;
    font-size:0.9rem;
    cursor:pointer;
    border-radius:2px;
  }
  .newsletter button:hover{background:#9c3125;}

  .ad-slot{
    border:1px dashed var(--rule);
    background:var(--paper-dim);
    color:var(--ink-soft);
    font-size:0.78rem;
    text-align:center;
    padding:40px 12px;
  }

  /* ---------- Footer ---------- */
  footer{
    background:var(--navy-deep);
    color:#B7C0D6;
    margin-top:40px;
  }
  .footer-top{
    display:grid;
    grid-template-columns:1.4fr repeat(4,1fr);
    gap:32px;
    padding:52px 24px 40px;
  }
  .footer-brand .logo{
    color:#fff;
    text-align:left;
    font-size:1.7rem;
    margin-bottom:12px;
  }
  .footer-brand p{
    font-size:0.85rem;
    line-height:1.6;
    max-width:32ch;
  }
  .footer-col h4{
    color:#fff;
    font-size:0.85rem;
    font-weight:600;
    margin:0 0 14px;
  }
  .footer-col ul{display:flex;flex-direction:column;gap:10px;}
  .footer-col a{font-size:0.85rem;}
  .footer-col a:hover{color:#fff;}
  .footer-bottom{
    border-top:1px solid var(--rule-dark);
    padding:20px 24px;
  }
  .footer-bottom .wrap{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    font-size:0.8rem;
  }
  .socials{display:flex;gap:14px;}
  .socials a{
    width:32px;height:32px;
    border:1px solid var(--rule-dark);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
  }
  .socials svg{width:14px;height:14px;stroke:#B7C0D6;}
  .socials a:hover{border-color:var(--red);}
  .socials a:hover svg{stroke:#fff;}

  /* ---------- Responsive ---------- */
  @media (max-width:980px){
    .hero{grid-template-columns:1fr;}
    .content-split{grid-template-columns:1fr;}
    aside{flex-direction:row;flex-wrap:wrap;}
    .most-read, .newsletter, .ad-slot{flex:1 1 300px;}
    .footer-top{grid-template-columns:1fr 1fr;}
    .footer-brand{grid-column:1/-1;}
  }

  @media (max-width:860px){
    .nav-links{
      display:none;
      position:absolute;
      top:100%;left:0;right:0;
      background:var(--navy);
      flex-direction:column;
      gap:0;
      border-top:1px solid var(--rule-dark);
    }
    .nav-links.open{display:flex;}
    .nav-links a{
      padding:14px 24px;
      border-bottom:1px solid var(--rule-dark);
    }
    .hamburger{display:block;}
    nav.primary{position:sticky;}
    nav.primary .wrap{position:relative;flex-wrap:wrap;}
  }

  @media (max-width:700px){
    .logo{font-size:2rem;}
    .lead-story h1{font-size:1.7rem;}
    .card-grid{grid-template-columns:1fr;}
    .masthead-side{position:static;transform:none;order:-1;margin-bottom:14px;}
    .masthead .wrap{flex-direction:column;padding:20px 20px 16px;}
    .utility .wrap{flex-wrap:wrap;height:auto;padding:8px 20px;gap:6px;}
    .utility-links{gap:14px;}
  }

  @media (max-width:480px){
    .story-row img{width:88px;height:66px;}
    .story-row h3{font-size:0.98rem;}
    .section-head h2{font-size:1.25rem;}
    .footer-top{grid-template-columns:1fr;padding:40px 20px 28px;}
  }

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
  }



  /******************************Single Article***************************/

  /* ===================== BREADCRUMB ===================== */
  .breadcrumb{max-width:820px;margin:0 auto;padding:18px 24px 0;font-size:12.5px;color:var(--ink-faint);}
  .breadcrumb a{color:var(--link);text-decoration:none;}
  .breadcrumb a:hover{text-decoration:underline;}

  /* ===================== ARTICLE SHELL ===================== */
  .page{max-width:1180px;margin:0 auto;padding:0 24px 72px;}
  .layout{display:grid;grid-template-columns:1fr 300px;gap:56px;align-items:start;margin-top:8px;}

  /* ===================== ARTICLE HEADER ===================== */
  .article-header{max-width:780px;padding-bottom:22px;}
  .kicker{display:inline-block;font-size:13px;font-weight:700;color:var(--accent);text-decoration:none;margin-bottom:12px;}
  .article-header h1{
    font-family:'Lora', serif;
    font-size:40px;
    line-height:1.18;
    font-weight:700;
    margin:0 0 16px;
  }
  .deck{
    font-family:'Lora', serif;
    font-style:italic;
    font-size:19px;
    line-height:1.5;
    color:var(--ink-soft);
    margin:0 0 22px;
  }
  .byline-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 0;
    border-top:1px solid var(--rule);
    border-bottom:1px solid var(--rule);
  }
  .avatar{
    width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;
  }
  .byline-text{font-size:13.5px;line-height:1.4;flex:1;}
  .byline-text .name{font-weight:700;}
  .byline-text .name a{text-decoration:none;color:var(--link);}
  .byline-text .meta{color:var(--ink-faint);}
  .share-row{display:flex;gap:8px;flex:none;}
  .share-row button{
    width:32px;height:32px;
    border-radius:50%;
    border:1px solid var(--rule);
    background:#fff;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    color:var(--ink-soft);
  }
  .share-row button:hover{background:#eee9dd;}

  /* ===================== LEAD IMAGE ===================== */
  .lead-figure{max-width:780px;margin:26px 0 8px;}
  .lead-figure img{width:100%;aspect-ratio:16/9.5;object-fit:cover;display:block;}
  .lead-figure figcaption{
    font-size:12.5px;
    color:var(--ink-faint);
    margin-top:8px;
    padding-left:2px;
    border-left:2px solid var(--rule);
    padding-left:10px;
  }

  /* ===================== ARTICLE BODY ===================== */
  .article-body{max-width:700px;font-size:18px;line-height:1.75;margin-top:26px;}
  .article-body p{margin:0 0 22px;}
  .article-body h2{
    font-family:'Lora', serif;
    font-size:26px;
    font-weight:600;
    margin:38px 0 18px;
  }
  .article-body a{color:var(--link);text-decoration:underline;}
  .pull-quote{
    font-family:'Lora', serif;
    font-style:italic;
    font-size:24px;
    line-height:1.45;
    color:var(--ink);
    border-left:3px solid var(--accent);
    padding:4px 0 4px 24px;
    margin:34px 0;
  }
  .pull-quote cite{
    display:block;
    font-family:'Source Sans 3', sans-serif;
    font-style:normal;
    font-size:13px;
    color:var(--ink-faint);
    margin-top:10px;
  }
  .inline-figure{margin:32px 0;}
  .inline-figure img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;}
  .inline-figure figcaption{font-size:12.5px;color:var(--ink-faint);margin-top:8px;}

  /* ===================== TAGS ===================== */
  .tags{
    max-width:700px;
    display:flex;flex-wrap:wrap;gap:8px;
    margin-top:38px;
    padding-top:24px;
    border-top:1px solid var(--rule);
  }
  .tags a{
    font-size:12.5px;font-weight:600;
    padding:6px 13px;border:1px solid var(--rule);border-radius:999px;
    text-decoration:none;color:var(--ink-soft);background:#fff;
  }
  .tags a:hover{border-color:var(--ink-soft);}

  /* ===================== AUTHOR BIO ===================== */
  .author-bio{
    max-width:700px;
    display:flex;gap:16px;
    margin-top:28px;
    padding:22px;
    background:#fff;
    border:1px solid var(--rule);
  }
  .author-bio img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;}
  .author-bio h3{font-family:'Lora', serif;font-size:16px;font-weight:600;margin:0 0 6px;}
  .author-bio p{font-size:13.5px;line-height:1.55;color:var(--ink-soft);margin:0;}

  /* ===================== RELATED ARTICLES ===================== */
  .related{max-width:820px;margin-top:56px;}
  .related h2{
    font-family:'Lora', serif;font-size:22px;font-weight:600;
    margin:0 0 22px;padding-bottom:12px;border-bottom:2px solid var(--ink);
  }
  .related-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:24px;}
  .related-grid a{text-decoration:none;}
  .related-grid img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;}
  .related-grid .kicker-sm{display:block;font-size:11px;font-weight:700;color:var(--accent);margin-top:12px;}
  .related-grid h3{
    font-family:'Lora', serif;font-size:15.5px;line-height:1.32;font-weight:600;margin:5px 0 0;
  }
  .related-grid a:hover h3{text-decoration:underline;}

  /* ===================== COMMENTS ===================== */
  .comments{max-width:700px;margin-top:56px;}
  .comments h2{
    font-family:'Lora', serif;font-size:22px;font-weight:600;
    margin:0 0 20px;padding-bottom:12px;border-bottom:2px solid var(--ink);
  }
  .comment-form textarea{
    width:100%;min-height:90px;padding:12px;border:1px solid var(--rule);
    font-family:inherit;font-size:14px;border-radius:4px;resize:vertical;
  }
  .comment-form button{
    margin-top:10px;padding:10px 20px;background:var(--navy);color:#fff;
    border:none;border-radius:4px;font-weight:700;font-size:13.5px;cursor:pointer;
  }
  .comment-form button:hover{background:var(--navy-soft);}
  .comment-list{margin-top:28px;display:flex;flex-direction:column;gap:22px;}
  .comment{display:flex;gap:14px;}
  .comment img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;}
  .comment-body{flex:1;padding-bottom:22px;border-bottom:1px solid var(--rule);}
  .comment-body .name{font-weight:700;font-size:13.5px;}
  .comment-body .time{font-size:12px;color:var(--ink-faint);margin-left:8px;}
  .comment-body p{font-size:14.5px;line-height:1.55;margin:6px 0 0;color:var(--ink-soft);}

  /* ===================== SIDEBAR ===================== */
  .sidebar{display:flex;flex-direction:column;gap:28px;position:sticky;top:20px;}
  .widget{background:var(--card-bg);border:1px solid var(--rule);}
  .most-read{padding:20px 20px 6px;}
  .most-read h3{font-family:'Lora', serif;font-size:17px;font-weight:600;margin:0 0 6px;}
  .most-read ol{list-style:none;margin:0;padding:0;}
  .most-read li{display:grid;grid-template-columns:22px 1fr;gap:10px;padding:14px 0;border-top:1px solid var(--rule);font-size:13.5px;line-height:1.4;}
  .most-read li span{font-family:'Lora', serif;color:#c9c2b2;font-weight:600;}
  .most-read a{text-decoration:none;}
  .most-read a:hover{text-decoration:underline;}

  .newsletter{background:var(--navy);color:#fff;padding:22px;}
  .newsletter h3{font-family:'Lora', serif;font-size:18px;margin:0 0 8px;font-weight:600;}
  .newsletter p{font-size:13.5px;color:#c9cfdd;line-height:1.5;margin:0 0 16px;}
  .newsletter form{display:flex;flex-direction:column;gap:10px;}
  .newsletter input{padding:10px 12px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;font-size:13.5px;border-radius:3px;}
  .newsletter input::placeholder{color:#a9b2c6;}
  .newsletter button{padding:10px 12px;background:var(--accent);border:none;color:#fff;font-weight:700;font-size:13.5px;border-radius:3px;cursor:pointer;}
  .newsletter button:hover{background:#9c3b18;}

  .ad-slot{border:1px dashed var(--rule);background:#efece4;padding:40px 16px;text-align:center;font-size:12px;color:var(--ink-faint);}

  /* ===================== FOOTER ===================== */
  footer{border-top:1px solid var(--rule);padding:28px 24px 40px;margin-top:40px;}
  .footer-inner{max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:var(--ink-faint);}

  /* ===================== ACCESSIBILITY ===================== */
  .skip-link{position:absolute;left:-9999px;top:0;background:#fff;padding:10px 14px;z-index:100;}
  .skip-link:focus{left:16px;top:16px;}
  a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

  /* ===================== RESPONSIVE ===================== */
  @media (max-width:960px){
    .layout{grid-template-columns:1fr;}
    .sidebar{position:static;}
    .article-header h1{font-size:32px;}
    .related-grid{grid-template-columns:repeat(2, 1fr);}
  }

  @media (max-width:720px){
    .topbar-inner{padding:14px 20px 12px;}
    .menu-toggle{display:inline-block;}
    .primary-nav{display:none;}
    .primary-nav.open{display:block;}
    .primary-nav-inner{flex-direction:column;gap:0;padding:4px 20px 10px;}
    .primary-nav a{border-bottom:1px solid rgba(255,255,255,.08);width:100%;}
    .breadcrumb{padding:14px 20px 0;}
    .page{padding:0 20px 56px;}
    .article-header h1{font-size:26px;}
    .deck{font-size:16.5px;}
    .article-body{font-size:16.5px;}
    .pull-quote{font-size:20px;padding-left:16px;}
    .byline-row{flex-wrap:wrap;}
    .related-grid{grid-template-columns:1fr;}
    .author-bio{flex-direction:column;}
  }

  /*****************************************Catgory*********************************************/

  /* ===================== BREADCRUMB ===================== */
  .breadcrumb{
    max-width:1180px;margin:0 auto;padding:18px 24px 0;
    font-size:12.5px;color:var(--ink-faint);
  }
  .breadcrumb a{color:var(--link);text-decoration:none;}
  .breadcrumb a:hover{text-decoration:underline;}

  /* ===================== PAGE HEADER ===================== */
  .page{max-width:1180px;margin:0 auto;padding:0 24px 72px;}
  .category-header{
    padding:18px 0 26px;
    border-bottom:3px solid var(--ink);
    margin-bottom:36px;
  }
  .category-header h1{
    font-family:'Lora', serif;
    font-size:42px;
    font-weight:700;
    margin:0 0 8px;
  }
  .category-header p{
    font-size:15.5px;
    color:var(--ink-soft);
    margin:0 0 18px;
    max-width:62ch;
  }
  .topic-pills{display:flex;flex-wrap:wrap;gap:8px;}
  .topic-pills a{
    font-size:12.5px;
    font-weight:600;
    padding:6px 13px;
    border:1px solid var(--rule);
    border-radius:999px;
    text-decoration:none;
    color:var(--ink-soft);
    background:#fff;
  }
  .topic-pills a.active{
    background:var(--navy);
    border-color:var(--navy);
    color:#fff;
  }
  .topic-pills a:hover{border-color:var(--ink-soft);}

  /* ===================== LAYOUT ===================== */
  .layout{display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:start;}
  .content{min-width:0;}

  /* ===================== LEAD STORY ===================== */
  .lead{
    display:grid;
    grid-template-columns:1.4fr 1fr;
    gap:32px;
    padding-bottom:36px;
    margin-bottom:36px;
    border-bottom:1px solid var(--rule);
  }
  .lead .thumb{width:100%;aspect-ratio:16/8.5;object-fit:cover;display:block;}
  .lead a{text-decoration:none;}
  .lead .kicker{display:block;font-size:12.5px;font-weight:700;color:var(--accent);margin-top:14px;}
  .lead h2{
    font-family:'Lora', serif;
    font-size:30px;
    line-height:1.22;
    font-weight:600;
    margin:6px 0 12px;
  }
  .lead h2:hover{text-decoration:underline;}
  .lead p{font-size:15.5px;line-height:1.6;color:var(--ink-soft);margin:0 0 12px;}
  .lead .byline{font-size:12.5px;color:var(--ink-faint);}

  /* .lead-secondary{display:flex;flex-direction:column;justify-content:space-between;} */
    .lead-secondary{flex-direction:column;justify-content:space-between;}
  .lead-secondary .sub-story{padding-bottom:2px;margin-bottom:16px;border-bottom:1px solid var(--rule);}
  .lead-secondary .sub-story:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}
  .lead-secondary a{text-decoration:none;}
  .lead-secondary h3{
    font-family:'Lora', serif;
    font-size:17px;
    line-height:1.32;
    font-weight:600;
    margin:0 0 6px;
  }
  .lead-secondary h3:hover{text-decoration:underline;}
  .lead-secondary .byline{font-size:12px;color:var(--ink-faint);}

  /* ===================== ARTICLE GRID ===================== */
  .grid-head{
    display:flex;align-items:baseline;justify-content:space-between;
    margin-bottom:22px;
  }
  .grid-head h2{font-family:'Lora', serif;font-size:20px;font-weight:600;margin:0;}
  .sort-select{
    font-size:12.5px;
    color:var(--ink-soft);
    border:1px solid var(--rule);
    background:#fff;
    padding:6px 10px;
    border-radius:3px;
  }

  .article-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:32px 28px;
    margin-bottom:40px;
  }
  .card{padding-bottom:0;}
  .card a{text-decoration:none;}
  .card .thumb{width:100%;aspect-ratio:16/8; object-fit:cover;display:block;}
  .card .kicker{display:block;font-size:11.5px;font-weight:700;color:var(--accent);margin-top:14px;}
  .card h3{
    font-family:'Lora', serif;
    font-size:18px;
    line-height:1.3;
    font-weight:600;
    margin:6px 0 8px;
  }
  .card h3:hover{text-decoration:underline;}
  .card p{font-size:14px;line-height:1.55;color:var(--ink-soft);margin:0 0 10px;}
  .card-meta{
    display:flex;align-items:center;justify-content:space-between;
    font-size:12px;color:var(--ink-faint);
  }
  .card-meta .views{display:flex;align-items:center;gap:5px;}
  .card-meta svg{flex:none;}

  /* ===================== PAGINATION ===================== */
  .pagination{
    display:flex;align-items:center;justify-content:center;gap:6px;
    padding-top:12px;
    border-top:1px solid var(--rule);
  }
  .pagination a{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:34px;height:34px;
    font-size:13.5px;
    font-weight:600;
    color:var(--ink-soft);
    text-decoration:none;
    border-radius:3px;
  }
  .pagination a:hover{background:#eee9dd;}
  .pagination a.active{background:var(--navy);color:#fff;}
  .pagination a.arrow{font-size:15px;}

  /* ===================== SIDEBAR ===================== */
  .sidebar{display:flex;flex-direction:column;gap:28px;position:sticky;top:20px;}
  .widget{background:var(--card-bg);border:1px solid var(--rule);}
  .most-read{padding:20px 20px 6px;}
  .most-read h3{font-family:'Lora', serif;font-size:17px;font-weight:600;margin:0 0 6px;}
  .most-read ol{list-style:none;margin:0;padding:0;}
  .most-read li{
    display:grid;grid-template-columns:22px 1fr;gap:10px;
    padding:14px 0;border-top:1px solid var(--rule);font-size:13.5px;line-height:1.4;
  }
  .most-read li span{font-family:'Lora', serif;color:#c9c2b2;font-weight:600;}
  .most-read a{text-decoration:none;}
  .most-read a:hover{text-decoration:underline;}

  .newsletter{background:var(--navy);color:#fff;padding:22px;}
  .newsletter h3{font-family:'Lora', serif;font-size:18px;margin:0 0 8px;font-weight:600;}
  .newsletter p{font-size:13.5px;color:#c9cfdd;line-height:1.5;margin:0 0 16px;}
  .newsletter form{display:flex;flex-direction:column;gap:10px;}
  .newsletter input{
    padding:10px 12px;border:1px solid rgba(255,255,255,.3);
    background:rgba(255,255,255,.08);color:#fff;font-size:13.5px;border-radius:3px;
  }
  .newsletter input::placeholder{color:#a9b2c6;}
  .newsletter button{
    padding:10px 12px;background:var(--accent);border:none;color:#fff;
    font-weight:700;font-size:13.5px;border-radius:3px;cursor:pointer;
  }
  .newsletter button:hover{background:#9c3b18;}

  .ad-slot{
    border:1px dashed var(--rule);background:#efece4;
    padding:40px 16px;text-align:center;font-size:12px;color:var(--ink-faint);
  }

  /* ===================== FOOTER ===================== */
  footer{border-top:1px solid var(--rule);padding:28px 24px 40px;}
  .footer-inner{
    max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;
    flex-wrap:wrap;gap:12px;font-size:12.5px;color:var(--ink-faint);
  }

  /* ===================== ACCESSIBILITY ===================== */
  .skip-link{position:absolute;left:-9999px;top:0;background:#fff;padding:10px 14px;z-index:100;}
  .skip-link:focus{left:16px;top:16px;}
  a:focus-visible,button:focus-visible,input:focus-visible{
    outline:2px solid var(--accent);outline-offset:2px;
  }

  /* ===================== RESPONSIVE ===================== */
  @media (max-width:960px){
    .layout{grid-template-columns:1fr;}
    .sidebar{position:static;}
    .lead{grid-template-columns:1fr;}
    .category-header h1{font-size:34px;}
  }

  @media (max-width:720px){
    .topbar-inner{padding:14px 20px 12px;}
    .menu-toggle{display:inline-block;}
    .primary-nav{display:none;}
    .primary-nav.open{display:block;}
    .primary-nav-inner{flex-direction:column;gap:0;padding:4px 20px 10px;}
    .primary-nav a{border-bottom:1px solid rgba(255,255,255,.08);width:100%;}
    .breadcrumb{padding:14px 20px 0;}
    .page{padding:0 20px 56px;}
    .category-header h1{font-size:28px;}
    .article-grid{grid-template-columns:1fr;}
    .lead-secondary .sub-story{display:grid;grid-template-columns:1fr;}
  }

  @media (max-width:480px){
    .grid-head{flex-direction:column;align-items:flex-start;gap:8px;}
  }




  .tab-block{
    grid-column: 1 / -1;
    margin-top: 1rem;
  }
  .tab-block + .tab-block{ margin-top: 3rem; }

  .tab-label{
    display:inline-block;
    background: var(--tab-color, var(--automotive));
    color:#fff;
    font-family: Georgia, serif;
    font-weight:700;
    font-size:1rem;
    padding:0.55rem 1.3rem;
    margin-bottom:0;
  }
  .tab-rule{
    border-top:2px solid var(--tab-color, var(--automotive));
    margin-bottom:0.2rem;
  }

  .tab-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:2.5rem;
    border-top:1px solid var(--rule);
  }

  .tab-row{
    display:flex;
    align-items:flex-start;
    gap:1.1rem;
    padding:1.15rem 0;
    border-bottom:1px solid var(--rule);
  }

  .tab-row .info{ flex:1; min-width:0; }
  .tab-row h3{
    font-size:1.05rem;
    line-height:1.35;
    margin:0 0 0.4rem;
    font-weight:700;
  }
  .tab-row h3 a{ color:var(--ink); text-decoration:none; }
  .tab-row h3 a:hover{ text-decoration:underline; }
  .tab-row .row-date{
    font-size:0.82rem;
    color:var(--ink-soft);
  }
  .tab-row img{
    width:110px;
    height:82px;
    object-fit:cover;
    flex-shrink:0;
  }

  .tab-pagination{
    display:flex;
    gap:0.5rem;
    margin-top:1rem;
  }
  .tab-pagination button{
    width:32px; height:32px;
    border:1px solid var(--rule);
    background:#fff;
    color:var(--ink-soft);
    font-family:inherit;
    font-size:0.9rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .tab-pagination button:hover{
    border-color:var(--tab-color, var(--automotive));
    color:var(--tab-color, var(--automotive));
  }
  .tab-pagination button:disabled{
    opacity:0.35;
    cursor:default;
    border-color:var(--rule);
    color:var(--ink-soft);
  }

  @media (max-width: 880px){
    .tab-list{ grid-template-columns:1fr; }
    .tab-row img{ width:88px; height:66px; }
  }


/******************************breadcrum*****************************/
.breadcrumb {
    font-size: 14px;
    margin-bottom: 20px;
    color: #666;
}

.breadcrumb a {
    color: #333;
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb .separator {
    margin: 0 8px;
    color: #999;
}

.breadcrumb .current {
    color: #777;
}