/* Specimen cards (set as newspaper notices), the carbon slip, and the page clippings. */
.moments .standfirst { margin-top: 12px; max-width: 40ch; }
.mo-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 24px 0 14px; border: 1px solid var(--ink); }
.mo-tabs[hidden] { display: none; }
.mo-tabs button {
  min-height: 48px; padding: 8px 10px; text-align: left; background: transparent; border: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
  font-weight: 600; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; box-shadow: inset 0 -3px 0 transparent;
  transition: color 140ms var(--ease-out), box-shadow 140ms var(--ease-out), background-color 140ms var(--ease-out);
}
.mo-tabs button:nth-child(-n+2) { border-top: 0; }
.mo-tabs button:nth-child(odd) { border-left: 0; }
.mo-tabs button[aria-selected="true"] { color: var(--ledger-red); box-shadow: inset 0 -3px 0 var(--ledger-red); background: var(--newsprint-deep); }
.mo-cards { margin-top: 24px; }
.mo-tabs + .mo-cards { margin-top: 0; }
.card { border: 1px solid var(--ink); outline: 1px solid var(--ink); outline-offset: -5px; padding: 24px 20px 12px; margin-bottom: 20px; background: rgb(255 255 255 / 0.2); }
.mo-tabs + .mo-cards .card { margin-bottom: 0; }
.card h3 { font-size: clamp(1.5rem, 6vw, 2rem); }
.rule-line { margin: 6px 0 16px; font-style: italic; font-weight: 600; color: var(--ledger-red); font-size: 1.125rem; line-height: 1.3; }
.card dl > div { padding: 11px 0 12px; border-top: 1px solid var(--rule); }
.card dt { font-weight: 600; font-size: var(--fs-label); letter-spacing: 0.12em; color: var(--ink-soft); }
.card dd { margin-top: 3px; line-height: 1.4; }
.card .say dd { margin-top: 5px; padding-left: 12px; border-left: 3px solid var(--ledger-red); font-size: 1.25rem; font-weight: 600; line-height: 1.3; font-variation-settings: "opsz" 24; }
.carbon { margin-top: 20px; padding: 16px 18px 18px; background: var(--newsprint-deep); border: 1px dashed var(--ink-soft); }
.cb-h { font-weight: 600; font-size: var(--fs-label); letter-spacing: 0.12em; color: var(--ledger-red); }
.cb-p { margin-top: 6px; font-style: italic; font-size: 1rem; line-height: 1.4; }
.cb-blank { display: grid; grid-template-columns: auto 1fr; gap: 14px 10px; margin-top: 14px; font-weight: 600; font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; }
.cb-blank i { align-self: end; height: 1.2em; border-bottom: 1px solid var(--ink); }
.mo-cap { margin-top: 16px; max-width: 60ch; }
/* page clippings: real pages of the file, framed as cut-outs */
.clips { display: grid; grid-auto-flow: column; grid-auto-columns: 58%; gap: 18px; margin: 20px calc(var(--gut) * -1) 0; padding: 8px var(--gut) 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.clips li { scroll-snap-align: start; }
.sheet { display: block; width: 100%; padding: 0; background: none; border: 0; text-align: left; }
.sh-img { position: relative; display: block; aspect-ratio: 720 / 1442; padding: 5px; background: var(--newsprint-deep); outline: 1px dashed var(--ink-soft); outline-offset: 4px; }
.sh-img img { width: 100%; height: 100%; object-fit: cover; background: var(--newsprint); box-shadow: 0 6px 16px rgb(23 21 18 / 0.14); }
.hero-clip .sh-img { padding: 0; outline: 0; }
.sh-cap { display: block; margin-top: 12px; font-style: italic; font-size: var(--fs-cap); line-height: 1.3; }
.sheet:active .sh-img img { opacity: 0.85; }
@media (hover: hover) and (pointer: fine) { .sheet:hover .sh-cap { text-decoration: underline; text-underline-offset: 3px; } .mo-tabs button:hover { color: var(--ledger-red); } }
@media (min-width: 768px) {
  .mo-tabs { grid-template-columns: repeat(4, 1fr); }
  .mo-tabs button { border-top: 0 !important; border-left: 1px solid var(--rule) !important; }
  .mo-tabs button:first-child { border-left: 0 !important; }
  .card dl > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 16px; }
  .card dd { margin-top: 0; }
  .card { padding: 32px 36px 16px; }
}
@media (min-width: 1024px) {
  .moments { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .moments > * { grid-column: 1 / -1; }
  .moments .mo-tabs, .moments .mo-cards { grid-column: 1 / 9; }
  .moments .carbon { grid-column: 9 / 13; grid-row: 6; margin-top: 0; }
  .clips { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto; gap: var(--gap); margin-inline: 0; padding: 8px 0 0; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) { .mo-tabs button { transition: none; } }