/* =====================================================================
   Paper and Ink · essays/the-stubborn-star.css
   "The Stubborn Star": 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; two paper-object figures break out to 860px. */

.dek{max-width:40ch}
.fig1{display:grid;grid-template-columns:minmax(0,360px) 1fr;gap:56px;align-items:center}
.receipt{background:var(--noise),var(--slip);color:var(--slip-ink);font-family:var(--mono);font-size:.82rem;line-height:1.75;padding:26px 24px 34px;transform:rotate(-1.4deg);filter:drop-shadow(0 1px 1px var(--shadow)) drop-shadow(0 10px 12px var(--shadow-deep));position:relative}
.receipt-body{-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%;background:var(--noise),var(--slip);padding:26px 24px 34px;margin:-26px -24px -34px}
.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}
.notes{display:grid;gap:3.2rem}
.mnote{font-style:italic;font-size:1.22rem;line-height:1.35}
.mnote b{font-style:normal;font-weight:500}
.pen.a1 path{animation-delay:.2s}
.pen.a2 path{animation-delay:3.5s}
.again{font-family:var(--sans);font-size:.82rem;color:var(--muted);background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer;justify-self:start}
.again:hover,.again:focus-visible{color:var(--ink)}
.again:focus-visible{outline:2px solid var(--life);outline-offset:3px}
.svgnote{fill:var(--slip-ink)}
.rowlab{font-family:var(--sans);font-size:10.5px;letter-spacing:.12em;font-variant:small-caps;text-transform:lowercase;fill:var(--graphite)}
@media (max-width:640px){
  .fig1{grid-template-columns:1fr;gap:28px}
  .pen{display:none}
  .notes{gap:1.2rem}
}
/* Phone mode: the chart is redrawn narrower and taller by the page script; fit the sheet to the column and enlarge its svg text. */
@media (max-width:560px){
  .sheet{min-width:0;padding:30px 8px 12px}
  #chart .svglab{font-size:20px}
  #chart .svgnote{font-size:16px}
  #chart .tick{font-size:14.5px}
  #chart .tagtext{font-size:15.5px}
  #chart .rowlab{font-size:15px}
}