/* The homepage's chapter navigation borrows the language of a drawing scale.
   The content stays readable without this enhancement. */
@font-face {
  font-family: "Noto Sans SC";
  src: url("assets/fonts/noto-sans-sc-ruler-600.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
body[data-page="home"].has-scroll-ruler { padding-right: 176px; }
body[data-page="home"].has-scroll-ruler:not(.ruler-simple) .editorial-hero h1 { font-size: clamp(44px, 4.1vw, 66px); }
.scroll-ruler { --ruler-display: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.ruler-rail { position: absolute; inset: 0 0 0 auto; width: 38px; overflow: hidden; pointer-events: auto; cursor: crosshair; touch-action: none; border-left: 1px solid var(--line); background: var(--paper); }
.ruler-rail:focus-visible { outline-offset: -4px; }
.ruler-ticks { position: absolute; top: 0; right: 0; width: 100%; }
.ruler-tick { position: absolute; right: 0; width: 8px; height: 1px; background: var(--ink-soft); }
.ruler-tick.major { width: 16px; background: var(--ink); }
.ruler-tick-number { position: absolute; right: 19px; top: -6px; color: var(--ink-soft); font: 9px/1.2 ui-monospace, monospace; }
.ruler-needle { position: absolute; top: 0; right: 0; width: 38px; height: 2px; background: var(--blue); }
.ruler-progress { position: absolute; right: 4px; top: 7px; color: var(--blue); font: 10px/1.2 ui-monospace, monospace; background: var(--paper); padding: 2px; }
.ruler-title { position: absolute; top: 0; left: 0; pointer-events: auto; color: var(--ink-soft); }
.ruler-title:hover, .ruler-title:focus-visible, .ruler-title[aria-current="location"] { color: var(--blue); }
.ruler-letter { position: absolute; left: 0; top: 0; width: 24px; height: 24px; text-align: center; font: 600 24px/1 var(--ruler-display); }
.ruler-glyph { display: block; transform: scaleY(.84); transform-origin: center; font-kerning: none; }
.ruler-compact { display: none; }
body.has-scroll-ruler [data-ruler-label] { scroll-margin-top: 24px; }

/* Touch and reduced-motion readers keep a quiet, clickable chapter indicator. */
body[data-page="home"].has-scroll-ruler.ruler-simple { padding-right: 0; padding-bottom: 64px; }
.ruler-simple .ruler-rail, .ruler-simple .ruler-title { display: none; }
.ruler-simple .ruler-compact { display: flex; position: absolute; bottom: 0; left: 0; right: 0; align-items: center; justify-content: space-between; gap: 16px; min-height: 46px; padding: 10px clamp(22px, 4.8vw, 78px) calc(10px + env(safe-area-inset-bottom)); background: var(--paper-light); border-top: 1px solid var(--line); pointer-events: auto; color: var(--ink); font-size: 12px; }
.ruler-compact-link { display: inline-flex; align-items: center; gap: 10px; min-height: 24px; }
.ruler-compact-link span:first-child { color: var(--blue); }
.ruler-compact-link span:last-child { font: 600 14px/1.3 var(--ruler-display); transform: scaleY(.9); }
.ruler-compact-progress { font: 11px/1 ui-monospace, monospace; color: var(--ink-soft); }
.ruler-compact-line { position: absolute; top: -1px; left: 0; width: 100%; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; }

@media (max-width: 1099px), (pointer: coarse), (prefers-reduced-motion: reduce) {
  body[data-page="home"].has-scroll-ruler { padding-right: 0; }
}