/* =====================================================================
   Paper and Ink · essays/the-new-load-needs-a-bill.css
   "The New Load Needs an Old-Fashioned Bill": 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 static paper objects break out to 860px:
   a connection application beside a three-panel cost agreement foldout (Figure 1)
   and an allocation sheet on taped graph paper comparing two cancellation terms (Figure 2).
   Gold = connection request; blue = cost responsibility.
   Every rule below is scoped to its figure so none of it can restyle the generated Read next block.
   Labels stay at 11px or larger. */

/* ---- 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 application and the foldout ----------------------------- */
.fold { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px 32px; align-items: center; padding-top: 6px; }
.fold .app { position: relative; font-family: var(--mono); font-size: .76rem; line-height: 1.5; padding: 1rem 1rem 1.1rem; background: var(--noise), var(--slip); color: var(--slip-once); border-top: 5px solid var(--graphite); transform: rotate(-1.4deg); animation: fade .5s ease both; }
.fold .ph { font-family: var(--sans); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .6rem; color: var(--slip-ink); opacity: .95; }
.fold .ln { display: flex; justify-content: space-between; gap: .8rem; padding: .3rem 0; border-top: 1px dashed var(--grid-major); }
.fold .ln span { font-family: var(--sans); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.fold .ln b { font-weight: 500; text-align: right; }
/* the agreement: one sheet folded into three panels, each crease a soft shadow */
.fold .panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); color: var(--slip-life); box-shadow: 0 1px 1px var(--shadow), 0 10px 24px -12px var(--shadow-deep); transform: rotate(.6deg); animation: fade .5s ease .6s both; }
.fold .pn { padding: .9rem .8rem 1rem; min-height: 150px; background: var(--noise), var(--sheet); }
.fold .p1 { background: var(--noise), linear-gradient(90deg, transparent 88%, var(--shadow) 100%), var(--sheet); }
.fold .p2 { background: var(--noise), linear-gradient(90deg, var(--shadow) 0%, transparent 10%, transparent 90%, var(--shadow) 100%), var(--sheet); }
.fold .p3 { background: var(--noise), linear-gradient(90deg, var(--shadow) 0%, transparent 12%), var(--sheet); }
.fold .pn .ph { color: var(--graphite); }
.fold .who { margin: .2rem 0 .3rem; font-family: var(--serif); font-size: 1.15rem; font-weight: 500; }
.fold .how { margin: 0; font-family: var(--serif); font-style: italic; font-size: .98rem; line-height: 1.35; }

/* ---- Figure 2: the allocation sheet ----------------------------------------- */
.alloc {
  position: relative; max-width: 680px; padding: 1.5rem 1.4rem 1.3rem; transform: rotate(-.3deg); color: var(--slip-ink);
  background:
    var(--noise),
    linear-gradient(var(--grid-major) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(var(--grid-minor) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px) 0 0 / 12px 12px,
    var(--sheet);
}
.alloc::before, .alloc::after { content: ""; position: absolute; top: -11px; width: 84px; height: 24px; background: var(--noise), var(--tape); }
.alloc::before { left: 22px; transform: rotate(-5deg); }
.alloc::after { right: 22px; transform: rotate(4deg); }
.alloc .ah { margin: 0 0 .9rem; font-family: var(--sans); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--graphite); }
/* the upgrade drawn to scale: $6M of $10M is 60 percent of the bar */
.alloc .split { display: grid; grid-template-columns: 6fr 4fr; font-family: var(--mono); font-size: .74rem; }
.alloc .seg { padding: .5rem .6rem; border: 1.5px solid var(--graphite); }
.alloc .seg.own { background: var(--noise), var(--slip); }
.alloc .seg.shared { border-left: 0; background: repeating-linear-gradient(45deg, transparent 0 6px, var(--grid-major) 6px 7px), var(--sheet); }
.alloc .cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 1.1rem; }
.alloc .case { padding: .8rem .9rem .7rem; background: var(--noise), var(--slip); box-shadow: 0 1px 1px var(--shadow); color: var(--slip-life); font-family: var(--mono); font-size: .76rem; }
.alloc .case:nth-child(1) { transform: rotate(-.6deg); }
.alloc .case:nth-child(2) { transform: rotate(.5deg); }
.alloc .ch { margin: 0 0 .5rem; font-family: var(--sans); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--graphite); }
.alloc .ln { display: flex; justify-content: space-between; gap: .6rem; padding: .25rem 0; border-top: 1px dashed var(--grid-major); }
.alloc .ln b { font-weight: 600; font-variant-numeric: tabular-nums; }
.alloc .cn { margin: .5rem 0 0; font-family: var(--serif); font-style: italic; font-size: .98rem; line-height: 1.35; color: var(--slip-ink); }

@media (max-width: 680px) {
  .fold { grid-template-columns: minmax(0, 1fr); max-width: 460px; }
  .fold .app { max-width: 320px; }
}

/* Phone mode: the foldout opens into a stack of panels and the two cases stack. */
@media (max-width: 560px) {
  .fold .panels { grid-template-columns: minmax(0, 1fr); }
  .fold .pn { min-height: 0; padding: .75rem .8rem .8rem; }
  .fold .p1 { background: var(--noise), linear-gradient(transparent 85%, var(--shadow) 100%), var(--sheet); }
  .fold .p2 { background: var(--noise), linear-gradient(var(--shadow) 0%, transparent 12%, transparent 88%, var(--shadow) 100%), var(--sheet); }
  .fold .p3 { background: var(--noise), linear-gradient(var(--shadow) 0%, transparent 15%), var(--sheet); }
  .alloc { padding: 1.3rem .8rem 1rem; }
  .alloc .split { font-size: .7rem; }
  .alloc .cases { grid-template-columns: minmax(0, 1fr); }
}

/* the agreement's title strip runs across all three panels */
.fold .panels .ag { grid-column: 1 / -1; margin: 0; padding: .6rem .8rem .5rem; font-family: var(--sans); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--slip-life); background: var(--noise), var(--slip); border-bottom: 1px dashed var(--grid-major); }