/* ==========================================================================
   2. THE REEL SHELL
   The reading surface is untouched; only the way you move through it changed.
   Chrome is set in mono throughout — the dossier reads in serif and sans,
   the instrumentation around it reads as instrumentation.
   ========================================================================== */

:root {
  --rl-chip: color-mix(in srgb, var(--ink) 6%, transparent);
  --rl-chip-hover: color-mix(in srgb, var(--warm) 20%, transparent);
  --rl-veil: color-mix(in srgb, var(--bg) 82%, transparent);
  --rl-slideH: 100vh;
  --rl-top: 46px;
  --rl-bottom: 60px;
  /* the page box: one width, one height, one measure — for every card */
  --rl-cardw: 624px;
  --rl-cardh: 800px;
  --rc-fs: clamp(15px, .34vw + 13.9px, 16.6px);
  --rc-lh: 1.62;
  --rc-gap: 44px;
}
@supports (height: 100dvh) { :root { --rl-slideH: 100dvh; } }

html { scroll-behavior: auto; }
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
}
:where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--warm); outline-offset: 2px; border-radius: 6px; }

/* ---------- the feed ---------------------------------------------------- */
.rl-feed {
  position: fixed; inset: 0;
  overflow-y: scroll; overflow-x: hidden;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rl-feed::-webkit-scrollbar { display: none; }

.rl-slide {
  height: var(--rl-slideH);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  display: flex; flex-direction: column;
  padding: calc(var(--rl-top) + env(safe-area-inset-top, 0px) + 6px)
           clamp(14px, 4vw, 30px)
           calc(var(--rl-bottom) + env(safe-area-inset-bottom, 0px) + 8px);
  box-sizing: border-box;
}
.rl-in {
  width: 100%; max-width: var(--rl-cardw); margin: 0 auto;
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
}
/* leave the action rail its own gutter so it never sits over a card */
@media (min-width: 761px) { .rl-slide { padding-right: 68px; } }

/* the stage — a constant frame; the cards move through it */
.rl-stage {
  flex: 1 1 auto; min-height: 0; max-height: var(--rl-cardh);
  display: flex; flex-direction: column;
}
.rl-stage > .rl-stage-in {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; justify-content: center;
}

/* Each reel is standalone, so the block's own leading margin goes. Nothing
   else about its styling is touched — siblings inside an opener keep theirs. */
.rl-stage-in > :first-child { margin-top: 0 !important; }

/* ==========================================================================
   THE PAGE
   Every reel is the same object: running head, a page window, a folio. One
   face, one ground, one measure — so what changes between cards is only ever
   the writing. Nothing outgrows the window: what doesn't fit becomes pages you
   turn, which is why the box never scrolls.

   The window has a ceiling, not a fixed height. A card that needs pages fills
   it; a short card closes at the end of its text. Same object either way —
   only the paper is cut to length, the way a card should be.
   ========================================================================== */
.rc {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: clamp(15px, 2.4vw, 24px) clamp(17px, 3vw, 30px) clamp(11px, 1.6vw, 16px);
}
/* set by layout() on a card that fits in one page: stop growing, take the
   measured height of the text and no more. The stage gives up its claim on the
   slide at the same time, so the card and its hashtags stay one centred group
   instead of drifting to opposite ends of the screen. */
.rc[data-hug="1"], .rc[data-hug="1"] > .rc-body { flex: 0 0 auto; }
.rl-slide[data-hug="1"] .rl-stage { flex: 0 1 auto; }
/* the gauge: present only on a card that has pages, filling as you turn them.
   A hairline that means something rather than a hairline that decorates. */
.rc::after {
  content: ""; position: absolute; left: 0; top: 0; height: 2px;
  width: calc(var(--rc-fill, 0) * 100%);
  background: linear-gradient(90deg, var(--warm), var(--cool));
  transition: width .3s cubic-bezier(.3, .72, .25, 1);
}
.rc[data-pages="1"]::after { display: none; }

/* running head — where this page sits in the dossier */
.rc-run {
  flex: 0 0 auto; display: flex; align-items: baseline; gap: 8px;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-faint);
  padding-bottom: clamp(9px, 1.3vw, 13px);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(11px, 1.7vw, 17px);
}
.rc-runl { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 0 1 auto; }
.rc-run .rc-pt { color: var(--cool-ink); flex: 0 0 auto; }
.rc-run .rc-sec {
  color: var(--warm-ink); flex: 0 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rc-run .rc-run2 {
  flex: 1 1 auto; min-width: 0; padding-left: 9px;
  border-left: 1px solid var(--line);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rc-run .rc-of {
  margin-left: auto; padding-left: 10px; flex: 0 0 auto;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* head — one display size, whatever the source element was */
.rc-h { flex: 0 0 auto; }
.rc-h:empty { display: none; }
.rc .rc-kick {
  font-family: var(--mono); font-size: .63rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--warm-ink);
  margin: 0 0 .5em; display: block; line-height: 1.5;
}
.rc .rc-kick > * { margin: 0; }
.rc .rc-head {
  font-family: var(--serif); font-weight: 600; letter-spacing: -.012em;
  font-size: clamp(1.15rem, 1.5vw + .55rem, 1.46rem); line-height: 1.22;
  text-wrap: balance; color: var(--ink);
  margin: 0 0 clamp(10px, 1.5vw, 15px);
}

/* A title with nothing under it is a part-title plate, not a page missing its
   body. Same skin, same faces — the title just gets the room a book gives a
   part title, rather than being stranded at the top of an empty box. */
.rc[data-plate="1"] .rc-body { display: none; }
.rc[data-plate="1"] .rc-h {
  margin: auto 0; text-align: center; padding: clamp(34px, 7vw, 76px) 0;
}
.rc[data-plate="1"] .rc-kick { margin-bottom: 1.1em; }
.rc[data-plate="1"] .rc-kick::after {
  content: ""; display: block; width: 26px; height: 1px;
  margin: .85em auto 0; background: var(--line-strong);
}
.rc[data-plate="1"] .rc-head {
  font-size: clamp(1.42rem, 2.1vw + .7rem, 2.05rem);
  line-height: 1.16; margin: 0; max-width: 22ch; margin-inline: auto;
}
.rc[data-plate="1"] .rc-f { margin-top: 0; }

/* the page window — the flow inside it is set in columns one window wide, so
   turning a page slides sideways by exactly one window. Lines are never cut. */
.rc-body {
  flex: 1 1 auto; min-height: 0; overflow: hidden; position: relative;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.rc-body::-webkit-scrollbar { width: 5px; }
.rc-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
.rc-flow {
  height: 100%; position: relative;
  column-width: var(--rc-colw, 560px);
  column-gap: var(--rc-gap);
  column-fill: auto;
  transform: translateX(calc(-1 * var(--rc-page, 0) * (var(--rc-colw, 560px) + var(--rc-gap))));
  transition: transform .34s cubic-bezier(.3, .72, .25, 1);
}

/* one measure for running text, everywhere */
.rc .rc-flow {
  font-family: var(--sans); font-size: var(--rc-fs); line-height: var(--rc-lh);
  color: var(--ink-soft);
}
.rc .rc-flow > :first-child { margin-top: 0 !important; }
.rc .rc-flow p, .rc .rc-flow li { font-size: 1em; line-height: var(--rc-lh); orphans: 2; widows: 2; }
.rc .rc-flow p { margin: 0 0 .92em; }
.rc .rc-flow h3, .rc .rc-flow h4 {
  font-family: var(--serif); font-weight: 600; color: var(--ink);
  font-size: 1.05em; line-height: 1.3; letter-spacing: -.008em;
  margin: 1.25em 0 .45em;
}
/* the dossier's three display voices keep their family and colour but come
   back to the page measure, so a quote can never eat a whole page */
.rc .rc-flow .lede, .rc .rc-flow .q, .rc .rc-flow .callout .q, .rc .rc-flow blockquote {
  font-family: var(--serif); font-size: 1.11em; line-height: 1.42;
  font-weight: 600; color: var(--ink);
}
.rc .rc-flow strong { color: var(--ink); }
.rc .rc-flow ul, .rc .rc-flow ol { margin: 0 0 .92em; padding-left: 1.15em; }
.rc .rc-flow li { margin-bottom: .35em; }
/* A page 570px wide cannot show three columns side by side, and — the reason
   this matters — a grid container cannot be split across a page turn: the
   browser overflows it instead, and everything past the fold would be lost.
   Stacking the panel grids answers both problems with one rule. */
/* `overflow: hidden` also has to go: a scroll or clip container is monolithic
   to the fragmenter, which is the other half of why these were being cut. */
.rc .rc-flow :is(.bio, .commit, .loop, .deck-grid, .metrics, .toc-flow,
  .cardtypes, .wcw, .arms, .stat-grid, .tiers, .endpoints) {
  display: block; background: transparent; padding: 0; gap: 0; border: 0;
  overflow: visible; border-radius: 0;
}
.rc .rc-flow :is(.bio, .commit, .loop, .deck-grid, .metrics, .toc-flow,
  .cardtypes, .wcw, .arms, .stat-grid, .tiers, .endpoints) > * {
  break-inside: avoid;              /* a panel and its label turn together */
}
.rc .rc-flow :is(.bio, .commit, .loop, .deck-grid, .metrics, .toc-flow,
  .cardtypes, .wcw, .arms, .stat-grid, .tiers, .endpoints) > * + * {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
/* the version timeline is a label beside a body: stack it, but plainly */
.rc .rc-flow .ver { display: block; gap: 0; }
.rc .rc-flow .ver > * + * { margin-top: 10px; }

/* tables become stacked rows inside a page, always — the same treatment they
   already had on narrow screens. Each row is then a block that can move to the
   next page on its own, which a table cell never could. */
.rc .rc-flow .table-scroll { border: 0; box-shadow: none; overflow: visible; padding: 0; background: transparent; }
.rc .rc-flow table { display: block; background: transparent; border: 0; min-width: 0; }
.rc .rc-flow thead { display: none; }
.rc .rc-flow tbody, .rc .rc-flow tr { display: block; width: 100%; min-width: 0; }
.rc .rc-flow tr {
  background: transparent; border: 1px solid var(--line);
  border-radius: 12px; margin-bottom: 9px; padding: 3px 2px;
}
/* a blockified cell still gets handed its old table-column width, which would
   leave four narrow ribbons stacked on top of each other — take it back */
.rc .rc-flow td { display: block; border-bottom: 0; padding: .26rem .78rem;
  width: auto !important; max-width: none; line-height: 1.52; }
.rc .rc-flow td::before {
  content: attr(data-label);
  display: block; font-family: var(--mono); font-size: .58rem;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: .1rem;
}
.rc .rc-flow td:empty, .rc .rc-flow td:empty::before { display: none; }

/* nothing may be split across a page turn if it can be helped */
.rc .rc-flow :is(h3, h4, .rc-kick, .eyebrow) { break-after: avoid; }
.rc .rc-flow :is(tr, .stat, .arm, .ep, .kill, .toc-col, .mode, .sig, .step,
  .ctype, .mcol, .tier, .deck, .rung, .lstep, .assume, .diagram, .ver-mark,
  .grade-legend, figure, blockquote, li) { break-inside: avoid; }

/* folio — sources on the left, page turner on the right, constant height so
   the page geometry is identical whether or not a card cites anything */
.rc-f {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  min-height: 30px;
  margin-top: clamp(9px, 1.5vw, 15px);
  /* the dossier's own `footer` rule carries 4rem of bottom padding — reset the
     whole box, not just the edge we want */
  padding: clamp(7px, 1.1vw, 11px) 0 0;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: .62rem; letter-spacing: .04em;
  color: var(--ink-faint);
}
.rc-srcs { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.45; }
.rc-srcs > * { margin: 0; }
.rc-srcs .rc-src, .rc-srcs .src { margin: 0; font-size: 1em; color: var(--ink-faint); }
.rc-srcs a { color: var(--cool-ink); }
.rc-fol { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 1px; }
.rc[data-pages="1"] .rc-fol { display: none; }
.rc-nav {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  color: var(--ink-faint); border: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.rc-nav:hover:not([disabled]) { color: var(--warm-ink); border-color: color-mix(in srgb, var(--warm) 40%, transparent); }
.rc-nav[disabled] { opacity: .26; cursor: default; }
.rc-nav svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rc-pg {
  min-width: 46px; text-align: center; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; letter-spacing: .09em;
}

/* --- two fixes carried over from the last review of the dossier ---------- */
/* 1. Four labels are coloured by an inline style with no dark-mode variant,
      so they fall below contrast on the dark ground. Lift them there only. */
@media (prefers-color-scheme: dark) {
  [style*="9A63D0"] { color: #C79BEC !important; }
  [style*="C6564D"] { color: #F58B82 !important; }
}
:root[data-theme="dark"] [style*="9A63D0"] { color: #C79BEC !important; }
:root[data-theme="dark"] [style*="C6564D"] { color: #F58B82 !important; }
:root[data-theme="light"] [style*="9A63D0"] { color: #9A63D0 !important; }
:root[data-theme="light"] [style*="C6564D"] { color: #C6564D !important; }
/* 2. Safari ignores var() inside an SVG presentation attribute, so the two
      signature waves lost their stroke. Declare the strokes in CSS instead. */
.wave path:nth-of-type(1) { stroke: var(--warm); }
.wave path:nth-of-type(2) { stroke: var(--cool); }

/* cover + chapter reels are dividers, not pages: they go full-bleed */
.rl-slide[data-kind="cover"], .rl-slide[data-kind="chapter"] { padding-left: 0; padding-right: 0; }
.rl-slide[data-kind="cover"] .rl-in,
.rl-slide[data-kind="chapter"] .rl-in { max-width: 1080px; }
.rl-slide[data-kind="cover"] .rl-stage,
.rl-slide[data-kind="chapter"] .rl-stage,
.rl-slide[data-kind="end"] .rl-stage { max-height: 100%; overflow-y: auto; }
.rl-slide[data-kind="cover"] .hero { border-radius: 16px; margin: 0 clamp(10px, 3vw, 22px); }
/* the cover and the chapter plates are not rateable content, so the action
   rail stands down rather than sitting on top of them */
body[data-plate="1"] .rl-acts { visibility: hidden; pointer-events: none; }
.rl-slide[data-kind="cover"] .hero-inner { padding: clamp(1.6rem, 4vw, 3rem) clamp(1.2rem, 4vw, 2.6rem); }
.rl-slide[data-kind="chapter"] .part-band { border: 0; }

/* ---------- hashtags --------------------------------------------------- */
.rl-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rl-tag {
  font-family: var(--mono); font-size: .69rem; letter-spacing: .01em;
  padding: 4px 9px; border-radius: 999px;
  background: var(--rl-chip); color: var(--ink-soft);
  border: 1px solid transparent; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.rl-tag:hover, .rl-tag:focus-visible { background: var(--rl-chip-hover); color: var(--warm-ink); border-color: color-mix(in srgb, var(--warm) 45%, transparent); }
.rl-tag[data-hot="1"] { color: var(--warm-ink); border-color: color-mix(in srgb, var(--warm) 38%, transparent); background: color-mix(in srgb, var(--warm) 11%, transparent); }
.rl-tag[data-muted="1"] { opacity: .38; text-decoration: line-through; }
.rl-why {
  font-family: var(--mono); font-size: .64rem; color: var(--ink-faint);
  padding: 4px 8px; border-radius: 999px; border: 1px dashed var(--line-strong);
}
.rl-why:hover { color: var(--cool-ink); border-color: var(--cool); }

/* ---------- top bar ---------------------------------------------------- */
.rl-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: calc(var(--rl-top) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) clamp(10px, 3vw, 18px) 0 clamp(16px, 3vw, 24px);
  display: flex; align-items: center; gap: 10px;
  background: var(--rl-veil);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.rl-brand {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink); flex-shrink: 0;
}
.rl-brand .rl-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--warm); box-shadow: 0 0 12px var(--warm);
}
.rl-scope {
  font-family: var(--mono); font-size: .68rem; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.rl-scope b { color: var(--warm-ink); font-weight: 600; }
.rl-count {
  font-family: var(--mono); font-size: .68rem; color: var(--ink-faint);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.rl-iconbtn {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center; color: var(--ink-soft);
  transition: background .15s, color .15s;
}
.rl-iconbtn:hover { background: var(--rl-chip); color: var(--ink); }
.rl-iconbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- part progress rail ----------------------------------------- */
.rl-rail {
  position: fixed; left: 0; z-index: 35;
  top: calc(var(--rl-top) + env(safe-area-inset-top, 0px) + 10px);
  bottom: calc(var(--rl-bottom) + env(safe-area-inset-bottom, 0px) + 10px);
  width: 3px; display: flex; flex-direction: column; gap: 3px;
}
.rl-rail i {
  flex: 1; position: relative; border-radius: 3px;
  background: var(--line); overflow: hidden;
}
.rl-rail i::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0;
  height: var(--f, 0%);
  background: linear-gradient(180deg, var(--warm), var(--cool));
  transition: height .4s ease;
}
.rl-rail i[data-here="1"] { background: color-mix(in srgb, var(--warm) 28%, var(--line)); box-shadow: 0 0 8px var(--glow-warm); }

/* ---------- action rail ------------------------------------------------ */
.rl-acts {
  position: fixed; right: clamp(8px, 2vw, 16px); top: 50%;
  transform: translateY(-50%); z-index: 35;
  display: flex; flex-direction: column; gap: 8px;
}
.rl-act {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; position: relative;
  color: var(--ink-soft); background: var(--rl-veil);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: color .15s, border-color .15s, transform .15s, background .15s;
}
.rl-act:hover { color: var(--ink); transform: translateY(-1px); }
.rl-act svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rl-act[data-on="1"] { color: var(--warm-ink); border-color: color-mix(in srgb, var(--warm) 50%, transparent); background: color-mix(in srgb, var(--warm) 13%, transparent); }
.rl-act[data-on="1"] svg { fill: color-mix(in srgb, var(--warm) 30%, transparent); }
.rl-act[data-kind="nope"][data-on="1"] { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 50%, transparent); background: color-mix(in srgb, var(--crit) 12%, transparent); }
.rl-act[data-kind="nope"][data-on="1"] svg { fill: none; }
.rl-act .rl-lab {
  position: absolute; right: 46px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
  background: var(--bg-elev); border: 1px solid var(--line);
  padding: 3px 7px; border-radius: 6px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.rl-act:hover .rl-lab { opacity: 1; }
@media (max-width: 760px) {
  .rl-acts { top: auto; transform: none; bottom: calc(var(--rl-bottom) + env(safe-area-inset-bottom, 0px) + 12px); }
  .rl-act { width: 36px; height: 36px; }
  .rl-act .rl-lab { display: none; }
}

/* ---------- bottom bar ------------------------------------------------- */
.rl-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  min-height: var(--rl-bottom);
  padding: 8px clamp(10px, 3vw, 18px) calc(8px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--rl-veil);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-top: 1px solid var(--line);
}
.rl-modes { display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--rl-chip); }
.rl-mode {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .06em;
  text-transform: uppercase; padding: 6px 10px; border-radius: 8px;
  color: var(--ink-faint); transition: background .15s, color .15s;
}
.rl-mode:hover { color: var(--ink); }
.rl-mode[aria-pressed="true"] { background: var(--bg-elev); color: var(--warm-ink); box-shadow: var(--shadow); }
.rl-barbtn {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .06em;
  text-transform: uppercase; padding: 7px 11px; border-radius: 9px;
  color: var(--ink-soft); border: 1px solid var(--line);
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s, color .15s, border-color .15s;
}
.rl-barbtn:hover { background: var(--rl-chip); color: var(--ink); border-color: var(--line-strong); }
.rl-barbtn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 620px) { .rl-barbtn .rl-btxt { display: none; } .rl-barbtn { padding: 8px; } }

/* ---------- overlays --------------------------------------------------- */
.rl-ov {
  position: fixed; inset: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  display: none; flex-direction: column;
}
.rl-ov[data-open="1"] { display: flex; }
.rl-ovhead {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  padding: calc(14px + env(safe-area-inset-top, 0px)) clamp(14px, 4vw, 26px) 12px;
  border-bottom: 1px solid var(--line);
}
.rl-ovtitle {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink); flex: 1;
}
.rl-ovbody {
  flex: 1; overflow-y: auto;
  padding: clamp(16px, 4vw, 26px) clamp(14px, 4vw, 26px) calc(40px + env(safe-area-inset-bottom, 0px));
}
.rl-ovbody-in { max-width: 780px; margin: 0 auto; }
.rl-ovnote {
  font-size: .88rem; line-height: 1.6; color: var(--ink-soft);
  max-width: 62ch; margin: 0 0 1.4rem;
}
.rl-ovnote b { color: var(--ink); }

/* keyboard legend */
.rl-keys {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 7px 16px; margin: 0 0 1.2rem; align-items: baseline;
}
.rl-keys dt {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  color: var(--warm-ink); white-space: nowrap;
}
.rl-keys dd { margin: 0; font-size: .85rem; color: var(--ink-soft); }

/* index */
.rl-ixpart { margin-bottom: 1.7rem; }
.rl-ixhead {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--cool-ink);
  padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 10px;
  display: flex; justify-content: space-between; gap: 10px;
}
.rl-ixhead span:last-child { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.rl-ixname { font-family: var(--serif); font-size: 1.02rem; color: var(--ink); text-transform: none; letter-spacing: 0; }
.rl-ixgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.rl-ixitem {
  display: flex; align-items: center; gap: 9px; text-align: left;
  padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg-elev); transition: border-color .15s, transform .15s;
}
.rl-ixitem:hover { border-color: var(--warm); transform: translateY(-1px); }
.rl-ixitem .rl-ixlab { flex: 1; font-size: .92rem; color: var(--ink); }
.rl-ixitem .rl-ixn { font-family: var(--mono); font-size: .64rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.rl-ixitem .rl-ixbar { width: 26px; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; flex-shrink: 0; }
.rl-ixitem .rl-ixbar i { display: block; height: 100%; background: var(--warm); }

/* interests */
.rl-heat { display: flex; flex-direction: column; gap: 5px; margin-bottom: 1.8rem; }
.rl-hrow { display: flex; align-items: center; gap: 10px; }
.rl-hrow .rl-hname {
  font-family: var(--mono); font-size: .72rem; width: 10.5rem; flex-shrink: 0;
  color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rl-hrow[data-muted="1"] .rl-hname { opacity: .4; text-decoration: line-through; }
.rl-htrack { flex: 1; height: 8px; border-radius: 4px; background: var(--rl-chip); overflow: hidden; }
.rl-htrack i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--warm), var(--cool)); transition: width .4s ease; }
.rl-hrow .rl-hval { font-family: var(--mono); font-size: .66rem; color: var(--ink-faint); width: 3.1rem; text-align: right; font-variant-numeric: tabular-nums; }
.rl-hmute { font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); padding: 3px 7px; border-radius: 6px; border: 1px solid var(--line); }
.rl-hmute:hover { color: var(--crit); border-color: var(--crit); }
.rl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 1.6rem; }
.rl-stat { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-elev); }
.rl-stat .rl-sn { font-family: var(--mono); font-size: 1.5rem; color: var(--warm-ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.rl-stat .rl-sl { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 4px; }
.rl-danger { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; padding: 8px 13px; border-radius: 9px; border: 1px solid var(--crit); color: var(--crit); }
.rl-danger:hover { background: color-mix(in srgb, var(--crit) 12%, transparent); }

/* tag directory */
.rl-tagdir { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 1.8rem; }
.rl-tagdir .rl-tag { font-size: .74rem; padding: 6px 11px; }
.rl-tagdir .rl-tag em { font-style: normal; color: var(--ink-faint); font-size: .9em; margin-left: 5px; }

/* search */
.rl-searchbox {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px;
  background: var(--bg-elev); border: 1px solid var(--line-strong);
  color: var(--ink); font-family: var(--sans); font-size: 1rem; margin-bottom: 1.2rem;
}
.rl-searchbox::placeholder { color: var(--ink-faint); }
.rl-hit {
  display: block; width: 100%; text-align: left; padding: 12px 14px;
  border-radius: 11px; border: 1px solid var(--line); background: var(--bg-elev);
  margin-bottom: 7px; transition: border-color .15s;
}
.rl-hit:hover { border-color: var(--warm); }
.rl-hit .rl-hmeta { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cool-ink); margin-bottom: 4px; }
.rl-hit .rl-htitle { font-family: var(--serif); font-size: 1rem; color: var(--ink); margin-bottom: 3px; }
.rl-hit .rl-hsnip { font-size: .84rem; color: var(--ink-soft); line-height: 1.5; }
.rl-hit mark { background: color-mix(in srgb, var(--warm) 32%, transparent); color: var(--ink); border-radius: 3px; padding: 0 2px; }

/* sources overlay keeps the original footer styling */
.rl-ovbody footer { border-top: 0; padding: 0; }

/* ---------- end card, coach mark, toast -------------------------------- */
.rl-end { text-align: center; padding: 0 1rem; }
.rl-end h3 { font-family: var(--serif); font-size: clamp(1.5rem, 4vw, 2.1rem); color: var(--ink); margin: 0 0 .7rem; text-wrap: balance; }
.rl-end p { color: var(--ink-soft); max-width: 46ch; margin: 0 auto 1.4rem; line-height: 1.6; }
.rl-endbtns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.rl-coach {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 50;
  bottom: calc(var(--rl-bottom) + env(safe-area-inset-bottom, 0px) + 6px);
  pointer-events: none;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: .63rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
  padding: 6px 13px; border-radius: 999px;
  background: var(--rl-veil); border: 1px solid var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.rl-coach svg { width: 15px; height: 15px; fill: none; stroke: var(--warm); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: rl-nudge 1.9s ease-in-out infinite; }
@keyframes rl-nudge { 0%, 100% { transform: translateY(3px); opacity: .55; } 50% { transform: translateY(-3px); opacity: 1; } }
/* the page-turn hint reads sideways, because that is the gesture it teaches.
   It also sits a row higher, clear of the hashtags under the card. */
.rl-coach[data-axis="x"] {
  text-transform: none; letter-spacing: .04em; max-width: min(92vw, 460px);
  bottom: calc(var(--rl-bottom) + env(safe-area-inset-bottom, 0px) + 52px);
}
.rl-coach[data-axis="x"] svg:first-child { animation: rl-nudge-l 1.9s ease-in-out infinite; }
.rl-coach[data-axis="x"] svg:last-child { animation: rl-nudge-r 1.9s ease-in-out infinite; }
@keyframes rl-nudge-l { 0%, 100% { transform: translateX(2px); opacity: .5; } 50% { transform: translateX(-2px); opacity: 1; } }
@keyframes rl-nudge-r { 0%, 100% { transform: translateX(-2px); opacity: .5; } 50% { transform: translateX(2px); opacity: 1; } }

.rl-toast {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(10px); z-index: 70;
  bottom: calc(var(--rl-bottom) + env(safe-area-inset-bottom, 0px) + 20px);
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
  padding: 9px 15px; border-radius: 10px;
  background: var(--ink); color: var(--bg);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.rl-toast[data-show="1"] { opacity: 1; transform: translateX(-50%) translateY(0); }

.rl-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* entry motion */
.rl-slide[data-live="1"] .rl-in { animation: rl-rise .42s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes rl-rise { from { opacity: 0; transform: translateY(11px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .rl-slide[data-live="1"] .rl-in { animation: none; }
  .rl-coach svg { animation: none; }
  .rl-rail i::after, .rl-htrack i { transition: none; }
}

/* ==========================================================================
   THE DOCUMENT UNDERNEATH
   On the web the cards ship as real elements, so every word of the dossier is
   in the page before a line of this script runs. The feed is the default view
   and reads its cards out of that source; with no scripting the source shows
   instead, and its pages unbind into one continuous read.
   ========================================================================== */
#reels-src { display: none; }

/* A page window opens out to its full length wherever the reader has no way to
   turn pages — the plain document, and paper. */
.rl-flat .rc { box-shadow: none; overflow: visible; }
.rl-flat .rc::after, .rl-flat .rc-fol { display: none; }
.rl-flat .rc-body { overflow: visible; height: auto; }
.rl-flat .rc-flow {
  height: auto; column-width: auto; columns: auto; transform: none;
}

/* printing unbinds the book: every page window opens out to its full length */
@media print {
  .rl-top, .rl-bar, .rl-acts, .rl-rail, .rl-coach, .rl-toast, .rl-ov,
  .rc-fol { display: none !important; }
  body, .rl-feed { position: static; overflow: visible; height: auto; }
  .rl-slide { height: auto; page-break-after: always; }
  .rl-stage { overflow: visible; max-height: none; }
  .rc { box-shadow: none; overflow: visible; }
  .rc::after { display: none; }
  .rc-body { overflow: visible; }
  .rc-flow { height: auto; column-width: auto; columns: auto; transform: none; }
}


/* the front page with no scripting: the source document, on one measure */
.rl-doc { width: min(690px, 92vw); margin: 0 auto; padding: 26px 0 80px; }
.rl-doc > .rl-src + .rl-src { margin-top: 26px; }