/* =====================================================================
   Paper and Ink · essays/security-is-a-practice-not-a-project.css
   "Security Is a Practice, Not a Project": 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 figures break out to 860px:
   the settlement as a thermal receipt (Figure 1, built from paper.css's .slip) and a
   timeline of eight OCR settlements on graph paper (Figure 2).
   Gold = security as a project (paid or finished once); blue = security as a practice
   (the work that recurs); graphite = the wait. Figure rules are scoped under #fig1 and .lag2. */

/* ---- 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 titles ------------------------------------------------------ */
.figtitle { margin: 0 0 1rem; font-family: var(--sans); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.lag2 .figtitle { color: var(--graphite); margin-bottom: .4rem; }

/* ---- Figure 1: the receipt --------------------------------------------- */
/* clip sideways overflow so a stamp's starting scale can never widen the page on a phone */
#fig1 .slipfig { overflow-x: clip; overflow-clip-margin: 14px; }
#fig1 .slip .cont { letter-spacing: .1em; }
#fig1 .slip .printing { animation-duration: 3s; animation-timing-function: steps(15, end); }
#fig1 .slip .stamp.s2 { animation-delay: 4.4s; }
#fig1 .slipnote:nth-child(2) path { animation-delay: 4.6s; }
#fig1 .margin-notes .btn { justify-self: start; }

/* ---- Figure 2: eight settlements on one timeline ------------------------- */
.lag2 { user-select: none; }
.lag2 .hint { margin: .3rem 0 0; font-family: var(--sans); font-size: .78rem; color: var(--graphite); }
.lag2 .tk { stroke: var(--slip-ink); stroke-width: 1; opacity: .6; }
.lag2 .tk.major { opacity: .95; stroke-width: 1.3; }
.lag2 .rowname { font-family: var(--serif); font-style: italic; font-size: 15px; fill: var(--slip-ink); }
.lag2 .rowname.lv { font-style: normal; font-weight: 600; }
.lag2 .rep { fill: var(--slip-ink); }
.lag2 .pencil { fill: none; stroke: var(--graphite); stroke-width: 1.6; stroke-dasharray: 2 6; stroke-linecap: round; }
.lag2 .bl { stroke: var(--slip-life); }
.lag2 .tally { stroke: var(--slip-life); stroke-width: 1.8; stroke-linecap: round; }
.lag2 .stub { fill: var(--slip); stroke: var(--slip-once); stroke-width: 1.6; stroke-linejoin: round; }
.lag2 .lagnote { font-family: var(--mono); font-size: 11px; fill: var(--graphite); }
.lag2 .pen-g { fill: var(--graphite); }
.lag2 .lab-once { fill: var(--slip-once); }
.lag2 .lab-life { fill: var(--slip-life); }
.lag2 .cursor { stroke: var(--graphite); stroke-width: 1.2; stroke-dasharray: 5 5; opacity: .7; }
.lag2 .cdot { fill: var(--slip); stroke: var(--slip-life); stroke-width: 2.4; }
.lag2 .tagbox { fill: var(--slip); stroke: var(--slip-ink); stroke-width: 1; }
.lag2 .tag-ink { fill: var(--slip-ink); }
.lag2 .tag-life { fill: var(--slip-life); font-weight: 500; }
/* redraws after a breakpoint change appear at once, without replaying the load sequence */
.lag2 .still .ink path, .lag2 .still .fade { animation: none; }

/* Phone mode: the timeline is redrawn narrower and taller by the page script, with each
   name above its row, a two-year ruler and the paper tag under the axis; its text grows. */
@media (max-width: 560px) {
  .sheet.lag2 { min-width: 0; }
  .sheet-scroll:has(.lag2) { overflow-x: clip; }
  .lag2 .rowname { font-size: 16px; }
  .lag2 .svgnote { font-size: 16px; }
  .lag2 .tick { font-size: 14px; }
  .lag2 .tagtext { font-size: 15px; }
}