/* =====================================================================
   Paper and Ink · essays/the-task-is-not-the-job.css
   "The Task Is Not the Job": 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 job envelope with task slips laid above it (Figure 1)
   and an hours worksheet with three demand scenarios (Figure 2).
   Gold = technical task exposure; blue = the employment outcome; everything else is ink and graphite. */

/* ---- 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 job envelope ------------------------------------------ */
/* clip sideways overflow so a stamp's starting scale can never widen the page on a phone */
/* two rows, each paper object beside its own note: the slips with the first, the envelope with the second */
.envfig { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 1.1rem 44px; align-items: center; overflow-x: clip; overflow-clip-margin: 14px; padding-top: 6px; }
.slips { display: grid; gap: .4rem; margin: 0 .4rem; }
.tslip {
  margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  font-family: var(--mono); font-size: .72rem; line-height: 1.35; color: var(--slip-ink);
  background: var(--noise), var(--slip); padding: .35rem .55rem;
  box-shadow: 0 1px 1px var(--shadow), 0 6px 14px -10px var(--shadow-deep);
  animation: fade .5s ease both;
}
.tslip:nth-child(odd) { transform: rotate(-.5deg); }
.tslip:nth-child(even) { transform: rotate(.4deg); }
.tslip:nth-child(1) { animation-delay: .2s; }
.tslip:nth-child(2) { animation-delay: .35s; }
.tslip:nth-child(3) { animation-delay: .5s; }
.tslip:nth-child(4) { animation-delay: .65s; }
.tslip:nth-child(5) { animation-delay: .8s; }
.tslip:nth-child(6) { animation-delay: .95s; }
.tslip.ax { color: var(--slip-once); }
.tslip b {
  font-family: var(--sans); font-weight: 600; font-size: .56rem; letter-spacing: .12em; text-transform: uppercase;
  flex: none; border: 1.2px solid currentColor; padding: .05rem .3rem; animation: thump .45s cubic-bezier(.3, 1.6, .5, 1) 1.3s both;
}
.env {
  position: relative; background: var(--noise), var(--sheet); padding: 3.4rem 1.3rem 1.3rem; transform: rotate(-.6deg);
  color: var(--slip-life); border: 1.5px solid color-mix(in srgb, var(--slip-life) 55%, transparent);
  animation: fade .6s ease 1.6s both;
}
.flap { position: absolute; top: 0; left: 0; width: 100%; height: 3rem; overflow: visible; }
.flap path { fill: none; stroke: currentColor; stroke-opacity: .55; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.eh { font-family: var(--mono); font-size: .66rem; color: var(--slip-ink); opacity: .7; margin: 0; }
.et { font-family: var(--serif); font-style: italic; font-size: 1.35rem; line-height: 1.2; margin: .15rem 0 .7rem; }
.erow { display: flex; align-items: baseline; gap: .5rem; font-family: var(--mono); font-size: .74rem; padding: .2rem 0; }
.erow i { flex: 1; border-bottom: 1px dotted currentColor; opacity: .5; }
.erow b { font-family: var(--serif); font-size: 1.1rem; font-weight: 500; }
.env .stamp.s1 { display: table; margin: .8rem .2rem 0 auto; color: var(--slip-life); transform: rotate(5deg); animation-delay: 2.4s; }
.envfig .mnote p { color: var(--ink); }
.envfig .n1 { animation: fade .7s ease 1.4s both; }
.envfig .n2 { animation: fade .7s ease 2.7s both; }
.envfig .n1 .pen path { animation-delay: 1.4s; }
.envfig .n2 .pen path { animation-delay: 2.7s; }
.envfig .n1 b { color: var(--once); }
.envfig .n2 b { color: var(--life); }

/* ---- Figure 2: the hours worksheet --------------------------------------- */
.ws {
  position: relative; transform: rotate(.4deg); padding: 1.5rem 1.4rem 1.2rem;
  background: var(--noise),
    linear-gradient(var(--grid-major) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(var(--grid-minor) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px) 0 0 / 12px 12px,
    var(--sheet);
  color: var(--slip-ink);
}
.ws::before, .ws::after { content: ""; position: absolute; top: -11px; width: 92px; height: 26px; background: var(--noise), var(--tape); }
.ws::before { left: 22px; transform: rotate(-6deg); }
.ws::after { right: 22px; transform: rotate(4deg); }
.wsh { font-family: var(--sans); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .9rem; opacity: .8; }
.wgrid { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr)); font-family: var(--mono); font-size: .76rem; }
.wgrid > span { padding: .32rem .5rem; text-align: right; border-bottom: 1px solid color-mix(in srgb, var(--slip-ink) 16%, transparent); animation: fade .5s ease both; }
.wgrid > .c0 { text-align: left; font-family: var(--sans); font-size: .72rem; }
.wgrid > .hd { font-family: var(--sans); font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1.5px solid var(--slip-ink); }
.wgrid > :nth-child(5n+2) { border-right: 1px dashed color-mix(in srgb, var(--slip-ink) 35%, transparent); color: var(--graphite); }
.wgrid > .once { color: var(--slip-once); animation-delay: .4s; }
.wgrid > .life { color: var(--slip-life); animation-delay: 1s; }
.wgrid > .tot { font-weight: 600; border-top: 1.5px solid currentColor; }
.wgrid > :nth-child(5n+2).once, .wgrid > :nth-child(5n+2).life { opacity: .75; }
.wgrid > .bl { color: var(--graphite); border-bottom: 0; }
.bar { position: relative; border-bottom: 0 !important; }
.bar::before { content: ""; position: absolute; inset: .4rem .5rem; border: 1px dashed var(--graphite); }
.bar i { position: absolute; top: .4rem; bottom: .4rem; left: .5rem; background: var(--slip-life); opacity: .8; animation: grow .9s ease 1.4s both; transform-origin: left; }
.bar .b100 { width: calc(100% - 1rem); }
.bar .b58 { width: calc((100% - 1rem) * .583); }
.bar .b79 { width: calc((100% - 1rem) * .792); }
@keyframes grow { from { transform: scaleX(0); } }
.wsn { margin: .9rem 0 0; color: var(--slip-ink); text-align: right; animation: fade .7s ease 2.3s both; }
.wsn b { color: var(--slip-life); }

@media (max-width: 640px) {
  .envfig { grid-template-columns: minmax(0, 1fr); }
  .envfig .mnote { margin-bottom: .6rem; }
  .envfig .pen { display: none; }
}

/* Phone mode: each paper object stacks above its own note; the worksheet keeps its five columns
   but tightens type and padding so every figure fits a 360px screen without scrolling. */
@media (max-width: 560px) {
  .env { padding: 3rem 1rem 1.1rem; }
  .erow { font-size: .72rem; }
  .tslip b, .eh { font-size: .7rem; }
  .ws { padding: 1.3rem .7rem 1rem; }
  .wsh { font-size: .7rem; }
  .wgrid { grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(0, 1fr)); font-size: .7rem; }
  .wgrid > span { padding: .3rem .25rem; }
  .wgrid > .c0 { font-size: .7rem; }
  .wgrid > .hd { font-size: .6875rem; letter-spacing: .02em; text-transform: none; }
  .bar::before { inset: .4rem .2rem; }
  .bar i { left: .2rem; }
  .bar .b100 { width: calc(100% - .4rem); }
  .bar .b58 { width: calc((100% - .4rem) * .583); }
  .bar .b79 { width: calc((100% - .4rem) * .792); }
}