/* A quiet drawing-scale ruler, tied to the actual sections of this page. */
.reading-ruler {
  --ruler-axis-x:20px;
  position:fixed; top:132px; bottom:24px; left:12px; width:56px;
  display:flex; flex-direction:column; z-index:20;
  pointer-events:none; user-select:none; color:#fbfbf8;
  mix-blend-mode:difference; contain:layout style;
}
.ruler-track { position:relative; flex:1; min-height:0; margin-block:12px; }
.ruler-axis,.ruler-progress {
  position:absolute; top:0; left:var(--ruler-axis-x);
  width:1px; height:var(--ruler-drawn-height,100%); background:currentColor;
}
.ruler-axis { opacity:.2; }
.ruler-progress { transform:scaleY(0); transform-origin:top; opacity:.82; }
.ruler-tick {
  position:absolute; top:0; left:calc(var(--ruler-axis-x) - 8px);
  width:8px; height:1px; background:currentColor; opacity:.2;
}
.ruler-tick.is-major { left:calc(var(--ruler-axis-x) - 14px); width:14px; opacity:.3; }
.ruler-tick.is-section { left:calc(var(--ruler-axis-x) - 14px); width:14px; opacity:.55; }
.ruler-tick.is-current { opacity:1; }
.ruler-marker { position:absolute; top:0; left:var(--ruler-axis-x); height:1px; display:flex; align-items:center; opacity:.55; }
.ruler-marker>span {
  display:block; margin-left:14px; white-space:nowrap;
  font:400 16px/24px var(--sans); font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.ruler-marker.is-current { opacity:1; }
.ruler-marker[data-label-hidden]>span { visibility:hidden; }
.ruler-percent { display:block; width:40px; text-align:center; font:400 16px/1.5 var(--sans); font-variant-numeric:tabular-nums; opacity:.7; }
@media(min-width:1024px) {
  .has-reading-ruler .container { width:min(1280px,calc(100% - 144px)); }
  .has-reading-ruler>.site-header { z-index:50; }
}
@media(max-width:1023px) {
  .reading-ruler { --ruler-axis-x:8px; left:0; width:16px; top:112px; bottom:20px; }
  .ruler-track { margin:0; }
  .ruler-tick { left:4px; width:4px; }
  .ruler-tick.is-major,.ruler-tick.is-section { left:1px; width:7px; }
  .ruler-marker>span,.ruler-percent { display:none; }
  .has-reading-ruler>.site-header { z-index:50; }
}
@media(prefers-reduced-motion:no-preference) {
  .ruler-marker { transition:opacity .16s ease-out; }
}
@media print { .reading-ruler { display:none!important; } }