/* =====================================================================
   Paper and Ink · essays/the-first-job-is-also-a-classroom.css
   "The First Job Is Also a Classroom": 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 position requisition whose printed duties and handwritten lessons are separate sections (Figure 1)
   and Davis's three wage estimates inked as stems on taped graph paper (Figure 2).
   Gold = the first job as production; blue = the first job as apprenticeship; the median is 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 position requisition ---------------------------------- */
/* clip sideways overflow so a stamp's starting scale can never widen the page on a phone */
.rqfig { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 28px 44px; align-items: start; overflow-x: clip; overflow-clip-margin: 14px; padding-top: 6px; }
.rq {
  position: relative; background: var(--noise), var(--sheet); padding: 1.2rem 1.3rem 1.4rem; transform: rotate(-.8deg);
  font-family: var(--mono); font-size: .74rem; line-height: 1.55; border-top: 6px solid var(--graphite);
  animation: fade .6s ease .1s both;
}
.rh { font-family: var(--sans); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; margin: 0; opacity: .8; }
.rn { font-size: .68rem; opacity: .65; margin: .1rem 0 .7rem; }
.rrow { display: flex; justify-content: space-between; gap: .8rem; border-bottom: 1px solid color-mix(in srgb, var(--slip-ink) 22%, transparent); padding: .2rem 0; }
.rrow span { opacity: .75; }
.rrow b { font-weight: 500; text-align: right; }
.rsec { font-family: var(--sans); font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin: 1.1rem 0 .35rem; padding-bottom: .25rem; border-bottom: 1.5px solid currentColor; }
.rsec small { font-weight: 400; letter-spacing: .06em; text-transform: none; font-size: .64rem; opacity: .8; }
.rsec.once { color: var(--slip-once); animation: fade .6s ease .5s both; }
.rsec.life { color: var(--slip-life); animation: fade .6s ease 2.1s both; }
.rl { list-style: none; margin: 0; padding: 0; }
.rl li { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; padding: .18rem 0; }
.rl.once li { color: var(--slip-once); }
.rl.once li:nth-child(1) { animation: fade .5s ease .7s both; }
.rl.once li:nth-child(2) { animation: fade .5s ease .9s both; }
.rl.once li:nth-child(3) { animation: fade .5s ease 1.1s both; }
.rl.once li:nth-child(4) { animation: fade .5s ease 1.3s both; }
.rl .ok { flex: none; font-family: var(--serif); font-size: 1.05rem; line-height: 1; color: var(--slip-ink); }
/* the development section is written in by hand, in blue ink */
.rl.life { color: var(--slip-life); font-size: 1.08rem; line-height: 1.3; }
.rl.life li { display: block; padding: .12rem 0; }
.rl.life li::before { content: "· "; }
.rl.life li:nth-child(1) { animation: fade .5s ease 2.3s both; }
.rl.life li:nth-child(2) { animation: fade .5s ease 2.55s both; }
.rl.life li:nth-child(3) { animation: fade .5s ease 2.8s both; }
.rl.life li:nth-child(4) { animation: fade .5s ease 3.05s both; }
.rq .stamp.s1 { display: table; margin: .5rem .2rem .1rem auto; color: var(--slip-once); transform: rotate(-6deg); animation-delay: 1.6s; }
.rq .stamp.s2 { display: table; margin: .7rem auto .1rem .3rem; color: var(--slip-life); transform: rotate(4deg); animation-delay: 3.5s; }
.rnotes { display: grid; gap: 108px; padding-top: 200px; }
.rnotes .mnote p { color: var(--ink); }
.rnotes .n1 { animation: fade .7s ease 1.9s both; }
.rnotes .n2 { animation: fade .7s ease 3.7s both; }
.rnotes .n1 .pen path { animation-delay: 1.9s; }
.rnotes .n2 .pen path { animation-delay: 3.7s; }
.rnotes .n1 b { color: var(--once); }
.rnotes .n2 b { color: var(--life); }

/* ---- Figure 2: three estimates on graph paper ------------------------------ */
.chart2 { cursor: auto; touch-action: auto; padding: 30px 20px 20px; color: var(--slip-ink); }
.pick { border: 0; margin: 0 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.pick label { font-family: var(--sans); font-size: .85rem; color: var(--graphite); cursor: pointer; padding: .2rem 0; border-bottom: 2px solid transparent; }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick label:has(input:checked) { color: var(--slip-ink); border-bottom-color: var(--slip-ink); }
.pick label:has(input:focus-visible) { outline: 2px solid var(--life); outline-offset: 3px; }
.xchart text { fill: var(--slip-ink); }
.xchart .val { font-family: var(--mono); font-size: 13px; font-weight: 500; }
.xchart .pencil { stroke: var(--graphite); stroke-width: 1.6; stroke-dasharray: 2 6; stroke-linecap: round; }
.xchart .cursor { stroke: var(--graphite); stroke-width: 1.2; stroke-dasharray: 5 5; opacity: .7; }
.xchart .tk { stroke: var(--slip-ink); stroke-width: 1; opacity: .55; }
.xchart .tk.major { opacity: .9; stroke-width: 1.3; }
.xchart .rowlab { font-family: var(--sans); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; fill: var(--graphite); }

@media (max-width: 640px) {
  .rqfig { grid-template-columns: minmax(0, 1fr); }
  .rnotes { gap: .9rem; padding-top: 0; }
  .rnotes .pen { display: none; }
}

/* Phone mode: the requisition and its notes stack; the chart is redrawn on a 400-wide, taller sheet by the
   page script, its handwritten notes are dropped, and its text is enlarged to stay readable. */
@media (max-width: 560px) {
  .rq { padding: 1rem 1rem 1.2rem; font-size: .7rem; }
  .rq .stamp.s1 { margin-bottom: .8rem; }
  .sheet { min-width: 0; user-select: none; }
  .sheet-scroll { overflow-x: clip; }
  .chart2 { padding: 28px 12px 14px; }
  .pick { display: grid; grid-template-columns: 1fr; gap: .1rem; }
  .xchart .svglab { font-size: 17px; }
  .xchart .svgnote { font-size: 16px; }
  .xchart .val { font-size: 17px; }
  .xchart .tick { font-size: 15px; }
  .xchart .rowlab { font-size: 14px; }
}