/* =====================================================================
   Paper and Ink · essays/the-money-is-already-gone.css
   "The Money Is Already Gone": 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 paper objects break out to 860px:
   a paid invoice clipped beneath a funding request with blank forward-case fields (Figure 1)
   and a continuation worksheet whose spent-to-date line feeds no calculation (Figure 2).
   Gold = money already spent; blue = future costs and benefits that change with the choice. */

/* ---- 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 invoice clipped under the request --------------------- */
/* clip sideways overflow so a stamp's starting scale can never widen the page on a phone */
.pairfig { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 28px 44px; align-items: start; overflow-x: clip; overflow-clip-margin: 14px; padding-top: 6px; }
.pair { position: relative; }
.inv {
  position: relative; background: var(--noise), var(--slip); padding: .9rem 1.1rem 4.4rem; margin: 0 1.4rem 0 .6rem;
  transform: rotate(2deg); font-family: var(--mono); font-size: .72rem; line-height: 1.6; color: var(--slip-once);
  animation: fade .6s ease .1s both;
}
.ih { font-family: var(--sans); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .5rem; color: var(--slip-ink); opacity: .75; }
.iline { display: flex; align-items: baseline; gap: 6px; }
.iline span { flex: 0 1 auto; }
.iline i { flex: 1; min-width: 12px; border-bottom: 1px dotted currentColor; opacity: .45; transform: translateY(-.45em); }
.iline b { flex: none; font-weight: 500; font-variant-numeric: tabular-nums; }
.iline.tot { border-top: 1px dashed currentColor; margin-top: .3rem; padding-top: .25rem; }
/* the stamp lands in the strip of invoice left showing above the request */
.inv .stamp.s1 { position: absolute; left: 1.4rem; bottom: 2.2rem; color: var(--slip-once); transform: rotate(-8deg); animation-delay: .7s; }
.req {
  position: relative; z-index: 1; margin-top: -1.6rem; background: var(--noise), var(--sheet); padding: 1.3rem 1.3rem 1.3rem;
  transform: rotate(-.7deg); font-family: var(--mono); font-size: .74rem; line-height: 1.55; border-top: 6px solid var(--graphite);
  animation: fade .6s ease .35s both;
}
/* a binder clip in graphite, holding the two sheets together */
.clip { position: absolute; top: -18px; left: 50%; width: 74px; height: 22px; margin-left: -37px; background: var(--graphite); border-radius: 2px 2px 4px 4px; box-shadow: 0 1px 2px var(--shadow); }
.clip::before { content: ""; position: absolute; left: 12px; right: 12px; top: -14px; height: 16px; border: 2px solid var(--graphite); border-bottom: 0; border-radius: 8px 8px 0 0; }
.rh { font-family: var(--sans); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .6rem; opacity: .8; }
.rrow { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; border-bottom: 1px solid color-mix(in srgb, var(--slip-ink) 22%, transparent); padding: .2rem 0; }
.rrow span { opacity: .75; }
.rrow b { font-weight: 500; text-align: right; }
.rrow.just b { font-size: 1.02rem; font-weight: 400; color: var(--slip-once); }
.rrow.just s { text-decoration-color: var(--graphite); text-decoration-thickness: 1.5px; }
.rsec { font-family: var(--sans); font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin: 1rem 0 .35rem; padding-bottom: .25rem; border-bottom: 1.5px solid currentColor; color: var(--slip-life); animation: fade .6s ease 1.4s both; }
.fields { list-style: none; margin: 0; padding: 0; color: var(--slip-life); }
.fields li { display: flex; align-items: flex-end; gap: .6rem; padding: .22rem 0; }
.fields li span:first-child { flex: none; }
.fields .blank { flex: 1; min-width: 2rem; border-bottom: 1px solid currentColor; opacity: .55; height: 1em; }
.fields li:nth-child(1) { animation: fade .5s ease 1.6s both; }
.fields li:nth-child(2) { animation: fade .5s ease 1.8s both; }
.fields li:nth-child(3) { animation: fade .5s ease 2s both; }
.fields li:nth-child(4) { animation: fade .5s ease 2.2s both; }
.fields li:nth-child(5) { animation: fade .5s ease 2.4s both; }
.req .stamp.s2 { display: table; margin: .8rem .2rem 0 auto; color: var(--slip-life); transform: rotate(4deg); animation-delay: 2.9s; }
.pnotes { display: grid; gap: 150px; padding-top: 40px; }
.pnotes .mnote p { color: var(--ink); }
.pnotes .n1 { animation: fade .7s ease 1s both; }
.pnotes .n2 { animation: fade .7s ease 3.2s both; }
.pnotes .n1 .pen path { animation-delay: 1s; }
.pnotes .n2 .pen path { animation-delay: 3.2s; }
.pnotes .n1 b { color: var(--once); }
.pnotes .n2 b { color: var(--life); }

/* ---- Figure 2: the continuation worksheet ---------------------------------- */
.ws {
  position: relative; max-width: 640px; background: var(--noise), var(--sheet); padding: 1.3rem 1.4rem 1.2rem; transform: rotate(-.4deg);
  font-family: var(--mono); font-size: .76rem; line-height: 1.5;
}
/* clip sideways so the stamp's starting scale cannot widen the page */
figure:has(> .ws) { overflow-x: clip; overflow-clip-margin: 14px; }
.ws::before, .ws::after { content: ""; position: absolute; top: -11px; width: 84px; height: 24px; background: var(--noise), var(--tape); }
.ws::before { left: 22px; transform: rotate(-5deg); }
.ws::after { right: 22px; transform: rotate(4deg); }
.wh { font-family: var(--sans); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .8rem; opacity: .8; }
.ws label { display: flex; justify-content: space-between; gap: .8rem; margin-top: .55rem; }
.ws output { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ws input[type=range] { width: 100%; margin: .25rem 0 0; }
.past { position: relative; color: var(--slip-once); padding-bottom: .9rem; border-bottom: 1.5px dashed color-mix(in srgb, var(--slip-ink) 35%, transparent); }
.past input { accent-color: var(--slip-once); }
.past .stamp.s3 { display: table; margin: .6rem 0 0 auto; color: var(--slip-once); transform: rotate(-3deg); animation-delay: .6s; font-size: .66rem; }
.fwd { color: var(--slip-life); padding: .3rem 0 .9rem; border-bottom: 1.5px solid color-mix(in srgb, var(--slip-ink) 35%, transparent); }
.fwd input { accent-color: var(--slip-life); }
.ws input:focus-visible { outline: 2px solid var(--life); outline-offset: 3px; }
.opts { margin-top: .7rem; }
.ws + .narr { margin-top: 1.5rem; }
.orow { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: .22rem 0; color: var(--slip-life); }
.orow span { flex: none; }
.orow em { flex: none; font-style: normal; opacity: .7; font-size: .7rem; }
.orow i { flex: 1; min-width: 12px; border-bottom: 1px dotted currentColor; opacity: .4; transform: translateY(-.45em); }
.orow b { flex: none; font-weight: 500; font-variant-numeric: tabular-nums; }
.orow.best b { border: 1.5px solid currentColor; border-radius: 50%; padding: 0 .35rem; margin: -.1rem 0; }
.orow.best span::after { content: " ✓"; font-family: var(--serif); }

@media (max-width: 640px) {
  .pairfig { grid-template-columns: minmax(0, 1fr); }
  .pnotes { gap: .9rem; padding-top: 0; }
  .pnotes .pen { display: none; }
}

/* Phone mode: the clipped pair and its notes stack; the worksheet tightens and each option's arithmetic
   moves to its own line so the dotted leader never squeezes the names. */
@media (max-width: 560px) {
  .inv { margin: 0 .6rem 0 .2rem; padding: .8rem .9rem 4.4rem; font-size: .68rem; }
  .iline { flex-wrap: wrap; }
  .req { padding: 1.2rem 1rem 1.1rem; font-size: .7rem; }
  .rrow.just { flex-wrap: wrap; }
  .fields li { flex-wrap: wrap; }
  .ws { padding: 1.2rem 1rem 1rem; font-size: .72rem; }
  .ws label { flex-wrap: wrap; gap: .1rem .6rem; }
  .orow { flex-wrap: wrap; row-gap: 0; }
  .orow em { order: 4; flex-basis: 100%; }
}