/* ---------- The transmission as an observation record ----------
   One axis runs the whole page: a left margin for each section's number and title, a measured column for the text,
   a right margin for the contents scale. Every transmission reads this way; a story keeps a book's paragraphs, and
   reading notes their illustrations and sources.

   Motion (route-motion.js adds the classes, only while the site's effects are on): the head enters once on arrival;
   the ruler and contents, each section's margin label, blocks, the neighbours and the replies are received once as
   they scroll in. Every entrance fills backwards only, so nothing is left behind once it ends, and the text itself
   never moves. */
:root:has(#articlePage) {
  --rec-margin: clamp(150px, calc((100vw - 64px - 680px - 128px) / 2), 200px);
  --rec-gap: 64px;
  --rec-text: 680px;
  --rec-ink: color-mix(in srgb, var(--ink) 86%, var(--bg));
  --rec-mark: color-mix(in srgb, var(--ink) 40%, transparent);
  /* the scan crosses the image, which is the same in both themes, so it keeps one colour */
  --rec-scan: color-mix(in srgb, var(--signal) 42%, transparent);
  --rec-plate-pad: 14px;

  .article-page-main { width: min(1240px, calc(100% - 64px)); }

  /* the sky's scattered points stay in the margins, clear of the text */
  body.article-reading-page::after {
    -webkit-mask-image: linear-gradient(90deg, #000 0 calc(50% - 470px), transparent calc(50% - 380px) calc(50% + 380px), #000 calc(50% + 470px));
    mask-image: linear-gradient(90deg, #000 0 calc(50% - 470px), transparent calc(50% - 380px) calc(50% + 380px), #000 calc(50% + 470px));
  }

  /* ---------- the record's head: on the page's axis ---------- */
  .article-page-hero {
    display: grid;
    grid-template-columns: var(--rec-margin) minmax(0, var(--rec-text)) var(--rec-margin);
    gap: 0 var(--rec-gap);
    justify-content: center;
    align-items: start;
    min-height: 0;
    padding: clamp(24px, 5vh, 64px) 0 0;
    border-bottom: 0;
  }
  .article-page-hero > div:first-child { display: contents; }
  .article-page-meta {
    grid-column: 2; grid-row: 1;
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0;
    color: var(--ink-dim);
    font: 500 12px/1.6 var(--font-mono);
    letter-spacing: .14em;
  }
  .article-page-meta > * + *::before { content: "/" / ""; margin: 0 .9em; color: var(--ink-faint); }
  .article-page-hero h1 {
    grid-column: 2 / 4; grid-row: 2;
    /* as wide as its words, so the acquisition beam crosses the title and not the empty margin after it */
    justify-self: start;
    max-width: 14em;
    margin: 18px 0 20px;
    color: var(--ink);
    font: 600 clamp(42px, 4.6vw, 68px)/1.14 var(--font-title);
    letter-spacing: .01em;
    text-wrap: balance;
  }
  .article-page-hero > div > p {
    grid-column: 2; grid-row: 3;
    max-width: none;
    margin: 0;
    color: var(--ink-dim);
    font: 400 18px/1.85 var(--font-sans);
  }

  /* the cover as a plate: mounted across the text and its right margin, with corner marks */
  .article-page-cover {
    grid-column: 2 / 4; grid-row: 4;
    position: relative;
    display: block;
    margin: 56px 0 0;
    padding: var(--rec-plate-pad);
    max-height: none;
    aspect-ratio: auto;
    overflow: visible;
    background:
      linear-gradient(var(--rec-mark) 0 0) 0 0 / 16px 1px no-repeat, linear-gradient(var(--rec-mark) 0 0) 0 0 / 1px 16px no-repeat,
      linear-gradient(var(--rec-mark) 0 0) 100% 0 / 16px 1px no-repeat, linear-gradient(var(--rec-mark) 0 0) 100% 0 / 1px 16px no-repeat,
      linear-gradient(var(--rec-mark) 0 0) 0 100% / 16px 1px no-repeat, linear-gradient(var(--rec-mark) 0 0) 0 100% / 1px 16px no-repeat,
      linear-gradient(var(--rec-mark) 0 0) 100% 100% / 16px 1px no-repeat, linear-gradient(var(--rec-mark) 0 0) 100% 100% / 1px 16px no-repeat;
    border: 0; border-radius: 0; box-shadow: none;
  }
  .article-page-cover img {
    display: block;
    width: 100%; height: auto; max-height: 76vh;
    object-fit: contain;
    outline: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
    outline-offset: -1px;
  }

  /* ---------- the body: label margin, measured text, contents margin ---------- */
  .article-page-layout {
    grid-template-columns: var(--rec-margin) minmax(0, var(--rec-text)) var(--rec-margin);
    column-gap: var(--rec-gap);
    margin-top: 64px;
    padding-top: 64px;
    /* a hairline scale across the page under the head */
    background:
      linear-gradient(var(--line-strong) 0 0) 0 0 / 100% 1px no-repeat,
      repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 40px) 0 0 / 100% 6px no-repeat;
  }
  .article-page-layout > div { grid-column: 2; grid-row: 1; }

  .article-prose {
    color: var(--rec-ink);
    font-size: 18px;
    line-height: 1.95;
    letter-spacing: .01em;
    text-align: justify;
  }
  .article-prose p { margin: 0 0 1.15em; }
  .article-prose a {
    color: inherit;
    text-decoration-color: color-mix(in srgb, var(--signal-text) 75%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: .34em;
    transition: color .2s;
  }
  .article-prose a:hover, .article-prose a:focus-visible { color: var(--signal-text); }

  /* a story keeps a book's paragraphs, indented and close together; a scene break is a row of points */
  [data-post-format="fiction"] .article-prose p { margin: 0 0 .6em; text-indent: 2em; }
  [data-post-format="fiction"] .article-prose hr {
    width: 54px; height: 4px;
    margin: 2.4em auto;
    border: 0;
    background: radial-gradient(circle, var(--ink-faint) 1.5px, transparent 2px) 0 0 / 18px 4px repeat-x;
  }
  /* reading notes: illustrations within the text, the sources after it */
  .reading-illustration { margin: 2.6em auto; }
  .reading-illustration img { display: block; width: 100%; height: auto; margin: 0; }
  .reading-portrait { width: min(300px, 78%); }
  .reading-illustration figcaption { margin-top: 12px; color: var(--ink-dim); font: 400 12px/1.7 var(--font-sans); text-align: center; }
  .article-prose .reading-sources {
    margin: 2.6em 0 0; padding-top: 20px;
    border-top: 1px solid var(--line);
    color: var(--ink-dim);
    font-size: 13px; line-height: 1.9;
    text-align: left;
  }

  /* a numbered section opens with a breath, its number and title hung in the left margin: the title it was given, or
     the heading it opens with, moved out beside its text. One whose title counts itself (一、…) shows no second number.
     (sections clip their overflow site-wide; a numbered one here hangs its label outside itself) */
  .article-prose { counter-reset: rec-section; }
  .article-prose-section[data-section-no] { position: relative; overflow: visible; counter-increment: rec-section; }
  .article-prose-section[data-section-no]:not(:first-child) { margin-top: 2.6em; }
  .article-prose-section[data-section-no]::before,
  .article-prose-section[data-section-title]::after,
  .article-prose-section[data-section-no] > h2:first-child {
    position: absolute;
    right: calc(100% + var(--rec-gap));
    width: var(--rec-margin);
    text-align: right;
  }
  .article-prose-section[data-section-no]::before {
    content: attr(data-section-no) / "";
    top: .55em;
    padding-right: 30px;
    color: var(--signal-text);
    font: 500 11px/1 var(--font-mono);
    letter-spacing: .2em;
    /* a short lead from the number to the text */
    background: linear-gradient(var(--line-strong) 0 0) 100% 50% / 20px 1px no-repeat;
  }
  .article-prose-section[data-section-title]::after { content: attr(data-section-title) / ""; }
  .article-prose-section[data-section-title]::after,
  .article-prose-section[data-section-no] > h2:first-child {
    top: calc(.55em + 22px);
    margin: 0; padding: 0;
    color: var(--ink);
    border: 0;
    font: 600 16px/1.55 var(--font-title);
    letter-spacing: .04em;
    text-wrap: balance;
  }
  .article-prose-section[data-section-self-numbered]::before { content: none; }
  .article-prose-section[data-section-self-numbered][data-section-title]::after,
  .article-prose-section[data-section-self-numbered] > h2:first-child { top: .3em; }

  /* headings inside a section, and any not hung in the margin, in the title face at the text's own scale */
  .article-prose h2 { margin: 2.4em 0 .8em; padding: 0; border: 0; font: 600 24px/1.45 var(--font-title); letter-spacing: .02em; }
  .article-prose h3 { margin: 2.1em 0 .7em; color: var(--ink); font: 600 19px/1.5 var(--font-title); letter-spacing: .02em; }

  .article-prose .article-block-placement { margin: 3.2em 0; }

  /* ---------- contents: a scale in the right margin ----------
     One tick per section; the section being read (aria-current, shell-motion.js) shows its title and lengthens its
     tick, those already read darken theirs, and the locator (route-motion.js) slides along the line to it. Pointing
     at the scale or moving focus into it shows every title. */
  .article-page-rail {
    grid-column: 3; grid-row: 1;
    top: calc(var(--header-h) + 48px);
    max-height: calc(100vh - var(--header-h) - 96px);
    overflow: visible;
    padding: 0;
    border: 0;
  }
  .article-page-rail .rm-rail-marker {
    left: 4px;
    width: 1px;
    background: var(--signal-text);
    box-shadow: 0 0 8px color-mix(in srgb, var(--signal-text) 60%, transparent);
  }
  /* the page is served with the contents folded, as one column wants them; beside the text they show regardless */
  @media (min-width: 1101px) { .article-rail-toc::details-content { content-visibility: visible; } }
  .article-rail-toc-links { position: relative; display: grid; padding-left: 22px; }
  .article-rail-toc-links::before {
    content: "";
    position: absolute; left: 4px; top: 4px; bottom: 4px;
    width: 1px;
    background: var(--line-strong);
    transform-origin: top;
  }
  .article-page-rail a {
    display: flex; align-items: baseline; gap: 10px;
    margin: 0; padding: 6px 0;
    color: transparent;
    font: 400 12px/1.5 var(--font-sans);
    white-space: nowrap;
    transition: color .3s;
  }
  .article-page-rail a::before {
    top: calc(6px + .75em); left: -18px;
    width: 8px; height: 1px;
    background: var(--line-strong);
    transform: none;
    transition: width .45s var(--ease-out), background-color .3s;
  }
  /* the number in the title's own face and size, so the two share one line */
  .article-page-rail a span { color: var(--ink-faint); font: inherit; font-variant-numeric: tabular-nums; letter-spacing: .04em; transition: color .3s; }
  .article-page-rail a:has(~ a[aria-current="location"])::before { background: var(--ink-dim); }
  .article-page-rail a[aria-current="location"] { color: var(--ink); }
  .article-page-rail a[aria-current="location"]::before { width: 14px; height: 1px; background: var(--signal-text); }
  .article-page-rail a[aria-current="location"] span { color: var(--signal-text); }
  .article-page-rail:is(:hover, :focus-within) a { color: var(--ink-dim); }
  .article-page-rail:is(:hover, :focus-within) a[aria-current="location"],
  .article-page-rail a:is(:hover, :focus-visible) { color: var(--ink); }
  .article-page-rail a:focus-visible { outline: 1px solid var(--signal-text); outline-offset: 3px; }

  /* ---------- after the record: the neighbours on one line, the replies set like the text ---------- */
  .article-sequence {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 72px 0 0;
    border: 0;
    /* its rules are drawn, not bordered, so they can be drawn in */
    background:
      linear-gradient(var(--line-strong) 0 0) 0 0 / 100% 1px no-repeat,
      linear-gradient(var(--line) 0 0) 0 100% / 100% 1px no-repeat;
  }
  .article-sequence a, .article-sequence > span {
    min-height: 0;
    gap: 10px;
    padding: 22px 0;
    background: none; border: 0; border-radius: 0; clip-path: none; box-shadow: none;
    opacity: 1;
  }
  .article-sequence > :last-child { padding-left: 28px; border-left: 1px solid var(--line); text-align: right; align-items: flex-end; }
  .article-sequence a::before { display: none; }
  .article-sequence a:hover { transform: none; background: none; box-shadow: none; }
  .article-sequence small { color: var(--ink-faint); font: 500 var(--fs-micro)/1.2 var(--font-mono); letter-spacing: .28em; transition: color .3s; }
  .article-sequence b { color: var(--ink); font: 600 18px/1.45 var(--font-title); transition: color .3s; }
  .article-sequence > span b { color: var(--ink-faint); font: 400 14px/1.6 var(--font-sans); }
  .article-sequence a:is(:hover, :focus-visible) small { color: var(--ink-dim); }
  .article-sequence a:is(:hover, :focus-visible) b { color: var(--signal-text); }
  .article-sequence a:focus-visible { outline: 1px solid var(--signal-text); outline-offset: 4px; }

  .article-echoes { margin-top: 72px; padding-top: 0; border-top: 0; }
  /* the registration mark the home page's section headings carry */
  .article-echoes > h2 { position: relative; margin: 16px 0 22px; font: 600 24px/1.4 var(--font-title); }
  .article-echoes > h2::before {
    content: "";
    position: absolute; top: -16px; left: 0;
    width: 28px; height: 1px;
    background: linear-gradient(to right, var(--signal-text) 3px, transparent 3px 6px, color-mix(in srgb, var(--signal-text) 60%, transparent) 6px);
    transform-origin: left;
  }
  .article-echo-identity { gap: 28px; }
  .article-echo-form { gap: 18px; }
  /* underline fields: the signal line draws across the rule while a field has focus */
  .article-echo-form input {
    padding: 10px 0;
    background:
      linear-gradient(var(--signal-text) 0 0) 0 100% / 0 2px no-repeat,
      linear-gradient(var(--line-strong) 0 0) 0 100% / 100% 1px no-repeat;
    border: 0;
    font-size: 14px;
    transition: background-size .55s var(--ease-out);
  }
  .article-echo-form textarea {
    padding: 12px 14px;
    background: transparent;
    border: 1px solid var(--line);
    font-size: 14px;
    transition: border-color .3s, box-shadow .3s;
  }
  .article-echo-form input:focus { outline: 0; background-size: 100% 2px, 100% 1px; }
  .article-echo-form textarea:focus {
    outline: 0;
    border-color: var(--signal-text);
    box-shadow: 0 1px 0 var(--signal-text);
  }
  .article-echo-buttons > button[type="submit"] { padding: 0 18px; letter-spacing: .16em; }
  #articleEchoList { border-top-color: var(--line); }

  /* ---------- the plate on paper: mounted with ink, no dark matte ---------- */
  &[data-theme="light"] {
    --rec-ink: color-mix(in srgb, var(--ink) 90%, var(--bg));
    --rec-mark: color-mix(in srgb, var(--ink) 55%, transparent);
    .article-page-cover { background-color: transparent; }
    .article-page-cover img { outline-color: color-mix(in srgb, var(--ink) 30%, transparent); }
  }

  /* ---------- narrower: one column; the labels go above what they mark ---------- */
  @media (max-width: 1100px) {
    .article-page-main { width: min(var(--rec-text), calc(100% - 40px)); }
    .article-page-hero { display: block; padding-top: 12px; }
    .article-page-hero h1 { font-size: clamp(32px, 7.4vw, 46px); }
    .article-page-hero > div > p { font-size: 17px; }
    --rec-plate-pad: 10px;
    .article-page-cover { margin-top: 36px; }
    .article-page-layout { display: block; margin-top: 40px; padding-top: 0; background: none; }
    .article-prose { font-size: 17px; line-height: 1.9; }
    .article-prose-section[data-section-title]::after,
    .article-prose-section[data-section-no]:not([data-section-title])::before { content: none; }
    .article-prose-section[data-section-title]::before { content: attr(data-section-no) "　" attr(data-section-title) / ""; }
    .article-prose-section[data-section-self-numbered][data-section-title]::before { content: attr(data-section-title) / ""; }
    .article-prose-section[data-section-title]::before,
    .article-prose-section[data-section-no] > h2:first-child {
      position: static; display: block; width: auto;
      margin: 0 0 .9em; padding: 0;
      color: var(--ink);
      font: 600 22px/1.45 var(--font-title);
      letter-spacing: .03em;
      text-align: left;
      background: none;
    }
    /* in one column the section's own title stands above its smaller headings by size alone */
    .article-prose h3 { font-size: 18px; }
    .article-prose-section[data-section-no]:not([data-section-self-numbered]) > h2:first-child::before { content: counter(rec-section, decimal-leading-zero) "　" / ""; }
    .article-prose-section[data-section-no]:not(:first-child) { margin-top: 2.4em; }

    /* the contents fold into one line above the text; the line and the list share one face and size */
    .article-page-rail {
      position: static; max-height: none; overflow: visible;
      margin: 0 0 36px;
      border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line);
    }
    .article-rail-toc > summary {
      display: flex; align-items: center; gap: 10px;
      min-height: 52px;
      color: var(--ink);
      font: 500 15px/1.5 var(--font-sans);
      letter-spacing: .06em;
      cursor: pointer; list-style: none;
    }
    .article-rail-toc > summary::-webkit-details-marker { display: none; }
    .article-rail-toc > summary small { color: var(--ink-faint); font: 400 15px/1.5 var(--font-sans); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
    .article-rail-toc > summary::after {
      content: ""; width: 7px; height: 7px; margin: 0 4px 0 auto;
      border-right: 1px solid var(--ink-dim); border-bottom: 1px solid var(--ink-dim);
      transform: translateY(-2px) rotate(45deg);
    }
    .article-rail-toc[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
    .article-rail-toc-links { padding: 0 0 8px; }
    .article-rail-toc-links::before { content: none; }
    .article-page-rail a {
      display: grid; grid-template-columns: 2.4em minmax(0, 1fr); align-items: baseline; gap: 0;
      padding: 12px 0;
      border-top: 1px solid var(--line);
      color: var(--ink-dim);
      font: 400 15px/1.6 var(--font-sans);
      white-space: normal;
    }
    .article-page-rail a::before { content: none; }
    .article-page-rail a[aria-current="location"] { color: var(--ink); }

    .article-sequence > :last-child { padding-left: 18px; }
    .article-sequence b { font-size: 16px; }
  }

  @media (max-width: 620px) {
    .article-page-main { width: calc(100% - 32px); }
    .article-page-meta { font-size: 11px; letter-spacing: .1em; }
    .article-prose { font-size: 16.5px; line-height: 1.9; text-align: left; }
    .article-echo-identity { gap: 18px; }
    .article-sequence { grid-template-columns: 1fr; }
    .article-sequence > :last-child { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); text-align: left; align-items: flex-start; }
  }

  /* ---------- motion ---------- */
  @media (prefers-reduced-motion: no-preference) {
    /* the contents scale: the section being read slides its title in; pointing at the scale opens the titles top
       to bottom (the tick moves back by as much as its link, so it stays on the line) */
    .article-page-rail a { translate: -5px 0; transition: color .3s, translate .5s var(--motion-settle); }
    .article-page-rail a::before { translate: 5px 0; transition: width .45s var(--ease-out), background-color .3s, translate .5s var(--motion-settle); }
    .article-page-rail a[aria-current="location"],
    .article-page-rail:is(:hover, :focus-within) a { translate: 0 0; }
    .article-page-rail a[aria-current="location"]::before,
    .article-page-rail:is(:hover, :focus-within) a::before { translate: 0 0; }
    .article-page-rail:is(:hover, :focus-within) a:nth-child(2), .article-page-rail:is(:hover, :focus-within) a:nth-child(2)::before { transition-delay: 30ms; }
    .article-page-rail:is(:hover, :focus-within) a:nth-child(3), .article-page-rail:is(:hover, :focus-within) a:nth-child(3)::before { transition-delay: 60ms; }
    .article-page-rail:is(:hover, :focus-within) a:nth-child(4), .article-page-rail:is(:hover, :focus-within) a:nth-child(4)::before { transition-delay: 90ms; }
    .article-page-rail:is(:hover, :focus-within) a:nth-child(5), .article-page-rail:is(:hover, :focus-within) a:nth-child(5)::before { transition-delay: 120ms; }
    .article-page-rail:is(:hover, :focus-within) a:nth-child(n+6), .article-page-rail:is(:hover, :focus-within) a:nth-child(n+6)::before { transition-delay: 150ms; }

    /* the neighbours: the arrow leans the way it points */
    .article-sequence small { transition: color .3s, translate .4s var(--motion-settle); }
    .article-sequence a:first-child:is(:hover, :focus-visible) small { translate: -4px 0; }
    .article-sequence a:last-child:is(:hover, :focus-visible) small { translate: 4px 0; }

    /* arrival, drawn over what is already on screen (the head has usually been painted before any script runs, so
       nothing in it is hidden and brought back): the acquisition beam crosses the title (route-motion.css), the date
       locks like a received reading, the plate's corner marks close in from a wider frame and a scan passes down
       it; after that the scan returns now and then, as the home page's head is scanned. The plate's exposure veil
       (route-motion.css) would dim an image that is already showing, so here the scan stands in for it. */
    .article-page-hero.rm-enter .article-page-meta time { animation: rm-digit-lock .5s steps(3, end) 320ms 1; }
    .article-page-hero.rm-enter .article-page-cover { animation: rec-reticle 1.2s var(--motion-settle) 120ms backwards; }
    .article-page-cover.rm-exposure::before { display: none; }
    .article-page-hero.rm-enter .article-page-cover::after {
      content: "";
      position: absolute; z-index: 1; inset: var(--rec-plate-pad) var(--rec-plate-pad) auto;
      height: 64px;
      pointer-events: none;
      background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--rec-scan) 25%, transparent) 75%, var(--rec-scan) calc(100% - 1px), transparent);
      box-shadow: none;
      opacity: 0;
      animation: rec-plate-scan 11s var(--ease-swift) 260ms infinite;
    }

    /* received as they scroll in */
    .article-page-layout.rm-in { animation: rec-ruler 1.3s var(--motion-settle) var(--rm-delay, 0ms) backwards; }
    .article-page-layout.rm-in .article-rail-toc-links::before { animation: rec-draw-y 1s var(--motion-settle) calc(var(--rm-delay, 0ms) + 150ms) backwards; }
    .article-page-layout.rm-in .article-page-rail a::before { animation: rec-draw-x .6s var(--motion-settle) calc(var(--rm-delay, 0ms) + 260ms) backwards; }
    .article-page-layout.rm-in .article-page-rail a:nth-child(2)::before { animation-delay: calc(var(--rm-delay, 0ms) + 320ms); }
    .article-page-layout.rm-in .article-page-rail a:nth-child(3)::before { animation-delay: calc(var(--rm-delay, 0ms) + 380ms); }
    .article-page-layout.rm-in .article-page-rail a:nth-child(4)::before { animation-delay: calc(var(--rm-delay, 0ms) + 440ms); }
    .article-page-layout.rm-in .article-page-rail a:nth-child(5)::before { animation-delay: calc(var(--rm-delay, 0ms) + 500ms); }
    .article-page-layout.rm-in .article-page-rail a:nth-child(n+6)::before { animation-delay: calc(var(--rm-delay, 0ms) + 560ms); }

    .article-prose-section.rm-in::before { animation: rec-label-no .8s var(--motion-settle) var(--rm-delay, 0ms) backwards; }
    .article-prose-section.rm-in::after,
    .article-prose-section.rm-in > h2:first-child { animation: rec-label-title .9s var(--motion-settle) calc(var(--rm-delay, 0ms) + 140ms) backwards; }
    .article-block-placement.rm-in { animation: rec-rise .8s var(--motion-settle) var(--rm-delay, 0ms) backwards; }

    .article-sequence.rm-in { animation: rec-rules 1.1s var(--motion-settle) var(--rm-delay, 0ms) backwards; }
    .article-sequence.rm-in > * { animation: rec-rise .7s var(--motion-settle) calc(var(--rm-delay, 0ms) + 120ms) backwards; }
    .article-sequence.rm-in > :last-child { animation-delay: calc(var(--rm-delay, 0ms) + 220ms); }

    .article-echoes.rm-in > h2 { animation: rec-rise .7s var(--motion-settle) var(--rm-delay, 0ms) backwards; }
    .article-echoes.rm-in > h2::before { animation: rec-mark .9s var(--motion-settle) calc(var(--rm-delay, 0ms) + 180ms) backwards; }
    .article-echoes.rm-in > form { animation: rec-rise .8s var(--motion-settle) calc(var(--rm-delay, 0ms) + 120ms) backwards; }

    @media (max-width: 1100px) {
      .article-page-rail a, .article-page-rail a::before { translate: none; }
      .article-prose-section.rm-in::before,
      .article-prose-section.rm-in > h2:first-child { animation-name: rec-rise; }
      .article-page-layout.rm-in .article-page-rail { animation: rec-rise .7s var(--motion-settle) var(--rm-delay, 0ms) backwards; }

      /* the folded contents open and close with their real height, the sections arriving in order */
      .article-rail-toc { interpolate-size: allow-keywords; }
      .article-rail-toc::details-content {
        block-size: 0;
        overflow: clip;
        opacity: 0;
        transition: block-size .52s var(--motion-settle), opacity .3s ease, content-visibility .52s allow-discrete;
      }
      .article-rail-toc[open]::details-content { block-size: auto; opacity: 1; }
      .article-rail-toc > summary::after { transition: transform .52s var(--motion-settle); }
      .article-rail-toc[open] .article-rail-toc-links > a { animation: rec-rise-soft .5s var(--motion-settle) backwards; }
      .article-rail-toc[open] .article-rail-toc-links > a:nth-child(2) { animation-delay: 40ms; }
      .article-rail-toc[open] .article-rail-toc-links > a:nth-child(3) { animation-delay: 80ms; }
      .article-rail-toc[open] .article-rail-toc-links > a:nth-child(4) { animation-delay: 120ms; }
      .article-rail-toc[open] .article-rail-toc-links > a:nth-child(5) { animation-delay: 160ms; }
      .article-rail-toc[open] .article-rail-toc-links > a:nth-child(n+6) { animation-delay: 200ms; }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .article-page-rail a, .article-page-rail a::before, .article-page-rail a span, .article-prose a,
    .article-sequence small, .article-sequence b, .article-echo-form :is(input, textarea) { transition: none; }
  }
}

@keyframes rec-rise {
  from { opacity: 0; translate: 0 14px; }
}
@keyframes rec-rise-soft {
  from { opacity: 0; translate: 0 8px; }
}
/* the plate's corner marks lock on: long arms drawn in to the mounted length */
@keyframes rec-reticle {
  from { background-size: 56px 1px, 1px 56px, 56px 1px, 1px 56px, 56px 1px, 1px 56px, 56px 1px, 1px 56px; }
}
@keyframes rec-plate-scan {
  0% { top: var(--rec-plate-pad); opacity: 0; }
  5% { opacity: 1; }
  24% { top: calc(100% - var(--rec-plate-pad) - 64px); opacity: .85; }
  28%, 100% { top: calc(100% - var(--rec-plate-pad) - 64px); opacity: 0; }
}
@keyframes rec-ruler {
  from { background-size: 0 1px, 0 6px; }
}
@keyframes rec-rules {
  from { background-size: 0 1px, 0 1px; }
}
@keyframes rec-draw-y {
  from { scale: 1 0; }
}
@keyframes rec-draw-x {
  from { width: 0; }
}
@keyframes rec-mark {
  from { scale: 0 1; }
}
/* a section's number locks like a received reading (cold, then the beam) while its lead line draws to the text */
@keyframes rec-label-no {
  0% { opacity: 0; color: var(--rm-cold); background-size: 0 1px; }
  45% { opacity: 1; color: var(--rm-beam); }
}
@keyframes rec-label-title {
  from { opacity: 0; translate: -12px 0; }
}