* { box-sizing: border-box }
body { margin: 0; background: #ffffff; color: #16191b; font: 16px/1.85 Arial, "Microsoft YaHei", sans-serif }
.wrap { width: min(1160px, calc(100% - 48px)); margin-inline: auto }
a { color: #295b91; text-decoration: none }

.bar { background: #111315; color: #eee }
nav { display: flex; align-items: center; gap: 20px; font-size: 14px }
.bar nav { min-height: 40px }
nav a, .masthead a, .cards a, .crumb a { color: inherit; text-decoration: none }
.masthead { text-align: center; padding: 25px 12px 52px }
.masthead a { font-size: 22px; font-weight: 700 }
.masthead p { margin: 9px 0 0; font-size: 14px; color: #42474a }
.menu { position: relative; display: flex; justify-content: center }
.menu a { padding-bottom: 12px; border-bottom: 2px solid transparent }
.menu a[aria-current] { border-color: currentColor; font-weight: bold }
#search-toggle { position: absolute; right: 0; background: transparent; border: 0; padding: 5px; cursor: pointer }
.lens { display: block; width: 13px; height: 13px; border: 2px solid; border-radius: 50%; position: relative }
.lens::after { content: ""; position: absolute; width: 6px; height: 2px; background: currentColor; transform: rotate(45deg); right: -5px; bottom: -2px }
#search { margin-top: 20px; text-align: right }
main { padding-bottom: 72px }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 76px 42px; padding-top: 92px }
.featured { grid-column: 1 / -1 }
.meta { color: #2f5d89; font-size: 13px; display: flex; gap: 10px; align-items: center }
.meta i, .more::before { display: inline-block; width: 35px; height: 1px; background: currentColor; content: "" }
.cards h2 { font-size: 21px; line-height: 1.45; margin: 7px 0 9px }
.cards p { color: #33383b; margin: 0 0 21px }
.more { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700 }
.crumb { margin: 37px 0 86px; color: #50575d; font-size: 14px }
.narrow { max-width: 770px }
h1 { font-size: 40px; line-height: 1.3; margin: 0 0 20px }
h2 { line-height: 1.45 }
.years { margin-bottom: 14px }
.archive ul { list-style: square; padding-left: 27px; margin-top: 0 }
.byline { font-size: 13px; color: #454b51; margin-bottom: 32px }
.category { display: inline-block; padding: 2px 12px; background: #295b91; color: white }
.author { margin: 46px 0 33px; padding: 20px; border-block: 1px solid #818181 }
.comments { margin-top: 80px }
.comments h2 { font-size: 22px }
.comment { padding: 24px 0; border-bottom: 1px solid #bdbdbd }
.comment time { display: block; font-size: 13px; color: #51585d }
.reply { margin-left: 24px }
.comment button { display: block; margin-left: auto }
#comment-form { margin-top: 30px; display: grid; gap: 10px }
input, textarea, button { font: inherit }
textarea, input { max-width: 100%; padding: 6px 9px }
textarea { display: block; width: 100%; min-height: 105px }
#comment-form button { justify-self: start }
@media (max-width: 800px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 50px 28px } }
@media (max-width: 520px) { .wrap { width: calc(100% - 32px) } nav { gap: 14px } .menu { justify-content: flex-start } .cards { grid-template-columns: 1fr; padding-top: 55px } .crumb { margin-bottom: 44px } h1 { font-size: 32px } }.meta a { color: inherit; text-decoration: none }
.category { text-decoration: none }


.more::before { transition: width 220ms ease }
.more:hover::before, .more:focus-visible::before { width: 53px }
.pagination { border-top: 1px solid #aaa; margin-top: 96px; padding-top: 24px; gap: 24px; font-weight: 700 }
.pagination a { color: #50575d }
@media (prefers-reduced-motion: reduce) { .more::before { transition: none } }
a:is(:hover, :focus-visible) { color: #16191b }
:is(nav, .masthead, .crumb) a:is(:hover, :focus-visible),
.cards a:is(:hover, :focus-visible) { color: #295b91 }
.meta a:is(:hover, :focus-visible) { color: #16191b }
.bar a:is(:hover, :focus-visible) { color: #8cc5ff }
.category:is(:hover, :focus-visible) { background: #16191b; color: white }
#back-to-top {
  position: fixed;
  right: 24px;
  bottom: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #242a30;
  cursor: pointer;
  font-size: 16px;
}
#back-to-top::before {
  content: "";
  display: block;
  width: 14px;
  height: 34px;
  margin: 0 auto 14px;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 24%, 56% 24%, 56% 100%, 44% 100%, 44% 24%, 0 24%);
}
#back-to-top span {
  display: block;
  writing-mode: vertical-rl;
  text-orientation: sideways;
  transform: rotate(180deg);
}
.post-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 24px; margin-top: 64px }
.post-nav a { display: grid; gap: 8px }
.post-nav [rel="prev"] { grid-column: 1; grid-row: 1 }
.post-nav [rel="next"] { grid-column: 2; grid-row: 1; text-align: right }
.post-nav strong { font-size: 22px; line-height: 1.45; overflow-wrap: anywhere }
.post-nav-label { display: flex; align-items: center; gap: 10px }
.post-nav [rel="next"] .post-nav-label { flex-direction: row-reverse }
.post-nav-arrow { display: inline-block; transition: transform 180ms ease }
.post-nav [rel="prev"]:is(:hover, :focus-visible) .post-nav-arrow { transform: translateX(-4px) }
.post-nav [rel="next"]:is(:hover, :focus-visible) .post-nav-arrow { transform: translateX(4px) }
@media (prefers-reduced-motion: reduce) {
  .post-nav-arrow { transition: none }
}
.reading-bar { position: sticky; top: 0; z-index: 10 }
.reading-bar.is-pinned { background: #cbd1d6; color: #16191b }
.reading-bar.is-pinned .menu { min-height: 52px; align-items: center; justify-content: flex-start }
.reading-bar.is-pinned .menu a { padding-bottom: 0; border-bottom: 0 }
.reading-bar.is-pinned #search { margin-top: 0; padding-bottom: 10px }
.reading-bar [hidden] { display: none }
#reading-title { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 700 }
.category-banner {
  background: #b6b9bc;
  box-shadow: 0 0 0 100vmax #b6b9bc;
  clip-path: inset(0 -100vmax);
  padding: 38px 0;
  margin-bottom: 60px;
}
.category-banner h1 { margin: 0 }
.crumb:has(+ .category-archive) { margin-bottom: 38px }
.article-reference { text-decoration: underline; text-underline-offset: 2px }