/* Shared page-heading typography. Deliberately excludes the whiteboard,
   statement/Markdown content, code editors and all navigation/data behavior.
   System UI fonts are used locally: no cartoon face or remote font request. */
html:not(.page--gespoj_whiteboard) {
  --sz-heading-font: "Segoe UI", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --sz-heading-ink: #203e58;
  --sz-heading-muted: #617c92;
}

/* Higher specificity than per-template styles, including the former cartoon
   rules. Keep the rest of each page's font-family and code font untouched. */
html:not(.page--gespoj_whiteboard) body :is(
  .cj-hero, .cs-hero, .lp-hero, .sk-hero, .cr-hero, .st-hero,
  .sz-wrongbook-hero, .cm-hero, .ca-hero, .ht-hero, .uc-hero,
  .lc-circle-head, .ce-head, .css-head, .csps-classroom-head,
  .formal-hero, .fm-head, .pp-list-hero, .pb-list-hero, .ps-hero,
  .pp-result-hero, .csp-list-hero, .lg-record-banner, .hte-head,
  .sz-hero__copy, .sz-home-hero__copy
) {
  font-family: var(--sz-heading-font) !important;
}

html:not(.page--gespoj_whiteboard) body :is(
  .cj-hero, .cs-hero, .lp-hero, .sk-hero, .cr-hero, .st-hero,
  .sz-wrongbook-hero, .cm-hero, .ca-hero, .ht-hero, .uc-hero,
  .lc-circle-head, .ce-head, .css-head, .csps-classroom-head,
  .formal-hero, .fm-head, .pp-list-hero, .pb-list-hero, .ps-hero,
  .pp-result-hero, .csp-list-hero, .lg-record-banner, .hte-head,
  .sz-hero__copy, .sz-home-hero__copy, .pb-top, .pp-top, .htutor-title
) h1,
html:not(.page--gespoj_whiteboard) body :is(
  .section__header > .section__title, .dr-lg-title, .dr-top__title,
  .ex-top__title, .formal-title, .immersive--center h1, .fmr > h1,
  .fme > section > h1, .ff-code__head h1, #sz-formal-feature-title,
  #sz-exam-title, .formal-hub__head h1, .formal-final__head h1, .ce-shell h1
) {
  font-family: var(--sz-heading-font) !important;
  font-weight: 700 !important;
  font-style: normal;
  letter-spacing: .025em !important;
  line-height: 1.4 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

html:not(.page--gespoj_whiteboard) body :is(#sz-exam-title, .formal-hub__head h1) {
  font-size: clamp(28px, 2.45vw, 36px) !important;
}
/* Landing pages share a calm, generous title scale. */
html:not(.page--gespoj_whiteboard) body :is(
  .cj-hero, .cs-hero, .lp-hero, .sk-hero, .st-hero,
  .sz-wrongbook-hero, .css-head, .sz-hero__copy
) h1,
html:not(.page--gespoj_whiteboard) body #sz-formal-feature-title {
  font-size: clamp(28px, 2.45vw, 36px) !important;
  margin-block: 14px 14px;
}

/* Working/detail pages use the same type but reserve more room for content. */
html:not(.page--gespoj_whiteboard) body :is(
  .cr-hero, .cm-hero, .ca-hero, .ht-hero, .uc-hero, .lc-circle-head,
  .ce-head, .formal-hero, .fm-head, .pp-list-hero, .pb-list-hero,
  .ps-hero, .pp-result-hero, .csp-list-hero, .lg-record-banner, .hte-head
) h1 {
  font-size: clamp(25px, 2.05vw, 30px) !important;
  margin-bottom: 12px;
}

/* Keep correctness/status colors and dark-theme colors on non-hero headers. */
html:not(.page--gespoj_whiteboard):not(.theme--dark) body :is(
  .cj-hero, .cs-hero, .lp-hero, .sk-hero, .cr-hero, .st-hero,
  .sz-wrongbook-hero, .cm-hero, .ca-hero, .ht-hero, .uc-hero,
  .lc-circle-head, .ce-head, .css-head, .csps-classroom-head,
  .formal-hero, .fm-head, .pp-list-hero, .pb-list-hero, .ps-hero,
  .csp-list-hero, .lg-record-banner, .hte-head
) h1 { color: var(--sz-heading-ink) !important; }

html:not(.page--gespoj_whiteboard) body :is(
  .cj-hero, .cs-hero, .lp-hero, .sk-hero, .st-hero,
  .sz-wrongbook-hero, .cm-hero, .ca-hero, .ht-hero, .uc-hero
) > p,
html:not(.page--gespoj_whiteboard) body :is(
  .cj-hero, .st-hero, .sz-wrongbook-hero, .cm-hero, .uc-hero
) > div > p,
html:not(.page--gespoj_whiteboard) body :is(
  .cr-subtitle, .sz-hero__lead, .ca-hero .ca-muted, .ht-hero .ht-muted
) {
  font-family: var(--sz-heading-font) !important;
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .02em;
  text-wrap: pretty;
}

html:not(.page--gespoj_whiteboard):not(.theme--dark) body :is(
  .cj-hero, .cs-hero, .lp-hero, .sk-hero, .cr-hero,
  .st-hero, .sz-wrongbook-hero, .cm-hero, .uc-hero
) p { color: var(--sz-heading-muted); }

/* Small context labels complement the heading instead of competing with it. */
html:not(.page--gespoj_whiteboard) body :is(
  .cj-tag, .cs-tag, .lp-tag, .sk-tag, .st-tag, .cm-eyebrow,
  .uc-eyebrow, .sz-wrongbook-hero__eyebrow, .lc-circle-back,
  .sk-hero a, .lc-circle-head h1 small
) {
  font-family: var(--sz-heading-font) !important;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: .04em;
  text-shadow: none;
}
html:not(.page--gespoj_whiteboard):not(.theme--dark) body :is(
  .cj-tag, .cs-tag, .lp-tag, .sk-tag, .st-tag
) {
  background: #eaf3fa;
  color: #4d7797;
  border: 1px solid #d7e7f2;
  border-radius: 8px;
  padding: 5px 10px;
}

@media(max-width:600px) {
  html:not(.page--gespoj_whiteboard) body :is(
    .cj-hero, .cs-hero, .lp-hero, .sk-hero, .st-hero, .sz-wrongbook-hero
  ) { padding: 24px; }
  html:not(.page--gespoj_whiteboard) body :is(
    .cj-hero, .cs-hero, .lp-hero, .sk-hero, .st-hero, .sz-wrongbook-hero
  ) h1 { margin-block: 12px; }
}