/* =====================================================================
   Paper and Ink · essays/a-number-needs-an-owner.css
   "A Number Needs an Owner": the figures only this essay uses. Loaded after
   the shared stylesheets; everything shared lives in css/.
   ===================================================================== */

/* Layout: one 64ch reading column on grained paper; three paper objects (two report sheets with a blank approval line, a ruled index card, a graph-paper chart) break out to 860px. Gold = a calculation; blue = a decision. */

.dek{max-width:42ch}

/* ---- Figure 1: two report sheets, one blank approval line ---------------- */
.fig1{display:grid;gap:30px}
.reports{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px;max-width:640px}
.report{position:relative;background:var(--noise),var(--sheet);padding:1.1rem 1.2rem 1.4rem;font-family:var(--mono);font-size:.74rem;line-height:1.5}
.report.r1{transform:rotate(-1.6deg)}
.report.r2{transform:rotate(1.2deg);margin-top:14px}
.report p{margin:0}
.rh{font-family:var(--sans);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.rl{margin-top:.9rem !important}
.rn{font-family:var(--serif);font-size:2.6rem;line-height:1.05;color:var(--slip-once);font-variant-numeric:lining-nums tabular-nums}
.rrule{border-top:1px dashed currentColor;opacity:.45;margin:.7rem 0 .5rem}
.rq{font-size:.68rem;color:var(--slip-once);animation:fade .8s ease 1.2s both;max-width:24ch}
.report .stamp{position:absolute;right:.9rem;top:2.3rem;color:var(--slip-once);font-size:.66rem;transform:rotate(-8deg)}
.r1 .stamp{animation-delay:1.9s}
.r2 .stamp{animation-delay:2.3s;transform:rotate(6deg)}
.owner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 40px;align-items:center;max-width:760px}
.owner .mnote p{max-width:30ch}
.owner .a1 path{animation-delay:2.6s}
.approve{display:flex;align-items:flex-end;gap:.7rem;font-family:var(--sans);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slip-life);animation:fade .8s ease 3s both}
.approve .blank{flex:1;min-width:6rem;border-bottom:1.5px solid var(--slip-life);height:1.4rem}
.again{margin-top:1rem}

/* ---- Figure 2: the definition card --------------------------------------- */
.fig2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:40px;align-items:center}
.card{--row:1.6rem;position:relative;background:
    var(--noise),
    linear-gradient(var(--slip-life),var(--slip-life)) 0 calc(var(--row)*2 + .6rem)/100% 2px no-repeat,
    repeating-linear-gradient(transparent 0 calc(var(--row) - 1px),var(--grid-major) calc(var(--row) - 1px) var(--row)) 0 calc(.6rem + 2px)/100% 100%,
    var(--slip);
  padding:.6rem 1.2rem 1.2rem;transform:rotate(-.9deg);line-height:var(--row)}
.ct{margin:0 0 var(--row);height:calc(var(--row)*2);display:flex;align-items:flex-end;font-family:var(--serif);font-style:italic;font-size:1.35rem;color:var(--slip-life)}
.cf{margin:0}
.cf>div{display:grid;grid-template-columns:8.5ch minmax(0,1fr);gap:.8ch}
.cf dt{font-family:var(--sans);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite)}
.cf dd{margin:0;min-width:0}
.cf .d{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--slip-life)}
.cf .c{font-family:var(--mono);font-size:.76rem;color:var(--slip-once);overflow-wrap:anywhere}
.csig{display:flex;align-items:flex-end;gap:.8rem;margin-top:.4rem;max-width:22rem}
.csig .line{flex:1;border-bottom:1px solid var(--slip-ink);font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--slip-life);padding-left:.4rem;animation:fade .8s ease 1.6s both}
.csig small{font-family:var(--sans);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.card .stamp{position:absolute;right:1.2rem;bottom:1.4rem;color:var(--slip-life);transform:rotate(-9deg);animation-delay:2.2s}
.notes2{display:grid;gap:2rem;justify-items:start}
.notes2 .a2 path{animation-delay:2.6s}
.notes2 .a3 path{animation-delay:3s}

/* ---- Figure 3: the chart ------------------------------------------------- */
.svgnote{fill:var(--slip-ink)}

@media (max-width:760px){
  .fig2{grid-template-columns:1fr;gap:24px}
  .notes2 .pen{display:none}
}
@media (max-width:640px){
  .owner{grid-template-columns:1fr}
  .owner .pen{display:none}
}
/* Phone mode: report sheets shrink their type, the card's label column narrows, and the chart is redrawn narrower and taller by the page script with larger svg text. */
@media (max-width:560px){
  .reports{gap:16px}
  .report{padding:.9rem .8rem 1.1rem;font-size:.66rem}
  .rn{font-size:1.75rem}
  .rq{font-size:.62rem}
  .report .stamp{position:static;margin-top:.7rem;font-size:.56rem}
  .card{padding:.6rem .8rem 1.2rem}
  .cf>div{grid-template-columns:7ch minmax(0,1fr)}
  .cf .d{font-size:.95rem}
  .card .stamp{position:static;display:table;margin:1rem 0 0 auto;font-size:.66rem}
  .sheet{min-width:0;padding:30px 8px 12px}
  #chart .svglab{font-size:19px}
  #chart .svgnote{font-size:16px}
  #chart .tick{font-size:14px}
  #chart .tagtext{font-size:15px}
}