@charset "UTF-8";

:root {
    --red: #c7212b;
    --red-dark: #a8151e;
    --ink: #212733;
    --muted: #808792;
    --line: #e9ebee;
    --surface: #f6f7f9;
    --max: 1280px;
    --article-font: 18px
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: #fff;
    color: var(--ink);
    font: 15px/1.7 "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
    -webkit-text-size-adjust: 100%
}

a {
    text-decoration: none;
    color: inherit
}

a:hover {
    color: var(--red)
}

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

h1,
h2,
h3,
p,
ul,
ol,
figure {
    margin: 0
}

ul,
ol {
    padding: 0;
    list-style: none
}

h1,
h2,
h3 {
    line-height: 1.5;
    overflow-wrap: anywhere
}

button {
    font: inherit
}

img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

time {
    font-size: 12px;
    color: var(--muted)
}

.container {
    width: min(var(--max), calc(100% - 64px));
    margin-inline: auto
}

.skip-link {
    position: fixed;
    left: 15px;
    top: -70px;
    z-index: 50;
    background: #fff;
    padding: 12px;
    border: 2px solid var(--red)
}

.skip-link:focus {
    top: 12px
}

.utility-bar {
    background: #f6f7f8;
    border-bottom: 1px solid #eceef1;
    font-size: 12px;
    color: #79818c
}

.utility-inner {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding-block: 7px
}

.weekday {
    padding-left: 12px
}

.utility-links {
    display: flex;
    gap: 23px
}

.masthead {
    height: 105px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px
}

.brand {
    display: flex;
    gap: 13px;
    align-items: center;
    min-width: 0;
    color: #232936
}

.brand-mark {
    width: 48px;
    height: 50px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--red);
    color: #fff;
    font: 700 32px/1 SimSun, serif;
    position: relative
}

.brand-mark:after {
    content: "";
    position: absolute;
    width: 8px;
    height: 24px;
    right: -5px;
    bottom: -5px;
    background: #fff;
    border-right: 3px solid var(--red);
    border-bottom: 3px solid var(--red)
}

.brand-wordmark {
    display: block;
    min-width: 0
}

.brand-wordmark strong {
    display: block;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 1px;
    overflow-wrap: anywhere
}

.brand-wordmark>span {
    font-size: 11px;
    color: #89909a;
    letter-spacing: 3px;
    display: block;
    margin-top: 7px
}

.brand-aside {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-right: auto;
    margin-left: 25px
}

.brand-line {
    width: 1px;
    height: 37px;
    background: #dddfe4
}

.brand-aside p {
    font-size: 12px;
    color: #9a9fa7;
    line-height: 1.8;
    letter-spacing: 2px
}

.brand-aside strong {
    font-weight: 500;
    color: #5e6570
}

.masthead-links {
    display: flex;
    gap: 22px;
    font-size: 12px;
    color: #717985
}

.masthead-links a {
    padding-bottom: 7px;
    border-bottom: 1px solid #dddfe4;
    white-space: nowrap
}

.masthead-links span {
    margin-left: 8px;
    color: var(--red)
}

.nav-bar {
    background: var(--red)
}

.main-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 49px;
    flex-wrap: wrap
}

.main-nav a {
    display: block;
    color: white;
    font-size: 17px;
    line-height: 49px;
    padding-inline: 13px;
    white-space: nowrap
}

.main-nav a:hover {
    background: var(--red-dark)
}

.main-nav .nav-home {
    font-weight: 700;
    background: var(--red-dark);
    padding-inline: 23px
}

.page-content {
    padding-top: 26px;
    padding-bottom: 45px;
    min-height: 60vh
}

.headline-area {
    padding: 0 60px 23px;
    text-align: center;
    border-bottom: 1px solid var(--line);
    margin-bottom: 26px
}

.headline-tag {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--red);
    margin-bottom: 8px
}

.headline-area h1 {
    font-size: 30px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: .2px
}

.headline-related {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: 13px;
    color: #7b828d;
    font-size: 12px
}

.headline-related a {
    max-width: 48%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-inline: 20px
}

.headline-related a+a {
    border-left: 1px solid #dfe2e6
}

.top-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, .75fr);
    gap: 29px;
    align-items: start
}

.visual-column,
.focus-column,
.side-column {
    min-width: 0
}

.photo-story {
    min-width: 0;
    overflow: hidden
}

.photo-story>a {
    display: block;
    position: relative;
    aspect-ratio: 1.58;
    background: #edf0f3;
    overflow: hidden
}

.photo-story img {
    transition: transform .4s
}

.photo-story a:hover img {
    transform: scale(1.035)
}

.photo-caption {
    position: absolute;
    inset: auto 0 0;
    padding: 40px 17px 16px;
    background: linear-gradient(transparent, rgba(13, 20, 32, .83));
    color: white
}

.photo-caption h2 {
    font-size: 16px;
    line-height: 1.55;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.photo-caption a:hover {
    color: white
}

.photo-label {
    display: none
}

.lead-photo>a {
    aspect-ratio: 1.45
}

.lead-photo .photo-caption {
    padding: 65px 21px 22px
}

.lead-photo .photo-caption h2 {
    font-size: 21px
}

.lead-photo .photo-label {
    display: inline-block;
    font-size: 10px;
    color: #fff;
    background: var(--red);
    padding: 2px 7px;
    margin-bottom: 8px;
    letter-spacing: 1px
}

.mini-pictures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 15px
}

.mini-pictures .photo-story>a {
    aspect-ratio: 1.48
}

.mini-pictures .photo-caption {
    padding: 25px 12px 10px
}

.mini-pictures .photo-caption h2 {
    font-size: 13px
}

.section-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--red);
    font-weight: 600;
    letter-spacing: 1px
}

.section-eyebrow i {
    display: block;
    flex: 1;
    height: 1px;
    background: var(--line)
}

.section-date {
    font-size: 11px;
    font-weight: 400;
    color: #9a9fa7;
    letter-spacing: 0
}

.text-feature {
    padding-top: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line)
}

.text-feature h2 {
    font-size: 21px;
    line-height: 1.6;
    font-weight: 700
}

.item-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 11px;
    color: #9197a0;
    margin-top: 11px
}

.item-meta time {
    font-size: 11px
}

.item-meta>span {
    color: #9a7478
}

.news-list li {
    position: relative;
    padding-left: 12px;
    line-height: 1.8;
    margin-bottom: 12px;
    font-size: 15px;
    overflow-wrap: anywhere
}

.news-list li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 3px;
    height: 3px;
    background: #b4b9c2
}

.focus-list {
    padding-top: 17px
}

.focus-list li {
    margin-bottom: 11px;
    font-size: 14px
}

.block-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 13px;
    margin-bottom: 20px;
    position: relative
}

.block-head:after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 30px;
    height: 3px;
    background: var(--red)
}

.block-head h2 {
    font-size: 20px;
    font-weight: 700
}

.block-head .more {
    font-size: 11px;
    color: #989ea7;
    white-space: nowrap
}

.block-head .more span {
    font-size: 18px;
    padding-left: 3px
}

.recommend-box {
    background: var(--surface);
    padding: 20px 20px 8px
}

.recommend-box .block-head {
    margin-bottom: 6px;
    padding-bottom: 13px
}

.recommend-box .block-head h2 {
    font-size: 18px
}

.rank-list {
    counter-reset: reading-rank
}

.rank-list li {
    counter-increment: reading-rank;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
    font-size: 13px;
    line-height: 1.7
}

.rank-list li:last-child {
    border: 0
}

.rank-list li:before {
    content: counter(reading-rank, decimal-leading-zero);
    font: italic 600 18px/1.5 Georgia, serif;
    color: #a2a9b3
}

.rank-list li:nth-child(-n+3):before {
    color: var(--red)
}

.rank-list a {
    overflow-wrap: anywhere
}

.topic-box {
    position: relative;
    overflow: hidden;
    border: 1px solid #e9d6d8;
    margin-top: 22px;
    padding: 20px 22px;
    background: linear-gradient(130deg, #fbf4f4, #f3e9ea)
}

.topic-box:after {
    content: "";
    position: absolute;
    border: 1px solid #dfb9bc;
    width: 145px;
    height: 145px;
    border-radius: 50%;
    right: -80px;
    top: 12px;
    pointer-events: none
}

.topic-label {
    font-size: 10px;
    letter-spacing: 2px;
    color: #b17a7f;
    margin-bottom: 8px
}

.topic-box h2 {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.6;
    color: #7b343c
}

.topic-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 15px;
    position: relative;
    z-index: 1
}

.topic-chips a {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid #e2d2d4;
    background: #ffffff80;
    padding: 5px 10px;
    font-size: 12px;
    max-width: 100%;
    overflow-wrap: anywhere
}

.topic-chips a span {
    color: #b0888c
}

.picture-section {
    margin-top: 38px
}

.picture-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px
}

.picture-grid .photo-story>a {
    aspect-ratio: 1.55
}

.picture-grid .photo-caption h2 {
    font-size: 15px
}

.channel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 40px;
    margin-top: 39px
}

.channel-block {
    min-width: 0
}

.channel-lead {
    border-bottom: 1px dashed var(--line);
    padding: 0 0 15px;
    margin-bottom: 16px
}

.channel-lead h3 {
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 8px
}

.channel-grid .news-list {
    columns: 2;
    column-gap: 25px
}

.channel-grid .news-list li {
    break-inside: avoid;
    font-size: 14px;
    margin-bottom: 12px
}

.wide-news {
    margin-top: 37px
}

.wide-news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 23px 28px
}

.wide-news-grid article {
    border-bottom: 1px solid var(--line);
    padding-bottom: 18px;
    min-width: 0
}

.wide-news-grid h3 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 9px
}

.bottom-links {
    border-top: 2px solid #303743;
    padding-top: 25px
}

.channel-directory,
.friend-directory {
    display: flex;
    gap: 27px;
    padding-bottom: 23px
}

.channel-directory h2,
.friend-directory h2 {
    flex: 0 0 64px;
    font-size: 13px;
    font-weight: 600
}

.channel-directory nav,
.friend-directory>div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 23px;
    min-width: 0;
    font-size: 12px;
    color: #7a828d
}

.channel-directory a,
.friend-directory a {
    overflow-wrap: anywhere
}

.friend-directory {
    padding-top: 19px;
    border-top: 1px solid var(--line)
}

.site-footer {
    background: #f6f7f9;
    color: #939aa5;
    font-size: 12px;
    padding: 25px 0 24px
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 20px
}

.footer-brand strong {
    font-size: 19px;
    color: #646c78
}

.footer-brand>span {
    font-size: 11px;
    letter-spacing: 1px
}

.footer-rule {
    height: 1px;
    background: #e8eaee;
    margin-block: 18px
}

.copyright {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap
}

.copyright span {
    overflow-wrap: anywhere
}

.copyright a:last-child {
    margin-left: auto
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: #89909a;
    font-size: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 25px
}

.breadcrumb span[aria-hidden] {
    color: #b2b8c0
}

.listing-layout,
.reading-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 46px
}

.listing-main,
.article-main,
.reading-sidebar {
    min-width: 0
}

.listing-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    border-bottom: 2px solid #303743;
    padding: 0 0 20px;
    margin-bottom: 1px
}

.listing-header .section-eyebrow {
    font-size: 10px;
    color: #9299a3;
    letter-spacing: 2px;
    margin-bottom: 5px
}

.listing-header h1 {
    font-size: 30px;
    line-height: 1.5
}

.listing-header>a {
    font-size: 11px;
    color: #9b7f82;
    padding-bottom: 5px
}

.feed-item {
    display: flex;
    gap: 25px;
    padding: 25px 0;
    border-bottom: 1px solid var(--line);
    align-items: center
}

.feed-image {
    flex: 0 0 190px;
    aspect-ratio: 1.6;
    background: #f0f2f5;
    overflow: hidden
}

.feed-image img {
    transition: transform .4s
}

.feed-image:hover img {
    transform: scale(1.035)
}

.feed-copy {
    flex: 1;
    min-width: 0
}

.feed-copy h2 {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.65
}

.feed-copy .item-meta {
    margin-top: 17px;
    gap: 15px
}

.feed-copy .item-meta>a {
    margin-left: auto;
    font-size: 11px;
    color: #9299a3
}

.browse-more {
    padding-top: 28px
}

.browse-more h2 {
    font-size: 17px;
    margin-bottom: 14px
}

.browse-more nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.browse-more a {
    border: 1px solid var(--line);
    font-size: 13px;
    padding: 6px 14px
}

.side-picture,
.side-channels {
    margin-top: 30px
}

.side-picture .photo-caption h2 {
    font-size: 15px
}

.side-channels .topic-chips {
    margin-top: 0;
    gap: 10px
}

.side-channels .topic-chips a {
    border-color: var(--line);
    background: var(--surface);
    width: calc(50% - 5px);
    font-size: 12px
}

.article-header {
    padding: 0 0 24px;
    border-bottom: 1px solid var(--line)
}

.article-category {
    display: inline-block;
    font-size: 11px;
    color: var(--red);
    border-left: 3px solid var(--red);
    padding-left: 9px;
    line-height: 1.1;
    margin-bottom: 16px
}

.article-header h1 {
    font-size: 35px;
    line-height: 1.6;
    font-weight: 700;
    letter-spacing: .1px
}

.article-meta {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 21px;
    color: #a0a6ae;
    font-size: 12px
}

.article-meta time {
    color: #9299a3
}

.reading-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: #a0a7b0;
    padding: 12px 0 20px
}

.font-tools {
    display: flex;
    align-items: center;
    gap: 9px
}

.font-tools button {
    border: 1px solid #e5e8ed;
    background: white;
    color: #687383;
    font-size: 12px;
    min-width: 30px;
    height: 26px;
    cursor: pointer
}

.font-tools button:hover {
    border-color: var(--red);
    color: var(--red)
}

.article-body {
    font-size: var(--article-font);
    line-height: 2.05;
    color: #323946;
    overflow-wrap: anywhere;
    min-width: 0
}

.article-body p {
    margin: 0 0 1.3em
}

.article-body h2,
.article-body h3 {
    font-weight: 700;
    margin: 1.6em 0 .75em
}

.article-body h2 {
    font-size: 1.25em
}

.article-body h3 {
    font-size: 1.1em
}

.article-body img,
.article-body video,
.article-body iframe {
    width: auto;
    max-width: 100% !important;
    height: auto;
    margin: 18px auto;
    object-fit: contain
}

.article-body a {
    color: #386190;
    text-decoration: underline;
    text-underline-offset: 3px
}

.article-body table {
    display: block;
    overflow: auto;
    max-width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    margin-block: 20px
}

.article-body th,
.article-body td {
    padding: 9px 13px;
    border: 1px solid #dde2e8
}

.article-body pre {
    overflow: auto;
    max-width: 100%;
    padding: 18px;
    background: var(--surface);
    font-size: 14px
}

.article-body blockquote {
    padding: 15px 24px;
    border-left: 3px solid #c7cdd6;
    background: #f6f7f9;
    margin: 25px 0;
    color: #75808f
}

.article-body ul,
.article-body ol {
    padding-left: 1.5em;
    margin-bottom: 1.3em;
    list-style: revert
}

.article-end {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    color: #a9afb7;
    font-size: 11px;
    letter-spacing: 3px;
    margin-top: 35px
}

.end-mark {
    width: 35px;
    height: 1px;
    background: #dce0e6
}

.article-bottom-actions {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 28px;
    border-block: 1px solid var(--line);
    padding-block: 17px;
    font-size: 12px;
    color: #8b939e
}

.related-section {
    margin-top: 32px
}

.related-section .news-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 30px
}

.related-section .news-list li {
    font-size: 14px;
    line-height: 1.9
}

.reading-layout {
    gap: 52px
}

.reading-sidebar>.recommend-box {
    padding-top: 20px
}

.side-channels {
    padding-bottom: 15px
}

@media(min-width:1050px) {
    .reading-sidebar {
        align-self: start
    }
}

@media(max-width:1100px) {
    .masthead {
        gap: 22px
    }

    .brand-wordmark strong {
        font-size: 30px
    }

    .brand-aside {
        margin-left: 5px
    }

    .main-nav a {
        padding-inline: 11px;
        font-size: 16px
    }

    .main-nav .nav-home {
        padding-inline: 17px
    }

    .top-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 27px
    }

    .side-column {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-column: span 2;
        gap: 27px
    }

    .side-column .topic-box {
        margin-top: 0;
        align-self: start
    }

    .side-column .rank-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 20px
    }

    .side-column .recommend-box {
        grid-column: span 1
    }

    .top-grid>.side-column .rank-list {
        display: block
    }

    .listing-layout,
    .reading-layout {
        grid-template-columns: minmax(0, 1fr) 250px;
        gap: 30px
    }

    .feed-image {
        flex-basis: 155px
    }

    .feed-copy h2 {
        font-size: 20px
    }

    .article-header h1 {
        font-size: 31px
    }

    .picture-grid {
        gap: 18px
    }
}

@media(max-width:850px) {
    .brand-aside {
        display: none
    }

    .masthead-links {
        gap: 16px
    }

    .top-grid {
        gap: 23px
    }

    .headline-area {
        padding-inline: 0
    }

    .headline-area h1 {
        font-size: 27px
    }

    .listing-layout,
    .reading-layout {
        grid-template-columns: minmax(0, 1fr)
    }

    .reading-sidebar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px
    }

    .reading-sidebar .side-picture {
        margin: 0
    }

    .reading-sidebar .side-channels {
        grid-column: span 2;
        margin-top: 0
    }

    .article-main {
        max-width: 780px;
        margin: auto;
        width: 100%
    }

    .related-section .news-list {
        gap: 0 25px
    }

    .main-nav {
        justify-content: flex-start;
        gap: 0
    }

    .main-nav a {
        padding-inline: 17px
    }

    .channel-grid {
        gap: 30px
    }

    .channel-grid .news-list {
        columns: 1
    }
}

@media(max-width:600px) {
    .container {
        width: calc(100% - 32px)
    }

    .utility-bar {
        font-size: 10px
    }

    .utility-inner {
        padding-block: 6px
    }

    .weekday {
        padding-left: 7px
    }

    .utility-links {
        gap: 14px
    }

    .utility-links a:nth-child(n+2) {
        display: none
    }

    .masthead {
        height: 79px;
        gap: 12px
    }

    .brand {
        gap: 11px
    }

    .brand-mark {
        width: 36px;
        height: 38px;
        font-size: 26px
    }

    .brand-wordmark strong {
        font-size: 25px;
        letter-spacing: 0
    }

    .brand-wordmark>span {
        font-size: 9px;
        letter-spacing: 2px;
        margin-top: 5px
    }

    .masthead-links {
        display: none
    }

    .main-nav {
        width: 100%;
        padding-inline: 10px;
        min-height: 42px;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        scrollbar-width: none
    }

    .main-nav::-webkit-scrollbar {
        display: none
    }

    .main-nav a {
        line-height: 42px;
        font-size: 15px;
        padding-inline: 15px;
        flex: 0 0 auto
    }

    .main-nav .nav-home {
        padding-inline: 17px;
        background: transparent
    }

    .page-content {
        padding-top: 20px;
        padding-bottom: 30px
    }

    .headline-area {
        text-align: left;
        padding: 0 0 18px;
        margin-bottom: 20px
    }

    .headline-tag {
        font-size: 10px;
        letter-spacing: 1px;
        margin-bottom: 8px
    }

    .headline-area h1 {
        font-size: 24px;
        line-height: 1.55;
        letter-spacing: 0
    }

    .headline-related {
        display: block;
        font-size: 11px;
        margin-top: 12px
    }

    .headline-related a {
        display: block;
        max-width: 100%;
        padding: 0;
        border: 0;
        margin-top: 6px
    }

    .headline-related a+a {
        border: 0
    }

    .top-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 25px
    }

    .lead-photo>a {
        aspect-ratio: 1.7
    }

    .lead-photo .photo-caption {
        padding: 50px 17px 17px
    }

    .lead-photo .photo-caption h2 {
        font-size: 19px
    }

    .lead-photo .photo-label {
        font-size: 9px;
        margin-bottom: 6px
    }

    .mini-pictures {
        gap: 12px;
        margin-top: 12px
    }

    .mini-pictures .photo-story>a {
        aspect-ratio: 1.55
    }

    .mini-pictures .photo-caption h2 {
        font-size: 12px
    }

    .focus-column {
        border-top: 1px solid var(--line);
        padding-top: 20px
    }

    .section-eyebrow {
        font-size: 11px
    }

    .text-feature {
        padding: 14px 0
    }

    .text-feature h2 {
        font-size: 20px;
        line-height: 1.65
    }

    .focus-list li {
        font-size: 15px;
        line-height: 1.8;
        margin-bottom: 13px
    }

    .top-grid .side-column {
        grid-column: auto;
        display: block
    }

    .side-column .recommend-box {
        padding: 19px 20px 6px
    }

    .side-column .topic-box {
        display: none
    }

    .rank-list li {
        font-size: 14px;
        padding-block: 13px
    }

    .side-column .rank-list li:nth-child(n+6) {
        display: none
    }

    .block-head {
        margin-bottom: 18px;
        padding-bottom: 12px
    }

    .block-head h2 {
        font-size: 19px
    }

    .picture-section {
        margin-top: 30px
    }

    .picture-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px 12px
    }

    .picture-grid .photo-story>a {
        aspect-ratio: 1.25
    }

    .picture-grid .photo-caption {
        padding: 30px 11px 11px
    }

    .picture-grid .photo-caption h2 {
        font-size: 13px
    }

    .channel-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        margin-top: 30px
    }

    .channel-lead h3 {
        font-size: 19px
    }

    .channel-grid .news-list li {
        font-size: 15px;
        line-height: 1.8
    }

    .wide-news {
        margin-top: 30px
    }

    .wide-news-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px
    }

    .wide-news-grid h3 {
        font-size: 16px
    }

    .wide-news-grid article:nth-child(n+5) {
        display: none
    }

    .bottom-links {
        padding-top: 20px
    }

    .channel-directory,
    .friend-directory {
        display: block;
        padding-bottom: 19px
    }

    .channel-directory h2,
    .friend-directory h2 {
        font-size: 12px;
        margin-bottom: 12px
    }

    .channel-directory nav,
    .friend-directory>div {
        gap: 8px 19px;
        font-size: 11px
    }

    .friend-directory {
        padding-top: 16px
    }

    .site-footer {
        padding-top: 23px;
        font-size: 10px
    }

    .footer-brand {
        gap: 15px
    }

    .footer-brand strong {
        font-size: 17px
    }

    .footer-brand>span {
        font-size: 10px;
        letter-spacing: 0
    }

    .copyright {
        gap: 12px
    }

    .copyright a:last-child {
        margin-left: auto
    }

    .breadcrumb {
        font-size: 11px;
        gap: 9px;
        padding-bottom: 16px;
        margin-bottom: 20px
    }

    .listing-layout,
    .reading-layout {
        gap: 30px
    }

    .listing-header {
        padding-bottom: 18px
    }

    .listing-header h1 {
        font-size: 28px
    }

    .listing-header>a {
        font-size: 10px
    }

    .feed-item {
        padding: 20px 0;
        gap: 15px;
        align-items: flex-start
    }

    .feed-image {
        flex-basis: 104px;
        aspect-ratio: 1.16
    }

    .feed-copy h2 {
        font-size: 17px;
        line-height: 1.65;
        font-weight: 600
    }

    .feed-copy .item-meta {
        margin-top: 11px;
        gap: 9px;
        flex-wrap: wrap
    }

    .feed-copy .item-meta time {
        font-size: 10px
    }

    .feed-copy .item-meta>a {
        display: none
    }

    .feed-copy .item-meta>span {
        font-size: 10px
    }

    .browse-more {
        padding-top: 22px
    }

    .browse-more a {
        font-size: 12px;
        padding: 6px 12px
    }

    .reading-sidebar {
        display: block
    }

    .reading-sidebar .side-picture {
        display: none
    }

    .reading-sidebar .side-channels {
        margin-top: 25px
    }

    .article-category {
        font-size: 10px;
        margin-bottom: 13px
    }

    .article-header h1 {
        font-size: 26px;
        line-height: 1.6
    }

    .article-meta {
        margin-top: 17px;
        gap: 13px;
        font-size: 10px
    }

    .article-meta time {
        font-size: 10px
    }

    .article-header {
        padding-bottom: 19px
    }

    .reading-tools {
        padding: 10px 0 17px;
        font-size: 10px
    }

    .font-tools {
        gap: 7px
    }

    .font-tools button {
        font-size: 11px;
        min-width: 29px;
        height: 25px
    }

    .article-body {
        font-size: var(--article-font, 17px);
        line-height: 1.95
    }

    .article-body h2 {
        font-size: 1.17em
    }

    .article-body p {
        margin-bottom: 1.3em
    }

    .article-bottom-actions {
        font-size: 11px;
        padding-block: 15px;
        gap: 12px
    }

    .related-section {
        margin-top: 27px
    }

    .related-section .news-list {
        display: block
    }

    .related-section .news-list li {
        font-size: 15px;
        margin-bottom: 14px
    }

    .article-end {
        font-size: 10px
    }

    .page-show {
        --article-font: 17px
    }
}

@media(max-width:350px) {
    .container {
        width: calc(100% - 26px)
    }

    .brand-wordmark strong {
        font-size: 22px
    }

    .headline-area h1 {
        font-size: 22px
    }

    .feed-image {
        flex-basis: 88px
    }

    .feed-copy h2 {
        font-size: 16px
    }

    .article-header h1 {
        font-size: 24px
    }

    .brand-wordmark>span {
        letter-spacing: 1px
    }
}

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

    *,
    *:before,
    *:after {
        transition: none !important;
        animation: none !important
    }
}

@media print {

    .utility-bar,
    .site-header,
    .reading-sidebar,
    .reading-tools,
    .bottom-links,
    .site-footer,
    .related-section,
    .article-bottom-actions {
        display: none !important
    }

    .container {
        width: 100%
    }

    .reading-layout {
        display: block
    }

    .article-body {
        font-size: 12pt;
        color: #000
    }

    .article-header h1 {
        font-size: 22pt
    }

    .article-header,
    .breadcrumb {
        border: 0
    }

    .page-content {
        padding: 0
    }
}


.eyebrow {
    display: block;
    color: var(--red);
    font-size: 11px;
    letter-spacing: 1px;
    margin-bottom: 10px
}

.headline-unit {
    min-width: 0
}

.headline-unit h1 {
    font-size: 32px;
    line-height: 1.55
}

.headline-unit h2 {
    font-size: 24px;
    line-height: 1.6
}

.headline-unit .item-meta {
    margin-top: 15px
}

.story-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px
}

.story-card {
    min-width: 0
}

.story-image {
    display: block;
    aspect-ratio: 1.65;
    overflow: hidden;
    background: #eef1f4
}

.story-copy {
    padding-top: 13px
}

.story-copy h3 {
    font-size: 18px;
    line-height: 1.65;
    margin-bottom: 9px
}

.category-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.category-links a {
    padding: 7px 12px;
    background: #f5f6f8;
    border: 1px solid var(--line);
    font-size: 12px;
    overflow-wrap: anywhere
}

.category-links a span {
    color: #a0a6af;
    margin-left: 10px
}

.menu-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 36px
}

.menu-sections .channel-block {
    min-width: 0
}

.home-gap {
    margin-top: 35px
}

.news-panel {
    padding: 23px;
    background: var(--surface);
    min-width: 0
}

.article-body img {
    height: auto !important
}

.article-body img[hidden] {
    display: none !important
}

.image-unavailable {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid #edf0f3;
    background: #f7f8fa;
    font-size: 12px;
    line-height: 1.5;
    color: #99a1ac;
    margin: 8px 0
}

.header-centered .masthead {
    position: relative;
    justify-content: center;
    height: 120px
}

.header-centered .brand-aside {
    position: absolute;
    left: 0;
    top: 39px;
    margin: 0
}

.header-centered .masthead-links {
    position: absolute;
    right: 0;
    top: 47px
}

.header-compact .masthead {
    height: 82px
}

.header-light .nav-bar {
    background: white;
    border-top: 2px solid var(--red);
    border-bottom: 1px solid var(--line)
}

.header-light .main-nav a {
    color: var(--ink)
}

.header-light .main-nav a:hover {
    background: var(--surface);
    color: var(--red)
}

.header-light .main-nav .nav-home {
    color: var(--red);
    background: #f9f0f1
}

.header-dark .nav-bar {
    background: #26313f
}

.header-dark .main-nav .nav-home {
    background: var(--red)
}

.header-banded .masthead {
    height: 95px
}

.header-banded .nav-bar {
    background: #f4f6f9;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.header-banded .main-nav a {
    color: #344154
}

.header-banded .main-nav a:hover {
    color: var(--red);
    background: #e9edf2
}

.header-banded .main-nav .nav-home {
    color: white;
    background: var(--red)
}

@media(max-width:850px) {
    .header-centered .brand-aside {
        display: none
    }

    .header-centered .masthead-links {
        display: none
    }
}

@media(max-width:600px) {
    .story-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 13px
    }

    .story-copy h3 {
        font-size: 16px
    }

    .menu-sections {
        grid-template-columns: 1fr;
        gap: 25px
    }

    .headline-unit h1 {
        font-size: 25px
    }

    .headline-unit h2 {
        font-size: 21px
    }

    .home-gap {
        margin-top: 28px
    }

    .header-centered .masthead,
    .header-compact .masthead,
    .header-banded .masthead {
        height: 76px
    }

    .page-show .utility-bar {
        display: none
    }

    .page-show .masthead {
        height: 64px
    }

    .page-show .article-category {
        display: none
    }

    .page-show .page-content {
        padding-top: 16px
    }

    .page-show .breadcrumb {
        padding-bottom: 12px;
        margin-bottom: 17px
    }
}

.article-body embed,
.article-body object {
    max-width: 100% !important;
}


.n20-home,
.n20-list-page,
.n20-show-page {
    min-width: 0
}

.n20-split-desk {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: 48px;
    border-block: 2px solid #303943;
    padding-block: 28px
}

.n20-type-desk,
.n20-image-desk {
    min-width: 0
}

.n20-type-desk {
    padding-right: 36px;
    border-right: 1px solid #dce1e7
}

.n20-desk-label {
    display: block;
    color: #949ca6;
    font-size: 10px;
    letter-spacing: 2px;
    margin-bottom: 27px
}

.n20-type-desk .headline-unit .eyebrow {
    color: #535f6e;
    letter-spacing: 2px;
    font-size: 11px
}

.n20-type-desk .headline-unit h1 {
    font-size: 39px;
    line-height: 1.6;
    color: #242b34;
    font-weight: 800
}

.n20-type-desk .headline-unit .item-meta {
    margin-top: 21px
}

.n20-desk-headlines {
    padding-top: 26px;
    margin-top: 27px;
    border-top: 1px solid #b8c0cb
}

.n20-desk-headlines .news-list li {
    font-size: 16px;
    line-height: 1.95;
    margin-bottom: 14px
}

.n20-desk-channels {
    padding-top: 18px
}

.n20-desk-channels .category-links a {
    background: #fff;
    border-color: #dce2e9;
    font-size: 11px
}

.n20-image-desk .lead-photo>a {
    aspect-ratio: 1.8
}

.n20-image-desk .lead-photo .photo-caption {
    padding: 65px 24px 24px
}

.n20-image-desk .lead-photo .photo-caption h2 {
    font-size: 23px
}

.n20-image-desk .photo-label {
    display: none
}

.n20-under-photo {
    margin-top: 8px
}

.n20-desk-update {
    padding: 18px 0;
    border-bottom: 1px solid var(--line)
}

.n20-desk-update:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

.n20-desk-update h2 {
    font-size: 20px;
    line-height: 1.7;
    font-weight: 600
}

.n20-desk-update .item-meta {
    margin-top: 10px
}

.n20-sectional-bottom {
    padding-top: 34px
}

.n20-section-triad.menu-sections {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px
}

.n20-section-triad .news-list li {
    font-size: 14px;
    line-height: 1.9
}

.n20-list-page .listing-header {
    margin-bottom: 0
}

.n20-index-toolbar {
    display: flex;
    align-items: baseline;
    gap: 27px;
    padding: 17px 0 20px;
    border-bottom: 1px solid #dfe5ec
}

.n20-index-toolbar>span {
    font-size: 10px;
    letter-spacing: 2px;
    white-space: nowrap;
    color: #919ba9
}

.n20-index-toolbar .category-links {
    gap: 8px 20px
}

.n20-index-toolbar .category-links a {
    background: none;
    border: 0;
    padding: 0;
    font-size: 12px
}

.n20-index-toolbar .category-links a span {
    display: none
}

.n20-numbered-index {
    counter-reset: n20-news
}

.n20-numbered-index>li {
    counter-increment: n20-news;
    display: grid;
    grid-template-columns: 65px minmax(0, 1fr);
    gap: 25px;
    border-bottom: 1px solid var(--line);
    padding: 21px 0;
    min-width: 0
}

.n20-numbered-index>li:before {
    content: counter(n20-news, decimal-leading-zero);
    font: italic 27px/1.5 Georgia, serif;
    color: #a8b0bc;
    align-self: start;
    border-right: 1px solid var(--line);
    padding-right: 20px
}

.n20-numbered-index>li:nth-child(-n+3):before {
    color: #525f6f
}

.n20-index-story {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 175px;
    gap: 28px;
    align-items: center;
    min-width: 0
}

.n20-index-story h2 {
    font-size: 20px;
    line-height: 1.8;
    font-weight: 500
}

.n20-index-story .item-meta {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px
}

.n20-index-story .item-meta time {
    font-size: 11px
}

.n20-index-story .item-meta a {
    font-size: 10px;
    color: #9aa4b2
}

.n20-index-end {
    padding-top: 31px
}

.n20-index-end .news-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 40px
}

.n20-reader-offset {
    display: grid;
    grid-template-columns: minmax(0, 780px) 250px;
    gap: 64px;
    max-width: 1140px;
    margin-right: auto;
    align-items: start
}

.n20-left-reading,
.n20-fixed-width-desk {
    min-width: 0
}

.n20-left-reading .article-header h1 {
    font-size: 35px;
    line-height: 1.65
}

.n20-left-reading .reading-tools {
    padding: 14px 0 26px
}

.n20-left-reading .article-body {
    line-height: 2.12
}

.n20-fixed-width-desk {
    border-top: 3px solid #354151;
    padding-top: 19px
}

.n20-fixed-width-desk .block-head h2 {
    font-size: 17px
}

.n20-fixed-width-desk .block-head:after {
    background: #77818e;
    height: 2px
}

.n20-fixed-width-desk .category-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px
}

.n20-fixed-width-desk .category-links a {
    display: flex;
    justify-content: space-between;
    background: #f7f8fa;
    font-size: 11px;
    padding: 7px 9px
}

.n20-fixed-width-desk .category-links a span {
    margin-left: 5px
}

.n20-right-rank {
    padding-top: 30px
}

.n20-right-rank .rank-list li {
    font-size: 13px;
    line-height: 1.9
}

@media(max-width:1100px) {
    .n20-split-desk {
        gap: 32px
    }

    .n20-type-desk {
        padding-right: 28px
    }

    .n20-type-desk .headline-unit h1 {
        font-size: 34px
    }

    .n20-desk-headlines .news-list li {
        font-size: 15px
    }

    .n20-desk-update h2 {
        font-size: 18px
    }

    .n20-image-desk .lead-photo .photo-caption h2 {
        font-size: 21px
    }

    .n20-reader-offset {
        grid-template-columns: minmax(0, 1fr) 230px;
        gap: 39px
    }

    .n20-left-reading .article-header h1 {
        font-size: 32px
    }

    .n20-section-triad.menu-sections {
        gap: 26px
    }

    .n20-index-story {
        grid-template-columns: minmax(0, 1fr) 150px;
        gap: 23px
    }
}

@media(max-width:850px) {
    .n20-split-desk {
        gap: 26px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)
    }

    .n20-type-desk {
        padding-right: 24px
    }

    .n20-type-desk .headline-unit h1 {
        font-size: 30px
    }

    .n20-desk-label {
        font-size: 9px;
        letter-spacing: 1px;
        margin-bottom: 21px
    }

    .n20-desk-headlines {
        padding-top: 21px;
        margin-top: 23px
    }

    .n20-desk-headlines .news-list li {
        font-size: 14px;
        margin-bottom: 12px
    }

    .n20-desk-channels .category-links {
        gap: 8px
    }

    .n20-image-desk .lead-photo>a {
        aspect-ratio: 1.35
    }

    .n20-image-desk .lead-photo .photo-caption {
        padding: 50px 18px 19px
    }

    .n20-image-desk .lead-photo .photo-caption h2 {
        font-size: 19px
    }

    .n20-desk-update h2 {
        font-size: 17px
    }

    .n20-desk-update {
        padding-block: 15px
    }

    .n20-desk-update .item-meta>span {
        display: none
    }

    .n20-section-triad.menu-sections {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 23px
    }

    .n20-section-triad .block-head h2 {
        font-size: 18px
    }

    .n20-section-triad .block-head .more {
        display: none
    }

    .n20-section-triad .news-list li {
        font-size: 13px
    }

    .n20-reader-offset {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        max-width: 780px
    }

    .n20-fixed-width-desk {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 30px
    }

    .n20-right-rank {
        padding-top: 0
    }

    .n20-numbered-index>li {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 22px
    }

    .n20-numbered-index>li:before {
        font-size: 25px;
        padding-right: 15px
    }

    .n20-index-story {
        grid-template-columns: minmax(0, 1fr) 125px;
        gap: 22px
    }

    .n20-index-story h2 {
        font-size: 18px
    }
}

@media(max-width:600px) {
    .n20-split-desk {
        grid-template-columns: minmax(0, 1fr);
        gap: 27px;
        padding-block: 22px
    }

    .n20-type-desk {
        padding-right: 0;
        border-right: 0
    }

    .n20-desk-label {
        margin-bottom: 18px
    }

    .n20-type-desk .headline-unit h1 {
        font-size: 29px;
        line-height: 1.65
    }

    .n20-type-desk .headline-unit .item-meta {
        margin-top: 16px
    }

    .n20-desk-headlines .news-list li {
        font-size: 15px
    }

    .n20-desk-headlines {
        padding-top: 20px;
        margin-top: 22px
    }

    .n20-desk-channels {
        padding-top: 9px
    }

    .n20-image-desk {
        border-top: 1px solid var(--line);
        padding-top: 25px
    }

    .n20-image-desk .lead-photo>a {
        aspect-ratio: 1.6
    }

    .n20-image-desk .lead-photo .photo-caption h2 {
        font-size: 21px
    }

    .n20-desk-update h2 {
        font-size: 19px
    }

    .n20-desk-update {
        padding-block: 17px
    }

    .n20-section-triad.menu-sections {
        grid-template-columns: minmax(0, 1fr);
        gap: 27px
    }

    .n20-sectional-bottom {
        padding-top: 29px
    }

    .n20-section-triad .block-head h2 {
        font-size: 20px
    }

    .n20-section-triad .block-head .more {
        display: block
    }

    .n20-section-triad .news-list li {
        font-size: 15px
    }

    .n20-index-toolbar {
        display: block;
        padding-block: 16px
    }

    .n20-index-toolbar>span {
        display: block;
        margin-bottom: 11px
    }

    .n20-index-toolbar .category-links {
        gap: 7px 16px
    }

    .n20-index-toolbar .category-links a {
        font-size: 11px
    }

    .n20-numbered-index>li {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 14px;
        padding-block: 19px
    }

    .n20-numbered-index>li:before {
        font-size: 21px;
        padding-right: 9px
    }

    .n20-index-story {
        display: block
    }

    .n20-index-story h2 {
        font-size: 17px;
        line-height: 1.85
    }

    .n20-index-story .item-meta {
        flex-direction: row;
        justify-content: space-between;
        gap: 15px;
        align-items: baseline;
        margin-top: 11px
    }

    .n20-index-story .item-meta time {
        font-size: 10px
    }

    .n20-index-end .news-list {
        display: block
    }

    .n20-index-end .news-list li {
        font-size: 15px
    }

    .n20-reader-offset {
        gap: 29px
    }

    .n20-left-reading .article-header h1 {
        font-size: 26px
    }

    .n20-left-reading .reading-tools {
        padding: 11px 0 21px
    }

    .n20-left-reading .article-body {
        line-height: 2
    }

    .n20-fixed-width-desk {
        display: block;
        padding-top: 22px
    }

    .n20-fixed-width-desk .category-links {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .n20-fixed-width-desk .category-links a {
        font-size: 12px;
        padding: 8px 11px
    }

    .n20-right-rank {
        padding-top: 26px
    }

    .n20-right-rank .rank-list li {
        font-size: 14px
    }
}

@media(max-width:350px) {
    .n20-type-desk .headline-unit h1 {
        font-size: 26px
    }

    .n20-numbered-index>li {
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 12px
    }

    .n20-index-story h2 {
        font-size: 16px
    }

    .n20-left-reading .article-header h1 {
        font-size: 24px
    }
}

@media print {
    .n20-fixed-width-desk {
        display: none !important
    }

    .n20-reader-offset {
        display: block;
        max-width: none
    }
}