/* Research (redesigned 2026-10-18, design/artboards/Research-*.dc.html): the clients' list as a contents page in the
   840 px column, and one post in the Substack format (2026-10-23, owner request) in a centered 728 px column. The
   list: text tabs on a hairline, then rows with one anatomy at every width (the micro kicker shown above the serif
   title by CSS order, the summary at the 560 px measure), then one locked block per category (its line said once,
   its titles in ink-500, no links). The post: the head (category, title, subtitle, byline, comments pill), the body
   at 19/30.4 with its figures at the column's width and their captions centered, the Files rows and the gate card,
   then the discussion (2026-10-23): its head, the composer, the threads and their replies one level in.
   Layout only, from app.css's tokens: no colors, radii, shadows or motion values of its own. Every rule carries the
   rs- prefix, since every feature stylesheet loads on every page; forum.css loads after this file, so the body rules
   are written under .rs-article .fm-md and outrank the forum's .fm-md ones. */

/* One column at the Account page's measure, centered like it; the list's lines keep the 560 px measure. */
.rs-page {
  --rs-measure: 560px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 840px;
  margin-inline: auto;
}

/* The list's title wraps a long unbroken word or address instead of pushing the page sideways (320 px); a post's
   title does the same by its own rule (.rs-post-title). */
.rs-page .page-head-title,
.rs-page .page-head-title h1 {
  min-width: 0;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.rs-view-as {
  flex-wrap: wrap;
}

/* The category tabs: text on a 1px hairline, the current one ink-900 with a 2px navy underline that sits on the
   hairline (margin -1px). The row never clips (an overflow would cut the underline): it wraps as a guard instead.
   The weight stays 500 in every state, so nothing shifts. */
.rs-tabs {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
  border-bottom: 1px solid var(--ink-200);
}

.rs-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--target);
  height: var(--target);
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--ink-500);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration-line: none;
  white-space: nowrap;
}

.rs-tab:hover {
  color: var(--ink-900);
}

.rs-tab[aria-current="page"] {
  border-bottom-color: var(--navy-800);
  color: var(--ink-900);
}

.rs-tab:focus-visible {
  outline-offset: -4px;
}

.rs-index {
  display: flex;
  flex-direction: column;
}

.rs-list {
  display: flex;
  flex-direction: column;
}

/* A row: the tab hairline (or the locked block's top rule) above, a hairline under each. */
.rs-item {
  position: relative;
  padding: 24px 0;
  border-bottom: 1px solid var(--ink-200);
}

/* The title, the kicker and the summary: a long unbroken word wraps (320 px). */
.rs-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The kicker follows the title in the markup (read first) and shows above it, 8 px apart. */
.rs-kicker {
  order: -1;
  margin-bottom: 4px;
}

/* 'New': the nav's own 8 px dot, navy on light, then the word. */
.rs-new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--navy-800);
}

.rs-new .nav-dot {
  background: var(--navy-800);
}

/* A note's title: the H2 token, in lists and locked rows alike. */
.rs-row-title {
  color: var(--navy-800);
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 29px;
  font-weight: 500;
  letter-spacing: 0;
  text-wrap: balance;
}

.rs-title {
  color: inherit;
  text-decoration-line: none;
}

/* The whole row is the link's target: hovering it underlines the title, focus rings the row. Visited links keep
   their color. */
.rs-title[href]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-control);
}

.rs-item:hover .rs-title[href] {
  text-decoration-line: underline;
  text-decoration-color: currentColor;
}

.rs-title[href]:focus-visible {
  outline: none;
}

.rs-title[href]:focus-visible::after {
  outline: 2px solid var(--navy-800);
  outline-offset: 2px;
}

.rs-title-locked {
  color: var(--ink-500);
}

.rs-summary {
  max-width: var(--rs-measure);
  color: var(--ink-700);
  font-size: 15px;
  line-height: 24px;
}

/* One locked block per category, after the readable rows (24 under the tabs when nothing readable precedes it). */
.rs-locked {
  margin-top: 48px;
}

.rs-tabs + .rs-locked {
  margin-top: 24px;
}

.rs-locked-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  color: var(--ink-500);
}

.rs-locked-line {
  max-width: var(--rs-measure);
  margin-top: 8px;
  color: var(--ink-700);
  font-size: 15px;
  line-height: 24px;
}

/* 'See programs' takes a 44 px hit area without changing the line. */
.rs-locked-line a {
  display: inline-block;
  padding-block: 10px;
  margin-block: -10px;
  font-weight: 500;
}

.rs-locked .rs-list {
  margin-top: 16px;
  border-top: 1px solid var(--ink-200);
}

.rs-locked .rs-item {
  padding: 16px 0;
}

/* Empty: a line under the tabs, no box; directly under the heading with no tabs. */
.rs-empty {
  padding: 24px 0;
  color: var(--ink-500);
  font-size: 15px;
  line-height: 24px;
}

.rs-page > .rs-empty {
  padding: 0;
}

/* The gate: a white card at the reading measure, the lock and the line, then the outline button (it wraps under the
   line when space runs out). */
.rs-gate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  max-width: var(--rs-measure);
  padding: 24px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-card);
  background: var(--white);
}

.rs-gate-line {
  display: flex;
  flex: 1 1 240px;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  color: var(--ink-700);
  font-size: 15px;
  line-height: 24px;
}

.rs-gate-line .icon {
  flex: none;
  margin-top: 2px;
}

/* One post in the Substack format (2026-10-23, owner request: "exactly like my Substack posts", measured on
   quantsolvings.substack.com at 1440): one centered column 728 px wide holding the head, the body and the figures,
   which replaced the 560 px measure at the left of the 840 box. Every face is IBM Plex Sans, title and heads
   included (a bold sans everywhere, as his Substack reads); the serif title is not used here. The portal has no 700
   sans file, so 600 is the heaviest weight. */
.rs-post {
  --rs-column: 728px;
  max-width: var(--rs-column);
  gap: 32px;
}

/* A locked post's gate spans the 728 column with the head above it, as the rest of the page does: the list keeps
   the 560 measure for its own gate (2026-10-23, review: at 560 it sat at the column's left again). */
.rs-post .rs-gate {
  max-width: none;
}

/* The row above the head: back to Research, Carlos's Edit post on the right. */
.rs-post-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

/* The head: the category as micro, the title 32/36, the subtitle 18/24 12 under it, the byline 20 under that. */
.rs-post-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.rs-post-tier {
  margin-bottom: 8px;
}

.rs-post-title {
  max-width: 100%;
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.rs-subtitle {
  max-width: 100%;
  margin-top: 12px;
  color: var(--ink-500);
  font-size: 18px;
  line-height: 24px;
  overflow-wrap: anywhere;
}

/* The byline: the publication's round avatar (36), then its name and the date in 11 px uppercase. */
.rs-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.rs-avatar {
  display: block;
  flex: none;
  width: 36px;
  height: 36px;
}

.rs-byline-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rs-byline-name {
  color: var(--ink-900);
}

.rs-byline-date {
  color: var(--ink-500);
}

/* The pill row: under the byline, and again under the body. A pill: a 1px ink-200 outline, 36 tall, the icon and
   the count in 14/20 500 ink-500; its hit area reaches 44 (::after). */
.rs-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rs-post-head .rs-pills {
  margin-top: 20px;
}

.rs-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-pill);
  color: var(--ink-500);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-decoration-line: none;
}

.rs-pill::after {
  content: "";
  position: absolute;
  inset: -4px;
}

.rs-pill:hover {
  border-color: var(--ink-300);
  color: var(--ink-900);
}

/* The discussion's place under the pills: the pills' target, clear of the top bar. */
.rs-comments {
  scroll-margin-top: calc(var(--bar-h) + 24px);
}

/* The discussion (2026-10-23, owner request), as Substack sets its comments under a post: a hairline over it, the H2
   'Discussion' in Plex Sans 22/28 600 with the count beside it, the composer, then the threads. A comment is the
   forum's author line (its initials avatar, PosterName, the time) beside its words at 16/26, its actions under them;
   replies sit one level in, under their thread's first comment, with the smaller avatar. Every piece comes from
   app.css and forum.css (fm-avatar, fm-name, fm-staff, the level mark, fm-placeholder, fm-menu); these rules only
   place them. */
.rs-discussion {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  padding-top: 32px;
  border-top: 1px solid var(--ink-200);
}

.rs-discussion-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.rs-discussion-title {
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: 0;
}

.rs-discussion-count,
.rs-discussion-gate,
.rs-discussion-empty {
  margin: 0;
  color: var(--ink-500);
}

.rs-comment-form {
  gap: 12px;
}

.rs-comment-rules {
  margin: -4px 0 0;
  color: var(--ink-500);
}

.rs-comment-buttons {
  gap: 8px;
}

/* Cancel keeps the 44 px target in every language. */
.rs-comment-buttons .btn-quiet {
  min-width: var(--target);
  justify-content: center;
}

/* Carlos's hide in place (2026-10-23, owner decision): the forum's reason, note and button, stacked in the comment's
   column (narrower than the reports page's row), the controls 360 at most. Both classes: forum.css comes after this
   file and sets .fm-hide-form's three columns. */
.rs-hide-form.fm-hide-form {
  grid-template-columns: minmax(0, 360px);
  align-items: start;
}

/* The statement of reasons beside the author's hidden comment (the forum's Notice): in the comment's column its rules
   link keeps its words on one line, and wraps under the text where the column is narrow. */
.rs-comment-main .notice {
  flex-wrap: wrap;
}

.rs-comment-main .notice-text {
  flex: 1 1 160px;
  min-width: 0;
}

.rs-comment-main .notice-action {
  white-space: nowrap;
}

.rs-threads {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs-thread {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 0;
}

.rs-thread + .rs-thread {
  border-top: 1px solid var(--ink-200);
}

/* Replies: one level in, under the first comment's words (the 44 px avatar and its 12 px gap), each with the 28 px
   avatar 10 px from its words. */
.rs-replies {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0 0 0 56px;
  list-style: none;
}

.rs-comment {
  display: flex;
  gap: 12px;
  min-width: 0;
  scroll-margin-top: calc(var(--bar-h) + 24px);
}

.rs-comment-reply {
  gap: 10px;
}

.rs-comment-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.rs-comment-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-height: 28px;
}

.rs-comment-who {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}

.rs-comment-who .fm-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.rs-comment-when {
  color: var(--ink-500);
}

/* The time is the comment's link: a 44 px hit area around it, the line unchanged (2026-10-23, review). */
.rs-comment-when .fm-permalink {
  position: relative;
}

.rs-comment-when .fm-permalink::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--target);
  height: var(--target);
  transform: translate(-50%, -50%);
}

/* The words at 16/26 (0,2,0, above forum.css's .fm-md, which loads after this file). */
.rs-comment .rs-comment-body {
  font-size: 16px;
  line-height: 26px;
}

/* A table in a comment scrolls in its box as one in the post does: its cells break only at spaces, not one letter a
   line under the forum's overflow-wrap: anywhere (2026-10-23, review). */
.rs-comment .rs-comment-body :is(th, td) {
  overflow-wrap: normal;
}

/* position: relative anchors the comment menu's panel to the row (below). */
.rs-comment-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-left: -10px;
}

.rs-comment-actions:empty {
  display: none;
}

/* The menu opens under the action row from its start, to the right, so it never leaves the screen's left edge on a
   phone (2026-10-23, review: the forum's right: 0 grew it leftward from a toggle near the left). The 10 px undo the
   row's -10 px margin; three classes, above forum.css's .fm-menu > .fm-menu-panel, which loads after this file. */
.rs-comment-actions .fm-menu {
  position: static;
}

.rs-comment-actions .fm-menu > .fm-menu-panel {
  top: 100%;
  right: auto;
  left: 10px;
}

.rs-reply-form {
  scroll-margin-top: calc(var(--bar-h) + 24px);
}

/* The list's 'Carlos replied on <title>' lines (2026-10-23), the nav's dot first, above the tabs. */
.rs-replied {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs-replied-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  line-height: 22px;
  overflow-wrap: anywhere;
}

/* Navy on the white page, as the 'New' kicker's dot: gold never sits on a light ground. */
.rs-replied-line .nav-dot {
  background: var(--navy-800);
}

/* The article: the head, the body 32 under it, then the figures, then the files. */
.rs-article {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

/* The reading body: 19/30.4 (line-height 1.6) across the column, paragraphs 20 apart, as on Substack. */
.rs-article .fm-md {
  color: var(--ink-700);
  font-size: 19px;
  line-height: 30.4px;
}

.rs-article .fm-md :is(p, ul, ol) {
  margin: 0 0 20px;
}

.rs-article .fm-md p {
  text-wrap: pretty;
}

.rs-article .fm-md :is(ul, ol) {
  padding-left: 32px;
}

.rs-article .fm-md li + li {
  margin-top: 8px;
}

.rs-article .fm-md li > :is(ul, ol) {
  margin: 8px 0 0;
}

.rs-article .fm-md li::marker {
  color: var(--ink-500);
}

.rs-article .fm-md strong {
  color: var(--ink-900);
  font-weight: 600;
}

/* Links underlined in the text's own color. */
.rs-article .fm-md a {
  color: inherit;
  text-decoration-color: currentColor;
}

.rs-article .fm-md a:hover {
  color: var(--ink-900);
}

/* Markdown # renders h2 under the post's h1 (headingShift 1, 2026-10-23 review; it was the forum's h3): Substack's
   section head, 28/34, 30 above and 19 below. */
.rs-article .fm-md h2 {
  margin: 30px 0 19px;
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 34px;
  font-weight: 600;
}

/* ## renders h3: 22/28. */
.rs-article .fm-md h3 {
  margin: 28px 0 16px;
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
}

.rs-article .fm-md :is(h4, h5, h6) {
  margin: 24px 0 12px;
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 28px;
  font-weight: 600;
}

/* A quote in roman Plex Sans with a 3px ink-300 rule, 20 from the text: serif italic stays Carlos's voice. */
.rs-article .fm-md blockquote {
  margin: 0 0 20px;
  padding: 0 0 0 20px;
  border-left: 3px solid var(--ink-300);
  color: var(--ink-700);
}

.rs-article .fm-md blockquote p {
  margin-bottom: 12px;
}

.rs-article .fm-md blockquote > :last-child {
  margin-bottom: 0;
}

.rs-article .fm-md code {
  color: var(--ink-900);
  font-size: 16px;
}

/* Code on the ink-100 ground of inline code, no border; it scrolls sideways inside itself. */
.rs-article .fm-md pre {
  margin: 0 0 20px;
  padding: 16px;
  border: 0;
  background: var(--ink-100);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 24px;
}

.rs-article .fm-md pre code {
  font-size: inherit;
}

.rs-article .fm-md hr {
  margin: 32px 0;
}

/* Tables: auto width and left-aligned, no vertical rules, fills or box; micro heads over an ink-300 rule. They stay
   in the column and scroll sideways inside their own box. The cells undo the forum's overflow-wrap: anywhere on
   .fm-md, which shrinks a cell's narrowest width to one letter, so a wide table squeezed into the column with words
   split mid-way ('WIND' over 'OW' at 320 px) instead of scrolling; they break only at spaces now. */
.rs-article .fm-md .fm-md-table {
  margin: 0 0 20px;
}

.rs-article .fm-md-table :is(th, td) {
  overflow-wrap: normal;
  padding: 8px 24px 8px 0;
  border: 0;
  border-bottom: 1px solid var(--ink-200);
  vertical-align: top;
}

.rs-article .fm-md-table th {
  padding-top: 0;
  border-bottom-color: var(--ink-300);
  background: transparent;
  color: var(--ink-500);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  vertical-align: bottom;
}

.rs-article .fm-md-table :is(th, td):last-child {
  padding-right: 0;
}

.rs-article .fm-md-table td {
  font-size: 16px;
  line-height: 24px;
}

.rs-article .fm-md-table td.fm-md-right {
  color: var(--ink-900);
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* Written at (0,3,0), so they also beat the section-head and paragraph margins. */
.rs-article .fm-md > :first-child {
  margin-top: 0;
}

.rs-article .fm-md > :last-child {
  margin-bottom: 0;
}

/* Figures: the image at the column's width (a smaller one at its own), centered, no frame, opening the file; the
   caption centered under it, 14/20 ink-500, 8 apart; 32 under the figure. Not numbered. */
.rs-figure {
  margin: 32px 0;
}

.rs-figures {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.rs-figures .rs-figure {
  margin: 0;
}

.rs-figure-link {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

/* The renderer's figure image (in the body) and the figures after it (rs-figure-img). */
.rs-figure img,
.rs-figure-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

.rs-caption {
  margin-top: 8px;
  color: var(--ink-500);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

/* Code in a caption keeps the caption's 14 px, not the body code's 16. */
.rs-article .fm-md .rs-caption code {
  font-size: inherit;
}

/* Files: a micro head and ruled rows across the column, 48 under the body; the facts drop under the name on
   phones. */
.rs-files {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.rs-files .rs-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 16px;
  padding: 2px 0;
}

.rs-file-name {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: var(--target);
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.rs-file-facts {
  color: var(--ink-500);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  white-space: nowrap;
}

/* 'All research', 48 under the discussion's place. */
.rs-end {
  margin-top: 16px;
}

/* The library, the end of a post and the closed post (2026-10-29, the owner-approved canvas research-gamify Main,
   LibraryPhone, PostEnd, PostEndPhone, Gate and GatePhone): the dark bands on ink-900 with the gold button, the
   shelves' slanted marks and meters, the cards at the shell's width. The end mark is the progress script's sentinel
   under the article; it takes no room. The motion is app.css's (gold-rule-draw, bar-fill-draw, mark-pop). */
.rs-end-mark {
  height: 0;
}

.rs-page-library {
  max-width: none;
  gap: 32px;
}

.rs-library {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* The brand's slanted bars: the tier mark (three), a meter's segments (one per post). */
.rs-mark {
  display: inline-flex;
  flex: none;
  gap: 4px;
}

.rs-mark-bar,
.rs-seg {
  display: block;
  flex: none;
  border: 1px solid var(--ink-200);
  transform: var(--slant);
}

.rs-mark-bar {
  width: 8px;
  height: 22px;
}

.rs-mark-m {
  gap: 4px;
}

.rs-mark-s {
  gap: 3px;
  width: 30px;
}

.rs-mark-s .rs-mark-bar {
  width: 6px;
  height: 16px;
}

.rs-mark-l {
  gap: 8px;
}

.rs-mark-l .rs-mark-bar {
  width: 16px;
  height: 44px;
  background: var(--white);
}

.rs-mark-fill {
  border-color: var(--navy-900);
  background: var(--navy-900);
}

.rs-mark-l .rs-mark-fill {
  background: var(--navy-900);
}

.rs-mark-line {
  border-color: var(--ink-400);
}

.rs-mark-l .rs-mark-line {
  border: 1.5px solid var(--navy-900);
}

.rs-meter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.rs-seg {
  width: 20px;
  height: 8px;
  border-color: var(--ink-200);
  background: var(--ink-200);
}

.rs-seg-read {
  border-color: var(--navy-900);
  background: var(--navy-900);
}

.rs-seg-going {
  border-color: var(--navy-900);
  background: var(--white);
}

.rs-seg-wait {
  border: 1px dashed var(--ink-400);
  background: transparent;
}

.rs-meter-m {
  gap: 4px;
}

.rs-meter-l .rs-seg {
  width: 24px;
}

/* The band: what to read now, a hairline, the shelf's count and the reader's shelves. */
.rs-hero,
.rs-end-card,
.rs-gate-card {
  display: grid;
  padding: 40px;
  border-radius: var(--radius-card);
  background: var(--ink-900);
  color: var(--white);
}

.rs-hero {
  grid-template-columns: minmax(0, 1fr) 1px 340px;
  column-gap: 40px;
  row-gap: 32px;
}

.rs-hero .micro,
.rs-end-card .micro,
.rs-gate-card .micro {
  color: var(--ink-300);
}

.rs-hero .rs-seg,
.rs-end-card .rs-seg,
.rs-gate-card .rs-seg {
  border-color: var(--white-16);
  background: var(--white-16);
}

.rs-hero .rs-seg-read,
.rs-end-card .rs-seg-read,
.rs-gate-card .rs-seg-read {
  border-color: var(--white);
  background: var(--white);
}

.rs-hero .rs-seg-going,
.rs-end-card .rs-seg-going,
.rs-gate-card .rs-seg-going {
  border-color: var(--white);
  background: transparent;
}

.rs-hero .rs-mark-bar,
.rs-gate-card .rs-mark-bar {
  border-color: var(--white-16);
  background: transparent;
}

.rs-hero .rs-mark-fill,
.rs-gate-card .rs-mark-fill {
  border-color: var(--white);
  background: var(--white);
}

.rs-hero .rs-mark-line,
.rs-gate-card .rs-mark-line {
  border-color: var(--white-40);
}

.rs-hero-main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-width: 0;
}

.rs-hero-lead {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.rs-hero-post {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  min-width: 0;
}

.rs-hero-cover {
  display: block;
  flex: none;
  width: 168px;
  height: 112px;
  border-radius: var(--radius-control);
  background: var(--white);
  object-fit: cover;
  object-position: center top;
}

.rs-hero-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.rs-hero-title {
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 34px;
  font-weight: 500;
  color: var(--white);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.rs-hero-meta {
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-300);
}

.rs-hero-bar,
.rs-cover-bar {
  display: block;
  height: 2px;
  background: var(--white-16);
}

.rs-hero-bar {
  width: 100%;
  max-width: 360px;
  margin-top: 4px;
}

.rs-hero-bar-fill,
.rs-cover-bar-fill {
  display: block;
  height: 2px;
  background: var(--white);
}

.rs-hero-actions,
.rs-end-actions,
.rs-gate-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}

.rs-hero-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  text-decoration-line: underline;
  text-decoration-color: var(--white-40);
  text-underline-offset: 4px;
}

.rs-hero-rule {
  background: var(--white-8);
}

.rs-hero-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.rs-hero-count {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.rs-hero-numeral {
  font-family: var(--font-serif);
  font-size: 60px;
  line-height: 60px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.rs-hero-of {
  font-size: 17px;
  line-height: 24px;
  color: var(--ink-300);
}

.rs-hero-shelves {
  display: flex;
  flex-direction: column;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--white-8);
  list-style: none;
}

.rs-hero-shelf {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--target);
  text-decoration-line: none;
}

.rs-hero-shelf-name {
  flex: 1;
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
}

.rs-hero-shelf-state {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-300);
  text-align: right;
}

/* A shelf: its head (mark, name, meter and count), then the series and the cards. */
.rs-shelf {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rs-shelf-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.rs-shelf-name {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  color: var(--ink-500);
}

.rs-shelf-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 29px;
  font-weight: 500;
  color: var(--navy-800);
}

.rs-shelf-count {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.rs-shelf-read {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-700);
  white-space: nowrap;
}

.rs-shelf-read-quiet {
  margin-left: auto;
  color: var(--ink-500);
}

.rs-shelf-label {
  margin: 8px 0 0;
  color: var(--ink-500);
}

.rs-shelf-label-gap {
  margin-top: 24px;
}

.rs-shelf-line {
  margin: 0;
  font-size: 15px;
  line-height: 24px;
}

/* The cards: three columns, the series with an arrow in each gap; one column on phones. */
.rs-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs-cards > li {
  display: flex;
  min-width: 0;
}

.rs-series {
  column-gap: 40px;
}

.rs-series-step {
  position: relative;
}

.rs-series-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -32px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  color: var(--navy-900);
}

.rs-series-arrow-quiet {
  color: var(--ink-300);
}

.rs-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-card);
  background: var(--white);
  color: inherit;
  text-decoration-line: none;
}

.rs-card-next {
  border-color: var(--navy-900);
}

.rs-card-locked {
  border-style: dashed;
  border-color: var(--ink-300);
}

.rs-card[href]:hover .rs-card-title {
  text-decoration-line: underline;
}

.rs-cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  border-bottom: 1px solid var(--ink-200);
  background: var(--ink-50);
}

.rs-cover-locked {
  border-bottom-style: dashed;
  border-bottom-color: var(--ink-300);
  background: var(--ink-100);
}

.rs-cover-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  background: var(--white);
}

.rs-cover-bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--ink-200);
}

.rs-cover-bar-fill {
  background: var(--navy-900);
}

.rs-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
}

.rs-card-state {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--navy-800);
}

.rs-card-state-quiet {
  gap: 8px;
  color: var(--ink-500);
}

.rs-card-title {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  color: var(--navy-800);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.rs-card-locked .rs-card-title {
  color: var(--ink-500);
}

.rs-card-meta {
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-500);
}

/* A closed shelf: a white panel, two side by side. */
.rs-closed-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.rs-shelf-closed {
  padding: 24px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-card);
  background: var(--white);
}

.rs-closed-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ink-200);
  list-style: none;
}

.rs-closed-list > li {
  border-bottom: 1px solid var(--ink-200);
}

.rs-closed-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 0;
  color: var(--ink-500);
  text-decoration-line: none;
}

.rs-closed-row[href]:hover .rs-closed-title {
  text-decoration-line: underline;
}

.rs-closed-row-open,
.rs-closed-row-here .rs-closed-title {
  color: var(--navy-800);
}

.rs-closed-title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.rs-closed-day {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  white-space: nowrap;
}

/* The end of a post: the dark card under the article. */
.rs-end-card {
  gap: 20px;
}

.rs-end-rule {
  margin: 0;
}

.rs-end-head,
.rs-gate-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rs-end-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 40px;
  line-height: 44px;
  font-weight: 500;
  color: var(--white);
  overflow-wrap: anywhere;
}

.rs-end-line {
  margin: 0;
  font-size: 17px;
  line-height: 24px;
  color: var(--ink-300);
}

.rs-meter-l .rs-seg-filling {
  position: relative;
  overflow: hidden;
}

.rs-seg-fill {
  position: absolute;
  inset: 0;
  background: var(--white);
  transform-origin: left center;
}

.rs-end-hr {
  display: block;
  height: 1px;
  background: var(--white-8);
}

.rs-end-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs-end-step {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.rs-end-step-pop {
  display: block;
  flex: none;
}

.rs-end-step-mark {
  display: block;
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px dashed var(--white-40);
  transform: var(--slant);
}

.rs-end-step-done {
  border: 1px solid var(--white);
  background: var(--white);
}

.rs-end-step-open {
  border: 1.5px solid var(--white);
}

.rs-end-step-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rs-end-step-name {
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  color: var(--white);
  overflow-wrap: anywhere;
}

.rs-end-step-name-quiet {
  color: var(--ink-300);
}

.rs-end-next {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  column-gap: 24px;
  align-items: start;
}

.rs-end-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 107px;
  overflow: hidden;
  border-radius: var(--radius-control);
  background: var(--ink-50);
}

.rs-end-thumb-mark {
  border: 1px solid var(--white-16);
  background: transparent;
}

.rs-end-thumb .rs-mark-l .rs-mark-bar {
  width: 12px;
  height: 36px;
}

.rs-end-thumb-mark .rs-mark-bar {
  border-color: var(--white-16);
  background: transparent;
}

.rs-end-thumb-mark .rs-mark-line {
  border: 1px solid var(--white-40);
}

.rs-end-next-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.rs-end-next-title {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 29px;
  font-weight: 500;
  color: var(--white);
  overflow-wrap: anywhere;
}

.rs-end-next-line {
  margin: 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--ink-300);
}

.rs-end-actions {
  margin-top: 8px;
}

.rs-end-ask {
  margin: 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--ink-300);
}

.rs-end-ask a {
  font-weight: 500;
  text-decoration-color: var(--white-40);
  text-underline-offset: 4px;
}

/* A series step the reader cannot open yet. */
.rs-series-lock {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border: 1px dashed var(--ink-300);
  border-radius: var(--radius-card);
  background: var(--white);
}

.rs-series-lock > p {
  margin: 0;
}

/* The closed post: the art, the dark card, then the tier's posts. */
.rs-gate-art {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 240px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-card);
  background: var(--ink-50);
}

.rs-gate-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-control);
  background: var(--white);
  color: var(--ink-700);
}

.rs-gate-card {
  gap: 24px;
}

.rs-gate-head {
  gap: 12px;
}

.rs-gate-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  color: var(--white);
  text-wrap: balance;
}

.rs-gate-lead {
  margin: 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--ink-300);
}

.rs-ladder {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs-ladder-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--white-8);
  border-radius: var(--radius-control);
}

.rs-ladder-here {
  border-color: var(--white-40);
}

.rs-ladder-here .rs-mark-line {
  border-color: var(--white);
}

.rs-ladder-text {
  display: flex;
  flex-direction: column;
}

.rs-ladder-name {
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
}

.rs-ladder-state {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-300);
}

.rs-ladder-here .rs-ladder-state {
  color: var(--white);
}

.rs-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 20px;
  border: 1px solid var(--white-16);
  border-radius: var(--radius-control);
}

.rs-offer-what {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.rs-offer-name {
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
}

.rs-offer-line {
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-300);
}

.rs-offer-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
}

.rs-offer .path-badge {
  align-self: center;
  border-color: var(--gold-500);
  background: var(--gold-500);
  color: var(--navy-800);
}

.rs-offer .path-was {
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-300);
}

.rs-offer .path-price {
  font-family: var(--font-mono);
  font-size: 28px;
  line-height: 34px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--white);
}

.rs-offer .path-vat {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--ink-300);
}

.rs-offer .visually-hidden {
  position: absolute;
}

.rs-gate-shelf {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rs-gate-shelf-head {
  margin: 0;
  color: var(--ink-500);
}

.rs-closed-row-here {
  min-height: 56px;
}

.rs-gate-tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-control);
  background: var(--ink-100);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-700);
  white-space: nowrap;
}

/* Phones: the shell's 16 px gutters, tighter rows and gaps; the title 28/34; the body keeps 19/30.4 across the
   column, tables and code scroll in their boxes. */
@media (max-width: 767px) {
  .rs-post {
    gap: 24px;
  }

  .rs-post-title {
    font-size: 28px;
    line-height: 34px;
  }

  .rs-item {
    padding: 16px 0;
  }

  .rs-locked {
    margin-top: 32px;
  }

  .rs-locked .rs-item {
    padding: 12px 0;
  }

  .rs-article .fm-md-table :is(th, td) {
    padding-right: 16px;
  }

  .rs-end {
    margin-top: 8px;
  }

  /* Replies keep one level in, 24 px, so their words keep the column's width on a phone. */
  .rs-replies {
    padding-left: 24px;
  }

  .rs-discussion {
    padding-top: 24px;
  }
}

/* Under 360 px the four tabs still fit one line. */
@media (max-width: 359px) {
  .rs-tabs {
    column-gap: 16px;
  }
}

/* Tablets and phones: one column, the band's hairline and the series' arrows gone, tighter bands. */
@media (max-width: 900px) {
  .rs-hero,
  .rs-cards,
  .rs-closed-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .rs-hero-rule,
  .rs-series-arrow {
    display: none;
  }

  .rs-series {
    row-gap: 16px;
  }
}

@media (max-width: 767px) {
  .rs-hero,
  .rs-end-card,
  .rs-gate-card {
    padding: 24px;
  }

  .rs-hero-post {
    flex-direction: column;
    gap: 16px;
  }

  .rs-hero-cover {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .rs-hero-title {
    font-size: 24px;
    line-height: 30px;
  }

  .rs-hero-numeral {
    font-size: 48px;
    line-height: 48px;
  }

  .rs-cover {
    height: 180px;
  }

  .rs-shelf-closed {
    padding: 16px;
  }

  .rs-end-title {
    font-size: 32px;
    line-height: 38px;
  }

  .rs-end-steps,
  .rs-ladder {
    grid-template-columns: minmax(0, 1fr);
  }

  .rs-end-next {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
  }

  .rs-end-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .rs-end-thumb-mark {
    display: none;
  }

  .rs-gate-art {
    height: 160px;
  }

  .rs-gate-title {
    font-size: 26px;
    line-height: 32px;
  }

  .rs-offer .path-price {
    font-size: 24px;
    line-height: 30px;
  }
}