/* =====================================================================
   Paper and Ink · essays/the-second-attempt-must-remember-the-first.css
   "The Second Attempt Must Remember the First": the figures only this essay uses.
   Loaded after the shared stylesheets; everything shared lives in css/.
   ===================================================================== */

/* Layout: one 64ch reading column on grained paper; two figures break out to 860px:
   three printed payment requests beside one card statement (Figure 1), and a
   sequence of attempts, a lost reply and a retry on graph paper (Figure 2).
   Gold = delivery attempts; blue = the intended business effect. */

/* ---- 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 duplicate receipt ------------------------------------ */
/* clip sideways overflow so a stamp's starting scale can never widen the page on a phone */
.dupfig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 44px; align-items: start; overflow-x: clip; overflow-clip-margin: 14px; padding: 8px 4px 4px; }
.attempts { display: grid; gap: 14px; }
.right { display: grid; gap: 22px; }
.cf, .stmt { position: relative; font-family: var(--mono); font-size: .72rem; line-height: 1.6; }
.cf { background: var(--noise), var(--slip); color: var(--slip-once); padding: .8rem 1.05rem .9rem; max-width: 300px; }
.cf.a1 { transform: rotate(-1.3deg); animation: fade .5s ease .1s both; }
.cf.a2 { transform: rotate(.8deg); margin: -6px 0 0 26px; animation: fade .5s ease 1.2s both; }
.cf.b1 { transform: rotate(-.6deg); margin-top: 26px; animation: fade .5s ease 2.6s both; }
.dh { font-family: var(--sans); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .5rem; color: var(--slip-ink); opacity: .75; }
.dl, .row { display: flex; align-items: baseline; gap: 6px; }
.dl span, .row span { flex: none; opacity: .85; }
.dl i, .row i { flex: 1; min-width: 10px; border-bottom: 1px dotted currentColor; opacity: .4; transform: translateY(-.45em); }
.dl b, .row b { flex: 0 1 auto; font-weight: 500; text-align: right; }
.cf .stamp { display: table; margin: .6rem .2rem 0 auto; color: var(--slip-once); font-size: .66rem; }
.cf .s1 { transform: rotate(-7deg); animation-delay: .5s; }
.cf .s2 { transform: rotate(5deg); animation-delay: 1.6s; }
.cf .s3 { animation-delay: 3s; }
.stmt { background: var(--noise), var(--sheet); color: var(--slip-life); padding: 1rem 1.15rem 3.4rem; border-top: 6px solid var(--graphite); transform: rotate(.7deg); animation: fade .6s ease .3s both; }
.row { padding: .35rem 0; border-bottom: 1px dashed color-mix(in srgb, currentColor 35%, transparent); }
.row small { display: block; font-size: .62rem; opacity: .75; }
.row.r1 { animation: fade .5s ease 1.9s both; }
.row.r2 { animation: fade .5s ease 3.3s both; }
.stmt .s4 { position: absolute; left: 1.15rem; bottom: .9rem; color: var(--slip-life); transform: rotate(-4deg); animation-delay: 2.1s; }
.right .mnote { padding-left: .4rem; }
.right .mnote p { color: var(--ink); }
.right .n1 { animation: fade .7s ease 2.3s both; }
.right .n2 { animation: fade .7s ease 3.6s both; }
.right .n1 .pen path { animation-delay: 2.3s; }
.right .n2 .pen path { animation-delay: 3.6s; }
.right b.g { color: var(--once); }
.right b.b { color: var(--life); }

/* ---- Figure 2: the lost acknowledgment ----------------------------------- */
.ctl { display: grid; gap: .4rem; max-width: 640px; margin: 0 0 .4rem; font-family: var(--sans); font-size: .86rem; color: var(--ink); }
.mode { border: 0; margin: 0 0 .3rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.mode legend { padding: 0; margin-bottom: .35rem; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mode label { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.mode input { accent-color: var(--graphite); margin: 0; }
.ctl .step { display: flex; justify-content: space-between; gap: .8rem; }
.ctl output { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.ctl input[type=range] { width: 100%; margin: 0; accent-color: var(--graphite); }
.ctl input:focus-visible { outline: 2px solid var(--life); outline-offset: 3px; }
.seq2 { cursor: default; }
.seq2 .lane { fill: var(--slip-ink); }
.seq2 .stepn { fill: var(--slip-ink); }
.seq2 .stepn.off { opacity: .35; }
.seq2 .pen-g { fill: var(--graphite); }
.seq2 .sm { font-size: 13px; }
.seq2 .lab-life { fill: var(--slip-life); }
.seq2 .lab-once { fill: var(--slip-once); }
.seq2 .ink-n { fill: var(--slip-ink); }
.seq2 .pencil { fill: none; stroke: var(--graphite); stroke-width: 1.6; stroke-dasharray: 2 6; stroke-linecap: round; }
.seq2 .pencil.reply, .seq2 .pencil.look { stroke-width: 1.8; stroke-dasharray: 5 5; }
.seq2 .cross { fill: none; stroke: var(--graphite); stroke-width: 2; stroke-linecap: round; }
.seq2 .loop { fill: none; stroke: var(--slip-life); stroke-width: 1.5; stroke-linecap: round; }
/* redraws after a control changes appear at once, without replaying the load sequence */
.seq2 .still .ink path, .seq2 .still .fade { animation: none; }
.ledger { max-width: 420px; margin: .4rem 0 0; padding: .8rem 1.1rem .7rem; background: var(--noise), var(--slip); font-family: var(--mono); font-size: .76rem; transform: rotate(-.3deg); }
.lrow { display: grid; grid-template-columns: minmax(0, 1fr) 3rem; gap: .4rem; margin: 0; padding: .2rem 0; align-items: baseline; }
.lrow + .lrow { border-top: 1px dashed color-mix(in srgb, currentColor 30%, transparent); }
.lrow b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.lrow b.once { color: var(--slip-once); }
.lrow b.life { color: var(--slip-life); }

@media (max-width: 640px) {
  .dupfig { grid-template-columns: minmax(0, 1fr); }
  .right .pen { display: none; }
}

/* Phone mode: the requests stack above the statement with the notes beneath; the sequence
   is redrawn by the page script with time running downward, and its labels grow. */
@media (max-width: 560px) {
  .cf, .stmt { font-size: .7rem; }
  .cf { max-width: none; margin-right: 18px; }
  .cf.a2 { margin: -4px 0 0 18px; }
  .sheet.seq2 { min-width: 0; user-select: none; }
  .sheet-scroll:has(.seq2) { overflow-x: clip; }
  .seq2 .svgnote { font-size: 16px; }
  .seq2 .sm { font-size: 14px; }
  .seq2 .svglab { font-size: 18px; }
  .seq2 .tick { font-size: 13px; }
}