/* =====================================================================
   Paper and Ink · essays/the-volunteers-are-not-a-random-sample.css
   "The Volunteers Are Not a Random Sample.": the figure only this dispatch uses.
   Loaded after the shared stylesheets; everything shared lives in css/.
   ===================================================================== */

/* Layout: one 64ch reading column on grained paper; one paper object breaks out to 860px:
   a buyout tally sheet whose gold top half (the count) is finished and whose blue
   bottom half (who said yes) is all question marks (Figure 1).
   Gold = how many leave; blue = who leaves; trait names are plain ink. */

/* ---- footnote markers -------------------------------------------------- */
sup.ref { font-family: var(--sans); font-size: .62em; line-height: 0; margin-left: 1px; }
sup.ref a { text-decoration: none; color: var(--life); padding: 0 1px; }
sup.ref a:hover { text-decoration: underline; }
.sources li:target { color: var(--ink); background: var(--life-soft); }

/* ---- Figure 1: the buyout tally sheet ------------------------------------- */
/* clip sideways overflow so a stamp's starting scale can never widen the page on a phone */
.tallyfig { overflow-x: clip; overflow-clip-margin: 14px; padding-top: 14px; }
.tallyfig .tally {
  position: relative; width: min(100%, 640px); background: var(--noise), var(--sheet); color: var(--slip-ink); padding: 1.3rem 1.4rem 1.2rem;
  transform: rotate(.5deg); font-family: var(--mono); font-size: .76rem; line-height: 1.5;
  box-shadow: 0 1px 1px var(--shadow), 0 10px 24px -12px var(--shadow-deep); animation: fade .6s ease .1s both;
}
.tallyfig .tally::before, .tallyfig .tally::after { content: ""; position: absolute; top: -11px; width: 84px; height: 24px; background: var(--noise), var(--tape); }
.tallyfig .tally::before { left: 30px; transform: rotate(4deg); }
.tallyfig .tally::after { right: 30px; transform: rotate(-5deg); }
.tallyfig .th { font-family: var(--sans); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .7rem; opacity: .8; }
.tallyfig .tsub1 { margin: 0 0 .4rem; opacity: 1; }
.tallyfig .tsub2 { margin: 1.3rem 0 .4rem; color: var(--slip-life); opacity: 1; }
/* the top half: four ledger lines and the first stamp, all in gold */
.tallyfig .ttop { position: relative; color: var(--slip-once); padding-bottom: .9rem; border-bottom: 1.5px dashed color-mix(in srgb, var(--slip-ink) 40%, transparent); }
.tallyfig .tl { display: flex; gap: 6px; max-width: 380px; padding: .12rem 0; }
.tallyfig .tl i { flex: 1; min-width: 12px; border-bottom: 1px dotted currentColor; opacity: .45; transform: translateY(-.4em); }
.tallyfig .tl b { font-weight: 500; }
.tallyfig .stamp.s1 { position: absolute; right: 6px; top: 22px; color: var(--slip-once); transform: rotate(-7deg); animation-delay: .7s; }
/* the bottom half: who said yes, every answer still a question mark */
.tallyfig .trow { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: .8rem; padding: .3rem 0; border-bottom: 1px solid color-mix(in srgb, var(--slip-ink) 22%, transparent); }
.tallyfig .thead { font-family: var(--sans); font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--slip-life); border-bottom: 1.5px solid currentColor; }
.tallyfig .trow .blank { color: var(--graphite); font-family: var(--serif); font-style: italic; font-size: 1.05rem; line-height: 1.2; animation: fade .5s ease 1.6s both; }
.tallyfig .tfoot { display: flex; justify-content: flex-end; margin-top: .8rem; }
.tallyfig .stamp.s2 { color: var(--slip-life); transform: rotate(5deg); animation-delay: 2.4s; }
#fig1 + figcaption .btn { margin-left: 4px; }

/* Phone mode: the tally sheet loses its tilt, the first stamp drops below the ledger lines, and each
   trait row puts the trait on its own line above its answer. Small text stays 11px or more. */
@media (max-width: 560px) {
  .tallyfig .tally { padding: 1.1rem .95rem 1rem; font-size: .72rem; transform: none; }
  .tallyfig .th, .tallyfig .thead { font-size: .7rem; letter-spacing: .08em; }
  .tallyfig .stamp.s1 { position: static; display: table; margin: .7rem 0 0 auto; }
  .tallyfig .trow { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .tallyfig .thead > span:last-child { display: none; }
}