/* ES Design System · shared text styles
   One source of truth for headings, labels and notes, modeled on the Workflows page.
   Loaded after each page's own styles, so these win. */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Section headers: Montserrat Bold caps, +80 tracking, Bild Yellow underline */
body main .standard > h2:not(.visually-hidden),
body main .wf-head h2,
body main .intro h2,
body main .principle h2,
body main .notes h3,
body main .std-title {
  display: inline-block;
  margin-bottom: 20px;
  padding-bottom: 8px;
  border-bottom: 3px solid #FFBD00;
  color: #f2f2f2;
  font-size: clamp(19px, 5.4vw, 24px);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
}
body main .principle h2 .dots { color: inherit; }
body main .std-title { margin-top: 56px; }

/* Headings inside cards keep the card's ink color, same size as section headers */
body main .card h2:not(.visually-hidden) {
  font-size: clamp(19px, 5.4vw, 24px);
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Labels (rule names, callout tags): small Bild Yellow caps */
body main .rules-list b,
body main .notes li b,
body main .punct-rules b,
body main .format-note b,
body main .mcard h3 b,
body main .markers figcaption b,
body main .aside b,
body main .use-note li b,
body main .folder-example figcaption b {
  display: block;
  margin-bottom: 2px;
  color: #FFBD00;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Rules and notes: regular capitalization, Montserrat Regular, +10 tracking */
body main .rules-list li,
body main .notes li,
body main .punct-rules li {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.55;
  text-transform: none;
}

/* Supporting notes and captions with a yellow edge: same, in gray */
body main .format-note,
body main .mcard h3,
body main .folder-example figcaption {
  color: #9a9a9a;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.55;
  text-transform: none;
}
body main .mcard h3 code,
body main .format-note code { color: #f2f2f2; font-weight: 600; }

/* Short image captions and labels: small gray caps */
body main .formats figcaption,
body main .set figcaption,
body main .label,
body main .plabel,
body main .colors figcaption {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Format tables: one style for every page, modeled on Date + Time Formats.
   White card, underlined title, all 9 artboards in order, "#N · size" under each name. */
body main .card.format-table { padding: 24px 22px; border-radius: 26px; background: #fff; color: #221E1F; }
body main .card.format-table h2 {
  display: inline-block; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 3px solid #FFBD00;
  color: #221E1F; font-size: clamp(19px, 5.4vw, 24px); font-weight: 700; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase;
}
body main .format-table .sizes { margin: 0; padding: 0; list-style: none; }
body main .format-table .sizes li { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; }
body main .format-table .sizes .fmt { font-size: 15px; font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; }
body main .format-table .sizes .fmt span { font-weight: 500; text-transform: none; white-space: nowrap; }
body main .format-table .sizes .lead { flex: 1; min-width: 16px; border-bottom: 2px dotted rgba(34, 30, 31, 0.55); transform: translateY(-4px); }
body main .format-table .sizes .val { font-size: 15px; font-weight: 700; white-space: nowrap; text-transform: none; }
@media (max-width: 560px) {
  body main .format-table .sizes li { padding: 7px 0; }
  body main .format-table .sizes .fmt { min-width: 0; }
  body main .format-table .sizes .fmt span { display: block; font-size: 14px; line-height: 1.3; white-space: normal; }
}
@media (max-width: 360px) {
  body main .card.format-table { padding: 22px 18px; }
  body main .format-table .sizes .fmt { min-width: 0; }
  body main .format-table .sizes .fmt span { white-space: normal; }
}