/* ─────────────────────────────────────────────────────────────────────
   reading-room.css — Reading Room index, article typography, and (this
   pass) the Reference Card stack/dialog system.

   Base palette unchanged from the first functional pass and still shared
   with the rest of CheckMyARM (#f1f5f9/#cbd5e1 text, #3b82f6 accent,
   #1e293b borders — see public/about.html). This pass adds ONE deliberate
   departure: the page background warms a few degrees off the app-wide
   cool navy (#0f172a) toward a quieter, more editorial near-black — see
   the "Reading Room environmental tint" section near the end of this
   file for the reasoning. Everything else — card grid, article body
   typography, Sources styling — is untouched by that shift.

   Still no literal library/bookshelf/wood-texture decoration. Reference
   Cards get a warm (amber-family) accent identity of their own,
   distinguishing them from ordinary links (blue) and citation refs
   (dotted light blue) without becoming stationery cosplay — see
   "Reference Cards" below for the full reasoning.
   ───────────────────────────────────────────────────────────────────── */

* {
  box-sizing: border-box;
}

/* The article-switch jump this used to guard against (#app-shell having
   no reserved height while nav.js's async render() was still pending) is
   now handled at the shared shell level — see shell.css's own
   #app-shell{min-height:var(--shell-header-h,68px)} and nav.js's
   syncHeaderHeight(), which additionally keep working once the header
   becomes position:fixed (a genuinely shared-house behavior now, not
   Reading-Room-specific — see shell.css). The Reading-Room-local
   #app-shell:empty rule this comment used to document is removed as
   redundant, not left duplicated alongside the shared mechanism. */

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  /* The approved Reading Room environmental plate (a quiet, warm/green
     library corner), replacing the earlier CSS-only near-black tint —
     applies to both the index and every article page, since both share
     this one body rule. A modest, fixed-opacity dark wash sits between
     the photo and the page (first layer in background-image, painted on
     top) purely for general legibility in the gaps around the opaque UI
     surfaces below — deliberately restrained, not pushed toward black:
     the room's own warm/green character stays perceptible. `cover` +
     `center center` frames the asset without distorting it; `fixed`
     keeps the room itself steady while the page's own content scrolls
     within it, rather than the photo scrolling past like body content.
     `background-color` is the flat fallback while the (real, ~2MB) image
     loads, or if it fails outright. */
  background-color: #100e0c;
  background-image:
    linear-gradient(rgba(9, 11, 7, 0.3), rgba(9, 11, 7, 0.3)),
    url('/assets/reading-room/room-environment.png');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #f1f5f9;
  min-height: 100vh;
}

.rr-container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 5rem;
}

/* ── Shared bits ─────────────────────────────────────────────────────── */

.rr-eyebrow {
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.75rem;
}

.rr-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 999px;
  padding: 0.22rem 0.65rem;
}

.rr-featured-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.32);
  border-radius: 999px;
  padding: 0.22rem 0.65rem;
}

/* ── Warm reading surface ────────────────────────────────────────────────
   The one shared "lit surface within a darker room" treatment — a warm
   parchment/cream panel, floating on the still-dark app background,
   reused by the article reading area, the index hero, the left
   collection rail, and the pull-out dialog (each adds its own
   padding/sizing on top of this shared base). Custom properties defined
   here are what let every nested rule below reference one warm ink/accent
   palette instead of repeating literal colors per surface. The Reference
   Card rail on the right deliberately does NOT use this class — it stays
   in the existing dark CMA card family, per the composition spec ("three
   zones, not three equal columns": quiet dark reference material framing
   a warm, dominant reading surface). */
.rr-warm-surface {
  --rr-warm-bg-start: #f5ead2;
  --rr-warm-bg-end: #e9d3a4;
  --rr-ink: #2c2013;
  --rr-ink-soft: #4a3b26;
  --rr-ink-muted: #7d6b4d;
  --rr-ink-faint: #9c8a68;
  --rr-warm-accent: #a8721f;
  --rr-warm-accent-strong: #8a5c14;
  --rr-warm-border: rgba(58, 44, 24, 0.16);
  position: relative;
  background: linear-gradient(155deg, var(--rr-warm-bg-start), var(--rr-warm-bg-end));
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.35) inset;
}

.rr-book-icon {
  width: 16px;
  height: 16px;
  flex: none;
  color: inherit;
}

/* ── Index page ──────────────────────────────────────────────────────── */

/* No HTML hero here anymore — the finalized room-environment.png now
   carries "READING ROOM / Curiosity killed the cat. Ignorance kills a
   lot more." as baked-in architectural wall signage (see body's own
   background-image, above), which now performs the job the old cream
   .rr-index-hero plaque used to. .rr-index-hero/.rr-index-lede and their
   own mobile-breakpoint overrides were removed outright along with the
   markup, rather than left as dead rules nothing references anymore.

   .rr-index-grid's own top margin is what gives that signage room to be
   seen before the collection begins — entrance-page COMPOSITION, not a
   fixed/pinned/viewport-locked spacer: this is a plain margin-top on a
   normal-flow element, so scrolling moves the grid up over the signage
   exactly like any other content would, with zero special scroll
   behavior. body's own background-attachment:fixed (already established,
   unchanged) is what keeps the signage itself visually still while that
   happens, not anything added here. 30vh was chosen by directly opening
   the finalized asset and measuring where its lower signage line sits
   (roughly 32% down a 941px-tall source image, with
   background-position:center keeping that roughly centered vertically
   regardless of viewport shape) — verified live afterward at a real
   desktop viewport that the grid's first folio begins with a real,
   modest gap below the visible signage, not immediately underneath it. */
.rr-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-top: 30vh;
}

/* Reuses the SAME article-folio material (background image, tone,
   border, radius language) as the article-view left collection rail
   (.rr-collection-item, below) — so "publications laid out for browsing"
   (here) and "those same publications compactly filed together" (the
   rail) read as obviously the same physical object at a different
   density, exactly as the brief asks. Deliberately NOT the same fixed-
   height/negative-margin-overlap/line-clamp mechanics as the rail: this
   is the browsing/display state, so every folio stays individually
   visible (auto height, never overlapped) and titles/teasers/
   descriptions render in full — no truncation merely to force a uniform
   card height. Also now the same markup "More from the Reading Room"
   renders (see server/readingRoom.js) — every Reading Room article-card
   representation standardized on this one family, no leftover CMA
   application-card vocabulary left anywhere in this room. */
.rr-index-folio {
  all: unset;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
  text-align: left;
  background-color: #4f4530;
  background-image: url('/assets/reading-room/article-folio-material.png');
  /* A uniform 0.85x scale of the real 1536x1024 source (background-size:
     1305.6px x 870.4px) — deliberately more zoomed-out than the rail's
     own 324x216 (0.2109x): these folios are far larger and more varied
     in size (auto height, responsive width, the featured one spanning
     the full row) than the rail's small fixed 130px-tall cards, so the
     visible source-image window needs much more headroom to stay clear
     of the mockup's own black border/rounded corners at every size that
     actually occurs. At this scale the safe-interior crop window (the
     same measured-safe [130,1410]x[120,900] source-pixel box used
     throughout this file) stays clear up to roughly 1088px wide and
     663px tall — verified live against the real rendered folios
     (including the full-width featured one) that actual sizes stay
     comfortably inside that ceiling. */
  background-size: 1305.6px 870.4px;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 12px;
  padding: 1.5rem 1.6rem 1.4rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease, border-color 0.14s ease;
}

.rr-index-folio:hover,
.rr-index-folio:focus-visible {
  transform: translateY(-3px);
  filter: brightness(1.06);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.46);
}

.rr-index-folio:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

/* Reuses .rr-featured-tag's own existing pill treatment unchanged — "the
   existing FEATURED treatment," not a restyle — just a small positioning
   override so it sits above the title inside the folio's own padding. */
.rr-index-folio-featured-tag {
  align-self: flex-start;
  margin-bottom: 0.75rem;
}

/* "May be larger/more substantial than the others" — spans the full grid
   row (matching .rr-card-featured's own existing pattern) plus more
   generous padding and a larger title. */
.rr-index-folio-featured {
  grid-column: 1 / -1;
  padding: 2.1rem 2.4rem 2rem;
}

.rr-index-folio-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 750;
  line-height: 1.35;
  color: #f2ead8;
}

.rr-index-folio-featured .rr-index-folio-title {
  font-size: 1.6rem;
}

.rr-index-folio-teaser {
  margin: 0.5rem 0 0;
  color: #d9c9a0;
  font-size: 0.95rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.55;
}

.rr-index-folio-desc {
  margin: 0.6rem 0 0;
  color: #c9b98f;
  font-size: 0.92rem;
  line-height: 1.6;
}

.rr-index-folio-featured .rr-index-folio-desc {
  font-size: 0.98rem;
  max-width: 640px;
}

.rr-index-folio-meta {
  margin-top: 0.9rem;
  color: #a8946a;
  font-size: 0.78rem;
}

/* .rr-card/.rr-card-top/.rr-card-title/.rr-card-teaser/.rr-card-desc/
   .rr-card-meta/.rr-card-featured (the old navy CMA-application-card
   treatment) were removed outright this pass — "More from the Reading
   Room" (the last remaining consumer) now renders indexFolioHtml()'s
   article-folio markup instead (see server/readingRoom.js), and nothing
   anywhere in the Reading Room references these classes anymore.
   .rr-card-dialog* below is a completely different, untouched thing —
   the Reference Card pull-out dialog, not this. */

/* ── Article page chrome ─────────────────────────────────────────────── */

.rr-article-page {
  max-width: 720px;
}

.rr-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.rr-breadcrumb a {
  color: #64748b;
  font-size: 0.85rem;
  text-decoration: none;
}

.rr-breadcrumb a:hover {
  color: #93c5fd;
  text-decoration: underline;
}

.rr-breadcrumb-sep {
  color: #334155;
  font-size: 0.85rem;
}

.rr-article-meta {
  color: #64748b;
  font-size: 0.82rem;
}

.rr-article-meta-top {
  margin-bottom: 2.25rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #1e293b;
}

/* ── Article body (rendered Markdown) ────────────────────────────────── */

.rr-article-body {
  font-size: 1.06rem;
  line-height: 1.78;
  color: #cbd5e1;
  overflow-wrap: break-word;
}

/* A source entry's URL can be a single 100+ character unbroken token —
   sometimes standing alone (see .rr-source-url below), sometimes joined
   to its description in the same paragraph via a hard line break (`<br>`,
   from a trailing backslash or two-space line ending in the source
   Markdown). Either way, without this the browser sizes the link to the
   URL's natural width instead of wrapping it, overflowing the reading
   column. Applied to every link, not just source URLs, as a general
   safeguard for any other future long unbroken link text. */
.rr-article-body a {
  overflow-wrap: anywhere;
}

.rr-article-body h1 {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.25;
  color: #f8fafc;
  margin: 0 0 1.25rem;
}

.rr-article-body h2 {
  font-size: 1.4rem;
  font-weight: 750;
  line-height: 1.35;
  color: #f1f5f9;
  margin: 2.75rem 0 1.1rem;
  padding-top: 1.75rem;
  border-top: 1px solid #1e293b;
}

.rr-article-body h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #e2e8f0;
  margin: 2rem 0 0.75rem;
}

.rr-article-body p {
  margin: 0 0 1.15rem;
}

.rr-article-body > *:first-child {
  margin-top: 0;
}

.rr-article-body strong {
  color: #f8fafc;
  font-weight: 700;
}

.rr-article-body em {
  color: #dbeafe;
  font-style: italic;
}

.rr-article-body a {
  color: #3b82f6;
  text-decoration: underline;
  text-decoration-color: rgba(59, 130, 246, 0.4);
  text-underline-offset: 2px;
}

.rr-article-body a:hover {
  text-decoration-color: currentColor;
}

.rr-article-body a.rr-ref {
  color: #93c5fd;
  font-size: 0.9em;
  text-decoration: none;
  border-bottom: 1px dotted rgba(147, 197, 253, 0.5);
}

.rr-article-body a.rr-ref:hover {
  border-bottom-style: solid;
}

.rr-article-body ul,
.rr-article-body ol {
  margin: 0 0 1.15rem;
  padding-left: 1.4rem;
}

.rr-article-body li {
  margin: 0.4rem 0;
}

.rr-article-body blockquote {
  margin: 1.75rem 0;
  padding: 1rem 1.5rem;
  border-left: 3px solid #3b82f6;
  background: rgba(59, 130, 246, 0.06);
  border-radius: 0 8px 8px 0;
  color: #dbeafe;
}

.rr-article-body blockquote p {
  margin: 0 0 0.5rem;
}

.rr-article-body blockquote p:last-child {
  margin-bottom: 0;
}

.rr-article-body hr {
  border: none;
  border-top: 1px solid #1e293b;
  margin: 2.75rem 0;
}

.rr-article-body code {
  background: #1e293b;
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: 0.9em;
}

/* Standalone figures render a little wider than the text column — a
   deliberate "bleed" so a future editorial image can read as a wider
   visual moment without breaking the narrow reading measure everywhere
   else. Pure CSS; no special Markdown syntax required beyond the
   standard ![alt](src "optional caption") image syntax. */
.rr-article-body .rr-figure {
  margin: 2.25rem 0;
  width: min(94vw, 880px);
  margin-left: calc(50% - min(94vw, 880px) / 2);
  margin-right: calc(50% - min(94vw, 880px) / 2);
}

.rr-article-body .rr-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.rr-article-body .rr-figure figcaption {
  margin-top: 0.6rem;
  text-align: center;
  color: #64748b;
  font-size: 0.85rem;
  font-style: italic;
}

.rr-article-body img:not(.rr-figure img) {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  vertical-align: middle;
}

/* Sources & Further Reading reads as reference material, not body prose:
   a source's own bare URL — tagged server-side, see
   crossReferenceSources() in server/readingRoom.js — is styled to look
   like a citation line rather than a sentence. */
.rr-article-body p.rr-source-url {
  margin: 0.15rem 0 1.35rem;
  font-size: 0.85rem;
  word-break: break-all;
}

.rr-article-body p.rr-source-url a {
  color: #64748b;
  text-decoration-color: rgba(100, 116, 139, 0.5);
}

/* ── Warm reading surface: article page ──────────────────────────────────
   The center "calm illuminated reading surface" itself — breadcrumb,
   meta line, and the rendered article body all live inside this one
   .rr-warm-surface instance. Every rule below is an override (not a
   rewrite) of the dark-theme rules above, scoped with an extra class so
   it always wins on specificity regardless of source order. Structure,
   spacing, and font sizing are untouched — only ink colors change, tuned
   for the warm parchment background instead of the dark app background. */

/* Flat, not the shared .rr-warm-surface diagonal gradient — on a box as
   tall as a real 10+ minute article, that gradient's endpoint sits far
   enough down the page that the surface visibly, gradually darkened the
   further a reader scrolled, arriving at a noticeably darker page by the
   end purely as a side effect of article length. A single flat tone
   (the gradient's own lighter stop) keeps the surface spatially
   consistent from the first paragraph to the last. The index hero,
   collection rail, and dialog are all short enough that the shared
   gradient never manifests this way, so they keep it unchanged. */
.rr-reading-surface {
  padding: 2.75rem 3rem 3rem;
  background: var(--rr-warm-bg-start);
}

.rr-reading-surface .rr-breadcrumb a {
  color: var(--rr-ink-muted);
}

.rr-reading-surface .rr-breadcrumb a:hover {
  color: var(--rr-warm-accent-strong);
}

.rr-reading-surface .rr-breadcrumb-sep {
  color: var(--rr-ink-faint);
}

.rr-reading-surface .rr-badge {
  color: #7a3d0a;
  background: rgba(180, 90, 20, 0.14);
  border-color: rgba(180, 90, 20, 0.35);
}

.rr-reading-surface .rr-article-meta {
  color: var(--rr-ink-muted);
}

.rr-reading-surface .rr-article-meta-top {
  border-bottom-color: var(--rr-warm-border);
}

.rr-reading-surface .rr-article-body {
  color: var(--rr-ink-soft);
}

.rr-reading-surface .rr-article-body h1,
.rr-reading-surface .rr-article-body h2,
.rr-reading-surface .rr-article-body h3 {
  color: var(--rr-ink);
}

.rr-reading-surface .rr-article-body h2 {
  border-top-color: var(--rr-warm-border);
}

/* The article's own header_teaser (see injectHeaderTeaser() in
   readingRoom.js) — a prominent subtitle directly beneath the title,
   reusing the same front-matter field the index cards already show. */
.rr-reading-surface .rr-article-body .rr-header-teaser {
  margin: -0.35rem 0 1.85rem;
  font-size: 1.18rem;
  font-weight: 500;
  font-style: italic;
  line-height: 1.6;
  color: var(--rr-ink-soft);
}

.rr-reading-surface .rr-article-body strong {
  color: var(--rr-ink);
}

.rr-reading-surface .rr-article-body em {
  color: var(--rr-ink-soft);
}

.rr-reading-surface .rr-article-body a {
  color: #1d4ed8;
  text-decoration-color: rgba(29, 78, 216, 0.4);
}

.rr-reading-surface .rr-article-body a.rr-ref {
  color: var(--rr-warm-accent-strong);
  border-bottom-color: rgba(138, 92, 20, 0.5);
}

.rr-reading-surface .rr-article-body blockquote {
  background: rgba(120, 72, 20, 0.08);
  border-left-color: var(--rr-warm-accent);
  color: var(--rr-ink-soft);
}

.rr-reading-surface .rr-article-body hr {
  border-top-color: var(--rr-warm-border);
}

.rr-reading-surface .rr-article-body code {
  background: rgba(58, 44, 24, 0.08);
  color: var(--rr-ink);
}

.rr-reading-surface .rr-article-body .rr-figure figcaption {
  color: var(--rr-ink-muted);
}

.rr-reading-surface .rr-article-body p.rr-source-url a {
  color: var(--rr-ink-muted);
  text-decoration-color: rgba(122, 106, 77, 0.5);
}

/* Inline Reference Card annotations keep the same highlighter treatment,
   deepened into the warm-surface's own darker amber for contrast against
   the light background instead of the lighter amber tuned for dark bg. */
.rr-reading-surface .rr-article-body button.rr-inline-ref {
  background-color: rgba(138, 92, 20, 0.16);
}

.rr-reading-surface .rr-article-body button.rr-inline-ref:hover {
  background-color: rgba(138, 92, 20, 0.28);
}

.rr-reading-surface .rr-article-body button.rr-inline-ref:focus-visible {
  outline-color: var(--rr-warm-accent-strong);
  background-color: rgba(138, 92, 20, 0.28);
}

/* ── More from the Reading Room ──────────────────────────────────────── */

.rr-more {
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid #1e293b;
}

.rr-more h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 1.25rem;
}

.rr-more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

/* ── Wide-screen article layout: collection / article / reference stack ──
   Three zones, deliberately NOT three equal application columns — the
   center reading column keeps its existing 720px measure unchanged, and
   is what visually dominates. Below RR_WIDE_BREAKPOINT (defined only in
   the media query below, CSS has no variables usable in @media queries)
   this entire grid collapses to plain block flow — the exact markup
   already used by the first Reading Room pass, untouched. ────────────── */

.rr-article-layout {
  display: block;
}

.rr-collection-rail,
.rr-reference-rail {
  display: none;
}

.rr-article-main {
  min-width: 0;
}

/* ── Reading Room collection rail (left) ─────────────────────────────────
   "article collection -> open reading surface -> contextual references":
   a small, orderly collection of the Reading Room's own long-form works —
   an archival-folio/reading-file feel, related to but clearly distinct
   from the Reference Card stack (darker, richer material; taller, more
   substantial cards; a much gentler overlap, since these are the primary
   works, not compact reference material). The rail container itself is
   deliberately NOT the cream .rr-warm-surface anymore (it used to compete
   with the open article for "which cream surface is the important one") —
   a quiet, dark, translucent holder instead, closer to the room itself
   than to another reading sheet, while keeping its structural role and
   position unchanged. */

.rr-collection-rail {
  padding: 1.25rem 0.85rem 1.1rem;
  background: rgba(10, 8, 6, 0.4);
  border: 1px solid rgba(217, 178, 110, 0.14);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.rr-collection-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1.1rem;
}

.rr-collection-all {
  display: block;
  color: #94a3b8;
  font-size: 0.82rem;
  text-decoration: none;
  margin-bottom: 1.5rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.rr-collection-all:hover,
.rr-collection-all:focus-visible {
  color: #d9a34a;
}

.rr-collection-list {
  list-style: none;
  margin: 0;
  padding: 0.2rem 6px 0.3rem;
}

/* Positioned (not static) purely so the explicit z-index list below can
   establish real paint order between overlapping siblings — the actual
   overlap itself lives on .rr-collection-item, below. */
.rr-collection-list li {
  position: relative;
}

.rr-collection-list li:nth-child(1) { z-index: 1; }
.rr-collection-list li:nth-child(2) { z-index: 2; }
.rr-collection-list li:nth-child(3) { z-index: 3; }
.rr-collection-list li:nth-child(4) { z-index: 4; }
.rr-collection-list li:nth-child(5) { z-index: 5; }
.rr-collection-list li:nth-child(6) { z-index: 6; }
.rr-collection-list li:nth-child(7) { z-index: 7; }
.rr-collection-list li:nth-child(8) { z-index: 8; }

/* The folio itself — fixed geometry (every resting entry the same width
   and height, never sized to its own teaser length), perfectly aligned,
   no rotation. A modest, orderly overlap (nowhere near the Reference
   Card stack's density — these are the larger primary works, not compact
   references) via a fixed negative margin, the same "later/lower sits on
   top" mechanism as the Reference Card stack, scaled down. Surfaced with
   the approved article-folio material — intentionally darker/richer than
   both the cream reading surface and the lighter Reference Card stock,
   establishing a real material hierarchy across the three zones. */
.rr-collection-item {
  all: unset;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Raised from 100px, then again from 130px to 144px (this pass) — see
     the two size notes below. found live: at the old 100px height, the
     worst-case real content (a 2-line title, ~39px, plus its 2-line
     teaser, ~34px, plus the 4.8px gap between them — ~77.8px total)
     already exceeded the old 75.2px content box before the overlap even
     entered the picture, and the unchanged -26px overlap below then ate
     directly into the middle of the teaser text on top of that. 130px
     gave a 105.2px content box (~27px of headroom over the worst real
     case) AND, with the overlap depth itself left unchanged, moved the
     overlap zone (the card's own bottom 26px) to start ~14px below where
     that worst-case content actually ended — the overlap landed entirely
     in unused/material space below the text, never touching it, without
     reducing typography, clamping the teaser, or changing the overlap
     depth itself.

     This pass's own +14px (130->144): the Featured marker below
     (.rr-collection-featured-mark) moved from position:absolute (which
     avoided the content budget entirely, at the cost of visually
     floating over the title) to a real, normal-flow row ABOVE the title
     — the only way to GUARANTEE it structurally can never share the
     title's own line box, rather than relying on careful pixel-safety-
     margin math to just barely avoid collision. That real row needs real
     space: at the marker's own measured ~13px rendered height plus a
     small breathing margin, the worst-case content total grows to
     roughly 12(padding)+17(marker+gap)+40(title)+4.8(teaser gap)+34
     (teaser)=~107.8px against the unchanged 130px height's overlap start
     at 104px — a real, negative margin that would have reintroduced
     exactly the clipping problem the 100->130px change already fixed
     once. +14px keeps the overlap depth itself untouched (still -26px,
     preserving "existing overlap depth and stack rhythm") while moving
     the overlap zone to start at 144-26=118px, restoring a positive
     ~10px margin below the new worst-case content end (~107.8px) —
     applied to every card uniformly (not just the featured one) since a
     uniform per-card height is itself part of "the established stack"
     rhythm; only the featured card actually renders the extra row, so
     every other card simply has a little more breathing room above its
     own title now. Re-verified live afterward against real content. */
  height: 144px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  text-align: left;
  /* Centered on a safely-interior crop of the supplied asset — measured
     the same way as the Reference Card material (see .rr-stack-card):
     the mockup's own black backdrop and rounded corners sit outside this
     window at this card size, confirmed directly against the real file. */
  background-color: #4f4530;
  background-image: url('/assets/reading-room/article-folio-material.png');
  /* Recomputed for the wider 280px left rail (was 200px): the card's own
     rendered width grew to ~241px, so the safe-interior crop window (see
     .rr-stack-card's identical-in-kind comment above) needed a slightly
     wider zoom window to keep covering the new card size while staying
     clear of the source mockup's black border/corners — re-verified
     against the same measured-safe [130,1410]x[120,900] box. Still valid
     at the taller 130px height above — see that comment for the math. */
  background-size: 324px 216px;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 10px;
  padding: 0.75rem 0.9rem 0.8rem;
  margin-top: -26px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease, border-color 0.14s ease;
}

.rr-collection-list li:first-child .rr-collection-item {
  margin-top: 0;
}

/* Quieter than the Reference Card hover — this performs navigation, not
   a contextual overlay, so it earns an even smaller acknowledgement:
   "this is the work you're about to select," never a pull out of the
   collection, never enough to cover a neighboring title. */
a.rr-collection-item:hover,
a.rr-collection-item:focus-visible {
  transform: translate(-2px, -1px);
  filter: brightness(1.06);
}

a.rr-collection-item:focus-visible {
  outline: 2px solid #d9a34a;
  outline-offset: 2px;
}

/* The currently-open article — a standing (not hover-only) material/
   elevation/edge change: "the item currently taken from the collection,"
   not a filled nav-active pill and not a literal empty slot. Sits above
   its neighbors regardless of position in the list. */
.rr-collection-current .rr-collection-item {
  z-index: 20;
  border-color: #d9a34a;
  border-width: 2px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(217, 163, 74, 0.25);
  filter: brightness(1.08);
}

.rr-collection-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #f2ead8;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* flex-shrink:0 — found live: inside .rr-collection-item's column flex
     layout, a 2-line title (needs ~39px at this size) was being squeezed
     down to ~34px by ordinary flexbox shrinking (title + teaser together
     exceeded the item's available content height by a few px), silently
     clipping the last line's descenders even though the fixed card height
     had enough room in principle. Pinning the title to its own intrinsic
     line-clamp height stops it from ever being compressed; the
     unclamped teaser (already bounded by the card's own overflow:hidden)
     is what absorbs the squeeze instead, exactly as intended. */
  flex-shrink: 0;
}

.rr-collection-current .rr-collection-title {
  color: #fff6e0;
}

/* Carries the index page's own Featured status into this rail — "the
   same publication remains identifiable as Featured here," deliberately
   NOT another large pill (.rr-featured-tag) competing with the title at
   this much smaller scale. Wording/color (gold, uppercase, small caps)
   unchanged from the first pass — only its POSITION changed.

   Was position:absolute (top-right corner), which kept it out of the
   card's own flex/height flow at the cost of visually floating on top of
   the title's own line box whenever a title ran wide enough to reach the
   same corner — found live, a real collision, not a hypothetical one.
   Now a genuine normal-flow row, first in source order (already true —
   the markup was never reordered, only this element's own positioning
   was), which structurally GUARANTEES it can never share the title's
   line box, rather than relying on pixel-safety-margin math to just
   barely avoid one. flex-shrink:0 for the same reason
   .rr-collection-title needs it (see that rule's own comment) — a plain
   text row has no overflow:hidden of its own so it isn't as exposed to
   that exact flexbox-shrink bug, but pinning it costs nothing and keeps
   this element consistent with the same defensive pattern already
   established for its sibling rows. .rr-collection-item's own height
   grew 130px->144px specifically to give this row real space without
   pushing the worst-case content into the overlap zone — see that
   rule's own comment for the exact math. */
.rr-collection-featured-mark {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fbbf24;
  margin-bottom: 0.3rem;
  flex-shrink: 0;
}

/* No clamp of its own — like the Reference Card description, the card's
   own fixed height + overflow:hidden already bounds it, which is what
   lets a teaser "begin visibly and then disappear underneath the
   following entry" without needing a separate line-count cap. */
.rr-collection-teaser {
  margin-top: 0.3rem;
  color: #c9b98f;
  font-size: 0.74rem;
  line-height: 1.45;
}

/* ── Reference Cards ──────────────────────────────────────────────────────
   A deliberately distinct visual identity from the existing lightweight
   definition/educational-card popovers used elsewhere on CheckMyARM (see
   public/education-cards.js / landing.css: small hover bubbles, no
   persistent object, no stack). Reference Cards are richer canonical
   knowledge, article-contextual, with real tactile/material presence —
   expressed here through a warm amber accent family (distinct from the
   app-wide blue accent used for ordinary links and the lighter dotted-
   blue citation refs), layered stacking, and a pull-out dialog — never
   through literal paper/manila/tab/staple/curl skeuomorphism. */

/* Inline reference — restrained, text-first. A real <button> for correct
   activation semantics (this triggers an in-page action, not navigation),
   but visually reset to read as styled text, never a pill/chip/button —
   no visible border/stroke, small radius, inline flow — so it never
   interrupts long-form reading. The persistent affordance is a soft
   translucent amber wash directly on the phrase itself (a "highlighter"
   treatment), not a thin underline: visible without hovering, and
   deliberately unlike both an ordinary hyperlink (blue, underlined) and
   a numbered source citation (a.rr-ref — dotted underline, no fill,
   small font) elsewhere in this same article body. box-decoration-break
   keeps the highlight's corners consistent if a phrase wraps mid-line. */
.rr-article-body button.rr-inline-ref {
  all: unset;
  display: inline;
  color: inherit;
  font: inherit;
  cursor: pointer;
  background-color: rgba(217, 163, 74, 0.2);
  padding: 0.05em 0.2em;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-color 0.15s ease;
}

.rr-article-body button.rr-inline-ref:hover {
  background-color: rgba(217, 163, 74, 0.34);
}

.rr-article-body button.rr-inline-ref:focus-visible {
  outline: 2px solid #d9a34a;
  outline-offset: 2px;
  background-color: rgba(217, 163, 74, 0.34);
}

/* The reference rail — a geometrically consistent, filed-paper stack.
   Every resting card is EXACTLY the same width and height (never sized
   to its own content — "the user does not need to read the complete
   card while it is filed; activation is how they read it"), perfectly
   axis-aligned (no rotation), overlapping the card above it by a fixed
   amount via negative margin-top, with later/lower cards at
   progressively higher z-index so they visibly sit on top of — and
   obscure the lower portion, including the rounded corners, of — the
   card before them. That obscuring is intentional. Real density (8-10
   cards) stays comfortably under the sticky rail's own max-height at
   this geometry (verified: ~625-690px for 9-10 cards against a typical
   700-900px+ available height), so the independent scrollbar this was
   built to avoid stays avoided without needing viewport-dependent logic.
   Surfaced with the approved Reference Card paper material (a photographed
   texture, not a CSS gradient) — CSS still owns every structural property
   (dimensions, border-radius, the colored left identity band, stacking,
   interaction) per the brief; the image supplies grain/tone only. */

.rr-reference-eyebrow {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

/* Horizontal padding (new) gives the hover/focus state's small leftward
   nudge somewhere to go: .rr-reference-rail itself has no padding of its
   own, and overflow-y:auto on that rail forces its overflow-x to compute
   to auto too (the CSS Overflow spec's "one axis non-visible forces the
   other" rule) — with cards previously flush to the rail's own edges,
   that leftward shift (and the card's own colored left border riding
   with it) was clipped at the rail boundary. 8px comfortably clears the
   3px shift plus the accent border's own width. */
.rr-stack {
  display: flex;
  flex-direction: column;
  padding: 0.2rem 8px 0.4rem;
}

.rr-stack-card {
  all: unset;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 112px;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  position: relative;
  /* The material image, centered on a safely-interior crop of the
     supplied asset (measured directly against the real file: the
     asset's own rounded-card mockup and black backdrop sit outside this
     window at every card size actually used here) so no black border or
     corner ever bleeds through — CSS's own border-radius below is what
     actually rounds the visible card, not anything baked into the
     image. background-color is the flat paper-tone fallback while the
     (real, ~2.6MB) image loads. */
  background-color: #ddcea6;
  background-image: url('/assets/reading-room/reference-card-material.png');
  /* Recomputed for the narrower 220px right rail (was 300px): the card's
     own rendered width shrank to ~204px, so the safe-interior crop
     window (see the comment above) needed a slightly tighter zoom to
     stay clear of the source mockup's black border/corners — re-verified
     against the same measured-safe [130,1410]x[120,900] box. */
  background-size: 277px 184px;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(58, 44, 24, 0.3);
  border-left: 4px solid var(--rr-refcard-accent, #d9a34a);
  border-radius: 10px;
  padding: 0.85rem 1rem 0.9rem;
  margin-top: -48px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.38);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease, filter 0.14s ease;
}

.rr-stack-card:first-child {
  margin-top: 0;
}

/* A small, repeating (not per-card-unique) accent-color rotation — purely
   decorative variety for legibility/personality, no meaning attached to
   any particular color, matching the same "restrained, repeating pattern
   over per-item uniqueness" precedent the prior overlapped-stack design
   already used for its rotation angles. Every hue stays inside the same
   muted, slightly desaturated family so the cards still read as one
   Reference Card type, not a rainbow of unrelated categories. */
.rr-stack-card:nth-child(6n+1) { --rr-refcard-accent: #d9a34a; }
.rr-stack-card:nth-child(6n+2) { --rr-refcard-accent: #5b9bd5; }
.rr-stack-card:nth-child(6n+3) { --rr-refcard-accent: #6fbf8b; }
.rr-stack-card:nth-child(6n+4) { --rr-refcard-accent: #c77dc0; }
.rr-stack-card:nth-child(6n+5) { --rr-refcard-accent: #e0955f; }
.rr-stack-card:nth-child(6n)   { --rr-refcard-accent: #7d95d8; }

/* Explicit z-index, matching document order — 12 steps comfortably covers
   real density (8-10). Later/lower cards sit visibly on top of earlier
   ones, obscuring their lower rounded corners and any description text
   that runs past the exposed strip — the intended "filed on top of one
   another" read. Deliberately NOT overridden on hover/focus anymore (see
   below) — a card's resting position in the pile never changes. */
.rr-stack-card:nth-child(1) { z-index: 1; }
.rr-stack-card:nth-child(2) { z-index: 2; }
.rr-stack-card:nth-child(3) { z-index: 3; }
.rr-stack-card:nth-child(4) { z-index: 4; }
.rr-stack-card:nth-child(5) { z-index: 5; }
.rr-stack-card:nth-child(6) { z-index: 6; }
.rr-stack-card:nth-child(7) { z-index: 7; }
.rr-stack-card:nth-child(8) { z-index: 8; }
.rr-stack-card:nth-child(9) { z-index: 9; }
.rr-stack-card:nth-child(10) { z-index: 10; }
.rr-stack-card:nth-child(11) { z-index: 11; }
.rr-stack-card:nth-child(12) { z-index: 12; }

/* Hover/focus — deliberately much smaller than an earlier pass's "pull
   fully out of the pile" treatment. "rest = filed, hover/focus =
   selected/loosened, click = pulled out for reading" — a few px of
   movement toward the article plus a touch of brightness, with NO
   z-index change at all, so it never opens a gap with (or loses coverage
   over) a neighbor.

   The lift is driven by an explicit .rr-card-lifted class (toggled by
   reading-room-cards.js on real mouseenter/mouseleave), not raw :hover —
   found live that :hover alone is unreliable here: closing the dialog
   with Escape without moving the mouse left the card still matching
   :hover, since the pointer never actually left it, it was just covered
   by the dialog/backdrop — correct hit-testing, but a confusing "stuck"
   result. An explicit class lets the dialog's close handler
   deterministically clear the lift the instant it closes, regardless of
   the pointer's real position; ordinary mouse behavior is unaffected,
   since mouseenter/mouseleave fire at exactly the moments :hover would
   have applied/cleared anyway.

   :focus-visible is intentionally kept SEPARATE from the lift below, not
   merged into it — found live (real mouse click, then a real Escape
   keypress) that a stack-card-triggered open still looked "stuck raised"
   after closing even with .rr-card-lifted correctly cleared, while an
   inline-reference-triggered open never did. Root cause is in
   reading-room-cards.js, not this file: the dialog's close handler
   returns focus to lastInvoker — the STACK CARD itself when a stack card
   was clicked to open it, but a different element (the inline <button>)
   when an inline reference was clicked instead. Restoring focus right
   after a real keyboard Escape is exactly the case Chromium's own
   :focus-visible heuristic treats as "keyboard-driven," so it genuinely
   (correctly) re-matches on the stack card once focus lands back on it —
   this is legitimate keyboard focus, not a stuck class, and must stay.
   The bug was only that :focus-visible shared this rule's full
   hover-style lift/brightness/shadow, making a legitimately-refocused
   card visually indistinguishable from "still being hovered." Giving
   :focus-visible its own lighter, outline-only treatment below preserves
   real keyboard focus indication without reusing the hover language.

   That outline's own COLOR was a second, separate problem, found in a
   follow-up live pass: it reused --rr-refcard-accent — the same warm
   amber family as the hover-lift border, the .rr-stack-card-emphasized
   cue, and .rr-collection-current's "selected/open" border — so even
   once decoupled from the lift transform, a keyboard-refocused card
   still read as "still selected/active," just via a ring instead of a
   full lift. Deliberately not attempted: distinguishing "focus restored
   by dialog close" from ordinary Tab traversal so only one of them gets
   an outline — genuine keyboard navigation to an unopened card equally
   deserves a real, discoverable focus indicator, so the fix isn't to
   selectively hide it, only to stop it borrowing Reading Room's own
   "selected" vocabulary. #93c5fd is CMA's own site-wide --accent-soft
   focus-ring color (see landing.css, used identically in four other
   places) — a neutral, cooler, quieter alternative that's already the
   established app-wide "this is keyboard focus" language, distinct in
   family from every warm/amber emphasis state used elsewhere on this
   page. Hardcoded rather than referenced as a var(): landing.css's
   :root is never loaded on Reading Room pages.

   Found live, in a further follow-up pass: even at this quieter color,
   the ring STILL reads as "this card is still selected/open" in the one
   case where it can appear at all — Escape. Reusing the outline is
   correct in principle (this is real, legitimate keyboard focus — see
   above), but per explicit direction the visible indicator for THIS one
   programmatic restoration should be suppressed outright, without
   weakening :focus-visible for any other path. .rr-focus-restore-
   suppressed (reading-room-cards.js) is added right before the
   close-handler's own focus() call and removed on the element's very
   next blur — a real Tab traversal into or out of the card afterward is
   completely unaffected, since the class is already gone by then. */
.rr-stack-card.rr-card-lifted,
.rr-stack-card.rr-card-checked-out {
  transform: translate(-3px, -2px);
  filter: brightness(1.07);
  border-color: var(--rr-refcard-accent, #d9a34a);
  box-shadow: -2px 5px 12px rgba(0, 0, 0, 0.42);
}

.rr-stack-card:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

.rr-stack-card.rr-focus-restore-suppressed:focus-visible {
  outline: none;
}

/* Emphasis from an inline reference's own hover/focus elsewhere in the
   article — lighter still than the direct hover state above: a color
   cue only, never movement, per "subtly identify... without
   automatically moving/reordering/opening it." */
.rr-stack-card.rr-stack-card-emphasized {
  border-color: var(--rr-refcard-accent, #d9a34a);
  box-shadow: 0 0 0 2px rgba(217, 163, 74, 0.3), 0 4px 12px rgba(0, 0, 0, 0.4);
}

.rr-stack-card-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #2c2013;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* flex-shrink:0 — the same bug as .rr-collection-title (see its own
     comment): -webkit-line-clamp's required overflow:hidden strips this
     flex item's normal min-height:auto protection, so ordinary column-flex
     shrinking was compressing the title well below its natural 2-line
     height (found live: rendered clientHeight as low as 2-21px against a
     needed 40px) even though the card's own fixed height/overlap geometry
     never actually reaches that far — at full natural height a 2-line
     title still ends ~10px above where the next card's overlap begins.
     Pinning the title to its intrinsic height fixes the clipping and
     leaves the (already-unclamped, already-overflow:hidden-bounded)
     description to absorb any real overflow, exactly as originally
     intended by .rr-stack-card-desc's own comment below. */
  flex-shrink: 0;
}

/* No clamp of its own — the card's own fixed height + overflow:hidden
   above already bounds it cleanly regardless of length, which is what
   lets a description "begin visibly and then disappear underneath the
   following card" rather than needing a separate line-count cap. */
.rr-stack-card-desc {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: #4a3b26;
  line-height: 1.5;
}

/* ── Narrow-screen reference fallback ─────────────────────────────────────
   Replaces the persistent stack below the layout breakpoint — "remove/
   collapse... rather than squeezing it into the reading measure." A plain
   activatable list, same encounter order, same dialog on activation. */

.rr-narrow-reference-list {
  margin-top: 3.5rem;
  padding-top: 2.25rem;
  border-top: 1px solid #1e293b;
}

.rr-narrow-reference-list h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 1.25rem;
}

.rr-narrow-reference-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

/* Same Reference Card family as the wide-screen stack (.rr-stack-card,
   below) — approved cream material, colored left identity band, and the
   same warm-ink typography — not the old navy CMA application-card
   treatment this used to render. "Same object, different arrangement":
   this is the ordinary Reference Card, laid out as a readable, non-
   overlapping vertical list in normal document flow instead of a
   compact filed stack, so unlike .rr-stack-card there is deliberately
   no fixed height, no negative-margin overlap, no z-index stacking, and
   no line-clamp on title/desc — full text at auto height reads better in
   a genuine list than a truncated preview does, matching this list's own
   pre-existing (never truncated) behavior, just re-themed. */
.rr-narrow-ref {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  cursor: pointer;
  text-align: left;
  background-color: #ddcea6;
  background-image: url('/assets/reading-room/reference-card-material.png');
  /* A uniform 0.6x scale of the real 1536x1024 source (vs. the wide
     stack's own 0.2109x at a fixed 204px card width) — this list's own
     real width varies far more (a narrow phone up to .rr-article-page's
     720px max-width, all realistically reachable below the 1360px
     layout breakpoint that shows this list at all), so the visible
     source-image window needs more headroom to stay clear of the
     mockup's own black border/rounded corners at every width that
     actually occurs. At this scale the safe-interior crop window (the
     same measured-safe [130,1410]x[120,900] source-pixel box used
     throughout this file) stays clear up to roughly 768px wide —
     verified live against the real rendered list at both a narrow phone
     width and just under the layout breakpoint. */
  background-size: 921.6px 614.4px;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(58, 44, 24, 0.3);
  border-left: 4px solid var(--rr-refcard-accent, #d9a34a);
  border-radius: 10px;
  padding: 0.85rem 1rem 0.9rem;
  transition: border-color 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

/* Same 6-color repeating accent rotation as .rr-stack-card, applied to
   the <li> (the button itself is always its own parent's only child, so
   :nth-child on the button would always match :nth-child(1)) — both
   lists iterate the same referenceCards array in the same order (see
   server/readingRoom.js), so a given card gets the identical accent
   color whether shown in the wide stack or this narrow list. */
.rr-narrow-reference-list li:nth-child(6n+1) .rr-narrow-ref { --rr-refcard-accent: #d9a34a; }
.rr-narrow-reference-list li:nth-child(6n+2) .rr-narrow-ref { --rr-refcard-accent: #5b9bd5; }
.rr-narrow-reference-list li:nth-child(6n+3) .rr-narrow-ref { --rr-refcard-accent: #6fbf8b; }
.rr-narrow-reference-list li:nth-child(6n+4) .rr-narrow-ref { --rr-refcard-accent: #c77dc0; }
.rr-narrow-reference-list li:nth-child(6n+5) .rr-narrow-ref { --rr-refcard-accent: #e0955f; }
.rr-narrow-reference-list li:nth-child(6n)   .rr-narrow-ref { --rr-refcard-accent: #7d95d8; }

.rr-narrow-ref:hover,
.rr-narrow-ref:focus-visible {
  border-color: var(--rr-refcard-accent, #d9a34a);
  filter: brightness(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* #93c5fd, not the warm accent — the same neutral/CMA focus-ring
   language established for .rr-stack-card's own :focus-visible (see its
   comment above), so keyboard focus here reads consistently with the
   rest of the Reference Card family rather than borrowing the
   hover/selected color. */
.rr-narrow-ref:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

.rr-narrow-ref-title {
  display: block;
  font-weight: 700;
  color: #2c2013;
  font-size: 0.95rem;
  line-height: 1.4;
  margin-bottom: 0.35rem;
}

.rr-narrow-ref-desc {
  display: block;
  color: #4a3b26;
  font-size: 0.85rem;
  line-height: 1.55;
}

/* ── Pull-out dialog ──────────────────────────────────────────────────────
   One shared native <dialog> per page (see server/readingRoom.js) — real
   focus trap, Escape, backdrop, and top-layer stacking come from the
   platform; reading-room-cards.js only drives the open/close transform
   choreography (computed against wherever the card actually rests — the
   stack when one exists, the invoking control otherwise) and focus
   return. No flip animation, no forced 3D perspective. */

/* Warm-toned (shares .rr-warm-surface with the article reading surface —
   see server/readingRoom.js's cardDialogHtml()) so the opened card reads
   as pulling into and expanding over the same lit reading surface, not a
   separate dark app popup. Sizing/padding/shadow overrides stay here;
   background, border-radius, and the ink custom properties come from the
   shared base rule.

   position:fixed is the actual fix for the "opens offscreen" bug, not a
   cosmetic addition — diagnosed directly, not assumed: this browser
   computes a bare <dialog>'s own UA-stylesheet default as
   position:absolute (confirmed via getComputedStyle), and an
   absolutely-positioned element with no positioned ancestor is centered
   within the INITIAL CONTAINING BLOCK, which spans the full (often very
   tall) document, not the visible viewport — so `inset:0; margin:auto;`
   was centering the dialog somewhere in total-document coordinate space,
   nowhere near the reader's actual scroll position, rather than
   genuinely being a viewport-anchored modal. position:fixed makes the
   SAME inset:0/margin:auto centering technique resolve against the
   viewport instead, which is what "reference card is a viewport modal,
   not something positioned in document coordinates" actually requires —
   confirmed live: with this rule, the dialog centers correctly within
   the current viewport at any scroll depth, with no scroll manipulation
   involved in positioning it at all. */
.rr-card-dialog.rr-warm-surface {
  position: fixed;
  inset: 0;
  margin: auto;
  border: none;
  padding: 0;
  width: min(720px, 92vw);
  max-height: min(84vh, 820px);
  color: var(--rr-ink-soft);
}

.rr-card-dialog::backdrop {
  background: rgba(10, 8, 6, 0.72);
}

.rr-card-dialog[open] {
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.26s ease;
}

.rr-card-dialog.rr-no-motion {
  transition: none !important;
}

.rr-card-dialog-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: inherit;
}

.rr-card-dialog-close {
  all: unset;
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  width: 2.1rem;
  height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  color: var(--rr-ink-muted, #94a3b8);
  font-size: 1.5rem;
  line-height: 1;
}

.rr-card-dialog-close:hover,
.rr-card-dialog-close:focus-visible {
  color: var(--rr-ink, #f1f5f9);
  background: rgba(58, 44, 24, 0.1);
}

.rr-card-dialog-close:focus-visible {
  outline: 2px solid var(--rr-warm-accent-strong, #d9a34a);
  outline-offset: 2px;
}

.rr-card-dialog-scroll {
  overflow-y: auto;
  padding: 2.75rem 2.25rem 2.25rem;
}

.rr-card-dialog-content h2 {
  margin: 0 0 0.6rem;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--rr-ink, #f8fafc);
  line-height: 1.3;
}

.rr-card-dialog-content .rr-card-dialog-desc {
  margin: 0 0 1.5rem;
  color: var(--rr-warm-accent-strong, #d9a34a);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
}

.rr-card-dialog-body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--rr-ink-soft, #cbd5e1);
  overflow-wrap: break-word;
}

.rr-card-dialog-body p {
  margin: 0 0 1rem;
}

.rr-card-dialog-body > *:first-child {
  margin-top: 0;
}

.rr-card-dialog-body > *:last-child {
  margin-bottom: 0;
}

.rr-card-dialog-body strong {
  color: var(--rr-ink, #f8fafc);
  font-weight: 700;
}

.rr-card-dialog-body em {
  color: var(--rr-ink-soft, #dbeafe);
}

.rr-card-dialog-body a {
  color: #1d4ed8;
  text-decoration: underline;
  text-decoration-color: rgba(29, 78, 216, 0.4);
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.rr-card-dialog-body a:hover {
  text-decoration-color: currentColor;
}

.rr-card-dialog-body ul,
.rr-card-dialog-body ol {
  margin: 0 0 1rem;
  padding-left: 1.3rem;
}

.rr-card-dialog-body li {
  margin: 0.3rem 0;
}

/* ── Wide layout activation ──────────────────────────────────────────────
   RR_WIDE_BREAKPOINT: 1360px. Column widths deliberately encode the
   collection's real information hierarchy (article collection -> open
   article -> reference cards, with visual weight secondary-primary ->
   primary -> supporting): the left rail is wider than the right by
   design (280 vs 220, ~27%) — "a collection of substantial published
   works," not a navigation sidebar — while the center reading column
   stays by far the dominant surface, unchanged at 720px.

   A real, pre-existing sizing bug was found and fixed while doing this:
   the three columns + two 2.25rem gaps need 1292px, and .rr-container's
   own 1.5rem (24px) side padding needs 48px more on top of that — 1340px
   total — but .rr-article-page's max-width was 1280px (and the
   breakpoint 1300px), a full 60px short. That was true of the ORIGINAL
   200/720/300 split too (same 1292px column total), so the center
   reading column has likely been silently rendering at ~660px instead of
   its intended 720px ever since the wide layout was first built — this
   pass's own width verification is what surfaced it. max-width and the
   breakpoint are now both 1360px (20px of margin over the 1340px
   minimum, and set equal to each other so the grid never activates
   without enough room to render at its full, unsquashed proportions). */
@media (min-width: 1360px) {
  .rr-article-page {
    max-width: 1360px;
  }

  .rr-article-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 720px) 220px;
    gap: 2.25rem;
    align-items: start;
  }

  /* position:sticky + max-height/overflow-y:auto (this rule's own prior
     shape) is REMOVED outright, not narrowed -- on a shorter viewport, a
     sticky rail taller than the available "sticky window" (viewport
     height minus the header offset) has nowhere to put its own overflow
     but a second, independent scrollbar trapped inside the rail itself,
     which is exactly the bug this was found to cause: wheel/trackpad
     scroll gets captured by whichever rail the pointer happens to be
     over, instead of moving the page. "There should be ONE vertical
     scrolling surface: the page" (direct instruction) rules out any
     conditional/JS-driven "stay sticky until content is taller than the
     viewport" compromise too -- that would just move the same failure
     mode to a runtime check, still real work needed and still a second
     scrolling mode to reason about below whatever threshold it picked.
     Plain document-flow instead: both rails are now ordinary grid items
     (still display:block, needed for the folio/Reference Card stack's
     own internal layout, unaffected by this) that simply occupy however
     much height their content needs and scroll at the same rate as the
     rest of the page -- every card reachable through the one, ordinary
     page scrollbar, at any viewport height, with nothing left to trap
     scroll input. The header-offset-aware top/max-height math this
     comment used to explain no longer applies to anything. */
  .rr-collection-rail,
  .rr-reference-rail {
    display: block;
  }

  /* Both the bottom "More from the Reading Room" nav and the narrow
     reference-card fallback list exist so narrower layouts have
     somewhere to surface this same material — once the rails take over,
     showing it a second time below the content would be pure
     duplication, not "the environmental identity coming from the
     composition." */
  .rr-more,
  .rr-narrow-reference-list {
    display: none;
  }
}

/* ── Not found ────────────────────────────────────────────────────────── */

.rr-not-found {
  max-width: 520px;
  margin: 3rem auto;
  text-align: center;
}

.rr-not-found h1 {
  font-size: 1.6rem;
  margin-bottom: 0.75rem;
}

.rr-not-found p {
  color: #94a3b8;
  line-height: 1.6;
}

.rr-not-found a {
  color: #3b82f6;
}

/* The bare "footer {}" rule that used to live here is gone -- the footer
   is now the canonical .shell-footer (header-shared.css), rendered by
   nav.js's footerMarkup() into the #app-footer placeholder pageShell()
   now emits (see CLAUDE.md, "Footer normalization"). .rr-not-found sits
   directly on the room photo (no opaque panel of its own) -- a light
   smoked-glass backing, matching the header's own treatment, keeps its
   already-muted text legible against whatever part of the image happens
   to be behind it. */
.rr-not-found {
  background: rgba(9, 11, 7, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 14px;
  padding: 2rem 1.5rem;
}

@media (max-width: 640px) {
  .rr-container {
    padding: 2.5rem 1.1rem 3.5rem;
  }

  /* A shorter gap on narrow viewports — the signage's own rendered
     footprint shrinks proportionally with a narrower/shorter viewport
     too (body's background-size:cover keeps it centered either way), so
     the same fraction-of-viewport gap that reads as "modest" at desktop
     width would otherwise cost a disproportionate amount of a phone's
     own limited vertical space before any article ever becomes visible. */
  .rr-index-grid {
    margin-top: 20vh;
  }

  .rr-index-folio-featured {
    padding: 1.6rem 1.5rem 1.5rem;
  }

  .rr-reading-surface {
    padding: 1.75rem 1.25rem 2rem;
    border-radius: 16px;
  }

  .rr-reading-surface .rr-article-body .rr-header-teaser {
    font-size: 1.05rem;
  }

  .rr-article-body {
    font-size: 1rem;
  }

  .rr-article-body h1 {
    font-size: 1.55rem;
  }

  .rr-article-body h2 {
    font-size: 1.2rem;
  }

  .rr-article-body .rr-figure {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}