/*
  CMS (Article + Listing) Stylesheet
  - Single payload for CMS pages to minimize requests
  - Organized in sections: variables, layout, typography, components, content, listing, pagination
  - Scoped classes prevent bleed to the rest of the site
*/

/* ========== Variables / Design Tokens ========== */
:root {
  --cms-content-max: 72ch;
  --cms-container-max: 1160px;
  --cms-grid-gap: 2rem;
  --cms-side-col: 320px;
  --cms-edge-gap: 0.3rem;
  --cms-leading: 1.75;
  --cms-font-size: 1rem;
  --cms-muted: #6e6e73;
  --cms-text: #1d1d1f;
  --cms-bg: #fbfbfd;
  --cms-surface: #ffffff;
  --cms-surface-subtle: #f5f5f7;
  --cms-border: rgba(0, 0, 0, 0.08);
  --cms-border-strong: rgba(0, 0, 0, 0.14);
  --cms-link: #005fcc;
  --cms-link-hover: #004999;
  --cms-focus: #005fcc;
  --cms-focus-ring: rgba(0, 95, 204, 0.18);
  --cms-cta-bg: #1d1d1f;
  --cms-cta-hover: #000000;
  --cms-cta-text: #ffffff;
  --cms-cta-quiet-bg: #f5f5f7;
  --cms-cta-quiet-hover: #ececef;
  --cms-cta-quiet-text: #1d1d1f;
  --cms-card-bg: color-mix(in oklab, var(--cms-surface-subtle) 88%, var(--cms-surface) 12%);
  --cms-card-bg-strong: color-mix(in oklab, var(--cms-surface) 84%, var(--cms-surface-subtle) 16%);
  --cms-title: var(--cms-text);
  --cms-heading: color-mix(in oklab, var(--cms-text) 96%, var(--cms-link) 4%);
  --cms-body: color-mix(in oklab, var(--cms-text) 92%, #243447 8%);
  --cms-summary: color-mix(in oklab, var(--cms-text) 68%, var(--cms-muted) 32%);
  --cms-panel-title: var(--cms-heading);
  --cms-panel-item-title: color-mix(in oklab, var(--cms-heading) 92%, var(--cms-body) 8%);
  --cms-panel-summary: color-mix(in oklab, var(--cms-text) 60%, var(--cms-muted) 40%);
  --cms-panel-shell-bg: var(--surface-overlay, var(--cms-card-bg-strong));
  --cms-panel-shell-bg-strong: var(--surface-overlay-strong, var(--cms-card-bg-strong));
  --cms-panel-shell-border: var(--color-border, var(--cms-border-strong));
  --cms-panel-separator: color-mix(in oklab, var(--cms-panel-shell-border) 88%, transparent);
  --cms-panel-item-hover-bg: var(--surface-subtle, color-mix(in oklab, var(--cms-link) 10%, var(--cms-surface-subtle)));
  --cms-panel-shadow: var(--shadow-sm, 0 14px 36px rgba(15, 23, 42, 0.08));
  --cms-panel-radius: 8px;
  --cms-panel-item-radius: 4px;
  --cms-control-radius: 4px;
  --cms-card-radius: 8px;
  --cms-panel-blur: var(--backdrop-blur, 20px);
  --cms-panel-item-border: color-mix(in oklab, var(--cms-border) 88%, transparent);
  --cms-panel-item-bg: color-mix(in oklab, var(--cms-bg) 86%, var(--cms-surface-subtle) 14%);
  --cms-related-accent: #1d1d1f;
  --cms-latest-accent: #1d1d1f;
  --cms-hot-accent: #1d1d1f;
  --cms-hub-accent: #1d1d1f;
  --cms-article-hero-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 245, 247, 0.92) 100%);
  --cms-article-hero-border: rgba(0, 0, 0, 0.08);
  --cms-article-hero-shadow: 0 16px 34px rgba(0, 0, 0, 0.06);
  --cms-article-body-bg: rgba(255, 255, 255, 0.86);
  --cms-article-body-border: rgba(0, 0, 0, 0.08);
  --cms-article-body-shadow: 0 14px 30px rgba(0, 0, 0, 0.05);
  --cms-article-brief-bg: rgba(245, 245, 247, 0.78);
  --cms-article-brief-border: rgba(0, 0, 0, 0.08);
  --cms-article-kicker-bg: #f5f5f7;
  --cms-article-kicker-border: rgba(0, 0, 0, 0.08);
  --cms-article-kicker-text: #6e6e73;
  --cms-article-chip-bg: #f5f5f7;
  --cms-article-chip-border: rgba(0, 0, 0, 0.08);
  --cms-article-chip-text: #6e6e73;
  --cms-article-glow-primary: transparent;
  --cms-article-glow-secondary: transparent;
  --cms-article-heading-serif: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --cms-article-rule: rgba(0, 0, 0, 0.08);
  --cms-listing-kicker-bg: #f5f5f7;
  --cms-listing-kicker-border: rgba(0, 0, 0, 0.08);
  --cms-listing-kicker-text: #6e6e73;
  --cms-listing-chip-bg: #f5f5f7;
  --cms-listing-chip-border: rgba(0, 0, 0, 0.08);
  --cms-listing-chip-text: #6e6e73;
  /* 侧栏吸顶距离：基于导航高度留白 */
  --cms-sticky-top: calc(var(--nav-height) + 12px);
}

html[data-theme="dark"] {
  --cms-muted: #d0d9e6;
  --cms-text: #f3f6fb;
  --cms-bg: #0b0f14;
  --cms-surface: #101720;
  --cms-surface-subtle: #0f1720;
  --cms-border: #4f6076;
  --cms-border-strong: #6d829c;
  --cms-link: #8dc0ff;
  --cms-link-hover: #bfdbfe;
  --cms-focus: #bfdbfe;
  --cms-focus-ring: rgba(141, 192, 255, 0.24);
  --cms-cta-bg: #8dc0ff;
  --cms-cta-hover: #bfdbfe;
  --cms-cta-text: #0b1220;
  --cms-cta-quiet-bg: rgba(141, 192, 255, 0.14);
  --cms-cta-quiet-hover: rgba(141, 192, 255, 0.2);
  --cms-cta-quiet-text: #dcecff;
  --cms-card-bg: color-mix(in oklab, var(--cms-bg) 74%, var(--cms-border) 26%);
  --cms-card-bg-strong: color-mix(in oklab, var(--cms-bg) 80%, var(--cms-border) 20%);
  --cms-title: #ffffff;
  --cms-heading: #f3f8ff;
  --cms-body: #dce6f0;
  --cms-summary: #c1cede;
  --cms-panel-title: #edf4fb;
  --cms-panel-item-title: #e3edf7;
  --cms-panel-summary: #c7d3e2;
  --cms-panel-shell-bg: color-mix(in oklab, var(--surface-overlay, rgba(26, 26, 26, 0.5)) 94%, var(--cms-bg) 6%);
  --cms-panel-shell-bg-strong: color-mix(in oklab, var(--surface-overlay-strong, rgba(26, 26, 26, 0.8)) 92%, var(--cms-bg) 8%);
  --cms-panel-shell-border: color-mix(in oklab, var(--color-border, rgba(255, 255, 255, 0.1)) 100%, rgba(255, 255, 255, 0.08));
  --cms-panel-separator: color-mix(in oklab, var(--cms-panel-shell-border) 96%, transparent);
  --cms-panel-item-hover-bg: var(--surface-hover, rgba(141, 192, 255, 0.1));
  --cms-panel-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  --cms-panel-item-border: color-mix(in oklab, var(--cms-border) 92%, rgba(255, 255, 255, 0.08));
  --cms-panel-item-bg: color-mix(in oklab, var(--cms-bg) 74%, var(--cms-border) 26%);
  --cms-related-accent: #f5f5f7;
  --cms-latest-accent: #f5f5f7;
  --cms-hot-accent: #f5f5f7;
  --cms-hub-accent: #f5f5f7;
  --cms-article-hero-bg: linear-gradient(180deg, rgba(20, 26, 44, 0.95) 0%, rgba(10, 13, 25, 0.98) 100%);
  --cms-article-hero-border: rgba(255, 255, 255, 0.14);
  --cms-article-hero-shadow: 0 28px 80px rgba(0, 0, 0, 0.36);
  --cms-article-body-bg: linear-gradient(180deg, rgba(14, 18, 30, 0.98) 0%, rgba(9, 12, 21, 0.98) 100%);
  --cms-article-body-border: rgba(255, 255, 255, 0.12);
  --cms-article-body-shadow: 0 22px 60px rgba(0, 0, 0, 0.3);
  --cms-article-brief-bg: linear-gradient(180deg, rgba(18, 23, 38, 0.95) 0%, rgba(10, 13, 25, 0.98) 100%);
  --cms-article-brief-border: rgba(255, 255, 255, 0.12);
  --cms-article-kicker-bg: rgba(255, 255, 255, 0.08);
  --cms-article-kicker-border: rgba(255, 255, 255, 0.14);
  --cms-article-kicker-text: #d2d2d7;
  --cms-article-chip-bg: rgba(255, 255, 255, 0.08);
  --cms-article-chip-border: rgba(255, 255, 255, 0.14);
  --cms-article-chip-text: #d2d2d7;
  --cms-article-glow-primary: transparent;
  --cms-article-glow-secondary: transparent;
  --cms-article-rule: rgba(255, 255, 255, 0.12);
  --cms-listing-kicker-bg: rgba(255, 255, 255, 0.08);
  --cms-listing-kicker-border: rgba(255, 255, 255, 0.14);
  --cms-listing-kicker-text: #d2d2d7;
  --cms-listing-chip-bg: rgba(255, 255, 255, 0.08);
  --cms-listing-chip-border: rgba(255, 255, 255, 0.14);
  --cms-listing-chip-text: #d2d2d7;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --cms-muted: #c0cddd;
    --cms-text: #f3f6fb;
    --cms-bg: #0b0f14;
    --cms-surface: #101720;
    --cms-surface-subtle: #0f1720;
    --cms-border: #3d4b5d;
    --cms-border-strong: #5a6b81;
    --cms-link: #8dc0ff;
    --cms-link-hover: #bfdbfe;
    --cms-focus: #bfdbfe;
    --cms-focus-ring: rgba(141, 192, 255, 0.24);
    --cms-cta-bg: #8dc0ff;
    --cms-cta-hover: #bfdbfe;
    --cms-cta-text: #0b1220;
    --cms-cta-quiet-bg: rgba(141, 192, 255, 0.14);
    --cms-cta-quiet-hover: rgba(141, 192, 255, 0.2);
    --cms-cta-quiet-text: #dcecff;
    --cms-card-bg: color-mix(in oklab, var(--cms-bg) 68%, var(--cms-border) 32%);
    --cms-card-bg-strong: color-mix(in oklab, var(--cms-bg) 82%, var(--cms-border) 18%);
    --cms-title: #ffffff;
    --cms-heading: #f3f8ff;
    --cms-body: #d2deea;
    --cms-summary: #aebfd2;
    --cms-panel-title: #edf4fb;
    --cms-panel-item-title: #e3edf7;
    --cms-panel-summary: #b8c7d8;
    --cms-panel-shell-bg: color-mix(in oklab, var(--surface-overlay, rgba(26, 26, 26, 0.5)) 94%, var(--cms-bg) 6%);
    --cms-panel-shell-bg-strong: color-mix(in oklab, var(--surface-overlay-strong, rgba(26, 26, 26, 0.8)) 92%, var(--cms-bg) 8%);
    --cms-panel-shell-border: color-mix(in oklab, var(--color-border, rgba(255, 255, 255, 0.1)) 100%, rgba(255, 255, 255, 0.08));
    --cms-panel-separator: color-mix(in oklab, var(--cms-panel-shell-border) 96%, transparent);
    --cms-panel-item-hover-bg: var(--surface-hover, rgba(255, 255, 255, 0.08));
    --cms-panel-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
    --cms-panel-item-border: color-mix(in oklab, var(--cms-border) 84%, rgba(255, 255, 255, 0.08));
    --cms-panel-item-bg: color-mix(in oklab, var(--cms-bg) 78%, var(--cms-border) 22%);
    --cms-related-accent: #f5f5f7;
    --cms-latest-accent: #f5f5f7;
    --cms-hot-accent: #f5f5f7;
    --cms-hub-accent: #f5f5f7;
    --cms-article-hero-bg: linear-gradient(180deg, rgba(20, 26, 44, 0.95) 0%, rgba(10, 13, 25, 0.98) 100%);
    --cms-article-hero-border: rgba(255, 255, 255, 0.14);
    --cms-article-hero-shadow: 0 28px 80px rgba(0, 0, 0, 0.36);
    --cms-article-body-bg: linear-gradient(180deg, rgba(14, 18, 30, 0.98) 0%, rgba(9, 12, 21, 0.98) 100%);
    --cms-article-body-border: rgba(255, 255, 255, 0.12);
    --cms-article-body-shadow: 0 22px 60px rgba(0, 0, 0, 0.3);
    --cms-article-brief-bg: linear-gradient(180deg, rgba(18, 23, 38, 0.95) 0%, rgba(10, 13, 25, 0.98) 100%);
    --cms-article-brief-border: rgba(255, 255, 255, 0.12);
    --cms-article-kicker-bg: rgba(255, 255, 255, 0.08);
    --cms-article-kicker-border: rgba(255, 255, 255, 0.14);
    --cms-article-kicker-text: #d2d2d7;
    --cms-article-chip-bg: rgba(255, 255, 255, 0.08);
    --cms-article-chip-border: rgba(255, 255, 255, 0.14);
    --cms-article-chip-text: #d2d2d7;
    --cms-article-glow-primary: transparent;
    --cms-article-glow-secondary: transparent;
    --cms-article-rule: rgba(255, 255, 255, 0.12);
    --cms-listing-kicker-bg: rgba(255, 255, 255, 0.08);
    --cms-listing-kicker-border: rgba(255, 255, 255, 0.14);
    --cms-listing-kicker-text: #d2d2d7;
    --cms-listing-chip-bg: rgba(255, 255, 255, 0.08);
    --cms-listing-chip-border: rgba(255, 255, 255, 0.14);
    --cms-listing-chip-text: #d2d2d7;
  }
}

/* ========== Layout Containers ========== */
.cms-page,
.cms-article-layout {
  color-scheme: light dark;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--cms-container-max);
  margin: 0 auto;
  padding: 1rem;
  text-rendering: optimizeLegibility;
}

@media (min-width: 1024px) {
  .cms-page,
  .cms-article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--cms-side-col);
    gap: var(--cms-grid-gap);
    align-items: start;
  }
  .cms-sidebar-panel {
    grid-column: 2;
  }
  .cms-sidebar-panel > .cms-sidebar-toggle {
    display: none;
  }
  .cms-sidebar-panel > .cms-sidebar-summary {
    display: none;
  }
  .cms-sidebar-panel > .cms-sidebar {
    display: grid;
    margin-top: 0;
    padding-top: 0;
  }
  /* Make the entire sidebar column sticky, so multiple cards do not overlap */
  .cms-sidebar {
    position: sticky;
    top: var(--cms-sticky-top);
  }
}

/* ========== Article Typography / Content ========== */
.cms-article {
  grid-column: 1;
  padding-inline: var(--cms-edge-gap);
}

.cms-article-shell {
  position: relative;
  display: grid;
  gap: 1.15rem;
}

.cms-article-shell::before,
.cms-article-shell::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(18px);
  z-index: 0;
}

.cms-article-shell::before {
  top: 1.4rem;
  right: -4.2rem;
  width: 12rem;
  height: 12rem;
  background: radial-gradient(circle, var(--cms-article-glow-primary) 0%, transparent 70%);
}

.cms-article-shell::after {
  top: 12rem;
  left: -3.5rem;
  width: 10rem;
  height: 10rem;
  background: radial-gradient(circle, var(--cms-article-glow-secondary) 0%, transparent 72%);
}

.cms-article-hero,
.cms-article-body-card {
  position: relative;
  z-index: 1;
}

.cms-article-hero {
  display: grid;
  gap: 1.2rem;
  padding: clamp(1.15rem, 2vw, 1.5rem);
  border: 1px solid var(--cms-article-hero-border);
  border-radius: 8px;
  background: var(--cms-article-hero-bg);
  box-shadow: var(--cms-article-hero-shadow);
  overflow: hidden;
}

.cms-article-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.2rem;
  background: rgba(29, 29, 31, 0.18);
}

.cms-article-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
  gap: 1.25rem;
  align-items: start;
}

.cms-article-hero__grid--solo {
  grid-template-columns: minmax(0, 1fr);
}

.cms-article-hero__copy {
  max-width: 44rem;
}

.cms-article-kicker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  margin-bottom: 0.95rem;
}

.cms-article-kicker,
.cms-article-chip,
.cms-article-brief__label {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
}

.cms-article-kicker {
  color: var(--cms-article-kicker-text);
  background: var(--cms-article-kicker-bg);
  border: 1px solid var(--cms-article-kicker-border);
}

.cms-article-chip {
  color: var(--cms-article-chip-text);
  background: var(--cms-article-chip-bg);
  border: 1px solid var(--cms-article-chip-border);
}

.cms-article header h1,
.cms-listing > header h1 {
  font-size: clamp(1.75rem, 2.4vw + 1rem, 2.5rem);
  line-height: 1.2;
  margin: 0 0 0.75rem 0;
  color: var(--cms-title);
  letter-spacing: 0;
}

.cms-article__title {
  color: var(--cms-title);
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(2.35rem, 5vw, 4rem);
  line-height: 0.94;
  letter-spacing: 0;
  text-wrap: balance;
}

.cms-article__summary {
  margin: 1rem 0 0 0;
  color: var(--cms-summary);
  line-height: 1.72;
  font-size: clamp(1.02rem, 0.5vw + 0.98rem, 1.14rem);
  max-width: var(--cms-content-max);
}

.cms-article-brief {
  display: grid;
  gap: 1rem;
  align-self: stretch;
  padding: 1.15rem 1.15rem 1.05rem;
  border: 1px solid var(--cms-article-brief-border);
  border-radius: 8px;
  background: var(--cms-article-brief-bg);
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.12);
}

.cms-article-brief__label {
  justify-self: start;
  color: var(--cms-article-kicker-text);
  background: color-mix(in oklab, var(--cms-article-kicker-bg) 85%, transparent);
  border: 1px solid color-mix(in oklab, var(--cms-article-kicker-border) 92%, transparent);
  padding-inline: 0.78rem;
}

.cms-article-brief__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--cms-article-rule);
}

.cms-article-brief__meta div {
  display: grid;
  gap: 0.35rem;
}

.cms-article-brief__meta dt {
  margin: 0;
  color: var(--cms-muted);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cms-article-brief__meta dd {
  margin: 0;
  color: var(--cms-heading);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.45;
}

.cms-article-brief__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--cms-link);
  text-decoration: none;
  font-weight: 600;
  line-height: 1.55;
}

.cms-article-brief__link:hover {
  color: var(--cms-link-hover);
}

.cms-article-body-card {
  padding: clamp(1.1rem, 2vw, 1.55rem);
  border: 1px solid var(--cms-article-body-border);
  border-radius: 8px;
  background: var(--cms-article-body-bg);
  box-shadow: var(--cms-article-body-shadow);
}

.cms-article .rich-text,
.cms-article .prose {
  font-size: var(--cms-font-size);
  line-height: var(--cms-leading);
  color: var(--cms-body);
  max-width: var(--cms-content-max);
  margin-inline: auto;
}

.cms-article .rich-text p,
.cms-article .prose p {
  margin: 0 0 1em 0;
  color: var(--cms-body);
}

.cms-article .rich-text h2,
.cms-article .prose h2 {
  font-size: clamp(1.25rem, 1.3vw + 1rem, 1.75rem);
  margin: 2em 0 0.6em;
  line-height: 1.3;
  color: var(--cms-heading);
  letter-spacing: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}
.cms-article .rich-text h3,
.cms-article .prose h3 {
  font-size: clamp(1.125rem, 0.9vw + 1rem, 1.35rem);
  margin: 1.6em 0 0.5em;
  line-height: 1.3;
  color: color-mix(in oklab, var(--cms-heading) 90%, var(--cms-body) 10%);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
}

.cms-article .rich-text ul,
.cms-article .rich-text ol { padding-left: 1.25em; margin: 0 0 1em; }
.cms-article .rich-text li,
.cms-article .prose li {
  margin: 0.25em 0;
  color: var(--cms-body);
}
.cms-article .rich-text strong,
.cms-article .rich-text b,
.cms-article .prose strong,
.cms-article .prose b { color: var(--cms-heading); }

.cms-article .rich-text a { color: var(--cms-link); text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.16em; }
.cms-article .rich-text a:hover { color: var(--cms-link-hover); }
.cms-article .rich-text a:focus-visible {
  outline: 2px solid var(--cms-focus);
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: 0 0 0 4px var(--cms-focus-ring);
}

.cms-article .rich-text img,
.cms-article .rich-text video,
.cms-article .rich-text iframe { max-width: 100%; height: auto; border-radius: var(--cms-control-radius); }

.cms-article .rich-text blockquote {
  margin: 1.25em 0; padding: 0.9em 1.1em; border-left: 4px solid color-mix(in oklab, var(--cms-border-strong) 72%, var(--cms-border) 28%);
  background: color-mix(in oklab, var(--cms-card-bg) 78%, var(--cms-surface) 22%);
  border-radius: 0 var(--cms-control-radius) var(--cms-control-radius) 0;
  color: color-mix(in oklab, var(--cms-body) 88%, var(--cms-summary) 12%);
}

.cms-article .rich-text pre {
  overflow-x: auto; padding: 1em; border-radius: var(--cms-control-radius); background: #0b1220; color: #e5e7eb;
}
.cms-article .rich-text code {
  background: color-mix(in oklab, var(--cms-border) 34%, transparent);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

.cms-article .rich-text table {
  width: 100%; border-collapse: collapse; margin: 1.25em 0; overflow-x: auto; display: block;
}
.cms-article .rich-text th,
.cms-article .rich-text td {
  border: 1px solid var(--cms-border);
  padding: 0.5em 0.75em;
  color: var(--cms-body);
}
.cms-article .rich-text th { background: color-mix(in oklab, var(--cms-border) 20%, transparent); text-align: left; }

.cms-article .rich-text hr { border: 0; border-top: 1px solid var(--cms-border); margin: 2em 0; }
.cms-article .rich-text figure { margin: 1.5em 0; }
.cms-article .rich-text figcaption {
  color: color-mix(in oklab, var(--cms-summary) 88%, var(--cms-muted) 12%);
  font-size: 0.925rem;
  margin-top: 0.5em;
}

/* Safe wrapping for long words/URLs */
.cms-article .rich-text, .cms-article .prose { overflow-wrap: anywhere; word-break: break-word; }

/* ========== Breadcrumbs ========== */
.cms-page .breadcrumbs,
.cms-article-layout .breadcrumbs,
.cms-listing .breadcrumbs { margin: 0 0 1rem 0; font-size: 0.925rem; color: var(--cms-muted); }
.cms-page .breadcrumbs ol,
.cms-article-layout .breadcrumbs ol,
.cms-listing .breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; padding: 0; margin: 0; }
.cms-page .breadcrumbs li,
.cms-article-layout .breadcrumbs li,
.cms-listing .breadcrumbs li { display: inline-flex; align-items: flex-start; min-width: 0; max-width: 100%; }
.cms-page .breadcrumbs li + li:before,
.cms-article-layout .breadcrumbs li + li:before,
.cms-listing .breadcrumbs li + li:before { content: "/"; margin: 0 0.5rem; color: var(--cms-muted); }
.cms-page .breadcrumbs a,
.cms-article-layout .breadcrumbs a,
.cms-listing .breadcrumbs a { color: inherit; text-decoration: none; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.cms-page .breadcrumbs a:hover,
.cms-article-layout .breadcrumbs a:hover,
.cms-listing .breadcrumbs a:hover { color: var(--cms-link); text-decoration: underline; }
.cms-page .breadcrumbs [aria-current="page"],
.cms-article-layout .breadcrumbs [aria-current="page"],
.cms-listing .breadcrumbs [aria-current="page"] { color: var(--cms-heading); font-weight: 600; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }

.cms-article--minimal .cms-article-shell {
  gap: 1.5rem;
}

.cms-article--minimal .cms-article-shell::before,
.cms-article--minimal .cms-article-shell::after {
  display: none;
}

.cms-article--minimal .breadcrumbs {
  margin: 0;
}

.cms-article-header {
  display: grid;
  gap: 0.9rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--cms-article-rule);
}

.cms-article--minimal .cms-article__title {
  max-width: 18ch;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.04;
  letter-spacing: 0;
}

.cms-article--minimal .cms-article__summary {
  margin: 0;
  max-width: 64ch;
  font-size: 1.02rem;
  line-height: 1.7;
}

.cms-article--minimal .cms-article__body {
  padding: 0;
}

.cms-article--minimal .rich-text,
.cms-article--minimal .prose {
  max-width: var(--cms-content-max);
  margin-inline: 0;
}

@media (max-width: 640px) {
  .cms-page .breadcrumbs,
  .cms-article-layout .breadcrumbs,
  .cms-listing .breadcrumbs { font-size: 0.875rem; margin-bottom: 0.85rem; }
  .cms-page .breadcrumbs ol,
  .cms-article-layout .breadcrumbs ol,
  .cms-listing .breadcrumbs ol { gap: 0.2rem 0.35rem; }
  .cms-page .breadcrumbs li + li:before,
  .cms-article-layout .breadcrumbs li + li:before,
  .cms-listing .breadcrumbs li + li:before { margin: 0 0.35rem 0 0; }
}

/* ========== Related / Latest side sections ========== */
.cms-sidebar-panel {
  margin-top: 1rem;
  padding-inline: var(--cms-edge-gap);
  box-sizing: border-box;
}
.cms-sidebar-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.cms-sidebar-summary {
  cursor: pointer;
  display: block;
  border: 1px solid var(--cms-border-strong);
  border-radius: var(--cms-control-radius);
  padding: 0.75rem 0.9rem;
  background: var(--cms-cta-quiet-bg);
  color: var(--cms-cta-quiet-text);
  font-weight: 600;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.cms-sidebar-panel--article .cms-sidebar-summary {
  background: var(--cms-article-hero-bg);
  border-color: var(--cms-article-hero-border);
  color: var(--cms-heading);
  box-shadow: var(--cms-article-body-shadow);
}

.cms-sidebar-panel--article .cms-sidebar-summary:hover {
  border-color: color-mix(in oklab, var(--cms-border-strong) 52%, var(--cms-article-hero-border));
  color: var(--cms-link);
}

.cms-sidebar-summary:hover {
  background: var(--cms-cta-quiet-hover);
  border-color: color-mix(in oklab, var(--cms-border-strong) 70%, var(--cms-border));
}
.cms-sidebar-summary:focus-visible {
  outline: 2px solid var(--cms-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--cms-focus-ring);
}
.cms-sidebar-toggle:checked + .cms-sidebar-summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.cms-sidebar-toggle:not(:checked) ~ .cms-sidebar {
  display: none;
}
.cms-sidebar-toggle:checked ~ .cms-sidebar {
  display: block;
}
.cms-sidebar-panel > .cms-sidebar {
  margin-top: 0.75rem;
}
.cms-sidebar-toggle:checked ~ .cms-sidebar {
  margin-top: 0;
  padding-top: 0.75rem;
}
.cms-sidebar {
  display: grid;
  gap: 1.1rem;
  padding: 0.15rem 0.35rem 0.35rem;
  box-sizing: border-box;
}
.cms-related, .cms-latest, .cms-tags, .cms-popular {
  --cms-panel-accent: var(--cms-related-accent);
  border: 1px solid var(--cms-panel-shell-border);
  border-radius: var(--cms-panel-radius);
  padding: 1rem 1rem 0.55rem;
  margin: 0;
  background: var(--cms-panel-shell-bg);
  backdrop-filter: saturate(180%) blur(var(--cms-panel-blur));
  -webkit-backdrop-filter: saturate(180%) blur(var(--cms-panel-blur));
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--cms-panel-shell-border) 28%, transparent),
    var(--cms-panel-shadow);
  position: relative;
  overflow: hidden;
}

.cms-sidebar-panel--article .cms-related,
.cms-sidebar-panel--article .cms-latest,
.cms-sidebar-panel--article .cms-popular {
  background: var(--cms-surface);
  border-color: var(--cms-border);
  border-radius: var(--cms-panel-radius);
  box-shadow: none;
}
.cms-latest { --cms-panel-accent: var(--cms-latest-accent); }
.cms-popular { --cms-panel-accent: var(--cms-hot-accent); }
.cms-related[data-slot="hub-cta"] { --cms-panel-accent: var(--cms-hub-accent); }
.cms-related h2, .cms-latest h2, .cms-tags h2, .cms-popular h2 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.8rem;
  margin: 0 0 0.25rem 0;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--cms-panel-separator);
  color: var(--cms-panel-title);
  text-transform: uppercase;
  letter-spacing: 0;
}
.cms-related h2::before, .cms-latest h2::before, .cms-tags h2::before, .cms-popular h2::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  flex: 0 0 0.42rem;
  background: var(--cms-panel-accent);
  box-shadow: 0 0 0 0.16rem color-mix(in oklab, var(--cms-panel-accent) 18%, transparent);
}
.cms-sidebar .related-list, .cms-sidebar .latest-list, .cms-sidebar .hot-list { list-style: none; padding: 0; margin: 0; }
.cms-sidebar .related-list li, .cms-sidebar .latest-list li, .cms-sidebar .hot-list li {
  margin: 0;
  border-top: 1px solid var(--cms-panel-separator);
}
.cms-sidebar .related-list li:first-child, .cms-sidebar .latest-list li:first-child, .cms-sidebar .hot-list li:first-child {
  margin-top: 0;
  border-top: 0;
}
.cms-sidebar .related-list a, .cms-sidebar .latest-list a, .cms-sidebar .hot-list a {
  text-decoration: none;
  color: var(--cms-text);
  display: block;
  padding: 0.88rem 0.35rem;
  border: 0;
  border-radius: var(--cms-panel-item-radius);
  background: transparent;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.cms-sidebar .related-list a:hover, .cms-sidebar .latest-list a:hover, .cms-sidebar .hot-list a:hover {
  color: var(--cms-link);
  background: var(--cms-panel-item-hover-bg);
  transform: translateX(2px);
}
.cms-sidebar .related-list a:focus-visible, .cms-sidebar .latest-list a:focus-visible, .cms-sidebar .hot-list a:focus-visible {
  outline: 2px solid var(--cms-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--cms-focus-ring);
}
.cms-sidebar .related-list .title, .cms-sidebar .latest-list .title, .cms-sidebar .hot-list .title {
  display: block;
  font-weight: 600;
  line-height: 1.45;
  color: var(--cms-panel-item-title);
}
.cms-sidebar .related-list .summary, .cms-sidebar .latest-list .summary, .cms-sidebar .hot-list .summary {
  display: block;
  margin-top: 0.32rem;
  color: var(--cms-panel-summary);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cms-listing .cms-related { margin-top: 1rem; }

@media (min-width: 1024px) {
  .cms-sidebar-panel > .cms-sidebar-toggle {
    display: none;
  }
  .cms-sidebar-panel > .cms-sidebar-summary {
    display: none;
  }
  .cms-sidebar-toggle:not(:checked) ~ .cms-sidebar,
  .cms-sidebar-toggle:checked ~ .cms-sidebar {
    display: grid;
  }
  .cms-sidebar-panel > .cms-sidebar {
    margin-top: 0;
    padding-top: 0;
    display: grid;
  }
}

@media (max-width: 1023px) {
  .cms-article-hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cms-article-brief {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .cms-article-shell {
    gap: 0.95rem;
  }

  .cms-article-hero,
  .cms-article-body-card {
    padding: 1rem;
    border-radius: 8px;
  }

  .cms-article__title {
    font-size: clamp(2rem, 8vw, 2.8rem);
  }

  .cms-article-header {
    gap: 0.75rem;
    padding-bottom: 1rem;
  }

  .cms-article-brief__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ========== Listing Page ========== */
.cms-listing { grid-column: 1; }

.cms-listing-shell {
  position: relative;
  display: grid;
  gap: 1.15rem;
}

.cms-listing-shell--minimal {
  gap: 1.5rem;
}

.cms-listing-shell--minimal::before,
.cms-listing-shell--minimal::after {
  display: none;
}

.cms-listing-shell::before,
.cms-listing-shell::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(18px);
  z-index: 0;
}

.cms-listing-shell::before {
  top: 1.4rem;
  right: -4.2rem;
  width: 12rem;
  height: 12rem;
  background: radial-gradient(circle, var(--cms-article-glow-primary) 0%, transparent 70%);
}

.cms-listing-shell::after {
  top: 12rem;
  left: -3.5rem;
  width: 10rem;
  height: 10rem;
  background: radial-gradient(circle, var(--cms-article-glow-secondary) 0%, transparent 72%);
}

.cms-listing-hero,
.cms-listing-empty,
.cms-page .pagination,
.cms-listing .pagination {
  position: relative;
  z-index: 1;
}

.cms-listing-hero {
  display: grid;
  gap: 1.2rem;
  padding: clamp(1.15rem, 2vw, 1.5rem);
  border: 1px solid var(--cms-article-hero-border);
  border-radius: 8px;
  background: var(--cms-article-hero-bg);
  box-shadow: var(--cms-article-hero-shadow);
  overflow: hidden;
}

.cms-listing-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.2rem;
  background: rgba(29, 29, 31, 0.18);
}

.cms-listing-kicker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
}

.cms-listing-kicker,
.cms-listing-chip,
.cms-listing-brief__label,
.cms-listing-section__kicker,
.cms-listing .listing-card__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
}

.cms-listing-kicker,
.cms-listing-section__kicker,
.cms-listing .listing-card__eyebrow {
  color: var(--cms-listing-kicker-text);
  background: var(--cms-listing-kicker-bg);
  border: 1px solid var(--cms-listing-kicker-border);
}

.cms-listing-chip {
  color: var(--cms-listing-chip-text);
  background: var(--cms-listing-chip-bg);
  border: 1px solid var(--cms-listing-chip-border);
}

.cms-listing-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
  gap: 1.25rem;
  align-items: start;
}

.cms-listing-hero__copy {
  max-width: 44rem;
}

.cms-listing__summary {
  margin: 0.95rem 0 0;
  color: var(--cms-summary);
  line-height: 1.72;
  font-size: clamp(1.02rem, 0.5vw + 0.98rem, 1.14rem);
  max-width: 38rem;
}

.cms-listing-brief {
  display: grid;
  gap: 1rem;
  padding: 1.15rem 1.15rem 1.05rem;
  border: 1px solid var(--cms-article-brief-border);
  border-radius: 8px;
  background: var(--cms-article-brief-bg);
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.12);
}

.cms-listing-brief__label {
  justify-self: start;
  color: var(--cms-listing-kicker-text);
  background: color-mix(in oklab, var(--cms-listing-kicker-bg) 85%, transparent);
  border: 1px solid color-mix(in oklab, var(--cms-listing-kicker-border) 92%, transparent);
  padding-inline: 0.78rem;
}

.cms-listing-brief__meta {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--cms-article-rule);
}

.cms-listing-brief__meta div {
  display: grid;
  gap: 0.35rem;
}

.cms-listing-brief__meta dt {
  margin: 0;
  color: var(--cms-muted);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cms-listing-brief__meta dd {
  margin: 0;
  color: var(--cms-heading);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.45;
}

.cms-listing-section__header {
  display: grid;
  gap: 0.75rem;
}

.cms-listing-section__header h2 {
  margin: 0;
  color: var(--cms-heading);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.cms-listing-empty {
  display: grid;
  gap: 0.75rem;
  padding: clamp(1.1rem, 2vw, 1.55rem);
  border: 1px solid var(--cms-article-body-border);
  border-radius: 8px;
  background: var(--cms-article-body-bg);
  box-shadow: var(--cms-article-body-shadow);
}

.cms-listing-empty h2 {
  margin: 0;
  color: var(--cms-heading);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.35rem, 1.6vw, 1.75rem);
  letter-spacing: 0;
}

.cms-listing-empty p {
  margin: 0;
  color: var(--cms-summary);
  line-height: 1.65;
}

.cms-listing .listing-items { list-style: none; margin: 1rem 0 0; padding: 0; }
.cms-listing .listing-items li {
  border: 1px solid var(--cms-article-body-border);
  background: var(--cms-article-brief-bg);
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.cms-listing .listing-items li + li { margin-top: 0.75rem; }

@media (min-width: 720px) {
  .cms-listing .listing-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .cms-listing .listing-items li + li { margin-top: 0; }
}

@media (min-width: 1200px) {
  .cms-listing .listing-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cms-listing .listing-items a { text-decoration: none; color: inherit; display: block; }
.cms-listing .listing-items a:focus-visible {
  outline: 2px solid var(--cms-focus);
  outline-offset: 3px;
  border-radius: var(--cms-control-radius);
  box-shadow: 0 0 0 4px var(--cms-focus-ring);
}
.cms-listing .listing-items li:hover {
  border-color: color-mix(in oklab, var(--cms-border-strong) 48%, var(--cms-article-body-border));
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
}
.cms-listing .listing-card__media {
  display: block;
  margin: -0.15rem -0.15rem 0.85rem;
  border-radius: var(--cms-control-radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: color-mix(in oklab, var(--cms-border) 18%, transparent);
}
.cms-listing .listing-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cms-listing .listing-card__content {
  display: grid;
  gap: 0.55rem;
}

.cms-listing h1 {
  margin: 0;
  color: var(--cms-title);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(2.15rem, 4.5vw, 3.6rem);
  line-height: 0.96;
  letter-spacing: 0;
  text-wrap: balance;
}

.cms-listing-header {
  display: grid;
  gap: 0.9rem;
}

.cms-listing-header .breadcrumbs {
  margin: 0;
}

.cms-listing-header__copy {
  display: grid;
  gap: 0.9rem;
  max-width: 44rem;
}

.cms-listing .listing-card__content h2 { font-size: 1.125rem; line-height: 1.35; margin: 0; color: var(--cms-heading); }
.cms-listing p { margin: 0; color: var(--cms-summary); }
.cms-listing__summary { margin: 0; }

/* ========== Pagination ========== */
.cms-page .pagination,
.cms-listing .pagination { margin: 1.25rem 0 0; }
.cms-page .pagination ul,
.cms-listing .pagination ul { list-style: none; display: flex; gap: 0.5rem; padding: 0; margin: 0; }
.cms-page .pagination a,
.cms-listing .pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.55rem 0.9rem;
  border-radius: var(--cms-control-radius);
  border: 1px solid var(--cms-border-strong);
  background: var(--cms-cta-quiet-bg);
  color: var(--cms-cta-quiet-text);
  text-decoration: none;
  font-weight: 600;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.cms-page .pagination a:hover,
.cms-listing .pagination a:hover {
  color: var(--cms-cta-text);
  background: var(--cms-cta-bg);
  border-color: var(--cms-cta-bg);
}
.cms-page .pagination a:focus-visible,
.cms-listing .pagination a:focus-visible {
  outline: 2px solid var(--cms-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--cms-focus-ring);
}

@media (max-width: 1023px) {
  .cms-listing-hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .cms-listing-shell {
    gap: 0.95rem;
  }

  .cms-listing-hero,
  .cms-listing-empty {
    padding: 1rem;
    border-radius: 8px;
  }

  .cms-listing h1 {
    font-size: clamp(1.95rem, 8vw, 2.7rem);
  }
}

/* ========== Motion preferences ========== */
@media (prefers-reduced-motion: reduce) {
  .cms-page a,
  .cms-page button,
  .cms-page input,
  .cms-page textarea,
  .cms-page select,
  .cms-page [class^="cms-"],
  .cms-page [class*=" cms-"],
  .cms-article-layout a,
  .cms-article-layout button,
  .cms-article-layout input,
  .cms-article-layout textarea,
  .cms-article-layout select,
  .cms-article-layout [class^="cms-"],
  .cms-article-layout [class*=" cms-"] {
    animation: none !important;
    transition: none !important;
  }
}