*{
    box-sizing:border-box
}
body{
    margin:0;
    background:#f6f7f9;
    color:#1c2430;
    font:16px/1.7 Arial,"Microsoft YaHei",sans-serif
}
.site-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    max-width:1160px;
    margin:auto;
    padding:22px
}
.brand{
    font-size:24px;
    font-weight:bold;
    color:inherit;
    text-decoration:none
}
.site-header a{
    color:inherit;
    text-decoration:none;
    margin-left:18px
}
main{
    max-width:1160px;
    margin:auto;
    padding:24px 22px 60px
}
.hero{
    padding:36px 0 18px
}
.hero h1{
    font-size:36px;
    margin:0
}
.category-nav{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin:16px 0 28px
}
.category-nav a{
    background:#e7ebf1;
    padding:5px 13px;
    border-radius:99px;
    text-decoration:none;
    color:inherit
}
.article-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px
}
.card{
    background:#fff;
    border:1px solid #e3e7ed;
    border-radius:10px;
    overflow:hidden
}
.card img{
    display:block;
    width:100%;
    height:190px;
    object-fit:cover
}
.card>div{
    padding:15px
}
.card h2{
    font-size:20px;
    line-height:1.4;
    margin:7px 0
}
.card h2 a{
    color:inherit;
    text-decoration:none
}
.card p{
    color:#667085;
    margin:8px 0
}
.card span,time,.breadcrumb{
    font-size:13px;
    color:#687386
}
.article-layout{
    display:grid;
    grid-template-columns:minmax(0,820px) 280px;
    gap:34px;
    align-items:start
}
.article-page h1{
    font-size:36px;
    line-height:1.3
}
.cover{
    width:100%;
    max-height:460px;
    object-fit:cover;
    border-radius:10px
}
.content{
    font-size:18px
}
.content img{
    max-width:100%;
    height:auto
}
.content h2{
    margin-top:36px
}
.recent-sidebar{
    background:#fff;
    border:1px solid #e3e7ed;
    border-radius:10px;
    padding:18px;
    position:sticky;
    top:20px
}
.recent-sidebar h2{
    font-size:19px;
    margin:0 0 8px
}
.recent-sidebar ul{
    list-style:none;
    margin:0;
    padding:0
}
.recent-sidebar li{
    padding:12px 0;
    border-bottom:1px solid #e6eaf0
}
.recent-sidebar li:last-child{
    border:0
}
.recent-sidebar a{
    display:block;
    color:inherit;
    text-decoration:none;
    font-weight:bold;
    line-height:1.45
}
.recent-sidebar a:hover{
    color:#1769aa
}
.recent-sidebar time{
    display:block;
    margin-top:3px
}
footer{
    border-top:1px solid #dde3ea;
    padding:24px;
    text-align:center;
    color:#687386
}

.friend-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.45rem .8rem;
  margin-top:.7rem;
  font-size:.92rem;
}
.friend-links a{
  color:inherit;
  text-decoration:none;
}
.friend-links a:hover,
.friend-links a:focus{
  text-decoration:underline;
}
@media(max-width:720px){
    .article-grid{
        grid-template-columns:1fr
    }
    .article-layout{
        grid-template-columns:1fr
    }
    .recent-sidebar{
        position:static
    }
    .site-header{
        padding:16px
    }
    .site-header nav{
        display:none
    }
    .hero h1,.article-page h1{
        font-size:29px
    }
}
.lead-grid,.modern-feature{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:22px
}
.feature-row,.classic-columns,.insight-layout,.daily-layout{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:26px
}
.side-list,.paper-columns{
    display:grid;
    gap:14px
}
.feed-list,.daily-feed{
    display:grid;
    gap:14px
}
.masonry-grid{
    columns:3;
    gap:20px
}
.masonry-grid .card{
    break-inside:avoid;
    margin-bottom:20px
}
.masthead,.mag-title,.paper-head,.daily-banner,.grid-intro,.modern-intro{
    text-align:center;
    padding:28px
}
.masthead h1,.mag-title h1,.paper-head h1,.daily-banner h1,.grid-intro h1,.modern-intro h1{
    font-size:42px;
    margin:5px 0
}
.focus-hero,.insight-cover{
    padding:56px 42px;
    border-radius:16px
}
.focus-hero h1,.insight-cover h1{
    font-size:46px;
    margin:6px 0
}
.daily-layout aside{
    background:#fff;
    padding:18px;
    height:max-content
}
.daily-layout aside a{
    display:block;
    padding:8px 0;
    color:inherit;
    text-decoration:none;
    border-bottom:1px solid #ddd
}
.paper-columns{
    grid-template-columns:repeat(3,1fr)
}
.paper-columns .card{
    display:block
}
.classic-columns aside .card,.insight-layout aside .card,.side-list .card{
    display:flex;
    border-radius:0
}
.classic-columns aside .card img,.insight-layout aside .card img,.side-list .card img{
    width:100px;
    height:90px
}
@media(max-width:720px){
    .lead-grid,.modern-feature,.feature-row,.classic-columns,.insight-layout,.daily-layout,.paper-columns{
        grid-template-columns:1fr
    }
    .masonry-grid{
        columns:1
    }
    .focus-hero,.insight-cover{
        padding:30px 20px
    }
    .focus-hero h1,.insight-cover h1,.masthead h1,.mag-title h1,.paper-head h1,.daily-banner h1,.grid-intro h1,.modern-intro h1{
        font-size:30px
    }
}