/* Editorial prototype: removable layer over the original site styles. */
:root {
  --brand: #9c2336;
  --brand-dk: #751a29;
  --ink: #17191b;
  --ink-2: #33383c;
  --muted: #5c6267;
  --muted-2: #737a80;
  --paper: #fffefa;
  --paper-2: #f7f5ef;
  --paper-3: #eeeae0;
  --rule: #dedbd3;
  --rule-dk: #bbb6ad;
  --gap: 32px;
  --gut: 28px;
  --wrap: 1260px;
  --r: 0;
}
html[data-fs="s"] { --fs-h1: 39px; }
html[data-fs="m"] { --fs-h1: 47px; }
html[data-fs="l"] { --fs-h1: 54px; }
body { line-height: 1.68; }
a, button { -webkit-tap-highlight-color: transparent; }

/* Masthead: let the news, rather than the controls, dominate the first screen. */
.masthead { border-bottom: 0; box-shadow: none; position: relative; }
.mast-inner { align-items: center; padding-top: 14px; padding-bottom: 8px; }
.brand-zh { font-size: clamp(28px, 3vw, 36px); letter-spacing: .055em; }
.brand-en { font-size: 10px; letter-spacing: .38em; color: var(--brand); margin-top: 4px; }
.brand-tag { font-size: 11.5px; margin-top: 5px; letter-spacing: .025em; }
.mast-date { font-size: 11.5px; }
.mast-tools { margin-top: 5px; }
.tbtn { min-height: 34px; padding: 5px 11px; background: transparent; border-color: transparent; font-size: 12px; }
.tbtn:hover { background: var(--paper-3); border-color: var(--rule); }
.mast-search { padding-bottom: 9px; }
.mast-search form { width: min(100%, 470px); margin-left: auto; gap: 0; }
.mast-search input { min-width: 0; min-height: 36px; background: var(--paper); border-right: 0; padding: 6px 12px; font-size: 13px; }
.mast-search button { min-height: 36px; padding: 5px 18px; font-size: 12px; letter-spacing: .04em; }
.nav { position: relative; background: var(--ink); }
.nav a { min-height: 42px; display: inline-flex; align-items: center; padding: 9px 15px; font-size: 12.5px; letter-spacing: .035em; }
.nav a.on { border-bottom-color: #efc5c9; }
.nav a:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.nav .nav-tag { font-size: 10px; letter-spacing: .14em; }
.preview-ribbon { background: #eee6da; border-bottom: 1px solid var(--rule-dk); color: var(--ink-2); font-size: 12px; line-height: 1.5; }
.preview-ribbon .wrap { padding-top: 9px; padding-bottom: 9px; }

/* Edition line and lead story. */
.front { padding-top: 18px; }
.edition-ribbon { display: flex; align-items: center; gap: 24px; border-bottom: 1px solid var(--rule-dk); padding: 0 0 15px; margin-bottom: 24px; }
.edition-label { display: flex; align-items: baseline; gap: 13px; }
.edition-label span { font-size: 10px; font-weight: 700; letter-spacing: .18em; color: var(--brand); white-space: nowrap; }
.edition-label strong { font: 700 17px/1.3 var(--serif); white-space: nowrap; }
.edition-window { font-size: 11.5px; color: var(--muted); letter-spacing: .025em; }
.edition-window span { margin: 0 5px; color: var(--rule-dk); }
.edition-link { margin-left: auto; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.edition-link span { color: var(--brand); margin-left: 5px; }
.hero { grid-template-columns: minmax(0, 1.65fr) minmax(280px, .85fr); gap: 36px; margin-bottom: 25px; align-items: stretch; }
.hero-solo { grid-template-columns: minmax(0, 900px); }
.hero-main { display: flex; flex-direction: column; background: transparent; border: 0; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--rule-dk); overflow: visible; }
.hero-main:hover { color: var(--ink); }
.hero-main:hover h2 { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: .12em; }
.hero-main .hm-body { padding: 16px 0 21px; }
.hero-main h2 { font-size: var(--fs-h1); line-height: 1.19; margin: 12px 0 12px; letter-spacing: -.025em; max-width: 19em; }
.hero-main .sf { max-width: 51ch; font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.hero-main .tags { margin-top: 12px; }
.hero-main .tag { background: transparent; border-bottom: 1px solid var(--rule-dk); padding-left: 0; padding-right: 0; margin-right: 10px; color: var(--muted); }
.hero-img { width: 100%; aspect-ratio: 2.4 / 1; }
.hero-img img { transition-duration: .35s; }
.hero-side { border-top: 3px solid var(--brand); gap: 0; }
.hero-side-title { display: flex; justify-content: space-between; padding: 16px 0 3px; color: var(--brand); font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.hero-side-title span { color: var(--muted-2); font-family: var(--mono); letter-spacing: .05em; }
.hs-item { background: transparent; padding: 17px 0 19px; border: 0; border-bottom: 1px solid var(--rule-dk); gap: 13px; }
.hs-item h3 { font-size: 20px; line-height: 1.35; margin: 7px 0 8px; }
.hs-item p { line-height: 1.6; }
.hs-item .thumb { flex-basis: 104px; height: 78px; }
.kicker { color: var(--brand); font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.kicker::before { width: 11px; height: 1px; }

/* A compact, editorially curated route into four desks. */
.briefing { background: var(--ink); color: #f8f5ef; margin: 0 0 34px; padding: 20px 23px 23px; }
.briefing-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 13px; border-bottom: 1px solid #55585b; }
.briefing-head h2 { margin: 0; color: #f0c6cb; font: 700 11px/1.5 var(--sans); letter-spacing: .2em; }
.briefing-head small { color: #b9b9b4; font-size: 11px; }
.briefing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.briefing-grid a:only-child { grid-column: 1 / -1; }
.briefing-grid a { position: relative; display: flex; flex-direction: column; padding: 16px 15px 8px 0; margin-right: 15px; min-width: 0; border-right: 1px solid #55585b; }
.briefing-grid a:last-child { border-right: 0; margin-right: 0; }
.briefing-grid a:hover { color: #fff; }
.briefing-num { color: #d5a8af; font-size: 10px; letter-spacing: .055em; }
.briefing-grid strong { font: 700 15px/1.5 var(--serif); margin-top: 8px; }
.briefing-arrow { color: #d5a8af; font-size: 16px; margin-top: auto; padding-top: 11px; }

/* Desk streams and cross-links. */
.section-intro { margin-top: 34px; padding-top: 12px; font-size: 28px; }
.front > .sec { margin: 23px 0 38px; }
.sec-head { padding-top: 12px; margin-bottom: 16px; }
.sec-title { font-size: 27px; }
.sec-more, .section-intro a { color: var(--brand); font-weight: 600; }
.hlist { border-top-color: var(--rule-dk); gap: 0 36px; }
.hrow { padding: 18px 0 19px; }
.hrow:hover { background: transparent; }
.hrow h3 { font-size: 20px; line-height: 1.4; margin: 7px 0 8px; }
.hrow .sum { color: var(--muted); line-height: 1.62; }
.published-time { color: var(--muted); font: 600 12.5px/1.5 var(--sans); letter-spacing: .025em; margin-bottom: 5px; }
.topic-grid { gap: 16px; }
.topic-card { min-height: 142px; padding: 18px 19px; border-top: 3px solid var(--ink); }
.topic-card:hover { border-color: var(--brand); }
.topic-card span { font-size: 23px; }
.desk-group { margin: 30px 0 38px; }
.desk-group h2 { margin: 0 0 14px; padding-top: 11px; border-top: 2px solid var(--ink); font: 700 24px/1.35 var(--serif); }
.empty-directory { padding: 22px 0; color: var(--muted); }
.issue-link { font-size: 14px; }

/* Long-form reading. Never imply an unreviewed story was checked. */
.crumb { padding-top: 19px; }
.article { grid-template-columns: minmax(0, 760px) minmax(220px, 280px); justify-content: space-between; gap: 54px; }
.art-head { border-top: 3px solid var(--ink); border-bottom: 0; padding: 21px 0 12px; margin-bottom: 10px; }
.art-head h1 { font-size: var(--fs-h1); line-height: 1.22; letter-spacing: -.02em; margin: 13px 0 16px; }
.art-sf { font-size: 19px; line-height: 1.7; max-width: 40em; }
.art-head .meta { border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 17px; font-size: 12px; }
.article-status { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 11px 14px; margin: 0 0 20px; background: var(--paper-3); border-left: 3px solid var(--brand); font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.article-status strong { font-weight: 700; }
.article-status button { border: 0; background: transparent; color: var(--brand-dk); cursor: pointer; font-size: 12px; font-weight: 700; white-space: nowrap; min-height: 44px; padding: 8px; }
.article-status button:hover { text-decoration: underline; }
.art-hero figure.banner img { aspect-ratio: 1.85 / 1; }
.article .body { font-size: 17px; line-height: 1.95; }
.article .body > * + * { margin-top: 19px; }
.art-side { top: 25px; }
.side-box { background: transparent; padding: 16px 0; border: 0; border-top: 2px solid var(--ink); margin-bottom: 11px; }
.side-box h2 { color: var(--brand); font-size: 11px; }
.source-panel { margin-top: 48px; scroll-margin-top: 20px; }
.source-panel h2 { font-size: 25px; }
.source-status { color: var(--ink-2); }
.source-panel li { padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.section-cover { background: var(--paper); border-top: 3px solid var(--ink); border-bottom: 1px solid var(--rule-dk); padding: 25px 30px 24px; margin-bottom: 25px; }
.section-cover .sec-head { display: block; border: 0; padding: 0; margin: 0; }
.section-cover .sec-title { font-size: 41px; margin: 9px 0; }
.section-cover .sec-dek { font-size: 16px; max-width: 54em; }
.section-cover .sec-more { display: block; margin: 15px 0 0; color: var(--muted); }
.srch-head { border-top: 3px solid var(--ink); margin-top: 20px; }
.srch-head h1 { font-size: 38px; }
.facet { border-radius: 0; padding: 6px 12px; }
.foot { border-top-width: 2px; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 23px; }
  .hero-side { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 25px; }
  .hero-side-title { grid-column: 1 / -1; }
  .briefing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .briefing-grid a:nth-child(2) { border-right: 0; margin-right: 0; }
  .briefing-grid a:nth-child(-n+2) { border-bottom: 1px solid #55585b; }
  .briefing-grid a:last-child { border-bottom: 0; }
  .hlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article { grid-template-columns: 1fr; gap: 0; }
  .art-side { position: static; margin-top: 35px; }
}
@media (max-width: 680px) {
  :root { --gut: 16px; --gap: 24px; }
  .mast-inner { flex-direction: row; align-items: center; padding: 10px var(--gut) 6px; }
  .brand-zh { font-size: 23px; }
  .brand-en { font-size: 8px; letter-spacing: .26em; }
  .brand-tag, .mast-date { display: none; }
  .mast-tools { margin: 0; }
  .tbtn { min-width: 42px; min-height: 42px; padding: 6px 7px; border-color: var(--rule); }
  .mast-search { padding-bottom: 8px; }
  .mast-search form { width: 100%; }
  .mast-search input, .mast-search button { min-height: 44px; }
  .nav a { min-height: 44px; padding: 10px 13px; }
  .nav .nav-tag { display: none; }
  .front { padding-top: 13px; }
  .edition-ribbon { gap: 4px 12px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 19px; }
  .edition-label { gap: 9px; }
  .edition-label strong { font-size: 16px; }
  .edition-window { display: none; }
  .edition-link { margin-left: auto; font-size: 11px; }
  .hero-main h2 { font-size: 33px; line-height: 1.23; }
  .hero-main .hm-body { padding: 14px 0 18px; }
  .hero-main .sf { font-size: 14.5px; -webkit-line-clamp: 3; }
  .hero-img { aspect-ratio: 1.9 / 1; }
  .hero-side { grid-template-columns: 1fr; }
  .hero-side-title { padding-top: 12px; }
  .hs-item { padding: 13px 0 14px; }
  .hs-item h3 { font-size: 18px; }
  .hs-item p { display: none; }
  .briefing { padding: 17px 16px 18px; margin-top: 24px; }
  .briefing-grid { grid-template-columns: 1fr; }
  .briefing-grid a { border-right: 0; border-bottom: 1px solid #55585b; margin-right: 0; padding: 13px 0; }
  .briefing-grid a:last-child { border-bottom: 0; }
  .briefing-grid strong { font-size: 15px; margin-top: 4px; }
  .briefing-arrow { position: absolute; right: 0; bottom: 12px; }
  .section-intro { font-size: 24px; }
  .hlist { grid-template-columns: 1fr; }
  .hrow h3 { font-size: 18px; }
  .art-head h1 { font-size: 32px; }
  .art-sf { font-size: 16px; }
  .article-status { align-items: flex-start; }
  .article-status button { white-space: normal; text-align: right; }
  .article .body { font-size: 16px; }
  .section-cover { padding: 18px; }
  .section-cover .sec-title { font-size: 33px; }
  .srch-head h1 { font-size: 31px; }
}
@media (max-width: 380px) {
  .brand-zh { font-size: 20px; }
  .mast-tools { gap: 2px; }
  .tbtn { min-width: 38px; padding: 5px; }
  .edition-label strong { font-size: 14px; }
  .hero-main h2 { font-size: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-img img, .hrow, .hrow h3 { transition: none; }
  .hero-main:hover .hero-img img { transform: none; }
}