/* =====================================================================
   Paper and Ink · essays/who-reads-the-label.css
   "Who Reads the Label": 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; five paper objects (a peeling label beside a contract exhibit, a graph-paper strip, an inter-office envelope, a graph-paper 2x2, tear-off calendar pages) break out to 860px. Gold = the federal label; blue = the buyer's contract. */

/* this essay's arrows and graph paper deliberately differ from the shared defaults */
.pen{width:auto;height:auto}
.sheet{min-width:auto;transform:none;touch-action:auto;cursor:auto}
:root{--fold:#e4e1d6}
:root[data-theme="dark"]{--fold:#c9c5ba}
body{margin:0}
.stamp{white-space:nowrap}
.pen path{stroke-dasharray:160;animation:draw .7s ease both}
@keyframes draw{from{stroke-dashoffset:160}}
.fig1{display:grid;grid-template-columns:minmax(0,1fr) 70px minmax(0,1.15fr);gap:18px;align-items:center}
.label{position:relative;color:var(--slip-ink);background:var(--noise),var(--slip);border:1.5px solid var(--slip-ink);padding:.7rem .9rem 3.6rem;font-family:var(--mono);font-size:.74rem;line-height:1.5;transform:rotate(-2deg);animation:lift 1s ease .3s both;clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),calc(100% - 34px) 100%,0 100%)}
@keyframes lift{from{transform:rotate(0deg)}}
.label-wrap{position:relative;filter:drop-shadow(0 1px 1px var(--shadow)) drop-shadow(0 8px 10px var(--shadow-deep))}
.label-wrap::after{content:"";position:absolute;right:0;bottom:0;width:34px;height:34px;transform:rotate(-2deg) translate(-6px,-4px);background:linear-gradient(135deg,transparent 50%,var(--fold) 50%);box-shadow:-2px -2px 4px var(--shadow)}
.lt{font-family:var(--sans);font-weight:600;font-size:1.65rem;letter-spacing:-.01em;line-height:1;color:var(--slip-ink);margin:0}
.lsub{font-size:.66rem;margin:.2rem 0 .3rem}
.bar8{height:8px;background:var(--slip-ink);margin:.35rem 0}
.bar3{height:3px;background:var(--slip-ink);margin:.3rem 0}
.lr{display:flex;justify-content:space-between;gap:.6rem;border-bottom:1px solid var(--slip-ink);padding:.18rem 0}
.lr b{font-weight:500}
.lr span{color:var(--slip-once);text-align:right}
.lfoot{font-size:.6rem;margin-top:.45rem;opacity:.8}
.label .stamp{position:absolute;left:14%;bottom:1rem;color:var(--slip-once);transform:rotate(-12deg);animation-delay:1.2s;font-size:.72rem}
.arrow1{width:70px;height:60px}
.arrow1 path{animation-delay:1.8s}
.arrow1-note{font-family:var(--serif);font-style:italic;font-size:.95rem;text-align:center;color:var(--muted);margin:0;line-height:1.2}
.exhibit{position:relative;background:var(--noise),var(--sheet);padding:1.1rem 1.2rem 1.3rem;font-family:var(--mono);font-size:.72rem;line-height:1.55;transform:rotate(1deg)}
.exhibit h4{font-family:var(--mono);font-weight:500;font-size:.74rem;letter-spacing:.12em;text-align:center;margin:0 0 .15rem}
.exhibit .es{text-align:center;font-size:.64rem;opacity:.75;margin:0 0 .7rem}
.cl{display:grid;grid-template-columns:3.2ch 1fr;gap:.5ch;margin:.25rem 0}
.cl b{font-weight:500}
.cl em{font-style:normal;color:var(--slip-life)}
.sig{display:flex;align-items:flex-end;gap:.8rem;margin-top:1rem}
.sig .line{flex:1;border-bottom:1px solid var(--slip-ink);font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--slip-life);line-height:1.2;padding-left:.3rem;animation:fade .8s ease 2.6s both}
.sig small{font-size:.6rem;opacity:.75}
.exhibit .stamp{position:absolute;right:.8rem;top:.7rem;color:var(--slip-life);transform:rotate(6deg);animation-delay:3s;font-size:.64rem}
.sheet{padding:28px 16px 14px}
.strip{min-width:560px;transform:rotate(-.6deg)}
.square{min-width:560px;transform:rotate(.5deg)}
.ink path,.ink line,.ink circle{stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1400;stroke-dashoffset:0;animation:ink 1.8s cubic-bezier(.4,.1,.3,1) both}
@keyframes ink{from{stroke-dashoffset:1400}}
.svgsc{font-family:var(--sans);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;fill:var(--graphite)}
.svgmono{font-family:var(--mono);font-size:11px}
.fig3{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:40px;align-items:center}
.env{position:relative;background:var(--noise),var(--slip);padding:2.4rem 1.2rem 1.2rem;transform:rotate(-1deg);font-family:var(--mono);font-size:.74rem}
.env .clasp{position:absolute;top:.6rem;left:50%;width:22px;height:22px;margin-left:-11px;border:1.5px solid var(--graphite);border-radius:50%}
.env .string{position:absolute;top:1.3rem;left:calc(50% + 10px);width:70px;height:2px;background:var(--graphite);transform:rotate(14deg);transform-origin:left center;opacity:.7}
.env h4{font-family:var(--sans);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;text-align:center;margin:0 0 .8rem;font-weight:600}
.env .holes{position:absolute;bottom:.6rem;right:1rem;display:flex;gap:8px}
.env .holes i{width:9px;height:9px;border-radius:50%;background:var(--paper);box-shadow:inset 0 1px 2px var(--shadow-deep)}
.erow{display:grid;grid-template-columns:14ch minmax(0,1fr) minmax(0,1.3fr);border-bottom:1px solid var(--slip-ink);position:relative}
.erow>span{padding:.4rem .5rem;min-width:0}
.erow>span+span{border-left:1px solid var(--slip-ink)}
.erow.hd{font-family:var(--sans);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;border-top:1.5px solid var(--slip-ink);border-bottom-width:1.5px}
.erow.x::after{content:"";position:absolute;left:.3rem;right:.3rem;top:52%;height:1.6px;background:var(--graphite);transform:rotate(-.6deg);transform-origin:left;animation:strike .5s ease both}
.erow.x1::after{animation-delay:1s}
.erow.x2::after{animation-delay:1.6s}
@keyframes strike{from{transform:scaleX(0) rotate(-.6deg)}}
.erow.now{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--slip-life);animation:fade .8s ease 2.2s both}
.erow.blank{height:2rem}
.env-note{font-size:.66rem;opacity:.8;margin:.8rem 0 0;line-height:1.5}
.notes3{display:grid;gap:2rem}
.mnote .pen{width:64px;height:40px}
.notes3 .a1 path{animation-delay:2.4s}
.notes3 .a2 path{animation-delay:2.8s}
.cal-scroll{overflow-x:auto;padding:20px 8px 14px;margin-inline:-8px}
.cal{display:flex;min-width:760px;padding-left:4px}
.pg{position:relative;flex:none;width:8.8rem;background:var(--noise),var(--slip);padding:0 .7rem .8rem;color:var(--slip-ink);text-align:center;box-shadow:0 1px 1px var(--shadow),0 8px 16px -10px var(--shadow-deep);animation:fade .5s ease both}
.pg+.pg{margin-left:-.45rem}
.pg::before{content:"";display:block;height:14px;margin:0 -.7rem .5rem;background:var(--graphite);-webkit-mask:radial-gradient(circle at 50% 100%,#0000 3px,#000 3.5px) 0 0/16px 100%;mask:radial-gradient(circle at 50% 100%,#0000 3px,#000 3.5px) 0 0/16px 100%}
.pg small{display:block;font-family:var(--sans);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase}
.pg b{display:block;font-family:var(--serif);font-weight:400;font-size:3rem;line-height:1;margin:.15rem 0}
.pg span{display:block;font-family:var(--mono);font-size:.66rem;line-height:1.45;min-height:3.9em}
.pg.g b,.pg.g small{color:var(--slip-once)}
.pg.b b,.pg.b small{color:var(--slip-life)}
.pg.b b{font-style:italic}
.pg:nth-child(odd){transform:rotate(-2deg)}
.pg:nth-child(even){transform:rotate(1.6deg) translateY(6px)}
.pg:nth-child(1){animation-delay:.2s;z-index:1}
.pg:nth-child(2){animation-delay:.4s;z-index:2}
.pg:nth-child(3){animation-delay:.6s;z-index:3}
.pg:nth-child(4){animation-delay:.8s;z-index:4}
.pg:nth-child(5){animation-delay:1s;z-index:5}
.pg:nth-child(6){animation-delay:1.2s;z-index:6}
.pg .ring{position:absolute;inset:2.1rem 1.2rem auto;height:3.5rem;pointer-events:none}
.pg .ring path{fill:none;stroke:var(--slip-once);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:300;stroke-dashoffset:0;animation:draw2 .9s ease 1.8s both}
@keyframes draw2{from{stroke-dashoffset:300}}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--fold:#c9c5ba}
}
@media (max-width:720px){
  .fig1{grid-template-columns:1fr;gap:10px}
  .arrow1{transform:rotate(90deg);margin:0 auto}
  .label-wrap{max-width:360px}
  .fig3{grid-template-columns:1fr;gap:20px}
  .mnote .pen{display:none}
}
@media (max-width:480px){
  .erow{grid-template-columns:8.5ch minmax(0,1fr) minmax(0,1.2fr);font-size:.66rem}
  .env{padding-inline:.7rem}
}
@media (max-width:560px){
  .fig1{padding-inline:8px}
  .label-wrap{margin-inline:auto}
  .arrow1{display:block;margin:0 auto}
  .arrow1-note{margin-top:-.2rem}
  .exhibit{margin-inline:4px}
  .label .stamp{left:7%;font-size:.68rem;letter-spacing:.12em}
  .strip,.square{min-width:0}
  #cont .svgmono{font-size:14.5px}
  #quad .svgsc{font-size:14.5px}
  #quad .svglab{font-size:15.5px}
  #quad .svgnote{font-size:14.5px}
  .erow{grid-template-columns:4.3rem minmax(0,.85fr) minmax(0,1.3fr)}
  .erow>span{padding:.4rem .35rem}
  .erow.now{font-size:.95rem}
  .cal-scroll{overflow-x:visible;padding:16px 4px 14px;margin-inline:0}
  .cal{min-width:0;flex-wrap:wrap;justify-content:center;row-gap:22px;padding-left:0}
  .pg{width:calc((100% + .9rem)/3 - 6px);box-sizing:border-box;padding:0 .5rem .7rem}
  .pg::before{margin:0 -.5rem .5rem}
  .pg:nth-child(3n+1){margin-left:0}
  .pg span{font-size:.7rem}
  .pg .ring{inset:2.1rem .7rem auto}
}