/* =====================================================================
   Paper and Ink · essays/your-best-customer-can-hide-your-next-market.css
   "Your Best Customer Can Hide Your Next Market": 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 order books laid side by side (Figure 1), and an access-threshold model on taped
   graph paper with a support-cost control and a cost slip (Figure 2).
   Gold = improvement for existing buyers; blue = access for previous nonbuyers;
   graphite = buyers who switched, which is neither. */

/* ---- 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; }
sup.ref + sup.ref { margin-left: 3px; }
.sources li:target { color: var(--ink); background: var(--life-soft); }

/* ---- Figure 1: the three order books ------------------------------------- */
/* clip sideways overflow so a stamp's starting scale can never widen the page on a phone */
.obfig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .86fr); gap: 26px; align-items: start; overflow-x: clip; overflow-clip-margin: 14px; padding: 6px 4px 0; }
.obk {
  position: relative; box-sizing: border-box; padding: 18px 16px 20px; min-height: 280px;
  font-family: var(--mono); font-size: .74rem; line-height: 1.55;
  background: var(--noise), linear-gradient(var(--grid-major) 1px, transparent 1px) 0 64px / 100% 26px, var(--slip);
  border-top: 9px solid var(--graphite);
}
/* spiral binding: a row of punched holes under the top band */
.obk::before { content: ""; position: absolute; left: 10px; right: 10px; top: 4px; height: 6px; background: radial-gradient(circle, var(--paper) 2px, transparent 2.5px) 0 0 / 16px 6px repeat-x; opacity: .9; }
.ob-a { color: var(--slip-once); transform: rotate(-1.3deg); animation: fade .6s ease both; }
.ob-b { color: var(--slip-life); transform: rotate(.7deg); animation: fade .6s ease .9s both; }
.ob-g { color: var(--graphite); transform: rotate(-.4deg); margin-top: 18px; min-height: 230px; animation: fade .6s ease 1.8s both; }
.obk .oh { margin: 0; font-family: var(--sans); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.obk .os { margin: .1rem 0 .8rem; font-size: .64rem; opacity: .75; color: var(--slip-ink); }
.obk .oe { margin: 0 0 .25rem; min-height: 1.6em; }
.obk .oe span { display: block; font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; opacity: .95; }
.obk .stamp { display: table; margin-top: 1rem; font-size: .66rem; }
.obk .stamp.s1 { color: var(--slip-once); transform: rotate(-6deg); animation-delay: .7s; }
.obk .stamp.s2 { color: var(--slip-life); margin-left: auto; transform: rotate(4deg); animation-delay: 1.6s; }
.obk .stamp.s3 { color: var(--graphite); transform: rotate(-4deg); animation-delay: 2.5s; }
.obnotes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .86fr); gap: 26px; margin-top: 1.1rem; }
.obnotes p { margin: 0; color: var(--ink); font-size: 1.08rem; }
.obnotes .n1 { animation: fade .7s ease 1s both; }
.obnotes .n2 { animation: fade .7s ease 1.9s both; }
.obnotes .n3 { animation: fade .7s ease 2.8s both; }
.obnotes b.g { color: var(--once); }
.obnotes b.b { color: var(--life); }
.obnotes .n3 b { color: var(--muted); }

/* ---- Figure 2: the access threshold ------------------------------------- */
.acc2 { cursor: crosshair; }
.acc2 .cv { stroke: var(--graphite); }
.acc2 .gl { stroke: var(--slip-once); }
.acc2 .bl { stroke: var(--slip-life); }
.acc2 .hl-life { stroke: var(--slip-life); stroke-width: 1.4; opacity: .7; }
.acc2 .hl-once { stroke: var(--slip-once); stroke-width: 1.4; opacity: .7; }
.acc2 .lab-once { fill: var(--slip-once); }
.acc2 .lab-life { fill: var(--slip-life); }
.acc2 .lab-ink { fill: var(--graphite); }
/* a paper-colored halo keeps labels legible where they cross hatching or ink */
.acc2 .halo { paint-order: stroke; stroke: var(--sheet); stroke-width: 4px; stroke-linejoin: round; }
.acc2 .pencil { fill: none; stroke: var(--graphite); stroke-width: 1.6; stroke-dasharray: 2 6; stroke-linecap: round; }
.acc2 .tk { stroke: var(--slip-ink); stroke-width: 1; opacity: .55; }
.acc2 .tk.major { opacity: .9; stroke-width: 1.3; }
.acc2 .rowlab { font-family: var(--sans); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; fill: var(--graphite); }
.acc2 .cursor { stroke: var(--graphite); stroke-width: 1.2; stroke-dasharray: 5 5; opacity: .7; }
.acc2 .rdot { fill: var(--slip); stroke: var(--slip-ink); stroke-width: 2.4; }
.acc2 .tagbox { fill: var(--slip); stroke: var(--slip-ink); stroke-width: 1; }
.acc2 .tag-ink { fill: var(--slip-ink); }
.acc2 .tag-once { fill: var(--slip-once); font-weight: 500; }
.acc2 .tag-life { fill: var(--slip-life); font-weight: 500; }
/* redraws (breakpoint changes, support changes) appear at once, without replaying the load sequence */
.acc2 .still .ink path, .acc2 .still .fade, .acc2 .still .hatch,
.acc2 .now .ink path, .acc2 .now .fade, .acc2 .now .hatch { animation: none; }

/* the support control: a pencil-thin ruler under the sheet */
.ctl2 { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: .4rem 0 0; font-family: var(--sans); font-size: .85rem; color: var(--muted); }
.ctl2 label { flex: none; }
.ctl2 input { flex: 1; min-width: 160px; max-width: 360px; accent-color: var(--life); }
.ctl2 input:focus-visible { outline: 2px solid var(--life); outline-offset: 3px; }
.ctl2 output { font-family: var(--mono); color: var(--life); min-width: 3.5em; }

/* the cost slip: what the simpler service costs to deliver, line by line */
.cslip { max-width: 420px; margin: 1rem 0 0; padding: .8rem 1.1rem .7rem; background: var(--noise), var(--slip); font-family: var(--mono); font-size: .76rem; transform: rotate(-.4deg); color: var(--slip-life); }
.cslip .crow { display: grid; grid-template-columns: minmax(0, 1fr) 5rem; gap: .4rem; margin: 0; padding: .12rem 0; align-items: baseline; }
.crow b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.crow.hd { font-family: var(--sans); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; border-bottom: 1px dashed currentColor; padding-bottom: .35rem; margin-bottom: .2rem; }
.crow.sup b { text-decoration: underline; text-underline-offset: 3px; }
.crow.tot { border-top: 1.5px solid currentColor; margin-top: .25rem; padding-top: .35rem; }
.crow.out { color: var(--slip-ink); }
.crow.out:first-of-type, .crow.tot + .crow.out { margin-top: .4rem; }
.crow.out.life { color: var(--slip-life); }
.cslip + .narr { margin-top: 1.2rem; }

@media (max-width: 680px) {
  .obfig, .obnotes { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .obfig { max-width: 420px; }
  .obk, .ob-g { min-height: 0; margin-top: 0; }
  .obnotes { gap: 6px; }
}

/* Phone mode: the order books stack with their notes beneath; the access chart is redrawn
   narrower and taller by the page script, its labels grow, and the cost slip tightens. */
@media (max-width: 560px) {
  .sheet.acc2 { min-width: 0; user-select: none; }
  .sheet-scroll:has(.acc2) { overflow-x: clip; }
  .acc2 .svgnote { font-size: 16px; }
  .acc2 .svglab { font-size: 17px; }
  .acc2 .tick { font-size: 14px; }
  .acc2 .tagtext { font-size: 13px; }
  .acc2 .rowlab { font-size: 12px; letter-spacing: .08em; }
  .ctl2 input { min-width: 0; max-width: none; width: 100%; flex-basis: 100%; }
  .cslip { padding: .7rem .8rem .6rem; font-size: .72rem; }
  .cslip .crow { grid-template-columns: minmax(0, 1fr) 4rem; }
}