:root {
    --ink:#18201e;
    --muted:#69716e;
    --paper:#f4f6f4;
    --line:#dfe5df;
    --orange:#ec5929;
    --green:#c8f271;
    --white:#fff;
    --radius:12px
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font:16px/1.75 "Microsoft YaHei","PingFang SC",sans-serif
}
a {
    color:inherit;
    text-decoration:none
}
a:hover {
    color:var(--orange)
}
button {
    font:inherit;
    cursor:pointer
}
button:focus-visible,a:focus-visible {
    outline:3px solid var(--orange);
    outline-offset:4px
}
img {
    max-width:100%;
    display:block;
    object-fit:cover;
    background:#dfe5df
}
h1,h2,h3,p {
    margin:0
}
h1,h2,h3 {
    line-height:1.45
}
p {
    overflow-wrap:anywhere
}
.wrap {
    width:min(1240px,calc(100% - 64px));
    margin:auto
}
.topline {
    background:var(--ink);
    color:#dce4de;
    font-size:12px;
    letter-spacing:1px
}
.topline .wrap {
    display:flex;
    justify-content:space-between;
    padding:8px 0
}
.masthead {
    background:var(--white)
}
.brandbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:26px 0
}
.brand {
    display:flex;
    align-items:center;
    gap:13px
}
.brand img {
    width:48px;
    height:48px;
    background:none
}
.brand h1,.brand strong {
    font-size:29px;
    letter-spacing:-1px;
    line-height:1.25
}
.brand small {
    display:block;
    font-size:12px;
    color:var(--muted);
    letter-spacing:3px;
    margin-top:5px
}
.edition {
    text-align:right;
    font-size:13px;
    color:var(--muted)
}
.edition strong {
    display:block;
    color:var(--ink);
    font-size:15px
}
.navline {
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)
}
.nav {
    display:grid;
    grid-template-columns:repeat(9,1fr);
    gap:7px;
    padding:0
}
.nav a {
    white-space:nowrap;
    text-align:center;
    font-size:14px;
    font-weight:700;
    padding:17px 3px;
    position:relative
}
.nav a span {
    margin-right:7px;
    font-size:17px
}
.nav a.active {
    color:var(--orange)
}
.nav a.active:after {
    position:absolute;
    content:"";
    height:3px;
    bottom:-1px;
    left:18%;
    right:18%;
    background:var(--orange)
}
.ticker {
    display:flex;
    gap:22px;
    align-items:center;
    padding:15px 0;
    font-size:14px;
    color:var(--muted);
    border-bottom:1px solid var(--line)
}
.ticker strong {
    color:var(--orange);
    white-space:nowrap
}
.ticker span {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
main {
    padding:28px 0 0
}
.hero-grid {
    display:grid;
    grid-template-columns:minmax(0,2.15fr) minmax(260px,1fr);
    gap:24px
}
.slider {
    position:relative;
    border-radius:var(--radius);
    overflow:hidden;
    background:#142621;
    min-width:0
}
.slide {
    position:relative;
    display:none;
    min-height:444px;
    height:100%;
    color:white
}
.slide:first-child {
    display:block
}
.slider.ready .slide {
    display:none
}
.slider.ready .slide.active {
    display:block
}
.slide img {
    position:absolute;
    width:100%;
    height:100%;
    inset:0;
    aspect-ratio:16/10
}
.slide:after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(6,20,18,.06),rgba(6,20,18,.55) 35%,rgba(6,20,18,.95))
}
.hero-copy {
    position:relative;
    z-index:1;
    padding:120px 36px 78px;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-end
}
.eyebrow {
    font-size:12px;
    letter-spacing:2px;
    color:var(--orange);
    font-weight:700
}
.hero-copy .eyebrow {
    color:var(--green)
}
.hero-copy h2 {
    font-size:32px;
    max-width:680px;
    margin:14px 0 10px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden
}
.hero-copy p {
    font-size:14px;
    line-height:1.8;
    color:#dde6df;
    max-width:600px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden
}
.hero-copy a {
    color:white;
    font-size:14px;
    margin-top:17px
}
.slide-controls {
    position:absolute;
    bottom:24px;
    left:36px;
    right:30px;
    z-index:3;
    display:flex;
    gap:8px;
    align-items:center
}
.slide-controls button {
    border:1px solid #ffffff60;
    background:#ffffff12;
    color:white;
    width:34px;
    height:30px;
    border-radius:4px;
    line-height:1
}
.slide-controls .dot {
    width:22px;
    height:5px;
    padding:0;
    border:0;
    background:#ffffff50
}
.slide-controls .dot[aria-current=true] {
    background:var(--green)
}
.slide-controls .spacer {
    flex:1
}
.panel {
    background:white;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:24px
}
.panel h2 {
    font-size:21px
}
.panel-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:6px
}
.panel-head small {
    color:var(--orange);
    font-size:12px
}
.brief {
    padding:17px 0;
    border-bottom:1px solid var(--line);
    display:flex;
    gap:15px
}
.brief:last-child {
    border:0;
    padding-bottom:0
}
.number {
    font-size:24px;
    font-weight:800;
    line-height:1.4;
    color:var(--orange);
    font-style:italic
}
.brief h3 {
    font-size:16px;
    margin-bottom:5px
}
.meta {
    font-size:12px;
    color:var(--muted);
    letter-spacing:.3px
}
.section {
    margin-top:38px
}
.section-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:16px;
    margin-bottom:20px;
    border-bottom:1px solid var(--line);
    padding-bottom:14px
}
.section-heading h2 {
    font-size:24px;
    letter-spacing:-.5px
}
.section-heading h2 span {
    color:var(--orange);
    margin-right:9px
}
.section-heading p {
    color:var(--muted);
    font-size:13px;
    margin-top:4px
}
.section-heading>a {
    font-size:13px;
    white-space:nowrap
}
.grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px
}
.card {
    background:white;
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
    min-width:0;
    display:flex;
    flex-direction:column
}
.card>a {
    display:block;
    overflow:hidden
}
.card img {
    aspect-ratio:16/10;
    width:100%;
    transition:transform .25s
}
.card:hover img {
    transform:scale(1.035)
}
.card-body {
    padding:17px 18px 18px;
    display:flex;
    flex-direction:column;
    flex:1
}
.tag {
    color:var(--orange);
    font-size:12px;
    font-weight:700
}
.card h3 {
    font-size:18px;
    margin:7px 0 10px
}
.card p {
    font-size:14px;
    color:var(--muted);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin-bottom:16px
}
.card .meta {
    margin-top:auto
}
.paired {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px
}
.paired .grid {
    grid-template-columns:1fr 1fr
}
.list-style .grid {
    grid-template-columns:1fr
}
.list-style .card {
    flex-direction:row;
    border:none;
    border-bottom:1px solid var(--line);
    border-radius:0;
    padding:0 0 18px;
    background:transparent
}
.list-style .card>a {
    width:128px;
    flex-shrink:0
}
.list-style .card img {
    height:100%;
    min-height:110px;
    border-radius:7px
}
.list-style .card-body {
    padding:0 0 0 17px
}
.list-style .card h3 {
    font-size:17px;
    margin:4px 0
}
.list-style .card p {
    margin-bottom:7px;
    -webkit-line-clamp:1
}
.feature-band {
    display:grid;
    grid-template-columns:1fr 1.7fr;
    gap:30px;
    background:var(--ink);
    color:white;
    border-radius:var(--radius);
    padding:32px;
    margin-top:38px
}
.feature-band h2 {
    font-size:27px;
    margin:7px 0 10px
}
.feature-band p {
    color:#b9c6be;
    font-size:14px
}
.feature-band .grid {
    grid-template-columns:1fr 1fr
}
.feature-band .card {
    background:#26332c;
    border:0
}
.feature-band .card p,.feature-band .meta {
    color:#bbc9c0
}
.feature-band .card h3 {
    font-size:17px
}
.feature-band .tag {
    color:var(--green)
}
.about {
    display:grid;
    grid-template-columns:1fr 2fr;
    gap:40px;
    padding:32px 0;
    border-top:2px solid var(--ink);
    margin-top:40px
}
.about h2 {
    font-size:26px;
    margin-top:5px
}
.about p {
    font-size:15px;
    color:var(--muted)
}
.about a {
    display:inline-block;
    margin-top:12px;
    font-size:14px;
    color:var(--orange)
}
.subscribe {
    background:#e8efdF;
    border:1px solid #d2debd;
    border-radius:12px;
    padding:25px 30px;
    display:flex;
    align-items:center;
    gap:24px;
    margin:28px 0 40px
}
.subscribe img {
    width:82px;
    height:82px;
    background:none
}
.subscribe h2 {
    font-size:22px;
    margin-bottom:4px
}
.subscribe p {
    font-size:14px;
    color:#53604b
}
.subscribe .subscribe-copy {
    flex:1
}
.button {
    display:inline-block;
    border:0;
    background:var(--ink);
    color:white;
    padding:10px 20px;
    border-radius:5px;
    font-size:14px;
    white-space:nowrap
}
.button:hover {
    color:white;
    background:var(--orange)
}
.footer {
    background:var(--ink);
    color:#d6ded8;
    padding:40px 0 18px
}
.footer-grid {
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:35px
}
.footer h3 {
    font-size:15px;
    color:white;
    margin-bottom:13px
}
.footer p {
    font-size:13px;
    color:#a8b6ad;
    max-width:350px
}
.footer a {
    display:block;
    font-size:13px;
    margin:6px 0
}
.footer .footer-brand {
    font-size:24px;
    font-weight:800;
    color:white;
    margin-bottom:10px
}
.copyright {
    border-top:1px solid #37433b;
    margin-top:30px;
    padding-top:18px;
    font-size:12px;
    color:#93a297;
    display:flex;
    justify-content:space-between;
    gap:16px
}
.crumb {
    font-size:13px;
    color:var(--muted);
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:23px
}
.category-heading {
    padding:30px 34px;
    background:white;
    border-left:5px solid var(--orange);
    margin-bottom:28px
}
.category-heading h1 {
    font-size:36px;
    margin:7px 0
}
.category-heading p {
    max-width:760px;
    color:var(--muted)
}
.category-feature .card {
    display:grid;
    grid-template-columns:1.15fr 1fr
}
.category-feature .card img {
    height:100%;
    max-height:320px
}
.category-feature .card-body {
    padding:30px
}
.category-feature .card h3 {
    font-size:27px
}
.category-feature .card p {
    -webkit-line-clamp:3
}
.more-area {
    text-align:center;
    padding:22px;
    background:#e9eee8;
    margin-top:24px;
    color:var(--muted);
    font-size:14px
}
.article-layout {
    display:grid;
    grid-template-columns:minmax(0,830px) minmax(240px,1fr);
    gap:32px
}
.article {
    background:white;
    border:1px solid var(--line);
    border-radius:12px;
    padding:36px
}
.article h1 {
    font-size:34px;
    line-height:1.45;
    margin:10px 0 18px
}
.article-header {
    padding-bottom:24px;
    border-bottom:1px solid var(--line)
}
.reading-note {
    font-size:13px;
    color:var(--muted);
    background:var(--paper);
    padding:13px 16px;
    margin:24px 0
}
.article .lead {
    font-size:19px;
    font-weight:500;
    line-height:1.9
}
.article section {
    margin-top:30px
}
.article section h2 {
    font-size:23px;
    margin-bottom:13px
}
.article section p {
    font-size:17px;
    line-height:2.05;
    margin:14px 0
}
.article figure {
    margin:24px 0
}
.article figure img {
    aspect-ratio:16/9;
    width:100%;
    border-radius:7px
}
.article figcaption {
    font-size:12px;
    color:var(--muted);
    margin-top:7px
}
.endnote {
    padding:17px 0;
    border-top:1px solid var(--line);
    font-size:14px;
    color:var(--muted);
    margin-top:25px
}
.pager {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
    margin:24px 0
}
.pager a,.pager span {
    font-size:14px;
    display:block;
    background:var(--paper);
    padding:15px;
    border-radius:6px
}
.side-note {
    font-size:14px;
    color:var(--muted);
    margin-top:12px
}
.article-aside .panel {
    margin-bottom:24px
}
.article-aside h3 {
    font-size:16px
}
.article-aside .brief {
    padding:16px 0
}
.plain {
    max-width:880px;
    margin:auto;
    background:white;
    padding:38px;
    border-radius:12px
}
.plain h1 {
    font-size:32px;
    margin-bottom:20px
}
.plain h2 {
    font-size:22px;
    margin:28px 0 10px
}
.plain p {
    margin:12px 0;
    color:#4e5952
}
.feed-address {
    font-size:13px;
    color:var(--muted);
    overflow-wrap:anywhere
}
.status {
    font-size:13px;
    min-height:23px;
    color:#435336
}
.image-failed {
    background:linear-gradient(135deg,#d5dfd5,#a9bbb0);
    color:#334d3c
}
.skip-link {
    position:absolute;
    top:-80px;
    left:20px;
    background:white;
    padding:8px;
    z-index:20
}
.skip-link:focus {
    top:10px
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    .card img {
        transition:none
    }
}
.hero-copy h2 a {
    font-size:inherit;
    margin:0
}
