/* =====================================================================
   Paper and Ink · essays/the-rule-did-not-reach-the-pipeline.css
   "The Rule Did Not Reach the Pipeline": the figures only this dispatch uses.
   Loaded after the shared stylesheets; everything shared lives in css/.
   ===================================================================== */

/* Layout: one 64ch reading column on grained paper; two paper objects break out to 860px:
   a pipeline specification beside an execution trace (Figure 1)
   and a slip of data paths into the evaluator with a check at the sink (Figure 2).
   Gold = the declared data-use rule; blue = the observed data flow. */

/* ---- footnote markers -------------------------------------------------- */
sup.ref { font-family: var(--sans); font-size: .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; }
.sources li:target { color: var(--ink); background: var(--life-soft); }

/* ---- Figure 1: the specification and the trace --------------------------- */
/* two columns, each a paper object with its note directly beneath, so the notes stay with their objects */
.specfig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; align-items: stretch; overflow-x: clip; overflow-clip-margin: 14px; padding-top: 6px; }
.scol { min-width: 0; display: grid; grid-template-rows: 1fr auto; gap: 14px; }
.spec, .trace {
  position: relative; padding: 1.2rem 1.3rem 1.3rem;
  font-family: var(--mono); font-size: .74rem; line-height: 1.55;
}
.spec { background: var(--noise), var(--sheet); border-top: 6px solid var(--slip-once); transform: rotate(-.7deg); animation: fade .6s ease .1s both; }
.trace { background: var(--noise), var(--slip); border-top: 6px solid var(--slip-life); transform: rotate(.6deg); animation: fade .6s ease 1.9s both; }
.sh, .th { font-family: var(--sans); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .5rem; opacity: .8; }
.ss { font-family: var(--sans); font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--slip-once); margin: 0 0 .3rem; padding-bottom: .25rem; border-bottom: 1.5px solid currentColor; }
.srow, .tl { display: flex; justify-content: space-between; gap: .8rem; margin: 0; padding: .16rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.srow span, .tl span { min-width: 0; overflow-wrap: anywhere; }
.srow b, .tl b { font-weight: 500; text-align: right; opacity: .9; }
.srow:nth-of-type(3) { animation: fade .4s ease .3s both; }
.srow:nth-of-type(4) { animation: fade .4s ease .45s both; }
.srow:nth-of-type(5) { animation: fade .4s ease .6s both; }
.srow.cut { color: var(--slip-once); animation: fade .4s ease .9s both; }
.srow.cut s { text-decoration-thickness: 1.5px; }
.srow.cut b { opacity: 1; font-weight: 600; }
.smargin { margin: .45rem 0 0; font-size: 1rem; color: var(--slip-once); transform: rotate(-1.5deg); animation: fade .6s ease 1.1s both; }
.spec .stamp.s1 { display: table; margin: .6rem .2rem 0 auto; color: var(--slip-once); transform: rotate(-6deg); animation-delay: 1.4s; }
.tl { color: var(--slip-life); }
.tl:nth-of-type(2) { animation: fade .4s ease 2.2s both; }
.tl:nth-of-type(3) { animation: fade .4s ease 2.35s both; }
.tl:nth-of-type(4) { animation: fade .4s ease 2.5s both; }
.tl:nth-of-type(5) { animation: fade .4s ease 2.65s both; }
/* the copied content: set off by a dashed box, arriving last */
.tcopy {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .6rem; align-items: baseline;
  margin: .7rem 0 0 .8rem; padding: .5rem .6rem; border: 1.5px dashed var(--slip-life); color: var(--slip-life);
  transform: rotate(-.5deg); animation: thump .45s cubic-bezier(.3, 1.6, .5, 1) 3s both;
}
.tcopy .tt { font-family: var(--sans); font-size: .58rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; border: 1px solid currentColor; padding: .05rem .3rem; }
.tcopy span:nth-child(2) { font-weight: 500; }
.tcopy small { grid-column: 2; font-size: .64rem; opacity: .9; }
.trace .stamp.s2 { display: table; margin: .7rem .2rem 0 auto; color: var(--slip-life); transform: rotate(-4deg); animation-delay: 3.5s; }
.fnote { margin: 0; padding-left: .4rem; color: var(--ink); }
.fnote.n1 { animation: fade .7s ease 1.7s both; }
.fnote.n2 { animation: fade .7s ease 3.9s both; }
.fnote.n1 b { color: var(--once); }
.fnote.n2 b { color: var(--life); }

/* ---- Figure 2: the paths into the evaluator ----------------------------- */
.flow {
  position: relative; background: var(--noise), var(--slip); padding: 1.4rem 1.3rem 1.2rem; transform: rotate(.3deg);
  display: grid; gap: 1rem; overflow-x: clip; overflow-clip-margin: 14px;
}
.flow::before, .flow::after { content: ""; position: absolute; top: -11px; width: 80px; height: 24px; background: var(--noise), var(--tape); }
.flow::before { left: 20px; transform: rotate(-5deg); }
.flow::after { right: 20px; transform: rotate(4deg); }
.fh { font-family: var(--sans); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; margin: 0; opacity: .8; }
.route, .check { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 9rem; gap: .8rem; align-items: center; padding-top: .9rem; border-top: 1px dashed color-mix(in srgb, var(--slip-ink) 30%, transparent); }
.r1 { animation: fade .6s ease .3s both; }
.r2 { animation: fade .6s ease 1.2s both; }
.check { animation: fade .6s ease 2.6s both; }
.rl { margin: 0; font-family: var(--sans); font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.nodes { display: grid; grid-template-columns: minmax(0, 1fr) 2.4rem minmax(0, 1fr) 2.4rem minmax(0, 1fr); align-items: center; }
.node { font-family: var(--mono); font-size: .7rem; line-height: 1.35; text-align: center; padding: .45rem .4rem; border: 1.4px solid currentColor; min-width: 0; }
.node.mid { color: var(--slip-life); border-style: dashed; }
/* an arrow: a rule with a head; the blocked one spans the middle and carries a gold bar */
.arr { position: relative; height: 1.4rem; }
.arr::before { content: ""; position: absolute; left: 3px; right: 6px; top: 50%; border-top: 1.5px solid currentColor; }
.arr::after { content: ""; position: absolute; right: 2px; top: calc(50% - 4px); border: 4px solid transparent; border-left: 6px solid currentColor; border-right: 0; }
.arr.go { color: var(--slip-life); }
.arr.a1 { animation: fade .4s ease 1.5s both; }
.arr.a2 { animation: fade .4s ease 1.8s both; }
.arr.blk { grid-column: 2 / 5; height: 2.6rem; color: var(--graphite); }
/* the blocked route stops at the filter: no line beyond it, no arrowhead */
.arr.blk::before { right: 50%; }
.arr.blk::after { display: none; }
.arr.blk i {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; font-family: var(--sans); font-style: normal; font-size: .6rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--slip-once); background: var(--slip); border: 2px solid var(--slip-once); padding: .3rem .5rem; white-space: nowrap;
  animation: thump .45s cubic-bezier(.3, 1.6, .5, 1) .8s both;
}
.res { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1rem; line-height: 1.25; }
.res.once { color: var(--slip-once); }
.res.life { color: var(--slip-life); animation: fade .5s ease 2.1s both; }
.cx { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1rem; line-height: 1.3; color: var(--slip-life); }
.cx b { font-style: normal; font-weight: 600; }
.check .stamp.s3 { justify-self: start; color: var(--slip-life); font-size: .66rem; transform: rotate(-4deg); white-space: nowrap; animation-delay: 3.1s; }

@media (max-width: 760px) {
  .route, .check { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
}
@media (max-width: 640px) {
  .specfig { grid-template-columns: minmax(0, 1fr); }
}

/* Phone mode: the specification stacks above the trace, each with its note; the paths turn
   vertical, one node above the next with the arrows pointing down. */
@media (max-width: 560px) {
  .spec, .trace { padding: 1rem 1rem 1.1rem; font-size: .72rem; }
  .tcopy { margin-left: 0; }
  .tcopy small, .sh, .th { font-size: .7rem; }
  .flow { padding: 1.3rem .9rem 1rem; }
  .nodes { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .node { width: 100%; font-size: .74rem; }
  .arr { width: 1.4rem; height: 1.6rem; }
  .arr::before { left: 50%; right: auto; top: 2px; bottom: 6px; border-top: 0; border-left: 1.5px solid currentColor; }
  .arr::after { right: auto; left: calc(50% - 3.25px); top: auto; bottom: 1px; border: 4px solid transparent; border-top: 6px solid currentColor; border-bottom: 0; }
  .arr.blk { grid-column: auto; width: 100%; height: 3rem; }
  .arr.blk::before { bottom: 50%; }
  .rl, .arr.blk i { font-size: .68rem; }
}