/* sb_a() prints "label&nbsp;<span>→</span>"; keep a small, even gap inside the design's flex link. */
body .sb-blk.sb-timelines .action{gap:0}
body .sb-blk.sb-timelines .action > span[aria-hidden]{margin-left:.15em}
/* Theme link styles removed the design's underline on the action links. */
body .sb-blk.sb-timelines .action{text-decoration:underline;text-underline-offset:4px}
/* The theme forces h1-h6 to the heading font with !important; the design's story titles in looks 1, 6, 8, 12, 13 and 16 use the body font. */
body .sb-blk.sb-timelines :is(.l1, .l6, .l8, .l12, .l13, .l16) .story h3 { font-family: var(--pb-body-font) !important; }
/* Phone: the design's mobile rule sets every date to the h3 size with !important; the extractor's per-look !important rules out-rank it. */
/* TML-12: the design's rules on its dark band are light and solid (the library border token), not the faint ink mix. */
body .sb-timelines .section.dark { --pb-border: color-mix(in srgb, var(--pb-on-dark) 74%, transparent); }
/* Branding text sizes. Kept here so Studio library re-extraction preserves these roles. */
body .sb-timelines { font-size: var(--fs-copy) }
body .sb-timelines h1 { font-size: clamp(calc(var(--fs-titles) * 0.65), 3.75vw, var(--fs-titles)) !important }
body .sb-timelines h2 { font-size: clamp(calc(var(--fs-titles) * 0.65), 3.75vw, var(--fs-titles)) !important }
body .sb-timelines h3 { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) !important }
body .sb-timelines .label { font-size: var(--fs-small-titles-size) !important }
body .sb-timelines .caption { font-size: var(--fs-small) !important }
body .sb-timelines .facts dt { font-size: var(--fs-small) !important }
body .sb-timelines .facts dd { font-size: var(--fs-lead) !important }
body .sb-timelines .note { font-size: var(--fs-small) !important }
body .sb-timelines .date { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) !important }
body .sb-timelines .story h3 { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) !important }
body .sb-timelines .story .action { font-size: var(--fs-small) !important }
body .sb-timelines .moment figcaption { font-size: var(--fs-small) !important }
body .sb-timelines .l1 .story h3 { font-size: var(--fs-titles-small) !important }
body .sb-timelines .l6 .date { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) !important }
body .sb-timelines .l6 .story h3 { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) !important }
body .sb-timelines .l8 .story h3 { font-size: var(--fs-titles-small) !important }
body .sb-timelines .l10 .date { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) !important }
body .sb-timelines .l11 .date { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) !important }
body .sb-timelines .l12 .story h3 { font-size: var(--fs-titles-small) !important }
body .sb-timelines .l13 .story h3 { font-size: var(--fs-titles-small) !important }
body .sb-timelines .l15 .date { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) !important }
body .sb-timelines .l16 .story h3 { font-size: var(--fs-titles-small) !important }
body .sb-timelines .l16 .date { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) !important }
/* 3.6.10 fit pass: TML-05 thumbnail captions sat in the 96px photo column (one word per line); they now run under the
   story. TML-08 gives the milestones more of the row (titles and text wrapped three words per line). TML-12 cards fill
   the row whatever their count (three cards left a fourth column empty). */
@media (min-width: 768px) {
	body:not(.cc-look-pre-3-6-10) .sb-timelines .l5 .milestone:not(:first-child) .moment { display: contents; }
	body:not(.cc-look-pre-3-6-10) .sb-timelines .l5 .milestone:not(:first-child) .moment img { grid-column: 1; grid-row: 2; }
	body:not(.cc-look-pre-3-6-10) .sb-timelines .l5 .milestone:not(:first-child) .moment figcaption { grid-column: 2; grid-row: 3; margin-top: 12px; }
	body:not(.cc-look-pre-3-6-10) .sb-timelines .l5 .milestone:not(:first-child) .story { grid-column: 2; grid-row: 2; }
}
@media (min-width: 1101px) {
	body:not(.cc-look-pre-3-6-10) .sb-timelines .l8 .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 72px; }
	body:not(.cc-look-pre-3-6-10) .sb-timelines .l12 .chronology:not(:has(> :nth-child(4))) { --fit-max: 3; grid-template-columns: repeat(var(--fit-c,3),minmax(0,1fr)); }
	body:not(.cc-look-pre-3-6-10) .sb-timelines .l12 .chronology:not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 3.6.10: four-across looks (01, 07, 12, 13): story titles at Small Titles broke words in narrow cards
   ("convers/ation", TML-12); a title never runs wider than its card. TML-12's own dark band runs edge to edge (the
   theme caps .section at the section width). */
body:not(.cc-look-pre-3-6-10) .sb-timelines :is(.l1, .l7, .l12, .l13) .milestone { container-type: inline-size; }
body:not(.cc-look-pre-3-6-10) .sb-timelines :is(.l1, .l7, .l12, .l13) .story h3 { font-size: min(var(--fs-titles-small), 13cqi) !important; overflow-wrap: normal; }
body:not(.cc-look-pre-3-6-10) .sb-timelines.sb-edge .section { max-width: none; width: 100%; }
/* 3.6.10: on a dark band the soft tint (Branding Fifth) that panels, bands and cards paint turns into the same faint light
   tint as the surface, so the white text the band gives them stays readable (TML-09 printed white on a light tint). */
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-timelines:not(.sb-edge).sb-dark { --pb-tint: color-mix(in srgb, var(--color-white) 8%, transparent); }