/* China Truth Archive. The masthead borrows the red-header layout of
   Chinese official documents (红头文件): red Song title, document
   number, red rule with a star; the footer closes with the 版记 block.
   Everything in between stays quiet. */

:root {
  --paper: #ffffff;
  --ink: #222222;
  --red: #c8000f;
  --muted: #666666;
  --faint: #b5b5b5;
  --line: #e4e4e4;
  --wash: #f3f3f1;
  --shade: rgb(0 0 0 / .14);
  --song: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif CJK SC", "Noto Serif SC", "SimSun", serif;
  --hei: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --fang: "STFangsong", "FangSong", "FangSong_GB2312", var(--song);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #151515;
    --ink: #e6e6e6;
    --red: #f04a4a;
    --muted: #a3a3a3;
    --faint: #555555;
    --line: #2e2e2e;
    --wash: #1f1f1f;
    --shade: rgb(0 0 0 / .6);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }

/* Jumps to #main, a day, a story or a table row stop below the sticky nav (about 2.8rem tall). */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 3.25rem; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.6 var(--hei);
}

a { color: var(--red); }
img { max-width: 100%; }
[hidden] { display: none !important; }

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

.skip {
  position: absolute;
  left: 1rem;
  top: -3rem;
  background: var(--ink);
  color: var(--paper);
  padding: .5rem 1rem;
  z-index: 10;
}
.skip:focus { top: 1rem; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Masthead ---------------------------------------------------------------- */

.mast {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(1.75rem, 5vw, 3.25rem) 1rem 0;
  text-align: center;
}

.mast-title {
  display: inline-block;
  color: var(--red);
  font-family: var(--song);
  font-weight: 900;
  font-size: clamp(2.25rem, 8vw, 4.75rem);
  line-height: 1.15;
  letter-spacing: .14em;
  margin-right: -.14em; /* keep the spaced title optically centred */
  text-decoration: none;
}

.mast-no {
  margin: clamp(.75rem, 2vw, 1.25rem) 0 .55rem;
  font-family: var(--fang);
  font-size: 1rem;
  letter-spacing: .04em;
}

.mast-rule {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--red);
}
.mast-rule::before,
.mast-rule::after {
  content: "";
  flex: 1;
  height: 2px;
  background: currentColor;
}
[data-page="home"] .mast-rule::before,
[data-page="home"] .mast-rule::after { animation: rule-draw .7s cubic-bezier(.2, .7, .2, 1) both; }
.mast-rule::before { transform-origin: right center; }
.mast-rule::after { transform-origin: left center; }
.mast-star { flex: none; width: 1.3rem; height: 1.3rem; fill: currentColor; }

@keyframes rule-draw { from { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  [data-page="home"] .mast-rule::before, [data-page="home"] .mast-rule::after { animation: none; }
}

/* The section links stay at the top of the window as the page scrolls. The bar is opaque
   and full width; its border and shadow show only once it is stuck (app.js adds .stuck),
   so the top of the page looks as before. The negative bottom margin cancels the bar's
   padding and border, leaving the gap to the content unchanged. One line at every width:
   on the narrowest phones the links scroll sideways inside the bar. */
.nav {
  position: sticky;
  top: 0;
  z-index: 5; /* above the thumbnails (z-index 1–2), below the skip link */
  display: flex;
  gap: .2rem 1.6rem;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-padding-inline: 40%; /* a focused link scrolls into view; see .filter below */
  margin: .6rem 0 calc(-.3rem - 1px);
  padding: .3rem 1rem;
  background: var(--paper);
  border-bottom: 1px solid transparent;
}
.nav::-webkit-scrollbar { display: none; }
/* Auto margins centre the links but, unlike justify-content: center, fall to zero when
   the row overflows, so the first link can still be scrolled to. */
.nav a:first-child { margin-left: auto; }
.nav a:last-child { margin-right: auto; }
.nav.stuck { border-bottom-color: var(--line); box-shadow: 0 2px 6px -3px var(--shade); }
html:not(.js) .nav { border-bottom-color: var(--line); } /* no script to tell when it is stuck */
.nav a {
  flex: none;
  color: var(--ink);
  text-decoration: none;
  padding: .2rem 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--red); }
.nav a[aria-current="page"] { color: var(--red); border-bottom-color: var(--red); }

/* Page frame -------------------------------------------------------------- */

.main {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem 3rem;
}

.lede { margin: 1.6rem 0 0; }
.lede p { margin: 0 0 .35rem; font-family: var(--song); font-size: 1rem; line-height: 1.7; }
.lede .lede-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
  font-family: var(--hei);
  font-size: .875rem;
  color: var(--muted);
}

.page-title {
  margin: 2.5rem 0 .4rem;
  font-family: var(--song);
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  line-height: 1.3;
  text-wrap: balance;
}
.page-title .dow, .day-head .dow {
  font-family: var(--hei);
  font-weight: 400;
  font-size: .5em;
  color: var(--muted);
  margin-left: .35rem;
}
.rel { font: 400 .5em var(--hei); color: var(--red); margin-left: .5rem; }
.rel:empty { display: none; }
.page-note { color: var(--muted); margin: 0 0 1.5rem; }
.empty { color: var(--muted); padding: 3rem 0; }

.story-meta, .day-count, .lede-meta, .filter, .focus-head p, .topic-strip, .day-topics { font-variant-numeric: tabular-nums; }

/* Topic links ------------------------------------------------------------- */

.topic-strip, .day-topics, .foot-topics {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .9rem;
  margin: .6rem 0 0;
  font-size: .875rem;
  color: var(--muted);
}
.lede .topic-strip { font-family: var(--hei); }
.topic-strip span, .day-topics span { white-space: nowrap; } /* a topic and its count wrap together */
.topic-strip a, .day-topics a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  margin-right: .2rem;
}
.topic-strip a:hover, .day-topics a:hover { color: var(--red); border-color: var(--red); }
.day-topics { margin: -.9rem 0 1.25rem; }

/* Source filter: text tabs like the nav ----------------------------------- */

html:not(.js) [data-filter] { display: none; }
.filter {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem 1.1rem;
  margin: 1.5rem 0 .5rem;
}
.filter-label { font-size: .875rem; color: var(--muted); }
.filter button {
  font: inherit;
  font-size: .9375rem;
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: .3rem 0;
  cursor: pointer;
}
.filter button span { color: var(--muted); margin-left: .25rem; font-size: .8125rem; }
.filter button:hover { color: var(--red); }
.filter button[aria-pressed="true"] { color: var(--red); border-bottom-color: var(--red); }

/* 今日焦点 ----------------------------------------------------------------- */

.focus { margin: 1.75rem 0 2.75rem; }
.focus-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
  padding-bottom: .45rem;
  border-bottom: 2px solid var(--ink);
}
.focus-head h2 { margin: 0; font: 900 1.125rem var(--song); letter-spacing: .3em; color: var(--red); }
.focus-head p { margin: 0; font-size: .875rem; color: var(--muted); white-space: nowrap; }
.focus-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1rem 2rem; align-items: start; }
.focus-body.no-media { grid-template-columns: minmax(0, 1fr); max-width: 46rem; }
.focus-media { display: block; }
.focus-title { margin: 0 0 .45rem; font: 700 clamp(1.375rem, 2.4vw, 1.875rem)/1.35 var(--song); text-wrap: balance; }
.focus-title a { color: inherit; text-decoration: none; }
.focus-title a:hover { color: var(--red); }
.focus-list { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.focus-list li { border-bottom: 1px solid var(--line); }
.focus-list a {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  column-gap: .75rem;
  padding: .5rem 0;
  color: var(--ink);
  text-decoration: none;
  font-size: .9375rem;
  line-height: 1.55;
}
.focus-list a:hover .focus-t { color: var(--red); }
.focus-src { color: var(--muted); font-size: .8125rem; line-height: 1.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.focus-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.focus-more > summary { cursor: pointer; padding: .55rem 0 0; font-size: .875rem; color: var(--red); list-style: none; }
.focus-more > summary::-webkit-details-marker { display: none; }
/* The summary stays when open, so keyboard focus is not lost and the list can be closed again. */
.focus-more[open] .when-closed, .focus-more:not([open]) .when-open { display: none; }
.focus-more[open] > summary { padding-bottom: .55rem; }
.focus-more .focus-list { margin-top: 0; }

/* 【AI 综述】, set like the 【摘要】 paragraph of a 公文: a 黑体 label opening 仿宋 text. */
.focus-ai { margin: .9rem 0 0; }
.ai-text { margin: 0; font: 1.0625rem/1.9 var(--fang); text-align: justify; }
.ai-tag { font: 700 1em/1 var(--hei); }
.ai-note { margin: .35rem 0 0; font-size: .75rem; line-height: 1.6; color: var(--muted); }
.focus-coverage { margin-top: .4rem; }
.focus-coverage .focus-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }

/* Day sections and the story grid ---------------------------------------- */

.day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 2.5rem 0 1.1rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--ink);
}
.day-head h2 {
  margin: 0;
  font-family: var(--song);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.3;
}
.day-head h2 a { color: inherit; text-decoration: none; }
.day-head h2 a:hover { color: var(--red); }
.day-count { margin: 0; font-size: .875rem; color: var(--muted); white-space: nowrap; }

.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  gap: 1.9rem 1.25rem;
}

.story { min-width: 0; scroll-margin-top: 1rem; }
.story-link { display: block; color: inherit; text-decoration: none; }
.story-link:visited .story-title { color: var(--muted); }
.story-link:hover .story-title,
.story-title a:hover { color: var(--red); }
.story:target .story-title { text-decoration: underline 2px var(--red); text-underline-offset: .25em; }

.thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--wash);
  border-radius: 2px;
}
.thumb::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  font-family: var(--song);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .12em;
  color: var(--faint);
  text-align: center;
}
.thumb img,
.thumb iframe,
.thumb video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.thumb video { object-fit: contain; background: #000; }

/* No picture left: a miniature red-header card instead of a grey box.
   Browsers without :has() keep the plain label. */
.thumb:has(img)::after { content: none; }
.thumb:not(:has(img, iframe, video)) { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.thumb:not(:has(img, iframe, video))::after {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 14% 1.4rem;
  color: var(--ink);
  font-size: clamp(.95rem, 1.6vw, 1.15rem);
  letter-spacing: .18em;
  background:
    linear-gradient(var(--red), var(--red)) 50% calc(50% + .9rem) / 38% 2px no-repeat,
    linear-gradient(var(--line), var(--line)) 50% calc(50% + 1.6rem) / 58% 2px no-repeat,
    linear-gradient(var(--line), var(--line)) 50% calc(50% + 2.2rem) / 58% 2px no-repeat;
}

.story-title {
  margin: .6rem 0 .3rem;
  font-family: var(--song);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.story-title a { color: inherit; text-decoration: none; }

.story-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem .8rem;
  margin: 0;
  font-size: .8125rem;
  color: var(--muted);
}
.story-meta a { color: var(--red); }

.also { display: flex; flex-wrap: wrap; gap: .1rem .65rem; margin: .3rem 0 0; font-size: .8125rem; color: var(--muted); }
.also a { color: var(--muted); text-underline-offset: .2em; }
.also a:hover { color: var(--red); }

/* 英文原文: a link of its own after the card's link (links cannot nest), laid over the end of
   the card's meta line, which keeps room for it. On phones, and in browsers without :has(),
   it takes the line below the card instead. */
/* align-content: a card stretched to its row's tallest neighbour must not stretch row 1 and drop the link. */
.story:has(> .story-en) { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.story:has(> .story-en) > :is(.story-link, .story-en) { grid-area: 1 / 1; }
.story:has(> .story-en) > .story-en { align-self: end; justify-self: end; position: relative; }
.story:has(> .story-en) > .story-link .story-meta { padding-right: 5em; }
.focus-list li:has(> .en-link) { display: flex; align-items: baseline; gap: .75rem; }
.focus-list li:has(> .en-link) > a:first-child { flex: 1; min-width: 0; }
.focus-list .en-link { flex: none; display: inline; padding: .5rem 0; font-size: .8125rem; color: var(--red); text-decoration: underline; }

/* Videos ------------------------------------------------------------------ */

.vthumb { padding: 0; border: 0; cursor: pointer; font: inherit; }
.play {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 3.4rem;
  height: 2.3rem;
  transform: translate(-50%, -50%);
  background: var(--red);
  border-radius: .55rem;
}
.play::before {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: .5rem 0 .5rem .85rem;
  border-color: transparent transparent transparent #fff;
}
.vthumb:hover .play, .vthumb:focus-visible .play { background: #e3000f; }

.shelf-section .section-note { color: var(--muted); margin: -.4rem 0 1.1rem; font-size: .9375rem; }

/* Books ------------------------------------------------------------------- */

.books {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
  gap: 0 3rem;
}
.book { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0 1.25rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.book .story-title { margin: 0 0 .3rem; font-size: 1.25rem; }
.cover-link { display: block; }
.cover {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 2px;
}
.cover::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: .75rem;
  font-family: var(--song);
  font-weight: 700;
  font-size: .9rem;
  color: var(--faint);
  text-align: center;
}
.cover:not(:has(img))::after { content: "《" attr(data-label) "》"; color: var(--ink); }
.cover img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.book-note { margin: .35rem 0; font-size: .9375rem; line-height: 1.7; }
.book-licence { margin: .2rem 0; font-size: .8125rem; color: var(--muted); }
.book-actions { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin: .35rem 0 0; font-size: .875rem; }
.book-actions span { color: var(--muted); }

/* Topics ------------------------------------------------------------------ */

.topic-sub { margin: 0 0 1rem; font-family: var(--fang); color: var(--muted); }
.topic-index { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.topic-index li { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.topic-index a { font: 700 1.25rem var(--song); color: var(--ink); text-decoration: none; }
.topic-index a:hover { color: var(--red); }
.topic-index span { margin-left: .75rem; font-size: .875rem; color: var(--muted); }
.topic-index p { margin: .3rem 0 0; color: var(--muted); font-size: .9375rem; }
.older h2 { margin: 2.25rem 0 .5rem; font: 700 1.1rem var(--song); }
.headlines { list-style: none; margin: 0; padding: 0; columns: 2 22rem; column-gap: 2.5rem; }
.headlines li { break-inside: avoid; padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.headlines a:first-child { color: var(--ink); text-decoration: none; }
.headlines a:first-child:hover { color: var(--red); }
.headlines span, .headlines a:last-child { margin-left: .5rem; font-size: .8125rem; color: var(--muted); white-space: nowrap; }
.related { margin: 2rem 0 0; font-size: .9375rem; }
.topic-rest { margin-top: 1.5rem; }

/* Archive calendar -------------------------------------------------------- */

.year h2 {
  margin: 2.5rem 0 1rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--ink);
  font-family: var(--song);
  font-size: 1.6rem;
}
.months {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 1.75rem 2rem;
}
.month { margin: 0; }
.month figcaption { font-family: var(--song); font-weight: 700; font-size: 1.1rem; margin-bottom: .35rem; }
.month figcaption span { font-family: var(--hei); font-weight: 400; font-size: .8125rem; color: var(--muted); margin-left: .5rem; }
.cal { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .875rem; text-align: center; }
.cal th { font-weight: 400; color: var(--muted); padding: .2rem 0; }
.cal td { padding: 2px; }
.cal td a, .cal td span { display: block; padding: .32rem 0; border-radius: 2px; }
.cal td span { color: var(--muted); } /* days without stories: still 4.5:1 */
/* Bold, so a day with stories differs from an empty one by more than its colour and tint. */
.cal td a { color: var(--ink); font-weight: 700; text-decoration: none; }
.cal td a:hover { outline: 1px solid var(--ink); }
.cal .lv1 { background: color-mix(in srgb, var(--red) 14%, transparent); }
.cal .lv2 { background: color-mix(in srgb, var(--red) 32%, transparent); }
.cal .lv3 { background: color-mix(in srgb, var(--red) 80%, transparent); color: #fff; }
.cal .lv4 { background: var(--red); color: #fff; }
/* Keep the day numbers at 4.5:1 or better on the brighter dark-mode red. */
@media (prefers-color-scheme: dark) {
  .cal .lv3 { background: color-mix(in srgb, var(--red) 62%, transparent); color: var(--ink); }
  .cal .lv4 { color: var(--paper); }
}

/* Search ------------------------------------------------------------------ */

.search { max-width: 36rem; margin-bottom: .75rem; }
.search label { display: block; font-size: .875rem; color: var(--muted); margin-bottom: .4rem; }
.search input {
  width: 100%;
  font: inherit;
  font-size: 1.125rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 2px;
  padding: .65rem .85rem;
}
.results { list-style: none; margin: 1rem 0 0; padding: 0; max-width: 46rem; }
.results li { padding: .85rem 0; border-bottom: 1px solid var(--line); }
.results a.r-title { font-family: var(--song); font-weight: 700; font-size: 1.0625rem; color: var(--ink); text-decoration: none; }
.results a.r-title:hover { color: var(--red); }
.results .story-meta { margin-top: .25rem; }
.notice { margin: .2rem 0 .4rem; font: 1.125rem var(--fang); }

/* About, privacy ---------------------------------------------------------- */

.prose { max-width: 42rem; }
.prose p { line-height: 1.85; margin: 0 0 1rem; }
.prose h2 { font-family: var(--song); font-size: 1.3rem; margin: 2.25rem 0 .6rem; }
.prose h3 { margin: 1.5rem 0 .4rem; font: 700 1.05rem var(--song); }
.corrections { margin: 0 0 1rem; padding-left: 1.2rem; }
.table-wrap { overflow-x: auto; margin-bottom: .75rem; }
.sources { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .9375rem; } /* phones scroll it rather than squeeze the text */
.sources th, .sources td { text-align: left; padding: .5rem 1rem .5rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.sources th { color: var(--muted); font-weight: 400; white-space: nowrap; }
.sources td:nth-child(n+3) { white-space: nowrap; }
.sources td:nth-child(4), .sources th:nth-child(4) { text-align: right; }

/* Sharing, paging --------------------------------------------------------- */

.share { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin: 2.5rem 0 0; font-size: .875rem; color: var(--muted); }
.share a { color: var(--muted); }
.share a:hover { color: var(--red); }
.share button { font: inherit; color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--line); padding: 0; cursor: pointer; }

.pager { display: flex; justify-content: space-between; gap: 1rem; margin: 2rem 0 0; }
.pager a { display: flex; flex-direction: column; text-decoration: none; }
.pager a[rel="next"] { text-align: right; }
.pager a span { font-size: .8125rem; color: var(--muted); }
.pager a:hover { text-decoration: underline; }

.more { margin: 3rem 0 0; text-align: center; }
.more a {
  display: inline-block;
  padding: .6rem 1.4rem;
  border: 1px solid var(--red);
  border-radius: 2px;
  text-decoration: none;
}
.more a:hover { background: var(--red); color: var(--paper); }

/* Footer: the 版记 block that closes an official document ----------------- */

.foot {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
  font-size: .8125rem;
  color: var(--muted);
}
.foot p { margin: 0 0 .35rem; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--red); }
.banji { margin: 0 0 1rem; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); font: 1rem var(--fang); color: var(--ink); }
.foot .banji p { margin: 0; padding: .4rem 1em; }
.banji .cc { border-bottom: 1px solid var(--ink); }
.banji .issue { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.foot-topics { margin-top: .5rem; font-size: .8125rem; }

/* Language switch: the nav's last link, quieter than the sections, set off by a thin rule. */
.nav .nav-lang { color: var(--muted); padding-left: 1.1rem; border-left: 1px solid var(--line); border-bottom-color: transparent; }
.nav .nav-lang:hover { color: var(--red); }

/* English edition (/en/): the same page with Latin type. System fonts only: a book serif where the
   Chinese pages use 宋体 and 仿宋, the system sans for 黑体, each falling back to the Chinese faces for
   any Chinese in the text. The spacing that suits Chinese characters is closed up for Latin words. */
html:lang(en) {
  --song: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", "Songti SC", "Noto Serif CJK SC", serif;
  --fang: var(--song);
  --hei: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}
html:lang(en) .mast-title {
  font-weight: 700;
  font-size: clamp(2rem, 7.6vw, 4.25rem); /* 19 characters on one line from 320px up */
  letter-spacing: .01em;
  margin-right: -.01em;
}
html:lang(en) .mast-no { letter-spacing: .02em; }
html:lang(en) .focus-head h2 { letter-spacing: .04em; }
html:lang(en) .thumb::after,
html:lang(en) .thumb:not(:has(img, iframe, video))::after { letter-spacing: .01em; line-height: 1.3; }
html:lang(en) .ai-text { text-align: left; hyphens: auto; }
html:lang(en) .cover:not(:has(img))::after { content: attr(data-label); font-style: italic; }
html:lang(en) .book cite { font-style: italic; }
html:lang(en) .story-title { overflow-wrap: break-word; } /* break inside a word only if it cannot fit */

/* Tablets: the column beside the focus picture is too narrow for one-line titles or
   the AI overview, so only the headline stays beside the picture; the related list,
   or the overview, runs below it at full width, as the coverage list does. */
@media (min-width: 40.0625rem) and (max-width: 64rem) {
  .focus-media + div { display: contents; }
  .focus-body:not(.no-media) { grid-template-rows: auto 1fr; row-gap: 0; }
  .focus-media { grid-row: 1 / 3; }
  .focus-media + div > :is(.focus-title, .story-meta) { grid-column: 2; }
  .focus-media + div > :is(.focus-list, .focus-more, .focus-ai) { grid-column: 1 / -1; }
  .focus-coverage .focus-list { grid-template-columns: minmax(0, 1fr); }
}

/* Phones: news becomes a compact list with the thumbnail beside the title,
   and the source filter scrolls sideways instead of wrapping. */
@media (max-width: 40rem) {
  .grid:has(.story-link) { gap: 1.15rem; }
  .story-link {
    display: grid;
    grid-template-columns: 7.25rem 1fr;
    grid-template-areas: "thumb title" "thumb meta";
    grid-template-rows: auto 1fr;
    column-gap: .85rem;
  }
  .story-link .thumb { grid-area: thumb; aspect-ratio: 4 / 3; }
  .story-link .thumb::after { font-size: .8rem; letter-spacing: .05em; padding: .4rem; }
  .story-link .thumb:not(:has(img))::after {
    font-size: .8rem;
    letter-spacing: .08em;
    padding: 0 8% 1rem;
    background:
      linear-gradient(var(--red), var(--red)) 50% calc(50% + .6rem) / 44% 2px no-repeat,
      linear-gradient(var(--line), var(--line)) 50% calc(50% + 1.1rem) / 64% 2px no-repeat;
  }
  .story-link .story-title { grid-area: title; margin: 0 0 .3rem; font-size: 1rem; }
  .story-link .story-meta { grid-area: meta; align-self: start; }
  .story > .also { margin-left: calc(7.25rem + .85rem); }
  .story:has(> .story-en) > .story-en { grid-area: 2 / 1; justify-self: start; margin: .3rem 0 0 calc(7.25rem + .85rem); }
  .story:has(> .story-en) > .story-link .story-meta { padding-right: 0; }
  .filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: -1rem;
    padding: .3rem 1rem .4rem; /* room for the focus ring, which overflow would clip */
    scrollbar-width: none;
    /* Chrome scrolls a focused button into view only when none of it is in the scrollport,
       so a half-hidden one stayed put. Counting only the middle fifth as the scrollport
       centres any button outside it; a button that reaches it is fully visible. */
    scroll-padding-inline: 40%;
  }
  .filter::-webkit-scrollbar { display: none; }
  .filter button, .filter-label { flex: none; }
  .day-head h2 { font-size: 1.3rem; }
  .nav { gap: .2rem 1.1rem; }
  .focus-body, .focus-list a, .focus-coverage .focus-list { grid-template-columns: minmax(0, 1fr); }
  .focus-media { margin-inline: -1rem; }
  .focus-media .thumb { border-radius: 0; }
  .focus-src { line-height: 1.5; }
  .focus-t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .book { grid-template-columns: 5.5rem minmax(0, 1fr); }
}

/* The narrowest phones (320px): close up the links so all seven still fit on one line. */
@media (max-width: 22.5rem) {
  .nav { gap: .2rem .7rem; padding-inline: .75rem; }
}

/* English words are wider than two-character Chinese labels: below about 560px the seven sections
   and 中文 can't share one line, so the English bar wraps onto two centred lines instead of hiding
   Search and the language switch off the edge. Anchored jumps clear the taller bar. */
@media (max-width: 35rem) {
  html:lang(en) { scroll-padding-top: 5.25rem; }
  html:lang(en) .nav { flex-wrap: wrap; justify-content: center; overflow-x: visible; gap: .1rem 1rem; }
  html:lang(en) .nav a:first-child, html:lang(en) .nav a:last-child { margin-inline: 0; }
  html:lang(en) .nav .nav-lang { padding-left: .8rem; }
}

/* Windows high-contrast mode drops backgrounds; keep state visible with borders. */
@media (forced-colors: active) {
  .nav { border-bottom-color: Canvas; }
  .nav.stuck, html:not(.js) .nav { border-bottom-color: CanvasText; }
  .nav a { border-bottom-color: Canvas; }
  .nav a[aria-current="page"] { border-bottom-color: Highlight; }
  .filter button { border-bottom-color: Canvas; }
  .filter button[aria-pressed="true"] { border-bottom-color: Highlight; text-decoration: underline; }
  .mast-rule::before, .mast-rule::after { background: CanvasText; }
}

/* Print: an A4 公文-style list of headlines with their source URLs. */
@media print {
  @page { size: A4; margin: 37mm 26mm 35mm 28mm; }
  :root { --paper: #fff; --ink: #000; --red: #c8000f; --muted: #444; --line: #999; }
  .skip, .nav, .filter, .pager, .more, .thumb, .focus-media, .focus-more, .also, .share, .foot-links,
  .topic-strip, .day-topics, .foot-topics, .rel, .story-en, .en-link { display: none !important; }
  /* A border, because printing drops backgrounds unless the reader asks for them. */
  .mast-rule::before, .mast-rule::after { animation: none !important; background: none; border-top: 2px solid; }
  .mast, .main, .foot { max-width: none; padding: 0; }
  .grid, .focus-body { display: block; }
  .story-link { display: block !important; padding: .35em 0; border-bottom: .5pt solid #bbb; }
  .story-title { font-size: 11pt; margin: 0; }
  .story-link .story-meta { padding-right: 0 !important; }
  .story-link::after { content: attr(href); display: block; font: 7.5pt/1.35 var(--hei); color: #555; overflow-wrap: anywhere; }
  .story-link[data-url]::after { content: attr(data-url); } /* the address with its Chinese decoded */
  .story, .foot { break-inside: avoid; }
  .day-head { break-after: avoid; }
}