/* ar-sheet.css: The Sheet's own layer, loaded only by Record articles (19 Oct 2026).
   Kept out of styles.css on purpose: several sessions edit that file at once, and the articles
   should not need every page re-keyed when this changes.

   1. THE REVEAL. Since 19 Oct 2026 the articles run the site engine, assets/ykc-reveal.js, like every
      other page (Paul: the reveal standard is a build standard). A CSS scroll-timeline was tried first
      and cannot pass reveal.mjs: its starts are tied to scroll speed, so boxes 100px apart start under
      40ms apart on a flick. The only article rule needed here is that the contents list arrives with
      the rest on scroll instead of on its old load timer, which left it settled before it was seen.
   2. The breadcrumb in the title-card rail, the byline's link to the author, and back to the top. */

.js main.ar .ar-toc li { animation: none }

/* The breadcrumb sits where the rail always said "The Record": the same type, now a path.
   The hit area grows to 44px without moving the rail. */
.ar-crumb { display: inline }
.ar-crumb a { color: inherit; text-decoration: none; display: inline-block; padding: 16px 0; margin: -16px 0 }
.ar-crumb a:hover, .ar-crumb a:focus-visible { text-decoration: underline; text-underline-offset: .2em }
.ar-crumb [aria-current] { color: inherit }

/* The byline names the author and links to who he is (E-E-A-T, the about page). */
.ar-byl a { color: inherit; text-decoration: underline; text-decoration-color: currentColor;
  text-decoration-thickness: 1px; text-underline-offset: .22em; display: inline-block; padding: 15px 0; margin: -15px 0 }
.ar-byl a:hover, .ar-byl a:focus-visible { text-decoration-thickness: 2px }

/* Back to the top, at the foot of the questions, before the rail. */
.ar-totop { margin: clamp(22px, 3vh, 34px) 0 0 }
.ar-totop a { display: inline-flex; align-items: center; gap: .5em; min-height: 44px;
  font-family: var(--count); font-weight: 500; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: inherit; text-decoration: none; border-bottom: 1px solid currentColor }
.ar-totop a:hover, .ar-totop a:focus-visible { border-bottom-width: 2px }