/* =====================================================================
   Paper and Ink · essays/fewer-layers-is-not-more-leverage.css
   "Fewer Layers Is Not More Leverage": the figures only this essay 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:
   an org chart beside Grove's equation on an index card (Figure 1)
   and a span worksheet on graph paper with one slider (Figure 2).
   Gold = layers removed (the structure); blue = the organization's output (Grove's measure). */

/* ---- 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 org chart and the index card --------------------------- */
.orgfig { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px 28px; align-items: center; overflow-x: clip; overflow-clip-margin: 14px; padding-top: 6px; }
.chart {
  position: relative; padding: 1rem 1.1rem 1rem; background: var(--noise), var(--slip); border-top: 5px solid var(--slip-once);
  transform: rotate(-.8deg); animation: fade .6s ease .1s both;
}
.ph, .ch { font-family: var(--sans); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--slip-ink); opacity: .75; margin: 0 0 .8rem; }
/* three levels: the director, then four managers, each above a team of seven; a bus joins the managers */
.lvl { position: relative; display: flex; justify-content: center; gap: 8px; }
.l2, .l3 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; gap: 8px; }
.l2 { margin-top: 1.5rem; }
.l3 { margin-top: .9rem; }
.l1::after { content: ""; position: absolute; left: 50%; bottom: -.75rem; height: .75rem; border-left: 1.5px solid color-mix(in srgb, var(--slip-ink) 45%, transparent); }
.l2::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: -.75rem; height: .75rem; border: 1.5px solid color-mix(in srgb, var(--slip-ink) 45%, transparent); border-bottom: 0; }
.l3 .grp { position: relative; }
.l3 .grp::before { content: ""; position: absolute; left: 50%; top: -.9rem; height: .7rem; border-left: 1.5px solid color-mix(in srgb, var(--slip-ink) 45%, transparent); }
.box { position: relative; font-family: var(--mono); font-size: .72rem; color: var(--slip-ink); border: 1.4px solid var(--slip-ink); padding: .3rem .45rem; background: var(--slip); min-width: 0; }
.l2 { transition: opacity .3s ease; }
.l2 .box { color: var(--slip-once); border-color: var(--slip-once); }
.l2::after {
  content: ""; position: absolute; left: 4%; right: 4%; top: 50%; border-top: 2.5px solid var(--slip-once);
  transform: rotate(-2deg) scaleX(0); transform-origin: left; transition: transform .4s ease;
}
.grp { display: inline-grid; grid-template-columns: repeat(7, 9px); gap: 3px; }
.grp i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--slip-ink) 70%, transparent); }
.count { margin: 1.2rem 0 0; font-family: var(--sans); font-size: .78rem; color: var(--slip-once); text-align: center; }
.count b { font-family: var(--mono); font-weight: 600; }
.v-after { display: none; }
.orgfig.flat .l2 { opacity: .45; }
.orgfig.flat .l2::after { transform: rotate(-2deg) scaleX(1); }
.orgfig.flat .v-before { display: none; }
.orgfig.flat .v-after { display: inline; }
/* the index card: Grove's equation, paraphrased, in blue */
.card {
  position: relative; padding: 1rem 1.1rem 1.1rem; color: var(--slip-life);
  background: var(--noise), repeating-linear-gradient(transparent 0 23px, color-mix(in srgb, var(--slip-life) 22%, transparent) 23px 24px) 0 2.6rem / 100% calc(100% - 2.6rem) no-repeat, var(--sheet);
  border-top: 3px solid color-mix(in srgb, var(--slip-life) 55%, transparent); transform: rotate(1deg); animation: fade .6s ease .7s both;
}
.card::before { content: ""; position: absolute; top: -11px; left: 40%; width: 80px; height: 24px; background: var(--noise), var(--tape); transform: rotate(-3deg); }
.eq { margin: 0; font-family: var(--serif); font-size: 1.05rem; line-height: 1.5rem; }
.eq.t1, .eq.t2 { padding-left: 1.1rem; }
.eq.t2 { position: relative; }
.plus { position: absolute; left: 0; font-family: var(--mono); font-weight: 600; }
.cn { margin: .7rem 0 0; color: var(--graphite); font-size: 1.05rem; }

/* ---- Figure 2: the span worksheet ----------------------------------------- */
.ctl { display: grid; gap: .4rem; max-width: 640px; margin: 0 0 1.2rem; font-family: var(--sans); font-size: .86rem; color: var(--ink); }
.ctl .cap { display: flex; justify-content: space-between; gap: .8rem; color: var(--life); }
.ctl output { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.ctl input[type=range] { width: 100%; margin: 0; accent-color: var(--life); }
.ctl input:focus-visible { outline: 2px solid var(--life); outline-offset: 3px; }
.ctl .fixed { margin: 0; font-size: .8rem; color: var(--muted); }
.wks {
  position: relative; padding: 1.6rem 1.2rem 1.1rem; transform: rotate(.4deg); color: var(--slip-ink);
  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);
  box-shadow: 0 1px 1px var(--shadow), 0 10px 24px -12px var(--shadow-deep);
}
.wks::before, .wks::after { content: ""; position: absolute; top: -11px; width: 92px; height: 26px; background: var(--noise), var(--tape); }
.wks::before { left: 22px; transform: rotate(-4deg); }
.wks::after { right: 22px; transform: rotate(5deg); }
.wh { font-family: var(--sans); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .7rem; opacity: .8; }
.wrow { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr) 8.5rem; gap: .3rem 1rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid color-mix(in srgb, var(--slip-ink) 15%, transparent); }
.wrow p { margin: 0; min-width: 0; }
.wl { font-family: var(--sans); font-size: .8rem; font-weight: 600; line-height: 1.3; }
.wf { font-family: var(--mono); font-size: .74rem; }
.wv { font-family: var(--mono); font-size: .9rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.wrow.once { color: var(--slip-once); }
.wrow.life { color: var(--slip-life); }
.wrow.tot .wv { font-size: 1.1rem; }
/* the span bar: 0 to 175 reports; Grove's band at 6 to 8, the 175 mark at the right end */
.spanbar { position: relative; height: .9rem; margin: 1.6rem 0 1.5rem; border-left: 1px solid var(--slip-ink); border-right: 1.5px dashed var(--slip-ink); background: color-mix(in srgb, var(--slip-ink) 6%, transparent); }
.fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--slip-once); opacity: .8; transition: width .25s ease; }
.grove { position: absolute; left: 3.429%; width: 1.143%; top: -.35rem; bottom: -.35rem; border: 1.5px solid var(--slip-life); }
.grove b { position: absolute; left: 0; top: -1.3rem; font-family: var(--sans); font-size: .72rem; font-weight: 600; color: var(--slip-life); white-space: nowrap; }
.mark175 b { position: absolute; right: 0; top: 1.2rem; font-family: var(--mono); font-size: .72rem; font-weight: 600; }
.s0 { width: 4.571%; }  .s1 { width: 4.571%; }  .s2 { width: 4.571%; }  .s3 { width: 5.143%; }
.s4 { width: 5.714%; }  .s5 { width: 5.714%; }  .s6 { width: 6.286%; }  .s7 { width: 6.857%; }
.s8 { width: 7.429%; }  .s9 { width: 8.000%; }  .s10 { width: 9.143%; }  .s11 { width: 9.714%; }
.s12 { width: 11.429%; }  .s13 { width: 12.571%; }  .s14 { width: 14.857%; }  .s15 { width: 18.286%; }
.s16 { width: 22.857%; }  .s17 { width: 30.286%; }  .s18 { width: 45.714%; }  .s19 { width: 91.429%; }
.wn { margin: 1rem 0 0; color: var(--slip-ink); }
.wn b { color: var(--slip-life); }

@media (max-width: 760px) {
  .orgfig { grid-template-columns: minmax(0, 1fr); }
  .chart, .card { max-width: 560px; }
  .wrow { grid-template-columns: minmax(0, 1fr) 7rem; }
  .wf { grid-column: 1; grid-row: 2; }
}

/* Phone mode: the chart and the card stack; each team of seven folds into two rows of dots;
   the worksheet rows become label and value with the formula beneath. */
@media (max-width: 560px) {
  .ph, .ch, .wh { font-size: .7rem; }
  .ph, .ch { letter-spacing: .08em; }
  .chart, .card { padding: .85rem .8rem .9rem; }
  .lvl, .l2, .l3 { gap: 5px; }
  .box { font-size: .7rem; padding: .25rem .3rem; }
  .grp { grid-template-columns: repeat(4, 8px); gap: 3px; }
  .grp i { width: 8px; height: 8px; }
  .eq, .cn { font-size: 1rem; }
  .wks { padding: 1.4rem .9rem 1rem; }
  .wrow { grid-template-columns: minmax(0, 1fr) 5.8rem; }
  .wl { font-size: .78rem; }
  .wf { font-size: .72rem; }
  .wv { font-size: .84rem; }
}