/* =====================================================================
   Paper and Ink · essays/not-a-toaster.css
   "Not a Toaster": the figures only this essay uses. Loaded after the four
   shared stylesheets; everything shared lives in css/.
   ===================================================================== */

/* Layout: one 64ch essay column on quiet paper; figures break wider; color appears only where a concept is named. */

:root{--card:#fdfcf7;--card-rule:#3b7bb026}
:root[data-theme="dark"]{--card:#e6e3da}
.fig{background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:clamp(18px, 3vw, 32px)}
.fig-label{font-family:var(--sans);font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted)}
.fig-title{font-family:var(--serif);font-size:1.4rem;line-height:1.25;margin:6px 0 20px;font-weight:500;text-wrap:balance}
@media (min-width:641px){.margin-notes{gap:130px;padding-top:150px}}   /* this essay spaces its two notes further apart */
@keyframes pen{from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; }}
.sheet-wrap{position:relative;padding:14px 6px 6px}
.sheet{background-color:var(--sheet);color:var(--slip-ink);background-image:var(--noise), linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px), linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);background-size:180px, 60px 60px, 60px 60px, 12px 12px, 12px 12px;box-shadow:0 1px 1px #0000000f, 0 14px 30px -16px #00000055;padding:clamp(14px, 2.4vw, 26px)}
.tape{position:absolute;width:92px;height:26px;z-index:2;background:var(--tape);background-image:var(--noise);background-size:120px;box-shadow:0 1px 2px #0000001a}
.tape.l{top:2px;left:18px;transform:rotate(-6deg)}
.tape.r{top:4px;right:22px;transform:rotate(4deg)}
.sheet .fig-label, .sheet .fig-title{color:var(--slip-ink)}
.sheet .fig-label{opacity:0.7}
svg.chart{width:100%;height:auto;display:block;cursor:ew-resize;user-select:none}
.chart text{fill:var(--slip-ink)}
.chart .tick{stroke:var(--slip-ink);stroke-width:1;opacity:0.55}
.chart .tick.major{opacity:0.9;stroke-width:1.3}
.chart .yr{font-family:var(--mono);font-size:11px;opacity:0.75}
.chart .hand{font-family:var(--serif);font-style:italic;font-size:17px}
.chart .hand.sm{font-size:14px}
.chart .small-caps{font-family:var(--sans);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;opacity:0.65}
.chart .pencil{stroke:var(--graphite);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-dasharray:2 6}
.chart .ink{fill:none;stroke-linecap:round;stroke-linejoin:round}
.chart .ink.life{stroke:var(--slip-life)}
.chart .ink.once{stroke:var(--slip-once)}
.chart .ink.pen{stroke:var(--slip-ink);stroke-width:1.3;opacity:0.8}
.chart .draw{stroke-dasharray:1600;animation:draw 2.2s cubic-bezier(.35,.6,.25,1) 0.4s both}
.chart .draw.late{animation-delay:2.2s;animation-duration:0.9s}
@keyframes draw{from { stroke-dashoffset: 1600; } to { stroke-dashoffset: 0; }}
.chart .hatch{animation:wipe 1.6s ease-out 1.4s both}
@keyframes wipe{from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); }}
.chart .fade{animation:inkin 0.8s ease-out both}
@keyframes inkin{from { opacity: 0.15; } to { opacity: 1; }}
.chart .tally{stroke:var(--slip-life);stroke-width:1.8;stroke-linecap:round}
.chart .stub{fill:var(--slip-once);opacity:0.85}
.chart .cursor{stroke:var(--slip-ink);stroke-width:1.2;stroke-dasharray:3 4;opacity:0.7}
.chart .tag{fill:var(--slip);stroke:var(--slip-ink);stroke-width:1}
.chart .tag-t{font-family:var(--mono);font-size:11.5px}
.chart .dot-life{fill:var(--slip-life)}
.chart .dot-once{fill:var(--slip-once)}
.hint{font-family:var(--sans);font-size:0.8rem;color:var(--slip-ink);opacity:0.7;margin-top:6px}
.note{font-family:var(--serif);font-style:italic;font-size:1.15rem;margin:14px 0 0;min-height:3.2em;color:var(--slip-ink);max-width:56ch}
sup.ref{font-family:var(--sans);font-size:0.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}
.fig-head{max-width:860px;margin:0 auto 18px}
.fig-head .fig-label{color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:40px;padding:10px 6px 4px}
.card{position:relative;background-color:var(--card);color:var(--slip-ink);background-image:var(--noise), repeating-linear-gradient(transparent 0 27px, var(--card-rule) 27px 28px);background-size:180px, 100% 28px;background-position:0 0, 0 70px;padding:18px 22px 46px;box-shadow:0 1px 1px #0000000f, 0 12px 26px -14px #00000050;border-top:4px solid var(--edge);animation:deal 0.9s cubic-bezier(.2,.8,.25,1) both}
.card.toaster{--edge:var(--slip-once);transform:rotate(-1.6deg);animation-delay:0.2s}
.card.system{--edge:var(--slip-life);transform:rotate(1.1deg);animation-delay:0.45s}
@keyframes deal{from { translate: -24px 18px; rotate: -4deg; opacity: 0.2; } to { translate: 0 0; rotate: 0deg; opacity: 1; }}
.card::after{content:"";position:absolute;left:50%;bottom:14px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--paper);box-shadow:inset 0 1px 2px #00000040}
.card .no{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.14em;opacity:0.7;display:flex;justify-content:space-between}
.card h3{font-family:var(--serif);font-weight:500;font-size:1.45rem;margin:6px 0 14px;color:var(--edge)}
.card dl{margin:0;display:grid;gap:0}
.card .row{display:grid;grid-template-columns:8.2em minmax(0, 1fr);gap:10px;min-height:28px;align-items:start;padding-top:3px}
.card dt{font-family:var(--sans);font-size:0.66rem;letter-spacing:0.12em;text-transform:uppercase;opacity:0.65;padding-top:4px}
.card dd{margin:0;font-family:var(--mono);font-size:0.8rem;line-height:1.55}
.card-notes{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:40px;margin-top:14px}
.card-notes p{margin:0;font-family:var(--serif);font-style:italic;font-size:1.12rem;color:var(--ink);display:flex;gap:10px;align-items:flex-start}
.card-notes svg{flex:none;width:34px;height:30px;overflow:visible}
.card-notes path{fill:none;stroke:var(--muted);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:90;animation:pen 0.8s ease-out 1.3s both}
.cal{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;padding:6px 0 10px}
.page{width:148px;background-color:var(--slip);color:var(--slip-ink);background-image:var(--noise);background-size:180px;box-shadow:0 1px 1px #0000000f, 0 10px 20px -12px #00000050;text-align:center;padding-bottom:14px;-webkit-mask:radial-gradient(circle 3px at 6px 0, #0000 98%, #000) -1px 0 / 12px 100%;mask:radial-gradient(circle 3px at 6px 0, #0000 98%, #000) -1px 0 / 12px 100%;animation:drop 0.6s cubic-bezier(.3,1.4,.5,1) both}
.page:nth-child(1){rotate:-2deg;animation-delay:.2s}
.page:nth-child(2){rotate:1.5deg;animation-delay:.45s}
.page:nth-child(3){rotate:-1deg;animation-delay:.7s}
.page:nth-child(4){rotate:2.2deg;animation-delay:.95s}
@keyframes drop{from { translate: 0 -14px; opacity: 0.2; } to { translate: 0 0; opacity: 1; }}
.page .mo{background:var(--band);color:var(--slip);font-family:var(--sans);font-weight:600;font-size:0.72rem;letter-spacing:0.2em;padding:9px 0 6px}
.page .d{font-family:var(--serif);font-size:3.4rem;line-height:1;margin-top:10px;font-weight:400}
.page .yr{font-family:var(--mono);font-size:0.7rem;opacity:0.6}
.page .what{font-family:var(--serif);font-style:italic;font-size:1rem;line-height:1.25;margin:8px 10px 0}
.page.b-life{--band:var(--slip-life)}
.page.b-once{--band:var(--slip-once)}
.page.b-ink{--band:var(--slip-ink)}
.strip-box{margin-top:18px}
svg.strip{width:100%;height:auto;display:block}
.strip text{fill:var(--slip-ink)}
.strip .hand{font-family:var(--serif);font-style:italic;font-size:16px}
.strip .yr2{font-family:var(--mono);font-size:11px;opacity:0.75}
.strip .tick{stroke:var(--slip-ink);stroke-width:1;opacity:0.55}
.strip .tick.major{opacity:0.9;stroke-width:1.3}
.strip .wipe{animation:wipe 1.6s ease-out 1.2s both}
.strip .pen{fill:none;stroke:var(--slip-ink);stroke-width:1.3;stroke-linecap:round;opacity:0.85}
.strip-sheet{position:relative;background-color:var(--sheet);color:var(--slip-ink);background-image:var(--noise), linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);background-size:180px, 12px 12px, 12px 12px;padding:18px 18px 10px;rotate:-0.4deg;box-shadow:0 1px 1px #0000000f, 0 12px 26px -16px #00000050}
.notes{border-top:1px solid var(--rule);margin-top:3em;padding-top:1.4em}
.notes h2{font-family:var(--sans);font-size:0.78rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:0 0 14px}
.notes ol{margin:0;padding-left:1.4em;font-family:var(--sans);font-size:0.86rem;line-height:1.55;color:var(--muted);display:grid;gap:6px}
.notes li:target{color:var(--ink);background:var(--life-soft)}
.notes cite{font-style:italic}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--card:#e6e3da}
}
@media (max-width: 640px){
  .cards, .card-notes{grid-template-columns:minmax(0, 1fr);gap:24px}
  .card-notes{display:none}
  .page{width:calc(50% - 12px)}
}
/* this essay's own takes on shared objects */
.sheet{min-width:auto;cursor:auto}
.sheet::before,.sheet::after{content:none}   /* uses its own .tape strips */
/* phone mode: the drawings are rebuilt narrower and taller by the page script; text sizes are in viewBox units */
@media (max-width: 560px){
  .sheet-wrap{padding:14px 2px 6px}
  .sheet{padding:12px 10px 14px}
  .tape{width:72px;height:22px}
  .chart .hand{font-size:15px}
  .chart .hand.sm{font-size:14.5px}
  .chart .yr{font-size:14px}
  .chart .small-caps{font-size:14px}
  .chart .tag-t{font-size:15px}
  .note{font-size:1.05rem}
  .strip-sheet{padding:12px 8px 6px}
  .strip .hand{font-size:15px}
  .strip .yr2{font-size:14px}
  .slip .stamp.s2{right:36px}   /* keeps the thump-in scale from widening the page */
  
}