/* =====================================================================
   Paper and Ink · essays/read-the-denominator-before-the-headline.css
   "Read the Denominator Before the Headline": 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 tally register of 100 invented adults with two rings (Figure 1)
   and a thermal release slip with the June measures (Figure 2).
   Gold = unemployment within the labor force; blue = employment within the population.
   Every rule below is scoped to its figure so none of it can restyle the generated Read next block. */

/* ---- 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 denominator register ---------------------------------- */
.reg { max-width: 820px; padding: 1.2rem 1.3rem 1.1rem; background: var(--noise), var(--sheet); transform: rotate(-.35deg); }
.reg .rh { margin: 0 0 .9rem; font-family: var(--sans); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--graphite); }
/* the two rings: blue around everyone, gold around the labor force */
.reg .pop { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1rem 1.2rem; align-items: start; padding: 2.1rem 1rem 1rem; border: 2px dashed var(--slip-life); border-radius: 18px 14px 20px 12px; position: relative; }
.reg .lf { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: .8rem 1rem; padding: 2rem .9rem .9rem; border: 2px solid var(--slip-once); border-radius: 12px 16px 10px 18px; position: relative; }
.reg .bl { position: absolute; top: .55rem; left: .9rem; margin: 0; font-family: var(--sans); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.reg .bl.life { color: var(--slip-life); }
.reg .bl.once { color: var(--slip-once); }
.reg .bl b { font-family: var(--mono); font-weight: 600; letter-spacing: 0; }
.reg .gl { margin: 0 0 .35rem; font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--slip-ink); }
.reg .gl b { font-family: var(--mono); font-style: normal; font-weight: 600; font-size: .9rem; margin-left: .25rem; }
.reg .grp.out { padding-top: .2rem; }
.reg .tal { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.reg .tg { width: 30px; height: 26px; overflow: visible; }
.reg .tg path { fill: none; stroke: var(--slip-ink); stroke-width: 1.6; stroke-linecap: round; opacity: .85; }
/* the two marks that moved across the gold line */
.reg .tg path.mv { stroke: var(--slip-ink); opacity: 1; stroke-width: 2; animation: fade .7s ease both; }
.reg .mvn { margin: .5rem 0 0; font-size: 1rem; color: var(--slip-ink); max-width: 24ch; animation: fade .7s ease .2s both; }
.reg .calc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.2rem; margin: 1rem 0 .4rem; }
.reg .cl { margin: 0; padding: .55rem .7rem; background: var(--noise), var(--slip); box-shadow: 0 1px 1px var(--shadow); display: grid; gap: .15rem; }
.reg .cl:first-child { transform: rotate(-.6deg); }
.reg .cl:last-child { transform: rotate(.5deg); }
.reg .ck { font-family: var(--sans); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.reg .eqn { font-family: var(--mono); font-size: .95rem; font-variant-numeric: tabular-nums; }
.reg .cl.once { color: var(--slip-once); }
.reg .cl.life { color: var(--slip-life); }
/* the switch: two underlined text choices */
.reg .sw { border: 0; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.reg .sw label { position: relative; cursor: pointer; font-family: var(--sans); font-size: .82rem; color: var(--graphite); }
.reg .sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.reg .sw span { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.reg .sw input:checked + span { color: var(--slip-ink); font-weight: 600; text-decoration-style: solid; }
.reg .sw input:focus-visible + span { outline: 2px solid var(--life); outline-offset: 3px; }
.reg + .narr { margin-top: 1.2rem; }

/* ---- Figure 2: the release slip ------------------------------------------ */
.slip .sv { font-size: .64rem; letter-spacing: .14em; opacity: .75; margin: 4px 0 2px; }
.slip .df { font-size: .68rem; opacity: .95; margin: -4px 0 6px; }
.slip .stamp.st { color: var(--slip-ink); display: table; margin: 12px auto 6px; transform: rotate(-6deg); animation-delay: .7s; }
.slip .printing .cont { margin: 10px 0 0; }
.slipfig .margin-notes { gap: 110px; padding-top: 70px; }
/* pen arrows sit in the gutter and stop short of the slip, each aimed at its rows */
.slipfig .slipnote svg { left: -54px; top: 2px; width: 46px; height: 40px; }

@media (max-width: 680px) {
  .reg .pop { grid-template-columns: minmax(0, 1fr); }
}

/* Phone mode: the labor force stacks its two groups, the two equations stack, and the register loses its tilt. */
@media (max-width: 560px) {
  .reg { padding: 1rem .7rem .9rem; transform: none; }
  .reg .pop { padding: 2.6rem .6rem .8rem; }
  .reg .lf { grid-template-columns: minmax(0, 1fr); padding: 2.6rem .6rem .7rem; }
  .reg .bl { left: .6rem; right: .6rem; line-height: 1.35; top: .5rem; }
  .reg .calc { grid-template-columns: minmax(0, 1fr); }
  .reg .tg { width: 26px; height: 23px; }
  .slipfig .margin-notes { gap: 1.2rem; padding-top: 0; }
  .reg .rh, .reg .bl, .reg .ck, .slip .sv, .slip .df { font-size: .7rem; }
}