/* =====================================================================
   Paper and Ink · essays/the-same-cart.css
   "The Same Cart": the figures only this essay uses. Loaded after the four
   shared stylesheets; everything shared lives in css/.
   ===================================================================== */

/* Layout: one 64ch reading column on grained paper; four paper objects (receipt, graph paper, ledger pad with a taped scrap, shelf tag with price stickers) break out to 860px. Gold = paying more; blue = getting more. */

.btn[aria-pressed="true"]{color:var(--ink);font-weight:600;text-decoration-thickness:2px}
.fig1{display:grid;grid-template-columns:minmax(0,360px) 1fr;gap:56px;align-items:center}
.receipt{font-family:var(--mono);font-size:.82rem;line-height:1.75;transform:rotate(-1.4deg);filter:drop-shadow(0 1px 1px var(--shadow)) drop-shadow(0 10px 12px var(--shadow-deep));color:var(--slip-ink)}
.receipt-body{background:var(--noise),var(--slip);padding:26px 24px 34px;-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%}
.rh{text-align:center;letter-spacing:.18em;font-weight:500}
.rsub{text-align:center;font-size:.72rem;letter-spacing:.06em;opacity:.75}
.dash{border-top:1px dashed currentColor;opacity:.45;margin:.55rem 0}
.li{display:flex;gap:.5rem;align-items:baseline}
.li i{flex:1;border-bottom:1px dotted currentColor;opacity:.4;transform:translateY(-.3em)}
.once{color:var(--slip-once)}
.life{color:var(--slip-life)}
.cont{text-align:center;opacity:.7;margin:.4rem 0}
.printed{animation:print 2.6s steps(13,end) 1.3s both}
@keyframes print{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.cursor{display:inline-block;width:.55em;height:1.05em;background:currentColor;vertical-align:-.18em;margin-left:.25em;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.stamp.s1{color:var(--slip-once);transform:rotate(-7deg);margin:.7rem 0 .3rem 2.6rem;animation-delay:.7s}
.stamp.s2{color:var(--slip-life);transform:rotate(5deg);margin:.8rem 0 0 4.2rem;animation-delay:4s}
.notes1{display:grid;gap:3.2rem}
.notes1 .a1 path{animation-delay:.3s}
.notes1 .a2 path{animation-delay:3.6s}
.rowlab{font-family:var(--sans);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;fill:var(--graphite)}
.ctl{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:baseline;margin-top:1rem;font-family:var(--sans);font-size:.82rem;color:var(--muted)}
.narr{margin:.8rem 0 0}
.fig-ledger{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:40px;align-items:start}
.ledger{background:var(--noise),var(--sheet);padding:1.2rem 1.4rem 1.5rem;transform:rotate(-.7deg);font-family:var(--mono);font-size:.8rem;line-height:1.5;border-top:3px double var(--graphite)}
.ltitle{font-family:var(--serif);font-style:italic;font-size:1.3rem;margin:0 0 .3rem}
.lsec{font-family:var(--sans);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);margin:1rem 0 .1rem;padding-bottom:.3rem;border-bottom:1px solid var(--graphite)}
.lrow{display:grid;grid-template-columns:minmax(0,1fr) 7ch 120px;align-items:center;border-bottom:1px solid var(--grid-major);min-height:2.1rem}
.lrow>span{padding:.25rem .55rem;min-width:0}
.lrow>span:first-child{padding-left:0}
.lrow>span+span{border-left:1px solid var(--grid-major)}
.lrow .fig{text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
.lrow .bar svg{display:block;width:100%;height:16px;overflow:visible}
.lrow .note{font-size:.72rem;color:var(--graphite)}
.lsrc{font-family:var(--sans);font-size:.7rem;color:var(--graphite);margin:.35rem 0 0}
.scrap{position:relative;background:var(--noise),var(--slip);padding:22px 14px 14px;transform:rotate(2deg);margin-top:18px;-webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 50% 0/11px 100%;mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 50% 0/11px 100%}
.scrap-wrap{position:relative}
.scrap-wrap::before{content:"";position:absolute;top:4px;left:50%;width:92px;height:26px;margin-left:-46px;background:var(--noise),var(--tape);transform:rotate(-3deg);z-index:2}
.scrap svg{display:block;width:100%;height:auto;overflow:visible}
.ksvg text{font-family:var(--mono);font-size:10.5px;fill:var(--slip-ink)}
.ksvg .kl{font-family:var(--serif);font-style:italic;font-size:13px}
.kcap{margin:.9rem 0 0;font-size:1.05rem}
.fig4{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:44px;align-items:center}
.shelf{background:var(--noise),var(--slip);padding:30px 22px 26px;transform:rotate(.6deg);border-top:7px solid var(--graphite)}
.shelf .sh{font-family:var(--sans);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);margin:0 0 1rem}
.stickers{display:flex;align-items:center;padding-left:6px}
.stk{position:relative;flex:none;width:9.2rem;padding:.55rem .7rem .6rem;font-family:var(--mono);background:var(--noise),var(--slip);border:1px solid var(--graphite);border-left-style:dashed;border-right-style:dashed;box-shadow:0 1px 1px var(--shadow),0 4px 8px -4px var(--shadow-deep);animation:thump .45s cubic-bezier(.3,1.6,.5,1) both}
.stk+.stk{margin-left:-1.7rem}
.stk small{display:block;font-size:.6rem;letter-spacing:.14em;opacity:.75}
.stk b{display:block;font-weight:500;font-size:1.55rem;line-height:1.15;color:var(--slip-once);font-variant-numeric:tabular-nums}
.stk span{display:block;font-size:.66rem;opacity:.85}
.stk.k1{transform:rotate(-4deg);z-index:1;animation-delay:.4s}
.stk.k2{transform:rotate(2.5deg) translateY(-6px);z-index:2;animation-delay:1.2s}
.stk.k3{transform:rotate(-1.5deg) translateY(3px);z-index:3;animation-delay:2s}
.stk.k1 b{color:var(--slip-ink);background:linear-gradient(var(--slip-ink),var(--slip-ink)) 0 55%/100% 1.6px no-repeat;width:max-content}
.notes4{display:grid;gap:2.4rem}
.notes4 .a1 path{animation-delay:2.4s}
.notes4 .a2 path{animation-delay:2.8s}
@media (max-width:640px){
  .fig1{grid-template-columns:1fr;gap:28px}
  .pen{display:none}
  .notes1{gap:1.2rem}
}
@media (max-width:700px){
  .fig-ledger{grid-template-columns:1fr;gap:20px}
  .scrap-wrap{max-width:300px}
  .fig4{grid-template-columns:1fr;gap:24px}
  .notes4{gap:1rem}
}
@media (max-width:480px){
  .lrow{grid-template-columns:minmax(0,1fr) 6.5ch 70px}
  .ledger{padding-inline:1rem}
}
@media (max-width:440px){
  .stk{width:7.6rem;padding:.45rem .55rem}
  .stk b{font-size:1.25rem}
  .stk+.stk{margin-left:-1.8rem}
}
/* Phone mode: Figure 2 is redrawn by the page script as a narrower, taller sheet (viewBox 420 x 540), so it fits the column with no sideways scroll; svg text sizes are raised to read at 11px or more. Figure 4 stickers shrink to fit the shelf. */
@media (max-width:560px){
  .sheet-scroll{overflow-x:clip}
  .sheet{min-width:0;padding:24px 8px 10px;-webkit-user-select:none;user-select:none}
  #asad .rowlab{font-size:15px}
  #asad .svglab{font-size:20px}
  #asad .svgnote{font-size:17px}
  #asad .tagtext{font-size:16px}
  .shelf{padding:26px 14px 22px}
  .stickers{padding-left:2px;overflow-x:clip;overflow-clip-margin:10px}
  .stk{width:min(7.6rem,calc((100% + 3.2rem) / 3));padding:.45rem .5rem .5rem}
  .stk+.stk{margin-left:-1.6rem}
  .stk small{letter-spacing:.08em}
  .stk b{font-size:1.2rem}
}