/* assets/rn/pages/blog.css — Insights (blog.html), 3-blog-insights. Linked LAST; tokens only, no raw colours.
   The writing family: --rn-signal is yellow on this page (tokens.css), used for the eyebrow dots, the H1 highlight,
   the step numbers, the topic chips' 6px dot, the list markers and the reading line. No red anywhere on the page
   outside the footer spectrum. The markup is new (rn-ins-*, filled by pages/blog.js), so almost nothing from the
   legacy blog rules reaches it; the few legacy class names kept for the plan's checks (.blog-grid, .blog-card,
   .blog-feature-card, .blog-meta) are restyled here, and this file is unlayered, so it wins over @layer legacy.

    1. Shared parts (tag, chip, meta, section heads)   5. Cards, grid, skeletons     9. Pieces left
    2. Hero                                            6. Filters                   10. Tablet and phone
    3. Latest, featured card, audit prompt             7. Note view                 11. Reduced motion, pause, forced colours
    4. Index section                                   8. Reading progress                                                 */

/* 1. Shared parts ───────────────────────────────────────────────────────────────────────────────────────────── */
/* A small mono status label with the signal dot ("Auto-drafted", "Source"). */
.rn-ins-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--rn-text);
  font: 500 var(--rn-fs-label)/1 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

.rn-ins-tag::before {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rn-signal, var(--rn-text));
  content: "";
}

/* The one chip per card: the topic, ink with a 6px yellow dot, top left on the picture. */
.rn-ins-chip {
  position: absolute;
  z-index: 1;
  top: var(--rn-space-4);
  left: var(--rn-space-4);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: var(--rn-radius-pill);
  background: var(--rn-ink);
  box-shadow: 0 0 0 1px var(--rn-ring);
  color: var(--rn-text-on-ink);
  font: 500 var(--rn-fs-label)/1 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.rn-ins-chip::before {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rn-signal, var(--rn-text-on-ink));
  content: "";
}

.rn-ins-chip.is-inline {
  position: static;
}

.rn-ins-meta {
  margin: 0;
  color: var(--rn-muted);
  font: 500 var(--rn-fs-label)/1.45 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* A section head: eyebrow and compact H2 on the left, a note or the filters on the right. */
.rn-ins-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--rn-space-5) var(--rn-space-7);
  margin: 0 0 clamp(24px, 3vw, 40px);
}

.rn-ins-head h2 {
  margin: var(--rn-space-4) 0 0;
  color: var(--rn-text);
  font: var(--rn-weight-display) var(--rn-fs-h2-sm)/var(--rn-lh-heading) var(--rn-font-display);
  letter-spacing: var(--rn-track-display);
}

.rn-ins-cadence {
  margin: 0;
  color: var(--rn-muted);
  font: 500 var(--rn-fs-label)/1.3 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

/* 2. Hero ───────────────────────────────────────────────────────────────────────────────────────────────────────
   Ink with the hero's faint 88px grid. The H1 takes the interior display role; the lede and the honest note share a
   row; "In every note" closes the hero as a ruled strip with yellow numbers. */
.rn-ins-hero {
  padding-block: calc(var(--rn-header-clearance) + clamp(28px, 4vw, 56px)) 0;
  background-color: var(--rn-ink);
  background-image: linear-gradient(var(--rn-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--rn-grid-line) 1px, transparent 1px);
  background-position: 50% -1px;
  background-size: var(--rn-grid) var(--rn-grid);
  color: var(--rn-text-on-ink);
}

.rn-ins-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  column-gap: clamp(32px, 6vw, 96px);
}

.rn-ins-hero-grid > .studio-kicker,
.rn-ins-hero-grid > h1,
.rn-ins-steps {
  grid-column: 1 / -1;
}

.rn-ins-hero h1 {
  max-width: 9.6em;
  margin: var(--rn-space-5) 0 0;
  color: var(--rn-text-on-ink);
  font-family: var(--rn-font-display);
  font-size: var(--rn-fs-display);
  font-weight: var(--rn-weight-display);
  line-height: var(--rn-lh-display);
  letter-spacing: var(--rn-track-display);
}

/* Unsplit (no JavaScript, or before the failsafe), the emphasis is the signal colour; split, the words sit on the
   yellow block in ink (motion.css); under reduced motion the static block takes over (motion.css, rn-k-static). */
.rn-ins-hero h1 em {
  color: var(--rn-signal);
  font-style: normal;
}

.rn-ins-lede {
  max-width: 36ch;
  margin: clamp(28px, 3.5vw, 44px) 0 0;
  color: var(--rn-muted-on-ink);
  font: 500 var(--rn-fs-lead)/var(--rn-lh-lead) var(--rn-font-body);
}

.rn-ins-disclosure {
  display: grid;
  justify-items: start;
  gap: var(--rn-space-3);
  margin-top: clamp(28px, 3.5vw, 44px);
  padding: 20px 22px 22px;
  border: 1px solid var(--rn-ring);
  border-radius: var(--rn-radius-md);
  background: var(--rn-ink-soft);
}

.rn-ins-disclosure > p:not(.rn-ins-tag) {
  margin: 0;
  color: var(--rn-muted-on-ink);
  font: 500 0.875rem/1.6 var(--rn-font-body);
}

.rn-ins-steps {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(24px, 4vw, 64px);
  margin-top: clamp(40px, 5vw, 72px);
  border-block: 1px solid var(--rn-ring);
}

.rn-ins-steps-label {
  margin: 0;
  color: var(--rn-muted-on-ink);
  font: 500 var(--rn-fs-label)/1.3 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

.rn-ins-steps ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rn-ins-step;
}

.rn-ins-steps li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 22px 24px;
  border-left: 1px solid var(--rn-ring);
  color: var(--rn-text-on-ink);
  font: 600 var(--rn-fs-body-lg)/1.3 var(--rn-font-body);
  counter-increment: rn-ins-step;
}

.rn-ins-steps li::before {
  flex: none;
  color: var(--rn-signal);
  font: 500 var(--rn-fs-label)/1 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  content: counter(rn-ins-step, decimal-leading-zero);
}

/* 3. Latest, featured card, audit prompt ─────────────────────────────────────────────────────────────────────── */
.rn-ins-latest {
  padding-block: clamp(48px, 6vw, 88px) clamp(56px, 7vw, 104px);
  background: var(--rn-ink);
  color: var(--rn-text-on-ink);
}

/* The featured note: the picture at 7/12 and the copy beside it, on the ink-soft card with the ring. */
.rn-ins-card.is-featured .rn-ins-card-link {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.rn-ins-card.is-featured .rn-ins-media {
  aspect-ratio: 2 / 1;
}

.rn-ins-card.is-featured .rn-ins-card-body {
  gap: var(--rn-space-4);
  padding: clamp(28px, 3.4vw, 48px);
}

.rn-ins-card.is-featured .rn-ins-card-title {
  font-size: var(--rn-fs-h3);
  -webkit-line-clamp: 5;
}

.rn-ins-prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rn-space-5) var(--rn-space-7);
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--rn-ring);
}

.rn-ins-prompt p {
  margin: 0;
  color: var(--rn-muted-on-ink);
  font: 500 var(--rn-fs-small)/1.5 var(--rn-font-body);
}

.rn-ins-prompt .rn-ins-prompt-title {
  margin-bottom: 6px;
  text-wrap: balance;
  color: var(--rn-text-on-ink);
  font: var(--rn-weight-title) var(--rn-fs-title)/var(--rn-lh-title) var(--rn-font-body);
  letter-spacing: var(--rn-track-title);
}

/* The feed did not load: a plain card, no stale filler. */
.rn-ins-empty {
  display: grid;
  justify-items: start;
  gap: var(--rn-space-3);
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--rn-ring);
  border-radius: var(--rn-radius-card);
  background: var(--rn-ink-soft);
}

.rn-ins-empty p {
  margin: 0;
  color: var(--rn-muted-on-ink);
}

.rn-ins-empty .rn-ins-empty-title {
  color: var(--rn-text-on-ink);
  font: var(--rn-weight-title) var(--rn-fs-h3)/var(--rn-lh-title) var(--rn-font-body);
  letter-spacing: var(--rn-track-title);
}

.rn-ins-empty .studio-button {
  margin-top: var(--rn-space-3);
}

/* 4. Index section ──────────────────────────────────────────────────────────────────────────────────────────── */
.rn-ins-index {
  padding-block: clamp(64px, 8vw, 120px) 0;
  background: var(--rn-paper);
  color: var(--rn-text-on-paper);
}

/* Without JavaScript there are no notes to list: one plain line under "The latest read.", and no empty index. */
.rn-ins-noscript {
  margin: 0;
  padding: var(--rn-space-5) 0;
  color: var(--rn-muted-on-ink);
  font: 500 var(--rn-fs-body-lg)/1.6 var(--rn-font-body);
}

html:not(.js) .rn-ins-index {
  display: none;
}

/* 5. Cards, grid, skeletons ─────────────────────────────────────────────────────────────────────────────────────
   rn-card gives the surface (paper-hi and a hairline on paper, ink-soft and the ring on ink), radius 20, the 2px lift
   and the ring on hover, and the focus ring on the card. The picture is 16:10 with nothing over it but the chip; the
   title is Manrope 700, three lines at most; the read cue sits on the card's floor, so cues line up along a row. */
.rn-ins-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--rn-space-4);
}

.rn-ins-grid > .rn-ins-card {
  grid-column: auto;
}

.rn-ins-card {
  position: relative;
  min-width: 0;
  color: var(--rn-text);
}

.rn-ins-card[hidden] {
  display: none;
}

.rn-ins-card-link {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.rn-ins-media {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--rn-ink-soft);
}

.rn-ins-media > img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  transition: scale var(--rn-dur-ui) var(--rn-ease-ui);
}

.rn-ins-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: clamp(20px, 2vw, 26px);
}

.rn-ins-card-title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--rn-text);
  font: var(--rn-weight-title) var(--rn-fs-title)/var(--rn-lh-title) var(--rn-font-body);
  letter-spacing: var(--rn-track-title);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Three narrow columns on a laptop: a fourth line, so most headlines end where they end (the cue sits on the card's
   floor, so rows stay aligned). */
@media (min-width: 901px) and (max-width: 1199px) {
  .rn-ins-card-title {
    -webkit-line-clamp: 4;
  }
}

.rn-ins-excerpt {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--rn-muted);
  font: 500 0.9375rem/1.55 var(--rn-font-body);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.rn-ins-cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: var(--rn-space-3);
  color: var(--rn-text);
  font: 700 var(--rn-fs-small)/1.2 var(--rn-font-body);
}

.rn-ins-cue > span {
  display: inline-block;
  transition: translate var(--rn-dur-snap) var(--rn-ease-snap);
}

/* A picture whose left edge carries a strip of another photo is enlarged from its right edge until the strip is out of
   the frame (transform, so it composes with the hover and settle scale). */
.rn-ins-media > img.is-crop-right {
  transform: scale(1.2);
  transform-origin: 100% 50%;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .rn-ins-card:hover .rn-ins-media > img {
    scale: 1.03;
  }

  .rn-ins-card:hover .rn-ins-cue > span {
    translate: 3px 0;
  }
}

/* Skeletons hold the cards' boxes while the feed loads (no shimmer: nothing loops). */
.rn-ins-card.is-skeleton .rn-ins-card-body {
  gap: 14px;
  min-height: 188px;
}

.rn-ins-card.is-skeleton .rn-ins-media {
  background: var(--rn-line);
}

.rn-ins-card.is-skeleton i {
  display: block;
  width: 36%;
  height: 11px;
  border-radius: var(--rn-radius-pill);
  background: var(--rn-line);
}

.rn-ins-card.is-skeleton i:nth-child(2) {
  width: 92%;
  height: 20px;
}

.rn-ins-card.is-skeleton i:nth-child(3) {
  width: 64%;
  height: 20px;
}

.rn-ins-card.is-featured.is-skeleton .rn-ins-card-body {
  min-height: 0;
}

html:not(.js) .rn-ins-card.is-skeleton {
  display: none;
}

/* 6. Filters ────────────────────────────────────────────────────────────────────────────────────────────────────
   rn-chip buttons (44px, pressed = the ink fill) under a visible "Topic" label, with the count beside them. */
.rn-ins-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rn-space-3) var(--rn-space-4);
}

.rn-ins-filter-label,
.rn-ins-status {
  margin: 0;
  color: var(--rn-muted);
  font: 500 var(--rn-fs-label)/1.3 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

.rn-ins-filterbar .rn-filter > button[hidden] {
  display: none;
}

/* 7. Note view (/blog.html?post=) ───────────────────────────────────────────────────────────────────────────────
   The head script marks html.rn-blog-post before anything paints, so the list hero never shows first. Layout: the
   title across the top (wide enough for the longest headlines in three lines), then the picture and the text in a
   62ch column, with the note about how it was made and its source in a sticky side card; one column below 1100px. */
.rn-ins-article {
  display: none;
  padding-block: calc(var(--rn-header-clearance) + 16px) clamp(64px, 8vw, 112px);
  background: var(--rn-ink);
  color: var(--rn-text-on-ink);
}

html.rn-blog-post .rn-ins-article {
  display: block;
}

html.rn-blog-post :is(.rn-ins-hero, .rn-ins-latest) {
  display: none;
}

/* The notice that can replace the skeleton (a retired slug, a feed that did not load) keeps its reserved box, so
   nothing below it moves up when it lands. */
.rn-ins-article-wrap:has(> .rn-ins-article-skeleton, > .rn-ins-notice) {
  min-height: 80svh;
}

.rn-ins-back {
  margin-bottom: clamp(16px, 2.4vw, 32px);
  color: var(--rn-text-on-ink);
  text-decoration: none;
}

.rn-ins-back:is(:hover, :focus-visible) {
  text-decoration-line: underline;
}

.rn-ins-frame {
  display: grid;
  grid-template-areas:
    "head head"
    "media note"
    "body note"
    "foot note";
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  align-items: start;
  column-gap: clamp(40px, 6vw, 96px);
}

.rn-ins-article-head {
  grid-area: head;
  max-width: 1100px;
  margin-bottom: clamp(28px, 3.5vw, 48px);
}

.rn-ins-article-head .rn-ins-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 4px;
}

.rn-ins-article-head .rn-ins-chip {
  margin-right: 10px;
}

.rn-ins-article-head h1,
.rn-ins-notice h1 {
  margin: 20px 0 0;
  color: var(--rn-text-on-ink);
  font: var(--rn-weight-display) var(--rn-fs-h2-sm)/1.06 var(--rn-font-display);
  letter-spacing: var(--rn-track-display);
  text-wrap: balance;
}

/* Long headlines take a step down so the longest (the feed runs to about 140 characters) stays within five lines at
   390 and three at 1440: past 90 characters 26 → 38px, past 120 characters 24 → 36px. */
.rn-ins-article-head h1.is-long {
  font-size: clamp(1.625rem, 1.33rem + 1.2vw, 2.375rem);
}

.rn-ins-article-head h1.is-longer {
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
}

.rn-ins-note {
  position: sticky;
  top: calc(var(--rn-header-clearance) + 8px);
  display: grid;
  grid-area: note;
  justify-items: start;
  gap: var(--rn-space-3);
  padding: 22px;
  border: 1px solid var(--rn-ring);
  border-radius: var(--rn-radius-card);
  background: var(--rn-ink-soft);
}

.rn-ins-note > p:not(.rn-ins-tag) {
  margin: 0;
  color: var(--rn-muted-on-ink);
  font: 500 0.875rem/1.6 var(--rn-font-body);
}

.rn-ins-note .rn-link,
.rn-ins-source .rn-link {
  color: var(--rn-text-on-ink);
}

.rn-ins-article-media {
  grid-area: media;
  aspect-ratio: 2 / 1;
  border: 1px solid var(--rn-ring);
  border-radius: var(--rn-radius-card);
}

/* The text: muted body on ink (9.4:1), paper for headings, bold and links. The feed's section headings take the H3
   role's size (Manrope 700, below the title's compact H2 size, so the hierarchy reads); its one h3 (the closing
   question's label) becomes a mono label and the question itself a line set off by a yellow rule. */
.rn-ins-body {
  grid-area: body;
  max-width: 62ch;
  margin: 0;
  padding-top: clamp(32px, 4vw, 56px);
  color: var(--rn-muted-on-ink);
  font: 400 1.0625rem/1.75 var(--rn-font-body);
}

.rn-ins-body > * {
  margin: 0;
}

.rn-ins-body > * + * {
  margin-top: 1.1em;
}

.rn-ins-body h2 {
  margin-top: 2em;
  color: var(--rn-text-on-ink);
  font: var(--rn-weight-title) var(--rn-fs-h3)/var(--rn-lh-title) var(--rn-font-body);
  letter-spacing: var(--rn-track-title);
}

.rn-ins-body > h2:first-child {
  margin-top: 0;
}

.rn-ins-body h2 + *,
.rn-ins-body h3 + * {
  margin-top: 0.6em;
}

.rn-ins-body h3 {
  margin-top: 2.4em;
  color: var(--rn-muted-on-ink);
  font: 500 var(--rn-fs-label)/1.3 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

.rn-ins-body strong {
  color: var(--rn-text-on-ink);
  font-weight: 700;
}

.rn-ins-body a {
  color: var(--rn-text-on-ink);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.rn-ins-body a:hover {
  text-decoration-thickness: 2px;
}

.rn-ins-body :is(ul, ol) {
  padding-left: 1.25em;
}

.rn-ins-body li + li {
  margin-top: 0.55em;
}

.rn-ins-body li::marker {
  color: var(--rn-signal);
}

.rn-ins-body .rn-ins-question {
  padding-left: 20px;
  border-left: 3px solid var(--rn-signal);
  color: var(--rn-text-on-ink);
  font: 600 var(--rn-fs-lead)/var(--rn-lh-lead) var(--rn-font-body);
}

.rn-ins-source {
  display: grid;
  grid-area: foot;
  justify-items: start;
  gap: var(--rn-space-2);
  max-width: 62ch;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: var(--rn-space-5);
  border-top: 1px solid var(--rn-ring);
}

.rn-ins-source > p:not(.rn-ins-tag) {
  margin: 0;
  color: var(--rn-muted-on-ink);
  font: 500 var(--rn-fs-small)/1.5 var(--rn-font-body);
}

.rn-ins-source .rn-link {
  min-height: 0;
  padding-block: 12px;
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* A slug the feed no longer has, or a feed that did not load. */
.rn-ins-notice {
  max-width: 760px;
  padding-bottom: var(--rn-space-5);
}

.rn-ins-notice > p:not(.studio-kicker) {
  max-width: 48ch;
  margin: var(--rn-space-4) 0 var(--rn-space-6);
  color: var(--rn-muted-on-ink);
  font: 500 var(--rn-fs-body-lg)/1.6 var(--rn-font-body);
}

.rn-ins-article-skeleton {
  display: grid;
  gap: 18px;
  max-width: 1040px;
  padding-top: 64px;
}

.rn-ins-article-skeleton i {
  display: block;
  width: 24%;
  height: 11px;
  border-radius: var(--rn-radius-pill);
  background: var(--rn-line-on-ink);
}

.rn-ins-article-skeleton i:nth-child(2),
.rn-ins-article-skeleton i:nth-child(3) {
  width: 92%;
  height: 40px;
}

.rn-ins-article-skeleton i:nth-child(3) {
  width: 58%;
}

.rn-ins-article-skeleton i:nth-child(4) {
  width: 100%;
  height: auto;
  margin-top: 24px;
  border-radius: var(--rn-radius-card);
  aspect-ratio: 2 / 1;
}

/* 8. Reading progress ───────────────────────────────────────────────────────────────────────────────────────────
   A 3px yellow line along the top of the viewport that fills as the note is read: transform only. 0 when the note's
   top reaches the header's clearance, 1 when its end reaches the bottom of the viewport. Where scroll-driven
   animations exist it runs on the compositor; elsewhere blog.js writes the same transform once per frame while
   scrolling. It fades once the note has left the screen, and it is not shown under reduced motion or the site pause
   (it would freeze mid-way). */
.rn-ins-progress {
  position: fixed;
  z-index: calc(var(--rn-z-header) + 1);
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  pointer-events: none;
  transition: opacity var(--rn-dur-fade) var(--rn-ease-critical);
}

.rn-ins-progress > i {
  display: block;
  height: 100%;
  background: var(--rn-signal);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.rn-ins-article.is-offscreen .rn-ins-progress {
  opacity: 0;
}

.rn-ins-article:not(:has(.rn-ins-frame)) .rn-ins-progress {
  display: none;
}

/* The root scroller's timeline with the note's own range in px (blog.js measures it once and on resize). A named view
   timeline shared through timeline-scope did the same job but restyled the page on every scrolled frame (about 5ms a
   frame at 4x CPU on a phone); the root scroll timeline stays on the compositor. */
@supports (animation-timeline: scroll()) {
  .rn-ins-progress > i {
    animation: rn-ins-read linear both;
    animation-range: var(--rn-read-start, 0px) var(--rn-read-end, 100%);
    animation-timeline: scroll(root block);
  }
}

@keyframes rn-ins-read {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* 9. Pieces left ────────────────────────────────────────────────────────────────────────────────────────────────
   The closing band is components.css's rn-band; its second action is a paper rn-link. */
.rn-band .rn-actions .rn-link {
  color: var(--rn-text-on-ink);
}

/* 10. Tablet and phone ───────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1099px) {
  .rn-ins-frame {
    grid-template-areas:
      "head"
      "note"
      "media"
      "body"
      "foot";
    grid-template-columns: minmax(0, 1fr);
  }

  .rn-ins-note {
    position: static;
    max-width: 62ch;
    margin-bottom: clamp(24px, 4vw, 40px);
  }

  .rn-ins-article-media {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 900px) {
  .rn-ins-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .rn-ins-disclosure {
    max-width: 62ch;
  }

  .rn-ins-steps {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 18px;
  }

  .rn-ins-steps ol {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 6px;
  }

  .rn-ins-steps li {
    padding: 16px 0;
    border-left: 0;
  }

  .rn-ins-steps li + li {
    border-top: 1px solid var(--rn-ring);
  }

  .rn-ins-card.is-featured .rn-ins-card-link {
    grid-template-columns: minmax(0, 1fr);
  }

  .rn-ins-card.is-featured .rn-ins-media {
    aspect-ratio: 16 / 10;
  }

  .rn-ins-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Two columns and an odd count: the first card runs across both, picture beside its copy (blog.js marks it). */
  .rn-ins-grid > .rn-ins-card.is-lead {
    grid-column: 1 / -1;
  }

  .rn-ins-grid > .rn-ins-card.is-lead .rn-ins-card-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .rn-ins-grid > .rn-ins-card.is-lead .rn-ins-media {
    height: 100%;
    min-height: 100%;
  }

  .rn-ins-grid > .rn-ins-card.is-lead .rn-ins-card-title {
    font-size: var(--rn-fs-h3);
  }
}

@media (max-width: 640px) {
  .rn-ins-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .rn-ins-grid > .rn-ins-card.is-lead .rn-ins-card-link {
    display: flex;
  }

  .rn-ins-grid > .rn-ins-card.is-lead .rn-ins-media {
    height: auto;
    min-height: 0;
  }

  .rn-ins-grid > .rn-ins-card.is-lead .rn-ins-card-title {
    font-size: var(--rn-fs-title);
  }

  .rn-ins-steps li {
    font-size: var(--rn-fs-body);
  }

  .rn-ins-card.is-featured .rn-ins-card-body {
    padding: 22px 20px 24px;
  }

  .rn-ins-card.is-featured .rn-ins-card-title {
    font-size: var(--rn-fs-title);
  }

  .rn-ins-prompt {
    align-items: flex-start;
    flex-direction: column;
  }

  .rn-ins-body {
    font-size: var(--rn-fs-body);
    line-height: 1.7;
  }
}

/* 11. Reduced motion, pause, forced colours ─────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rn-ins-progress {
    display: none;
  }

  /* components.css fades a data-rn-reveal="media" frame in at any motion setting; here it simply shows. */
  html.js .rn-ins-media[data-rn-reveal="media"].is-visible:not(.lux-hero *) {
    animation: none;
  }

  .rn-ins-media > img,
  .rn-ins-cue > span {
    transition: none;
  }
}

html[data-motion="paused"] .rn-ins-progress {
  display: none;
}

@media (forced-colors: active) {
  .rn-ins-chip,
  .rn-ins-disclosure,
  .rn-ins-note {
    border: 1px solid CanvasText;
  }

  .rn-ins-progress > i {
    background: Highlight;
  }
}

/* Three columns and a count that leaves a short last row (a topic filter): the first card takes the whole row
   (one over) or two columns (two over), picture beside its copy, so every row is full (blog.js marks it). */
@media (min-width: 901px) {
  .rn-ins-grid > .rn-ins-card.is-row3 {
    grid-column: 1 / -1;
  }

  .rn-ins-grid > .rn-ins-card.is-span2 {
    grid-column: span 2;
  }

  .rn-ins-grid > .rn-ins-card:is(.is-row3, .is-span2) .rn-ins-card-link {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .rn-ins-grid > .rn-ins-card:is(.is-row3, .is-span2) .rn-ins-media {
    height: 100%;
    min-height: 100%;
  }

  /* Two columns wide, the row's height comes from its neighbour: the picture fills its track instead of taking its
     width from that height (16:10 of a full-height picture ran over the copy). */
  .rn-ins-grid > .rn-ins-card.is-span2 .rn-ins-media {
    aspect-ratio: auto;
  }

  /* The copy beside the picture has the card's full height: room for the whole headline. */
  .rn-ins-grid > .rn-ins-card:is(.is-row3, .is-span2) .rn-ins-card-title {
    -webkit-line-clamp: 5;
  }
}