/* =====================================================================
   Paper and Ink · essays/say-it-once.css
   "Say It Once": 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; paper-object figures (index cards, fan-fold printout, catalog card, graph paper) break out to 860px. */

:root{--slip-once-soft:#e8b80033;--bar:#6b6f7512}
.dek{max-width:42ch}
.paperobj{background:var(--noise),var(--slip)}
.fig-move{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:44px;align-items:start}
.side-head{font-family:var(--serif);font-style:italic;font-size:1.35rem;margin:0 0 .8rem}
.side-head.life{color:var(--life)}
.side-head.once{color:var(--once)}
.cards{display:grid;gap:16px}
.card{position:relative;font-family:var(--mono);font-size:.78rem;line-height:1.7em;padding:.55em 1.1em 1em;background:var(--noise),repeating-linear-gradient(to bottom,transparent 0 calc(1.7em - 1px),var(--grid-major) calc(1.7em - 1px) 1.7em) 0 2.45em/100% 100% no-repeat,var(--slip)}
.card .ch{font-weight:500;letter-spacing:.1em;font-size:.72rem;border-bottom:1px solid var(--graphite);padding-bottom:.25em;margin-bottom:.35em;display:flex;justify-content:space-between}
.card.c1{transform:rotate(-1.3deg)}
.card.c2{transform:rotate(.9deg);margin-left:14px}
.ptr{color:var(--slip-life);font-weight:500}
.row{display:flex;gap:1.1ch;white-space:nowrap}
.addr{display:inline-grid;position:relative}
.addr>span{grid-area:1/1}
.addr .old{background:linear-gradient(var(--slip-ink),var(--slip-ink)) 0 58%/0% 1.6px no-repeat;transition:background-size .32s ease,opacity .3s ease .25s}
.addr .new{font-family:var(--serif);font-style:italic;font-size:1.08em;opacity:0;transform:translate(.4em,-.7em) rotate(-2.5deg);transition:opacity .3s ease .3s;text-shadow:0 0 2px var(--slip),0 0 3px var(--slip);white-space:nowrap}
.card .addr .new{color:var(--slip-life)}
.fan .addr .new{color:var(--slip-once)}
.addr.struck .old{background-size:100% 1.6px;opacity:.45}
.addr.struck .new{opacity:1}
.fan{position:relative;font-family:var(--mono);font-size:.74rem;line-height:1.85em;padding:14px 38px 18px;transform:rotate(.7deg);background:var(--noise),repeating-linear-gradient(to bottom,var(--bar) 0 3.7em,transparent 3.7em 7.4em) 0 calc(14px + 1.85em)/100% 100% no-repeat,var(--slip)}
.fan::before,.fan::after{content:"";position:absolute;top:0;bottom:0;width:26px;background:radial-gradient(circle,var(--paper) 4px,transparent 4.6px) 50% 6px/100% 1.85em repeat-y;border-color:var(--graphite);border-style:dashed;opacity:.9}
.fan::before{left:0;border-width:0 1px 0 0}
.fan::after{right:0;border-width:0 0 0 1px}
.fan .row{gap:1.4ch}
.fan .hdr{font-weight:500;letter-spacing:.06em;opacity:.75}
.fan .dup .old{box-shadow:inset 0 -.5em 0 var(--slip-once-soft)}
.w1{width:5ch;flex:none}
.w2{width:11ch;flex:none}
.w3{width:19ch;flex:none}
.w4{width:3ch;flex:none;text-align:right}
.miss{position:relative}
.loop{position:absolute;left:-14px;right:-14px;top:-5px;bottom:-5px;width:calc(100% + 28px);height:calc(100% + 10px);overflow:visible;pointer-events:none;opacity:0}
.loop path{fill:none;stroke:var(--slip-ink);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset .9s ease}
.miss.flag .loop{opacity:1}
.miss.flag .loop path{stroke-dashoffset:0}
.tally{font-family:var(--mono);font-size:.78rem;color:var(--muted);margin:1rem 0 0;font-variant-numeric:tabular-nums}
.tally b{font-weight:500}
.tally.life b{color:var(--life)}
.tally.once b{color:var(--once)}
.move-notes{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:44px;margin-top:1.2rem}
.move-notes p{margin:0;max-width:30ch;transition:opacity .5s ease}
.move-notes .later{opacity:0}
.moved .move-notes .later{opacity:1}
.fig-ctl{margin-top:1.2rem}
.side-notes{display:none;margin-top:.9rem}
.fig-cat{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:56px;align-items:center}
.cat{position:relative;font-family:var(--mono);font-size:.8rem;line-height:1.75em;padding:1.1em 1.4em 3.2em 1.4em;transform:rotate(-1deg);background:var(--noise), linear-gradient(90deg,transparent calc(1.4em + 5.2ch),var(--graphite) calc(1.4em + 5.2ch) calc(1.4em + 5.2ch + 1px),transparent 0) 0 0/100% 100% no-repeat, repeating-linear-gradient(to bottom,transparent 0 calc(1.75em - 1px),var(--grid-major) calc(1.75em - 1px) 1.75em) 0 4.6em/100% 100% no-repeat, var(--slip)}
.cat::after{content:"";position:absolute;bottom:12px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--paper);box-shadow:inset 0 1px 2px var(--shadow-deep)}
.cat .call{display:flex;justify-content:space-between;font-size:.72rem;letter-spacing:.06em;opacity:.8}
.cat .ttl{margin:.2em 0 .5em calc(5.2ch + .8ch)}
.cat .nf{display:flex;gap:.8ch}
.cat .nf b{width:5.2ch;flex:none;font-weight:500;color:var(--slip-life)}
.cat .oath{font-family:var(--serif);font-style:italic;font-size:1.05rem;margin:.7em 0 0 calc(5.2ch + .8ch);line-height:1.3}
.cat .oath small{display:block;font-family:var(--mono);font-style:normal;font-size:.68rem;opacity:.7;margin-top:.2em}
.cat .stamp{position:absolute;top:1.6em;right:1.2em;color:var(--slip-life);transform:rotate(6deg);animation-delay:1.4s}
.cat-notes{display:grid;gap:2.6rem}
.cat-notes .a1 path{animation-delay:1.7s}
.cat-notes .a2 path{animation-delay:2.1s}
.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:700px){
  .fig-move,.move-notes{grid-template-columns:1fr;gap:28px}
  .move-notes{display:none}
  .side-notes{display:block!important}
}
@media (max-width:640px){
  .fig-cat{grid-template-columns:1fr;gap:28px}
  .pen{display:none}
  .cat-notes{gap:1rem}
}
@media (max-width:440px){
  .fan{font-size:.64rem;padding-inline:32px}
  .card{font-size:.72rem}
}
/* Phone mode: Figure 3 is redrawn by the page script on a 420-wide viewBox; let the sheet fit the column and size its text for that scale. Figure 2's stamp moves to the card's foot so it clears the call number and title. */
@media (max-width:560px){
  .sheet-scroll{overflow-x:visible;padding-inline:4px;margin-inline:-4px}
  .sheet{min-width:0;padding:26px 8px 10px}
  .sheet::before,.sheet::after{width:72px}
  #chart .svglab{font-size:19px}
  #chart .svgnote{font-size:16.5px}
  #chart .tick{font-size:15px}
  #chart .tagtext{font-size:16px}
  #chart .rowlab{font-size:15px;letter-spacing:.08em}
  .cat .stamp{top:auto;bottom:.9em;right:1em}
}