/* =====================================================================
   Paper and Ink · essays/more-papers-do-not-prove-more-discovery.css
   "More Papers Do Not Prove More Discovery": the figures only this dispatch uses.
   Loaded after the shared stylesheets; everything shared lives in css/.
   ===================================================================== */

/* Layout: one 64ch reading column on grained paper; two paper objects break out to 860px:
   an in-tray of draft abstracts with check notes (Figure 1)
   and an evidence docket that says what each kind of evidence shows (Figure 2).
   Gold = research output volume; blue = credible contribution.
   Every rule below is scoped to its figure so none of it can restyle the generated Read next block. */

/* ---- 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 manuscript tray ----------------------------------------- */
.trfig { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: 24px 36px; align-items: center; overflow-x: clip; overflow-clip-margin: 14px; padding-top: 6px; }
/* the tray: a graphite-edged wire basket with a raised front lip */
.trfig .tray { position: relative; padding: 2.4rem 1rem 1.1rem; border: 2px solid var(--graphite); border-top-width: 0; border-radius: 0 0 6px 6px; background: linear-gradient(var(--rule), var(--rule)) 0 0 / 100% 2px no-repeat; }
.trfig .tally { position: absolute; top: -.9rem; left: 1rem; margin: 0; padding: .35rem .7rem; font-family: var(--mono); font-size: .72rem; color: var(--slip-once); background: var(--noise), var(--slip); border: 1.5px solid var(--slip-once); transform: rotate(-2deg); box-shadow: 0 1px 1px var(--shadow); animation: fade .6s ease 1.6s both; }
.trfig .tally b { font-weight: 600; }
.trfig .sheets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; }
.trfig .ms { position: relative; min-height: 118px; padding: .7rem .7rem .6rem; background: var(--noise), var(--sheet); border-top: 3px solid var(--slip-once); animation: drop .5s ease both; }
.trfig .ms:nth-child(1) { transform: rotate(-1.5deg); animation-delay: .1s; }
.trfig .ms:nth-child(2) { transform: rotate(1deg); animation-delay: .25s; }
.trfig .ms:nth-child(3) { transform: rotate(-.6deg); animation-delay: .4s; }
.trfig .ms:nth-child(4) { transform: rotate(.8deg); animation-delay: .55s; }
.trfig .ms:nth-child(5) { transform: rotate(-1deg); animation-delay: .7s; }
.trfig .ms:nth-child(6) { transform: rotate(1.4deg); animation-delay: .85s; }
@keyframes drop { from { opacity: 0; translate: 0 -14px; } }
.trfig .mh { margin: 0 0 .45rem; font-family: var(--sans); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--slip-once); }
/* pencil lines standing in for the abstract's text */
.trfig .rl { display: block; height: 22px; background: repeating-linear-gradient(transparent 0 6px, var(--grid-major) 6px 7.5px, transparent 7.5px 11px); opacity: .9; }
.trfig .rl.s { width: 62%; height: 11px; }
.trfig .ck, .trfig .nc { margin: .55rem 0 0; font-family: var(--mono); font-size: .62rem; line-height: 1.4; }
.trfig .ck { color: var(--slip-life); border-left: 3px solid var(--slip-life); padding-left: .45rem; animation: fade .6s ease 1.9s both; }
.trfig .nc { color: var(--graphite); opacity: .95; padding-left: calc(.45rem + 3px); }
.trfig .trnotes { display: grid; gap: 2.2rem; }
.trfig .trnotes p { margin: 0; color: var(--ink); max-width: 22ch; }
.trfig .trnotes .n1 { animation: fade .7s ease 2.2s both; }
.trfig .trnotes .n2 { animation: fade .7s ease 2.5s both; }
.trfig .trnotes .n1 b { color: var(--once); }
.trfig .trnotes .n2 b { color: var(--life); }

/* ---- Figure 2: the evidence docket ----------------------------------------- */
.dock {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1rem 1.6rem; align-items: start;
  max-width: 780px; padding: 1.3rem 1.3rem 1.2rem; background: var(--noise), var(--sheet); border-top: 6px solid var(--graphite); transform: rotate(-.3deg);
}
.dock .dh { grid-column: 1 / -1; margin: 0; font-family: var(--sans); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--graphite); }
.dock .rungs { border: 0; margin: 0; padding: 0; display: grid; gap: 0; }
.dock .r { position: relative; display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: .1rem .8rem; align-items: baseline; padding: .55rem .5rem .55rem .7rem; border-bottom: 1px dashed var(--grid-major); cursor: pointer; }
.dock .r:first-of-type { border-top: 1px dashed var(--grid-major); }
.dock .r input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dock .r b { font-family: var(--sans); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.dock .r span { font-family: var(--serif); font-style: italic; font-size: .95rem; line-height: 1.3; color: var(--slip-ink); opacity: .8; }
.dock .r.once b { color: var(--slip-once); }
.dock .r.life b { color: var(--slip-life); }
.dock .r::before { content: ""; position: absolute; left: 0; top: .45rem; bottom: .45rem; width: 3px; background: currentColor; opacity: 0; }
.dock .r.once::before { color: var(--slip-once); }
.dock .r.life::before { color: var(--slip-life); }
.dock .r:has(input:checked) { background: var(--noise), var(--slip); }
.dock .r:has(input:checked)::before { opacity: 1; }
.dock .r:has(input:checked) span { opacity: 1; }
.dock .r:has(input:focus-visible) { outline: 2px solid var(--life); outline-offset: 2px; }
.dock .card { padding: .8rem .9rem .7rem; background: var(--noise), var(--slip); box-shadow: 0 1px 1px var(--shadow); transform: rotate(.6deg); font-family: var(--mono); font-size: .74rem; line-height: 1.5; }
.dock .card p { margin: 0 0 .6rem; }
.dock .card .ch { margin: 0 0 .2rem; font-family: var(--sans); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--graphite); }
.dock .nb { grid-column: 1 / -1; margin: .2rem 0 0; color: var(--graphite); font-size: 1rem; }
.dock + .narr { margin-top: 1.5rem; }

@media (max-width: 680px) {
  .trfig { grid-template-columns: minmax(0, 1fr); }
  .trfig .trnotes { gap: .6rem; }
  .trfig .trnotes p { max-width: none; }
  .dock { grid-template-columns: minmax(0, 1fr); }
}

/* Phone mode: the tray holds two sheets per row and each docket row puts its note under its name. */
@media (max-width: 560px) {
  .trfig .tray { padding: 2.3rem .6rem .8rem; }
  .trfig .sheets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
  .dock { padding: 1.1rem .8rem 1rem; }
  .dock .r { grid-template-columns: minmax(0, 1fr); }
}