*{
    box-sizing:border-box
}
body{
    --page-surface:#fff;
    --page-panel:#fff;
    --page-line:#e3e7ed;
    --page-text:#1c2430;
    --page-muted:#667085;
    --page-accent:#1769aa;
    margin:0;
    background:#f6f7f9;
    color:var(--page-text);
    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:24px 22px;
    border-bottom:1px solid var(--page-line)
}
.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:54px 0 28px
}
.hero h1{
    max-width:800px;
    font-size:clamp(38px,5vw,62px);
    line-height:1.12;
    letter-spacing:-.035em;
    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:var(--page-panel);
    border:1px solid var(--page-line);
    border-radius:10px;
    overflow:hidden;
    transition:transform .2s ease,box-shadow .2s ease
}
.card:hover{
    transform:translateY(-3px);
    box-shadow:0 13px 30px rgba(24,42,61,.11)
}
.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:var(--page-muted);
    margin:8px 0
}
.card span,time,.breadcrumb{
    font-size:13px;
    color:var(--page-muted)
}
.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:var(--page-panel);
    border:1px solid var(--page-line);
    color:var(--page-text);
    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 var(--page-line)
}
.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:var(--page-accent)
}
.recent-sidebar time{
    display:block;
    margin-top:3px
}
.pagination{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:8px;
    max-width:1160px;
    margin:6px auto 44px;
    padding:0 22px
}
.pagination a,.pagination span{
    min-width:40px;
    min-height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 12px;
    border:1px solid var(--page-line);
    border-radius:8px;
    color:var(--page-text);
    text-decoration:none;
    background:var(--page-panel)
}
.pagination .page-current{
    color:#fff;
    background:var(--page-accent);
    border-color:var(--page-accent);
    font-weight:bold
}
.pagination .page-gap{
    min-width:auto;
    border:0;
    background:transparent
}
.pagination .page-prev,.pagination .page-next{
    font-size:14px
}
footer{
    border-top:1px solid var(--page-line);
    padding:24px;
    text-align:center;
    color:var(--page-muted)
}

/* Shared cards, sidebars and pagination follow each template's palette. */
body.theme-atlas{--page-panel:#fffdf8;--page-line:#cdd3ce;--page-text:#172536;--page-muted:#52616a;--page-accent:#b3512d}
body.theme-aurora{--page-panel:#fff;--page-line:#d9d4e9;--page-text:#17234d;--page-muted:#5d6687;--page-accent:#7252c9}
body.theme-classic{--page-panel:#faf7f0;--page-line:#c9c0b1;--page-text:#29251e;--page-muted:#70685d;--page-accent:#765637}
body.theme-daily{--page-panel:#fff;--page-line:#c6e2df;--page-text:#173f3b;--page-muted:#4d716d;--page-accent:#0f766e}
body.theme-grid{--page-panel:#fff;--page-line:#d9def8;--page-text:#26345b;--page-muted:#66729d;--page-accent:#4859b8}
body.theme-horizon{--page-panel:#fff;--page-line:#dce4e7;--page-text:#102638;--page-muted:#5d6d76;--page-accent:#d25f39}
body.theme-insight{--page-panel:#fff;--page-line:#d2dce8;--page-text:#18263a;--page-muted:#5d7188;--page-accent:#0a5c9b}
body.theme-linen{--page-panel:#fffdf8;--page-line:#d7ccbd;--page-text:#352f2a;--page-muted:#756a5e;--page-accent:#a2442c}
body.theme-magazine{--page-panel:#fffefa;--page-line:#d8ccc0;--page-text:#29211b;--page-muted:#776b61;--page-accent:#a33328}
body.theme-minimal{--page-panel:#fff;--page-line:#ddd;--page-text:#1c2430;--page-muted:#687386;--page-accent:#1769aa}
body.theme-modern{--page-panel:#fff;--page-line:#e5e1f3;--page-text:#2f2b45;--page-muted:#716b88;--page-accent:#5631b5}
body.theme-newsroom{--page-panel:#fff;--page-line:#e0d8d8;--page-text:#29211b;--page-muted:#716a6a;--page-accent:#d71920}
body.theme-paper{--page-panel:#fdfbf5;--page-line:#c8c1b4;--page-text:#222;--page-muted:#6c665d;--page-accent:#7a3e28}

.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
    }
    .pagination{
        margin-bottom:30px
    }
}
.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
    }
}