.journal-hero { isolation: isolate; }

.journal-category-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 10vw, 9rem) clamp(7rem, 13vw, 11rem);
  background: var(--color-brand-soft);
}

.journal-category-hero__layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.68fr) minmax(18rem, 0.32fr);
  gap: var(--space-7);
  align-items: end;
}

.journal-category-hero__layout > div > p,
.journal-heading > p,
.article-related header > p {
  margin-bottom: var(--space-2);
  color: var(--color-ink);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.13em;
}

.journal-category-hero h1 {
  margin: 0;
  color: var(--color-brand-strong);
  font-size: var(--step-4);
}

.journal-category-hero__layout > p {
  margin: 0 0 var(--space-3);
  color: var(--color-ink-muted);
}

.journal-axis {
  pointer-events: none;
}

.journal-axis path {
  fill: none;
  stroke: color-mix(in srgb, var(--color-brand) 45%, transparent);
  stroke-width: 2;
  stroke-dasharray: 4 11;
  stroke-linecap: round;
}

.journal-axis--hero {
  position: absolute;
  right: -2rem;
  bottom: 1rem;
  left: -2rem;
  width: calc(100% + 4rem);
  height: 11rem;
}

.article-related img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.journal-heading h2,
.article-related h2 {
  font-size: var(--step-3);
}

.journal-categories {
  border-block: 1px solid var(--color-line);
  background: var(--color-mist);
}

.journal-categories__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
}

.journal-categories a {
  display: flex;
  min-height: 4.5rem;
  padding: var(--space-2) var(--space-4);
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--color-line);
  position: relative;
  font-size: var(--step-0);
  font-weight: 800;
  text-decoration: none;
}

.journal-categories a::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0.35rem;
  background: var(--color-brand-strong);
  content: "";
  transition: width var(--transition);
}

.journal-categories a:nth-of-type(2)::before { background: var(--color-tiansongpi); }
.journal-categories a:nth-of-type(3)::before { background: var(--color-yulan); }
.journal-categories a:nth-of-type(4)::before { background: var(--color-hongchailin); }
.journal-categories a:hover::before { width: 100%; }
.journal-categories a[aria-current="page"] { background: color-mix(in srgb, var(--color-brand-soft) 55%, transparent); }
.journal-categories a[aria-current="page"]::before { width: 100%; }
.journal-heading {
  position: relative;
  z-index: 2;
  margin-bottom: var(--space-7);
}

.journal-heading h2 {
  max-width: 14ch;
  margin: 0;
}

.journal-pagination {
  display: flex;
  margin-top: var(--space-8);
  gap: var(--space-3);
  align-items: center;
  justify-content: flex-end;
}

.journal-pagination a,
.journal-pagination span {
  display: grid;
  min-width: 3rem;
  min-height: 3rem;
  padding-inline: var(--space-3);
  place-items: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  text-decoration: none;
}

.journal-pagination [aria-current="page"] {
  background: var(--color-brand-strong);
  color: var(--color-white);
}

.journal-category-hero {
  background: color-mix(in srgb, var(--color-tiansongpi) 12%, var(--color-paper));
}

.journal-category-hero__layout > div > p a { color: var(--color-ink); }
.journal-stream--category { background: var(--color-mist); }

.journal-archive-card:focus-within img { transform: scale(1.035); }

.article-hero {
  padding-block: clamp(2.8rem, 5.6vw, 4.9rem);
  overflow: hidden;
  background: var(--color-brand-soft);
}

.article-hero__layout {
  display: grid;
  grid-template-columns: minmax(20rem, 0.7fr) minmax(0, 1fr);
  gap: clamp(2rem, 8vw, 8rem);
  align-items: center;
}

.article-hero h1 {
  margin-bottom: var(--space-4);
  color: var(--color-brand-strong);
  font-size: var(--step-3);
}

.article-hero__copy > p:last-child {
  max-width: 34rem;
  color: var(--color-ink-muted);
}

.article-hero__visual {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0 -6rem 0 0;
}

.article-hero__visual img {
  width: 100%;
  height: 100%;
  border-radius: 58% 42% 0 0 / 45% 55% 0 0;
  object-fit: contain;
}

.article-layout {
  display: grid;
  padding-block: var(--space-8);
  grid-template-columns: minmax(14rem, 16rem) minmax(0, var(--reading));
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
  justify-content: center;
}

.article-toc {
  position: sticky;
  top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 2px solid var(--color-yulan);
}

.article-toc > p {
  font-weight: 800;
}

.article-toc ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

.article-toc li + li { margin-top: var(--space-2); }
.article-toc a { display: block; color: var(--color-ink-muted); font-size: var(--step--1); overflow-wrap: anywhere; text-decoration: none; }
.article-toc a:hover { color: var(--color-ink); }

.article-body {
  width: min(100%, var(--reading));
}

.article-body section { scroll-margin-top: var(--space-4); }
.article-body section + section { margin-top: var(--space-7); }
.article-body h2 { font-size: var(--step-2); }
.article-body section > p { color: var(--color-ink-muted); }

.article-body blockquote {
  width: 100%;
  padding: 0;
  margin: var(--space-7) 0;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font-size: var(--step-1);
  font-weight: 600;
}

.article-body table {
  display: block;
  width: 100%;
  margin-block: var(--space-5);
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--step--1);
}

.article-body caption {
  margin-bottom: var(--space-2);
  color: var(--color-brand-strong);
  font-weight: 800;
  text-align: left;
}

.article-body th,
.article-body td {
  min-width: 9rem;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

.article-body th {
  background: var(--color-mist);
  color: var(--color-brand-strong);
}

.article-related {
  padding-block: 3.15rem;
  background: var(--color-partner);
}

.article-related .container {
  display: block;
}

.article-related header { margin-bottom: var(--space-6); }

.article-related__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}

.article-related__list a {
  display: grid;
  gap: var(--space-3);
  text-decoration: none;
}

.article-related__list a:nth-child(even) { margin-top: var(--space-7); }
.article-related__list a:nth-child(1) img { border-radius: 50%; }
.article-related__list a:nth-child(2) img { border-radius: 62% 38% 56% 44% / 42% 58% 42% 58%; }
.article-related__list a:nth-child(3) img { border-radius: 32% 68% 45% 55% / 61% 39% 61% 39%; }
.article-related span { display: grid; gap: var(--space-1); }
.article-related small { color: var(--color-ink); }
.article-related strong { font-size: var(--step-1); }

@media (max-width: 959px) {
  .journal-category-hero__layout,
  .article-hero__layout {
    grid-template-columns: 1fr;
  }

  .article-hero__visual { margin-right: -2rem; }
  .article-layout { grid-template-columns: 1fr; }
  .article-toc { position: static; }
  .article-toc ol { display: flex; gap: var(--space-2) var(--space-4); flex-wrap: wrap; }
  .article-related__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-related__list a:nth-child(3) { margin-top: 0; }
}

@media (max-width: 639px) {
  .journal-category-hero { padding-block: var(--space-7) var(--space-8); }
  .journal-category-hero__layout { gap: var(--space-4); }
  .journal-categories__inner { grid-template-columns: repeat(2, 1fr); }
  .journal-categories a { min-height: 3.75rem; padding-inline: var(--space-3); }
  .article-hero__layout { gap: var(--space-5); }
  .article-hero__visual { aspect-ratio: 4 / 3; margin-right: -0.625rem; }
  .article-layout { padding-block: var(--space-7); gap: var(--space-6); }
  .article-related { padding-block: 2.45rem; }
  .article-related__list { grid-template-columns: 1fr; }
  .article-related__list a { grid-template-columns: 7rem minmax(0, 1fr); }
  .article-related__list a:nth-child(even),
  .article-related__list a:nth-child(3) { margin-top: var(--space-4); }
}