/* =====================================================================
   Paper and Ink · essays/the-cut-is-immediate.css
   "The Cut Is Immediate. The Automation Is Not.": the figure only this dispatch uses.
   Loaded after the shared stylesheets; everything shared lives in css/.
   ===================================================================== */

/* Layout: one 64ch reading column on grained paper; one paper object breaks out to 860px:
   a scenario worksheet whose gold top half (the headcount number) is finished and whose blue
   bottom half (the work handoff list) is mostly blank (Figure 1).
   Gold = the people you can cut; blue = the work you can hand off; duty names are plain ink. */

/* ---- 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 scenario worksheet --------------------------------------- */
/* clip sideways overflow so a stamp's starting scale can never widen the page on a phone */
.wsfig { overflow-x: clip; overflow-clip-margin: 14px; padding-top: 14px; }
.wsfig .ws {
  position: relative; width: min(100%, 640px); background: var(--noise), var(--sheet); color: var(--slip-ink); padding: 1.3rem 1.4rem 1.2rem;
  transform: rotate(-.5deg); font-family: var(--mono); font-size: .76rem; line-height: 1.5;
  box-shadow: 0 1px 1px var(--shadow), 0 10px 24px -12px var(--shadow-deep); animation: fade .6s ease .1s both;
}
.wsfig .ws::before, .wsfig .ws::after { content: ""; position: absolute; top: -11px; width: 84px; height: 24px; background: var(--noise), var(--tape); }
.wsfig .ws::before { left: 26px; transform: rotate(-5deg); }
.wsfig .ws::after { right: 26px; transform: rotate(4deg); }
.wsfig .wh { font-family: var(--sans); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .7rem; opacity: .8; }
.wsfig .wsub { margin: 1.3rem 0 .4rem; color: var(--slip-life); opacity: 1; }
/* the top half: four ledger lines and the first stamp, all in gold */
.wsfig .wtop { position: relative; color: var(--slip-once); padding-bottom: .9rem; border-bottom: 1.5px dashed color-mix(in srgb, var(--slip-ink) 40%, transparent); }
.wsfig .wl { display: flex; gap: 6px; max-width: 360px; padding: .12rem 0; }
.wsfig .wl i { flex: 1; min-width: 12px; border-bottom: 1px dotted currentColor; opacity: .45; transform: translateY(-.4em); }
.wsfig .wl b { font-weight: 500; }
.wsfig .stamp.s1 { position: absolute; right: 6px; top: 18px; color: var(--slip-once); transform: rotate(-7deg); animation-delay: .7s; }
/* the bottom half: the handoff list, filled in only three times */
.wsfig .wrow { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: .8rem; padding: .3rem 0; border-bottom: 1px solid color-mix(in srgb, var(--slip-ink) 22%, transparent); }
.wsfig .whead { font-family: var(--sans); font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1.5px solid currentColor; }
.wsfig .wrow .life { color: var(--slip-life); animation: fade .5s ease 1.6s both; }
.wsfig .wrow .life u { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.wsfig .wrow .blank { color: var(--graphite); font-family: var(--serif); font-style: italic; font-size: 1.05rem; line-height: 1.2; animation: fade .5s ease 2.1s both; }
.wsfig .wfoot { display: flex; justify-content: flex-end; margin-top: .8rem; }
.wsfig .stamp.s2 { color: var(--slip-life); transform: rotate(5deg); animation-delay: 2.8s; }
#fig1 + figcaption .btn { margin-left: 4px; }

/* Phone mode: the worksheet loses its tilt, the first stamp drops below the ledger lines, and each
   handoff row puts the duty on its own line above its answer. Small text stays 11px or more. */
@media (max-width: 560px) {
  .wsfig .ws { padding: 1.1rem .95rem 1rem; font-size: .72rem; transform: none; }
  .wsfig .wh, .wsfig .whead { font-size: .7rem; letter-spacing: .08em; }
  .wsfig .stamp.s1 { position: static; display: table; margin: .7rem 0 0 auto; }
  .wsfig .wrow { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .wsfig .whead > span:last-child { display: none; }
}