/* ============================================================
   pull.css — the pull.

   White stock. One sheet on the bed of the press, the second ink
   accumulating on it, a stamp line beneath, and a rail of what has
   been pulled. The photograph is under the sheet and only shows if
   asked for.
   ============================================================ */
/* the running head sits above the squished headline, whose inline box overflows
   upward and would otherwise take the click meant for the link */
.pull-page .runhead{ z-index:5 }
.pull-page .runhead a{ pointer-events:auto }
.pull-page .runhead a:hover{ color:var(--spot) }
.pull__hd{ display:flex; align-items:flex-end; gap:clamp(1rem,4vw,3rem); flex-wrap:wrap; margin-bottom:1.6rem }
.pull__hd h1{ margin-bottom:-.06em }
.pull__deck{ max-width:52ch }
.pull__src{ margin-top:1rem; display:flex; gap:.9rem; flex-wrap:wrap; opacity:.85 }
.pull__src button{ font:inherit; letter-spacing:inherit; text-transform:inherit; padding:0; border-bottom:2px solid transparent; opacity:.6 }
.pull__src button[aria-current="true"]{ border-bottom-color:var(--spot); opacity:1 }
.pull__src button:hover{ opacity:1 }
.pull__keys{ margin-top:.6rem; opacity:.5; font-weight:400 }
.pull__keys b{ font-weight:700 }

/* ---------- the press ---------- */
.press{ margin:0 }
.press__bed{ position:relative; background:var(--stock) }
.sheet{
  position:relative; aspect-ratio:352/240; background:var(--stock); overflow:hidden;
  box-shadow:0 0 0 1px var(--ink), 6px 8px 0 rgba(0,0,0,.12);
  transform-origin:50% 100%;
}
.sheet video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:fill; display:block;
  filter:grayscale(1) contrast(1.1); opacity:0; transition:opacity .3s steps(3);
}
.press[data-street="true"] .sheet video{ opacity:.16 }
.sheet__ink{ position:absolute; inset:0; width:100%; height:100%; display:block; mix-blend-mode:multiply; pointer-events:none }
.sheet__off{ position:absolute; inset:0; display:grid; place-items:center; opacity:.5 }
.press[data-on="true"] .sheet__off{ display:none }
.press[data-lost="true"] .sheet__off{ display:grid; color:var(--spot); opacity:1 }
.sheet[data-pulled="true"]{ animation:pull .7s steps(7) forwards }
@keyframes pull{
  30%{ transform:translateY(-10px) rotate(-1.2deg); box-shadow:0 0 0 1px var(--ink), 14px 22px 0 rgba(0,0,0,.14) }
  100%{ transform:translateY(60px) rotate(2deg) scale(.96); opacity:0 }
}
@media (prefers-reduced-motion:reduce){ .sheet[data-pulled="true"]{ animation:none; opacity:0 } }

.press__stamp{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:.8rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.press__stamp [data-stamp]{ flex:1 1 auto; min-width:0 }
.press__stamp [data-stamp] b{ color:var(--spot); font-weight:400 }
.press__timer{ display:inline-flex; align-items:center; gap:.5rem }
.press__timer i{ display:block; width:120px; height:6px; box-shadow:inset 0 0 0 1px var(--ink); background:linear-gradient(var(--spot),var(--spot)) no-repeat 0 0 / var(--p,0%) 100% }
.press__knobs{ display:flex; gap:.5rem }
.press__knobs .knob{ font-size:.58rem; padding:.3rem .55rem }
.press__knobs .knob[aria-pressed="true"]{ background:var(--ink); color:var(--stock); box-shadow:none }

/* ---------- the rail ---------- */
.rail{ display:grid; gap:1.2rem 1rem; grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); margin-top:1rem }
.rail__empty{ grid-column:1/-1; max-width:48ch }
.print{ margin:0; animation:hang .5s steps(5) }
@keyframes hang{ from{ transform:translateY(-14px); opacity:0 } }
.print img{ width:100%; display:block; box-shadow:0 0 0 1px var(--ink), 3px 4px 0 rgba(0,0,0,.12); transform:rotate(var(--r,0deg)) }
.print figcaption{ margin-top:.55rem; font-family:var(--mono); font-size:.56rem; line-height:1.55; letter-spacing:.08em; text-transform:uppercase }
.print figcaption b{ font-family:var(--anton); font-size:.95rem; letter-spacing:.02em; display:block }
.print figcaption a{ color:var(--spot); border-bottom:1px solid var(--spot) }
.pull__note{ margin-top:2.4rem; padding:0; color:var(--ink); opacity:.75; font-family:var(--mono); font-size:.66rem; line-height:1.7; max-width:70ch }
.pull__note b{ font-weight:700 }