/* ============================================================
   Eleven Ten — homepage · touch of blue
   Re-accents the editorial home (styles-v9.css) with a refined "ink blue",
   plus the subtle custom cursor. Scoped to body.v9home so only the home
   route is affected; every other page keeps its navy theme.
   Loaded by index.html after styles-v9.css.
   ============================================================ */

:root {
  --v9-accent: #2f5488;    /* ink blue — muted navy-royal, elegant on warm paper */
  --blue-line: rgba(47,84,136,0.30);
}

/* The signature "touch": italic highlight words carry the blue. */
.v9 .it { color: var(--v9-accent); }

/* Cool the text selection to match. */
.v9 ::selection { background: var(--v9-accent); color: #fff; }

/* Homepage eyebrow labels never use a leading decorative rule, including
   markup retained by an older cached render. */
.v9 .eyebrow::before,
.r9-line .eyebrow::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
}

/* Hero dateline + figure caption get a whisper of blue on the divider. */
.v9-hero .hero-actions { border-top-color: var(--blue-line); }
.v9-figure .cap { border-top: 1px solid var(--blue-line); padding-top: 16px; }

/* Nav/link/card hovers already resolve to --v9-accent (now blue). */

/* ============================================================
   Custom cursor — subtle ink-blue dot + trailing ring.
   Only active when JS adds .cursor-custom (home route, fine pointer,
   motion on), so the native cursor is never lost as a fallback.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  body.cursor-custom,
  body.cursor-custom a,
  body.cursor-custom button,
  body.cursor-custom .a9,
  body.cursor-custom .v9-card,
  body.cursor-custom .v9-row { cursor: none; }
}
.cur-ring, .cur-dot {
  position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  border-radius: 50%; opacity: 0; will-change: transform;
}
.cur-ring {
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1.5px solid var(--v9-accent);
  transition: width .28s cubic-bezier(.19,1,.22,1), height .28s cubic-bezier(.19,1,.22,1),
              margin .28s cubic-bezier(.19,1,.22,1), background-color .28s, opacity .3s;
}
.cur-dot {
  width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--v9-accent);
  transition: opacity .25s;
}
.cur-ring.is-hover { width: 62px; height: 62px; margin: -31px 0 0 -31px; background: rgba(47,84,136,0.10); }
.cur-dot.is-hover { opacity: 0 !important; }
.cur-ring.is-down { width: 26px; height: 26px; margin: -13px 0 0 -13px; }