/* activity.html - the Discord Activity, in the Signal reading layout
   (signal-read.css). The four moments read top to bottom in the article
   column: the words, then the screen they describe. */

.act-section { padding: 36px 0 24px; border-top: 1px solid var(--line); }
.act-section h2 { margin: 0 0 18px; font-size: 27px; line-height: 1.2; }
.act-moment { display: grid; gap: 22px; padding: 36px 0; border-top: 1px solid var(--line); }
.act-moment:first-child { padding-top: 12px; border-top: 0; }
.act-n { display: inline-block; margin-bottom: 10px; font: 650 11px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.act-say h3 { margin: 0 0 12px; font-size: 22px; line-height: 1.25; }
.act-say p { max-width: 62ch; margin: 0 0 12px; font-size: 15px; line-height: 1.8; color: var(--muted); }
.act-say p:last-child { margin-bottom: 0; }
.act-say a:not([class]) { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
.act-fig { margin: 0; }
.act-fig figcaption { max-width: 62ch; margin-top: 12px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.act-fig-inline { margin-top: 20px; }
.act-fig-inline .act-shot { max-width: 320px; }