/* Launch story: the security-note template, with the publication paragraph as the first-screen callout, a two-source figure and a dated timeline. */
/* a two-sentence headline: a wider measure and a capped size keep the lede and the callout in the first screen at desktop width */
article.note-page h1 { font-size: clamp(2.5rem, 4.4vw, 4rem); max-width: 22ch; }
article.note-page .note-dateline { color: var(--wp-muted); font: 400 var(--wp-text-meta)/1.4 var(--wp-font-body); margin: calc(-1 * var(--wp-2)) 0 var(--wp-8); }
/* the news itself (fix published, which versions) beside a Cobalt edge: the reader's answer, not a warning */
article.note-page .note-action { border-left: 4px solid var(--wp-cobalt); margin: var(--wp-8) 0 0; max-width: 36em; padding: var(--wp-1) 0 var(--wp-1) var(--wp-4); }
article.note-page .note-update p { margin: 0; font-size: 1.0625rem; line-height: 1.55; }
/* at desktop width the callout takes the empty column beside the headline; the reading order is unchanged */
@media (min-width: 64rem) {
  article.note-page .results-intro { column-gap: var(--wp-16); display: grid; grid-template-columns: minmax(0, 44rem) minmax(15rem, 1fr); max-width: none; }
  article.note-page .results-intro > * { grid-column: 1; }
  article.note-page .results-intro > .note-action { align-self: start; grid-column: 2; grid-row: 2 / span 4; margin-top: var(--wp-2); }
}
/* the three-step diagram: the tall phone source up to 440 px; the wide source at its own 1040 px where the page allows, so its 14 px labels are not scaled down */
article.note-page .note-figure { margin: var(--wp-12) 0 0; }
article.note-page .note-figure img { display: block; height: auto; max-width: 440px; width: 100%; }
@media (min-width: 60rem) { article.note-page .note-figure img { max-width: 65rem; } }
article.note-page .note-leads li + li, article.note-page .note-steps li + li { margin-top: var(--wp-3); }
article.note-page .note-nobreak { white-space: nowrap; }
article.note-page .note-tz { color: var(--wp-muted); font: 400 var(--wp-text-meta)/1.4 var(--wp-font-body); }
/* the timeline: one rail, a ring per event, the latest event filled; each row ends with the record that proves it */
article.note-page .note-timeline { list-style: none; margin: var(--wp-6) 0 0; max-width: 44em; padding: 0; }
article.note-page .note-timeline li { border-left: 2px solid var(--wp-hair); margin: 0 0 0 7px; padding: 0 0 var(--wp-8) var(--wp-6); position: relative; }
article.note-page .note-timeline li + li { margin-top: 0; }
article.note-page .note-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
article.note-page .note-timeline li::before { background: var(--wp-paper); border: 2px solid var(--wp-ink); border-radius: 50%; content: ""; height: 12px; left: -9px; position: absolute; top: .3em; width: 12px; }
article.note-page .note-timeline li:last-child::before { background: var(--wp-cobalt); border-color: var(--wp-cobalt); }
article.note-page .note-timeline p { margin: 0; }
article.note-page .note-timeline .note-when { font: 500 .875rem/1.4 var(--wp-font-mono); margin-bottom: var(--wp-1); }
article.note-page .note-timeline .note-record { color: var(--wp-muted); font-size: var(--wp-text-meta); margin-top: var(--wp-2); }
/* record links sit in a short label line, not a sentence: a taller hit area with no change to the line */
article.note-page .note-record a { display: inline-block; margin: -.7em 0; padding: .7em 0; }
article.note-page .note-record-label { font: 500 var(--wp-text-cite)/1.2 var(--wp-font-mono); letter-spacing: 0.06em; margin-right: .5em; text-transform: uppercase; }
article.note-page .note-sources { border-top: var(--wp-rule) solid var(--wp-hair); color: var(--wp-muted); padding-top: var(--wp-4); }
/* the offer closes the page after the note, set apart from it */
article.note-page .note-close { margin-top: var(--wp-12); }
article.note-page .note-offer { background: var(--wp-panel); margin: 0; max-width: 40em; padding: var(--wp-4) var(--wp-6); }