:root{
      --bg:#ffffff;
      --text:#171717;
      --muted:#777;
      --line:#ececec;
      --soft:#f7f7f7;
      --max:1120px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
      color:var(--text);
      background:var(--bg);
      line-height:1.7;
    }
    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%}
    .wrap{max-width:var(--max);margin:auto;padding:0 24px}

    header{
      border-bottom:1px solid var(--line);
      background:#fff;
      position:sticky;
      top:0;
      z-index:10;
    }
    .nav{
      height:68px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
    }
    .logo{
      font-size:21px;
      font-weight:800;
      letter-spacing:-.04em;
    }
    .navlinks{
      display:flex;
      gap:24px;
      font-size:14px;
      color:#555;
    }

    .hero{
      padding:70px 0 54px;
      border-bottom:1px solid var(--line);
    }
    .hero-inner{
      max-width:760px;
    }
    .hero h1{
      font-size:52px;
      line-height:1.1;
      letter-spacing:-.05em;
      margin:0 0 18px;
    }
    .hero p{
      font-size:19px;
      color:#555;
      margin:0 0 28px;
      max-width:650px;
    }
    .search{
      display:flex;
      border:1px solid #dcdcdc;
      border-radius:14px;
      overflow:hidden;
      max-width:620px;
      background:#fff;
    }
    .search input{
      flex:1;
      border:0;
      outline:0;
      padding:16px 18px;
      font-size:16px;
      min-width:0;
    }
    .search button{
      border:0;
      background:#171717;
      color:white;
      padding:0 22px;
      font-size:14px;
      cursor:pointer;
    }

    section{
      padding:54px 0;
      border-bottom:1px solid var(--line);
    }
    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:20px;
      margin-bottom:24px;
    }
    .section-head h2{
      margin:0;
      font-size:28px;
      letter-spacing:-.03em;
    }
    .section-head a{
      font-size:14px;
      color:var(--muted);
    }

    .featured{
      display:grid;
      grid-template-columns:1.4fr 1fr;
      gap:28px;
    }
    .feature-main{
      display:grid;
      gap:16px;
    }
    .thumb{
      aspect-ratio:16/9;
      border-radius:16px;
      background:linear-gradient(135deg,#c8d8d2,#6e8f84 45%,#273f38);
      overflow:hidden;
    }
    .feature-main h3{
      margin:0;
      font-size:30px;
      line-height:1.3;
      letter-spacing:-.03em;
    }
    .feature-main p{
      color:#555;
      margin:0;
      font-size:16px;
    }
    .meta{
      font-size:13px;
      color:var(--muted);
    }

    .side-list{
      display:flex;
      flex-direction:column;
    }
    .side-item{
      padding:0 0 18px;
      margin-bottom:18px;
      border-bottom:1px solid var(--line);
    }
    .side-item:last-child{
      border-bottom:0;
      margin-bottom:0;
    }
    .side-item span{
      font-size:12px;
      color:var(--muted);
    }
    .side-item h3{
      font-size:18px;
      line-height:1.45;
      margin:5px 0 0;
    }

    .grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:26px;
    }
    .article-card{
      display:block;
    }
    .article-card .card-thumb{
      aspect-ratio:16/10;
      border-radius:14px;
      margin-bottom:14px;
      background:#e8eceb;
    }
    .article-card:nth-child(2) .card-thumb{background:#eee7df}
    .article-card:nth-child(3) .card-thumb{background:#e7e5ee}
    .article-card:nth-child(4) .card-thumb{background:#e8eadf}
    .article-card:nth-child(5) .card-thumb{background:#e9e1e1}
    .article-card:nth-child(6) .card-thumb{background:#e2e7ec}
    .article-card span{
      font-size:12px;
      color:var(--muted);
    }
    .article-card h3{
      font-size:19px;
      line-height:1.45;
      margin:5px 0 7px;
    }
    .article-card p{
      margin:0;
      font-size:14px;
      color:#666;
    }

    .categories{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:14px;
    }
    .category{
      border:1px solid var(--line);
      border-radius:14px;
      padding:20px;
      background:#fff;
    }
    .category strong{
      display:block;
      font-size:18px;
      margin-bottom:5px;
    }
    .category span{
      font-size:13px;
      color:var(--muted);
    }

    .latest{
      max-width:820px;
    }
    .latest-item{
      display:grid;
      grid-template-columns:1fr auto;
      gap:20px;
      padding:18px 0;
      border-bottom:1px solid var(--line);
    }
    .latest-item h3{
      margin:0 0 4px;
      font-size:18px;
    }
    .latest-item p{
      margin:0;
      color:#666;
      font-size:14px;
    }
    .latest-item time{
      color:var(--muted);
      font-size:13px;
      white-space:nowrap;
    }

    footer{
      padding:34px 0 46px;
      color:var(--muted);
      font-size:13px;
    }
    .footer-inner{
      display:flex;
      justify-content:space-between;
      gap:20px;
      flex-wrap:wrap;
    }

    @media(max-width:850px){
      .featured{grid-template-columns:1fr}
      .grid{grid-template-columns:repeat(2,1fr)}
      .categories{grid-template-columns:repeat(2,1fr)}
      .hero h1{font-size:44px}
    }
    @media(max-width:620px){
      .wrap{padding:0 16px}
      .navlinks{display:none}
      .hero{padding:46px 0 38px}
      .hero h1{font-size:38px}
      .hero p{font-size:17px}
      .grid{grid-template-columns:1fr}
      .categories{grid-template-columns:1fr 1fr}
      .section-head{align-items:center}
      .latest-item{grid-template-columns:1fr}
      .latest-item time{margin-top:-12px}
    }
  
img{max-width:100%;object-fit:cover}.thumb img,.card-thumb img{width:100%;height:100%}.card-thumb{overflow:hidden}.pagination{display:flex;gap:16px;padding:24px 0}.empty{padding:30px;color:#777}article a{text-decoration:underline}article img{height:auto}nav{flex-wrap:wrap}