/* ══ Three ported surfaces, started under our masthead ═══════════════════
   The corpus site's /web, /bible and /desk each own their whole document
   there: a fixed or sticky bar at the top of the viewport, a body sized to
   the screen. Here the document is Ghost's, with our masthead fixed above
   everything at --mo-head (measured by faith-port-read-boot.js: 85px on a
   desktop, 61px on a phone) and the body padded to start below it. These
   rules are the whole difference. Loaded after faith-port-reader-skin.css,
   and after every stylesheet of the page's own, so that on equal
   specificity they win by order; keep them last. */

/* ── The atlas ──────────────────────────────────────────────────────────
   constellations.css sizes the page from body.web-page: the bar is --mast
   tall and fixed at the top, the explorer, the details panel and the
   phone's Browse/Map switch are all positioned from --mast, and the body
   is the screen and does not scroll. The page's own bar keeps its mode
   navigation and loses its brand, so it is shorter; it moves down under
   our masthead and --mast grows by our masthead, and everything the page
   positions from --mast follows. Nothing else is repositioned by hand: an
   earlier draft pinned #panel to --mo-head as well, which put its head
   under the bar on a desktop and broke the bottom sheet on a phone. */
/* 2026-09-21: THE PORTED BAR IS GONE AND THE RAIL STANDS IN ITS PLACE.
   Ian: "Rework it into the rail with the modes moved into the page."

   So --mast is no longer a sum. --mo-head is already the whole band,
   our masthead plus the rail, measured together by
   faith-port-read-boot.js, and there is no longer a 56px bar under it
   for the panes to clear.

   THE RAIL HAS TO BE FIXED HERE, which it is on no other surface. This
   body is the screen: height 100dvh, overflow hidden, and our masthead
   is fixed above it, so a rail in normal flow would sit at y=0 behind
   the masthead. That is exactly what Ian saw the first time and called
   "completely the wrong spot".

   It is positioned from --mo-mast, the masthead ALONE, because
   --mo-head already contains the rail's own height and a box cannot be
   placed from a number that includes itself. faith-port-read-boot.js
   publishes both. */
body.web-page { --mast: var(--mo-head, 85px); }
body.web-page .tfr-rail {
  position: fixed;
  top: var(--mo-mast, 61px);
  left: 0;
  right: 0;
  /* Over the atlas and the explorer, which are 25 and 30, and over the
     details panel when it opens. */
  z-index: 31;
}

/* THE VIEW MODES, now in the explorer head under the title. They were
   the one part of the ported bar worth keeping: the tool has no other
   way to reach Paths or Scripture maps. Set as a wrapping row rather
   than the bar's sideways scroller, because here there is a column to
   wrap inside of and nothing is hidden off an edge. */
body.web-page .explorer-head #mnav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 14px 0 0;
}
body.web-page .explorer-head #mnav a {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted, #6b6660);
  text-decoration: none;
  padding: 7px 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
body.web-page .explorer-head #mnav a:hover,
body.web-page .explorer-head #mnav a:focus-visible {
  color: var(--color-secondary, #c1593c);
  border-bottom-color: currentColor;
}
body.web-page .explorer-head #mnav a.on {
  color: var(--fg, #2d2927);
  border-bottom-color: currentColor;
}
/* The skin positions the READER's toolbar, `.ph`, under our masthead with a bare
   `.ph { top: var(--mo-head) }`. The atlas names its details-panel head `.ph` as
   well, and that one is position:relative, so the same rule slid it down over the
   panel's body: the title printed across "About this author". It stays put. */
body.web-page #panel .ph { top: auto; }
/* the body is the screen; our body padding would push the bottom 85px off it */
body.web-page { padding-top: 0 !important; }
body.web-page.mh-hide, body.web-page.mh-mini { padding-top: 0 !important; }
@media (max-width: 1000px) {
  /* The page lets its bar wrap to two rows on a narrow screen, which is
     right when the bar is the whole masthead and --mast is measured from
     it there. Here --mast is a sum, so the bar keeps one row: the page
     name goes (the explorer's own heading says it), and the mode
     navigation scrolls sideways under the thumb instead of wrapping. */
  /* The rules that flattened the ported bar into one row here were
     deleted with the bar on 2026-09-21. The modes now wrap inside the
     explorer column, which has a width to wrap in, and the rail below
     handles its own narrow layout. */
}

/* ── Scripture ──────────────────────────────────────────────────────────
   Normal document flow. The page's bar is sticky at the top of the
   viewport; under our fixed masthead that is under our masthead, so it
   sticks below it instead. Two rules in bible.in01.css set the bar's
   position at (0,1,1) and (0,2,1); this one outranks both. */
body.research-page header.site,
body.research-page header.site.glass { top: var(--mo-head, 85px); }
@media (max-width: 760px) {
  /* the page makes its bar static on a phone; nothing to offset */
  body.research-page header.site { top: auto; }
}

/* ── The desk ───────────────────────────────────────────────────────────
   The corpus page is a flex column on <body>: header, workspace bar, main
   (flex:1, the editor scrolls inside it). Ghost's body is not that column,
   so the page's content is wrapped in one, sized to the screen under our
   masthead — the move .faith-port-read-page makes for the reader. The
   documents and research drawers are fixed from the top of the viewport
   on a phone; they start under our masthead instead. */
.faith-port-desk-page {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--mo-head, 85px));
  min-height: 0;
}
.faith-port-desk-page > header { position: sticky; top: 0; }
@media (max-width: 940px) {
  .faith-port-desk-page #docs,
  .faith-port-desk-page #rail { top: var(--mo-head, 85px); }
}

/* ── When the masthead hides, the pinned bar follows it to the top ──────
   header-behaviors.js puts .is-hidden on the masthead as you scroll down
   and slides it out of the window. The bars above are pinned at
   --mo-head, the masthead's height, so without this an 85px band of the
   page scrolled past ABOVE the bar while the bar hung mid-window (the
   author room, 2026-09-19). The bar is a later sibling of the masthead,
   so the masthead's own class is the whole signal — the reader rail
   does the same. Matched to the masthead's transition so the two move
   as one gesture; parked when the reader has asked for no motion. */
body.web-page .site-header.is-hidden ~ header.site,
body.research-page .site-header.is-hidden ~ header.site,
body.research-page .site-header.is-hidden ~ header.site.glass,
.faith-port-desk-page .site-header.is-hidden ~ #docs,
.faith-port-desk-page .site-header.is-hidden ~ #rail { top: 0; }
body.web-page header.site,
body.research-page header.site,
body.research-page header.site.glass,
.faith-port-desk-page #docs,
.faith-port-desk-page #rail { transition: top 0.25s ease; }
@media (prefers-reduced-motion: reduce) {
  body.web-page header.site,
  body.research-page header.site,
  body.research-page header.site.glass,
  .faith-port-desk-page #docs,
  .faith-port-desk-page #rail { transition: none; }
}
/* ── The dictionary ──────────────────────────────────────────────────
   The corpus page laid itself out as a flex column on the body — its
   top bar, the search band, then two panes that fill the rest of the
   window and scroll inside themselves. Inside this site the body is
   Ghost's, so the template wraps the page and the wrapper takes the
   column: the window's height less our masthead, which is fixed above
   it. The panes scroll within it, as they did. */
.faith-port-dtc-page {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--mo-head, 85px));
  min-height: 0;
}

/* The standalone English reader is a page inside Ghost, not the body.
   Inherit the port's existing light/dark tokens on its actual wrapper. */
.faith-port-readen-page { background: var(--bg); color: var(--fg); }
.faith-port-readen-page .reader,
.faith-port-readen-page .work { color: var(--fg); }
.faith-port-readen-page .masthead { top: var(--mo-head, 85px); }
.faith-port-readen-page .reader-home { color: var(--fg); font: inherit; white-space: nowrap; }
.faith-port-readen-page .sidebar {
  top: calc(var(--mo-head, 85px) + 3.1rem);
  height: calc(100dvh - var(--mo-head, 85px) - 3.1rem);
}
@media (max-width: 760px) {
  .faith-port-readen-page .sidebar { top: var(--mo-head, 61px); height: calc(100dvh - var(--mo-head, 61px)); }
  .faith-port-readen-page .scrim { top: var(--mo-head, 61px); }
}

/* A persistent exit from every atlas hash view, outside its mode router. */
body.web-page .faith-atlas-home {
  flex: 0 0 auto;
  color: var(--fg);
  font: inherit;
  white-space: nowrap;
  text-decoration: none;
  padding: .5rem 0;
}
body.web-page .faith-atlas-home:hover { text-decoration: underline; text-underline-offset: .2em; }
body.web-page .faith-atlas-home:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* Ian's constellation layouts share Web's navigation and evidence routes. */
#faith-web-constellations[hidden]{display:none!important}
#faith-web-constellations{position:relative;flex:1;min-height:0;overflow:visible;overscroll-behavior:contain;padding:28px clamp(18px,3vw,48px);background:var(--bg);color:var(--fg);--color-page:var(--bg);--color-white:var(--card);--color-dark:var(--fg);--color-muted:var(--muted);--color-rule:var(--border);--color-card-border:var(--border);--font-body:"Source Serif Pro",Georgia,serif;--cn-ink:var(--fg);--cn-paper:var(--card)}
#faith-web-constellations .cn-panel{max-width:1500px;margin:auto}
#faith-web-constellations .cn-head{max-width:none;margin:0 0 20px}
#faith-web-constellations .cn-lede{max-width:78ch}
#faith-web-constellations .cn-controls{gap:14px 28px}
#faith-web-constellations .cn-view-btn{border:0;border-bottom:2px solid transparent;border-radius:0;padding:8px 3px;background:none;color:var(--muted)}
#faith-web-constellations .cn-view-btn.is-active{color:var(--fg);border-bottom-color:var(--accent)}
#faith-web-constellations .cn-view-btn:disabled{display:none}
#faith-web-constellations .cn-stage{background:var(--card)}
#faith-web-constellations .cn-open-source{display:block;margin:12px 0;text-decoration:underline;text-underline-offset:3px}
#faith-web-constellations .cn-index-list{max-height:50vh;overflow:auto}
body.web-constellation-mode :is(#graph-frame,#period-key,#map-caption,#connection-discovery,#map-help,#map-help-button,#map-density,label[for="map-density"]){display:none!important}
body.web-citation-layout #faith-web-constellations :is(.cn-head,.cn-aside,.cn-index){display:none}
/* The shelf picker and the arrangement pair, which the citation graph
   does not offer: one shelf, and the arrangement is the page's own tab
   strip. Addressed by what they CONTAIN, not by their position. The
   two controls beside them are moved out of this row into
   .map-top-controls (see the block at the end of this file), which
   renumbers everything left behind; :nth-child(3) used to name the
   arrangement and would now name nothing. */
body.web-citation-layout #faith-web-constellations .cn-controls>.cn-control:has([data-cn-shelf]),
body.web-citation-layout #faith-web-constellations .cn-controls>.cn-control:has([data-cn-layout]){display:none}
body.web-citation-layout #faith-web-constellations .cn-body{display:block}
body.web-citation-layout #faith-web-constellations .cn-stage{height:max(350px,52vh)}
body.web-citation-layout #faith-web-constellations{padding-top:0}
body.web-constellation-mode:not(.web-citation-layout) #map-heading{display:none}
#network-layouts{position:fixed;z-index:26;top:var(--mast);left:var(--rail);right:0;display:flex;gap:18px;align-items:center;min-height:47px;padding:0 28px;background:var(--bg);border-bottom:1px solid var(--border)}
#network-layouts button{font:14px var(--body);color:var(--muted);border:0;border-bottom:2px solid transparent;background:none;border-radius:0;padding:12px 0;white-space:nowrap}
#network-layouts button[aria-pressed="true"]{color:var(--fg);border-bottom-color:var(--accent)}
#network-show-all{margin-left:auto}#network-show-all[hidden]{display:none}
body.web-page #atlas{top:calc(var(--mast) + 47px)}
body.web-page.popen #network-layouts{right:var(--details)}
@media(max-width:1150px) and (min-width:761px){body.web-page.popen #network-layouts{left:0}}
@media(max-width:760px){
 #network-layouts{left:0;top:calc(var(--mast) + 45px);padding:0 16px;gap:16px;overflow-x:auto}
 body.web-page #atlas,body.web-page.popen #atlas{top:calc(var(--mast) + 92px)}
 body.web-page.popen #network-layouts,body.web-page[data-view="browse"] #network-layouts{display:none}
 #network-layouts button{font-size:13px}
}
@media(max-width:640px){#faith-web-constellations{padding:20px 16px}#faith-web-constellations .cn-controls{gap:12px}#faith-web-constellations .cn-control:first-child{width:100%}#faith-web-constellations .cn-select{width:100%}}

@media(max-width:640px){
 #faith-web-constellations .cn-controls{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
 #faith-web-constellations .cn-control:first-child,#faith-web-constellations .cn-control:last-child{grid-column:1/-1}
 #faith-web-constellations .cn-views{gap:4px 10px}
 #faith-web-constellations .cn-view-btn{font-size:14px;min-height:38px}
 #faith-web-constellations .cn-view-btn+.cn-view-btn{margin-left:0}
 #faith-web-constellations .cn-control-label{margin-bottom:4px}
 #faith-web-constellations .cn-stage{min-height:360px}
}

#network-author-map{font:13px var(--body);color:var(--fg);text-decoration:underline;background:none;border:0;padding:12px 0 0}#network-author-map[hidden]{display:none}
body.web-citation-layout #faith-web-constellations .cn-views{gap:6px}
body.web-citation-layout #faith-web-constellations .cn-view-btn+.cn-view-btn{margin-left:10px}

#faith-web-constellations .cn-links{max-height:52vh;overflow:auto;padding:0;list-style:none}#faith-web-constellations .cn-index-btn,#faith-web-constellations .cn-link-btn{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:12px 14px;background:none;font:inherit;line-height:1.4;color:var(--fg)}#faith-web-constellations .cn-index-btn:hover,#faith-web-constellations .cn-index-btn.is-selected{background:var(--hl)}#faith-web-constellations .cn-index-sub{display:block;margin-top:5px;font-size:13px;color:var(--muted)}.relation-show-all{margin:10px 0;padding:8px 12px;font:13px var(--body);border:1px solid var(--border);color:var(--fg);background:var(--card)}

#faith-web-constellations .cn-panel{--cn-ink:var(--fg);--cn-paper:var(--card);--cn-accent:var(--fg);--cn-edge:var(--muted);--cn-ghost:var(--muted)}

@media(max-width:640px){body.web-citation-layout #faith-web-constellations .cn-controls{display:flex}body.web-citation-layout #faith-web-constellations .cn-control{width:100%}}

/* ── Dictionary of Catholic Theology ─────────────────────────────────
   Ian, 2026-09-22: no display face on a working surface. The port set
   IM Fell on the masthead, the letter rules and every article heading;
   this page is a reference tool, not a title page. One line retires it
   everywhere on the surface, and dtc.in01.css no longer fetches the
   family. Deleting this declaration puts it back.

   `.welcome` is also the class on the subscriber /welcome/ page, where
   screen.css makes it a flex column. screen.css loads after the page's
   own CSS, so every inline run in the dictionary's intro became its own
   line ("The", the bold title, "(", the French title). Scoped one class
   deeper here so it wins on specificity wherever the two files land. */
.faith-port-dtc-page { --font-display: 'Source Serif Pro', Georgia, serif; }
.faith-port-dtc-page .welcome {
  display: block;
  flex: none;
  min-height: 0;
  font-style: normal;
  max-width: 40rem;
}
.faith-port-dtc-page .welcome p { margin: 0 0 1rem; }
.faith-port-dtc-page .welcome p:last-child { margin-bottom: 0; }

/* ── /the-faith-received/pins/, the ported notebook ──────────────────
   The page wears the same .bhero header as every other TFR landing
   surface now, and the header carries the title. pins.in02.js opens its
   own render with "<h1>Notebook</h1>" written into #app, which left two
   titles stacked one on the other. Only that one is hidden: the shared
   collection's <h1> names the collection being previewed and sits
   inside .ed-head, so the child combinator leaves it alone.

   Suppressed here rather than in the ported file because that file is
   the corpus owner's and is replaced whole on his next drop. Deleting
   this rule puts the second title back. */
.faith-port-pins-page #app > h1 { display: none; }
/* ── Rings and Tradition wear Timeline's chrome ───────────────────────
   Ian, 2026-09-22: "Rings and Tradition need to be as native to the
   page as Timeline."

   Timeline is the ported atlas dressed in our house style. Its two
   controls sit in .map-top-controls at the top right of #map-heading,
   its zoom is one bordered inline row in the bottom right of the plot,
   and everything under the plot is an 11px muted line.

   Rings and Tradition are the same page showing a different engine
   (js/page/faith-constellations.js inside #faith-web-constellations),
   and they arrived wearing that engine's own workspace chrome: a
   left-aligned pair of labelled control groups stacked above the plot,
   three zoom boxes stacked inside its top right corner, and a
   paragraph block underneath. Two instruments in one frame.

   Nothing below restyles a third path. The two controls that survive
   on the citation graph are MOVED into .map-top-controls, Timeline's
   own slot (placeCitationControls in js/port/web.in02.js), and the
   zoom and the caption are given the measurements constellations.css
   already gives #web-zoom and #map-caption. Change either of those and
   change these with them.

   Scoped to body.web-citation-layout throughout. The Scripture shelf
   maps (Scripture maps in #mnav) hide #map-heading outright and keep
   the engine's own four-control row, which is the right chrome there
   because that mode has no Timeline to agree with. */

/* The two survivors in Timeline's slot. Their small-caps labels are
   clipped rather than deleted: both groups take their accessible name
   from those elements through aria-labelledby, and Timeline's own
   #map-density is named the same way by an .sr-only <label>, so this
   is that pattern and not a hole in the accessible name. */
body.web-citation-layout #faith-web-constellations .cn-controls { margin: 0; }
body.web-citation-layout #map-heading .map-top-controls { align-items: center; gap: 18px; flex-wrap: wrap; }
body.web-citation-layout #map-heading .map-top-controls .cn-control { display: flex; align-items: center; min-width: 0; }
body.web-citation-layout #map-heading .map-top-controls .cn-control-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}
body.web-citation-layout #map-heading .map-top-controls .cn-views { display: flex; align-items: center; flex-wrap: nowrap; gap: 0; }
/* Scoped through #map-heading, and both of the properties named last
   are there because of it: constellations.css styles `#map-heading
   button` for the "How to read this" link, so without them a tab in
   this slot carries that link's underline and its 100px cap. */
body.web-citation-layout #map-heading .map-top-controls .cn-view-btn {
  font: 12px var(--body);
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 12px 0;
  min-height: 44px;
  white-space: nowrap;
  text-decoration: none;
  max-width: none;
}
body.web-citation-layout #map-heading .map-top-controls .cn-view-btn.is-active { color: var(--fg); border-bottom-color: var(--accent); }
body.web-citation-layout #map-heading .map-top-controls .cn-view-btn + .cn-view-btn { margin-left: 18px; }
/* .map-top-controls select sets `background` as a shorthand, which
   takes the chevron off a control that still carries appearance:none.
   Re-declared here rather than reverting to appearance:auto, which
   hands the whole widget back to the platform and loses the hairline
   border with it. */
body.web-citation-layout #map-heading .map-top-controls .cn-select {
  appearance: none;
  -webkit-appearance: none;
  font: 12px var(--body);
  color: var(--fg);
  min-height: 44px;
  max-width: 200px;
  padding: 8px 30px 8px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background-color: var(--card);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% + 1px), calc(100% - 11px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* The zoom row, in #web-zoom's corner with #web-zoom's measurements
   (constellations.css, body.web-page #web-zoom). One bordered group in
   the bottom right of the plot, not three boxes stacked in its top
   right. */
body.web-citation-layout #faith-web-constellations .cn-zoom {
  top: auto;
  left: auto;
  right: 20px;
  bottom: 20px;
  flex-direction: row;
  gap: 1px;
  padding: 1px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
}
body.web-citation-layout #faith-web-constellations .cn-zoom-btn {
  width: auto;
  min-width: 40px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--fg);
  font: 13px var(--body);
}
body.web-citation-layout #faith-web-constellations .cn-zoom-btn:hover { background: var(--hl); }
body.web-citation-layout #faith-web-constellations .cn-zoom-btn--wide { padding: 0 12px; }

/* Everything under the plot at #map-caption's weight: 11px, muted, one
   line-height. The count keeps its letterspaced capitals, which is
   what #map-key does on Timeline, and loses the darker colour and the
   semibold that made this block read as a second lede. */
body.web-citation-layout #faith-web-constellations .cn-caption { margin: 10px 0 0; gap: 4px 14px; }
body.web-citation-layout #faith-web-constellations :is(.cn-caption-count, .cn-caption-blurb, .cn-caption-key, .cn-caption-caveat, .cn-views-note, .cn-hint) {
  font-size: 11px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--muted);
}
body.web-citation-layout #faith-web-constellations .cn-caption-caveat { margin-top: 2px; padding-left: 0; border-left: 0; }
body.web-citation-layout #faith-web-constellations .cn-hint { margin: 10px 0 0; }

@media (max-width: 760px) {
  body.web-citation-layout #map-heading .map-top-controls { gap: 8px; flex-direction: column; align-items: flex-end; }
  body.web-citation-layout #faith-web-constellations .cn-zoom { right: 16px; bottom: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════
   THE AUTHOR ROOM: THIN-LINE BOXES, THE WHOLE WIDTH
   ══════════════════════════════════════════════════════════════════════

   Ian, 2026-09-23: "Can we get a little more styling on these author
   pages? Some thin-line boxes? Use the whole width, etc etc?"

   The room was a column of text on a 1,320px page: the profile a single
   line of numbers with the right half empty, and the works a list of
   full-width rows whose title sat at one edge and whose Read / Explore /
   Save sat at the other, a screen apart. Now:

   - the profile is one thin-line panel: dates and office, then the
     numbers as a row of stat boxes across the full width
     (faith-author-stats.js regroups the port's run-on stats line into
     them), the author's links, the biography, and the shelves as the
     panel's foot;
   - the filters sit in a box of their own;
   - the works are a grid of cards, three or four across, each with its
     actions along its foot, so title and action are one glance.

   Scoped to an author room (main.research-room with a profile): the
   Scripture room shares .research-room and has no .rx-profile. The port
   keeps its structure; this is only the skin. */
/* The thin-line tokens, for every surface that carries boxes. Built
   from the port's own theme variables, so a card is the port's card
   colour and a panel sits between card and page, in light and dark
   alike (a literal #fff card glared on the dark theme). */
main.research-room:has(.rx-profile),
main.research-work,
main.research-directory,
main.research-compare,
.faith-port-search-page,
.faith-port-dtc-page,
body.web-page {
  --ar-line: var(--border, #d9c6a7);
  --ar-line-strong: color-mix(in srgb, var(--border, #d9c6a7) 60%, var(--ink, #2d2927));
  --ar-panel: color-mix(in srgb, var(--card, #fff) 55%, var(--bg, #f3ede3));
  --ar-card: var(--card, #fff);
}

main.research-room:has(.rx-profile) .rx-profile {
  border: 1px solid var(--ar-line);
  border-radius: 3px;
  background: var(--ar-panel);
  padding: 22px 26px 6px;
  margin: 0;
}
main.research-room:has(.rx-profile) .rx-profile:has(+ .rx-note) { border-radius: 3px 3px 0 0; }
main.research-room:has(.rx-profile) .rx-profile .deck { font-size: 16px; margin: 0 0 12px; }
main.research-room:has(.rx-profile) .rx-profile .rx-author-bio {
  max-width: none;
  border-top: 1px solid var(--ar-line);
  margin: 10px -26px 0;
  padding: 4px 26px;
}
main.research-room:has(.rx-profile) .rx-profile .rx-author-bio > p { max-width: 75ch; }
main.research-room:has(.rx-profile) .rx-profile + .rx-note {
  max-width: none;
  border: 1px solid var(--ar-line);
  border-top: 0;
  border-radius: 0 0 3px 3px;
  background: var(--ar-card);
  margin: 0 0 32px;
  padding: 12px 26px;
}

/* The numbers, boxed. .stats keeps its class, so anything that reads it
   still finds it; faith-author-stats.js only regroups what is inside. */
main.research-room:has(.rx-profile) .ar-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 4px 0 12px;
}
main.research-room:has(.rx-profile) .ar-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--ar-line);
  border-radius: 3px;
  background: var(--ar-card);
  padding: 12px 16px 10px;
}
main.research-room:has(.rx-profile) .ar-stat b {
  font-size: 26px;
  line-height: 1.1;
  font-weight: 500;
  color: var(--ink, #2d2927);
  font-variant-numeric: tabular-nums;
}
main.research-room:has(.rx-profile) .ar-stat > span {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #6b6660);
}
/* A tradition is a word, not a count. Words also run long, and a
   denomination can be two of them ("Congregational, Puritan"), so this
   one breaks rather than pushing out of its box. */
main.research-room:has(.rx-profile) .ar-stat--word b {
  font-size: 19px;
  line-height: 1.35;
  padding-top: 5px;
  overflow-wrap: break-word;
  text-wrap: balance;
}
main.research-room:has(.rx-profile) .ar-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: 14px;
}

main.research-room:has(.rx-profile) .rx-filters {
  border: 1px solid var(--ar-line);
  border-radius: 3px;
  background: var(--ar-panel);
  padding: 18px 22px;
  margin: 18px 0 14px;
}

/* Works as cards. The port lays each row out as title-left,
   actions-right; the card stacks them and pins the actions to its foot,
   so a row of cards ends on one line whatever the titles' lengths. */
main.research-room:has(.rx-profile) .rx-work-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
  border: 0;
  margin-top: 8px;
}
main.research-room:has(.rx-profile) .rx-work-list > .rx-work-row {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  min-height: 0;
  margin: 0;
  border: 1px solid var(--ar-line);
  border-radius: 3px;
  background: var(--ar-card);
  padding: 18px 20px 14px;
  transition: border-color 0.15s ease;
}
main.research-room:has(.rx-profile) .rx-work-list > .rx-work-row:hover { border-color: var(--ar-line-strong); }
main.research-room:has(.rx-profile) .rx-work-row h3 { margin: 0 0 4px; font-size: 19px; line-height: 1.3; }
main.research-room:has(.rx-profile) .rx-work-row .rx-work-actions {
  align-self: stretch;
  width: auto;
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4px 16px;
  margin: 0;
  border-top: 1px solid var(--ar-line);
  padding-top: 10px;
}

/* "More in the library": the works the research record leaves out,
   added by faith-author-works.js as the same cards, under a thin rule. */
main.research-room:has(.rx-profile) .ar-more {
  border-top: 1px solid var(--ar-line);
  margin-top: 30px;
  padding-top: 22px;
}
main.research-room:has(.rx-profile) .ar-more-title { margin: 0 0 4px; font-size: 22px; font-weight: 500; }
main.research-room:has(.rx-profile) .ar-more > .rx-note { margin: 0 0 6px; max-width: 75ch; }
main.research-room:has(.rx-profile) .ar-more.is-empty > .ar-more-title,
main.research-room:has(.rx-profile) .ar-more.is-empty > .rx-note,
main.research-room:has(.rx-profile) .ar-more.is-empty > .ar-more-list { display: none; }
main.research-room:has(.rx-profile) .ar-more-other {
  border: 1px solid var(--ar-line);
  border-radius: 3px;
  background: var(--ar-panel);
  margin: 18px 0 0;
  padding: 0;
}
main.research-room:has(.rx-profile) .ar-more-other > summary {
  cursor: pointer;
  padding: 12px 20px;
  font-size: 15px;
}
main.research-room:has(.rx-profile) .ar-more-other > ul {
  list-style: none;
  margin: 0;
  padding: 4px 20px 14px;
  border-top: 1px solid var(--ar-line);
  columns: 2 320px;
  column-gap: 32px;
}
main.research-room:has(.rx-profile) .ar-more-other li {
  break-inside: avoid;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--ar-line);
  font-size: 15px;
}
main.research-room:has(.rx-profile) .ar-more-ref { flex: none; color: var(--muted, #6b6660); font-size: 13px; }
main.research-room:has(.rx-profile) .ar-more-shelves { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 16px 0 0; font-size: 15px; }

@media (max-width: 640px) {
  main.research-room:has(.rx-profile) .rx-profile { padding: 14px 16px 4px; }
  main.research-room:has(.rx-profile) .rx-profile .rx-author-bio { margin: 10px -16px 0; padding: 4px 16px; }
  main.research-room:has(.rx-profile) .rx-profile + .rx-note { padding: 10px 16px; margin-bottom: 24px; }
  /* Two across on a phone rather than one tall stack. */
  main.research-room:has(.rx-profile) .ar-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main.research-room:has(.rx-profile) .ar-stat b { font-size: 22px; }
  /* 2026-09-25, Ian: "shrink the font size here to make sure things fit
     in their boxes." The rule above sizes every value at 22px, which
     was overriding the 19px meant for word values, so the longest
     things on the card were set LARGEST exactly where the box is
     narrowest: half a phone. Words get their own size back, smaller
     still, because two columns of a 375px screen is about 150px of
     room. */
  main.research-room:has(.rx-profile) .ar-stat--word b { font-size: 16px; line-height: 1.3; padding-top: 3px; }
  main.research-room:has(.rx-profile) .ar-stat { padding: 11px 13px 9px; }
  main.research-room:has(.rx-profile) .ar-stat > span { font-size: 11px; letter-spacing: 0.06em; }
  main.research-room:has(.rx-profile) .rx-filters { padding: 14px 16px; }
  main.research-room:has(.rx-profile) .rx-work-list > .rx-work-row { padding: 16px 16px 12px; }
}

/* ══════════════════════════════════════════════════════════════════════
   A WORK'S PAGE (/author/#w/<id>): THE SAME TREATMENT (Ian, 2026-09-23)
   ══════════════════════════════════════════════════════════════════════
   Title, author line and numbers in one thin-line panel (gathered by
   faith-author-stats.js), the numbers as boxes, the signature quote as a
   card, and each topic, and the authorities, as a box whose claims are
   rows inside it. */

main.research-work .ar-work-head {
  border: 1px solid var(--ar-line);
  border-radius: 3px;
  background: var(--ar-panel);
  padding: 22px 26px 10px;
  margin: 0 0 18px;
}
main.research-work .ar-work-head .headline { margin-top: 0; }
main.research-work .ar-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 220px));
  gap: 10px;
  margin: 12px 0 10px;
}
main.research-work .ar-stat {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--ar-line); border-radius: 3px; background: var(--ar-card);
  padding: 12px 16px 10px;
}
main.research-work .ar-stat b { font-size: 26px; line-height: 1.1; font-weight: 500; color: var(--ink, #2d2927); font-variant-numeric: tabular-nums; }
main.research-work .ar-stat > span { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted, #6b6660); }
main.research-work .ar-links { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; }

/* The signature quote: a card, the whole width. */
main.research-work > .sig {
  max-width: none;
  border: 1px solid var(--ar-line);
  border-radius: 3px;
  background: var(--ar-card);
  padding: 16px 22px;
  margin: 0 0 8px;
}

/* Each topic, and the authorities, as a box. The summary is the box's
   header; the claims are rows below it. */
main.research-work details.wdet {
  border: 1px solid var(--ar-line);
  border-radius: 3px;
  background: var(--ar-card);
  margin: 0 0 14px;
  overflow: hidden;
}
main.research-work details.wdet > summary {
  background: var(--ar-panel);
  padding: 12px 20px;
  min-height: 44px;
}
main.research-work details.wdet[open] > summary { border-bottom: 1px solid var(--ar-line); }
main.research-work details.wdet > .ev,
main.research-work details.wdet > div {
  /* The port writes padding inline on each claim; the box needs its own. */
  padding: 14px 20px !important;
  margin: 0;
  border-bottom: 1px solid var(--ar-line);
}
main.research-work details.wdet > .ev:last-child,
main.research-work details.wdet > div:last-child { border-bottom: 0; }

@media (max-width: 640px) {
  main.research-work .ar-work-head { padding: 16px 16px 8px; }
  main.research-work .ar-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main.research-work > .sig { padding: 14px 16px; }
  main.research-work details.wdet > summary { padding: 12px 16px; }
  main.research-work details.wdet > .ev,
  main.research-work details.wdet > div { padding: 12px 16px !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   THIN-LINE BOXES, SECOND PASS (Ian, 2026-09-23: "Do all of them")
   ══════════════════════════════════════════════════════════════════════
   The same treatment the author room, a work's page, Scripture, Topics
   and the Verse Desk have: controls in a panel, each group a box, each
   item a card, the whole width. Tokens (--ar-*) are set once near the
   top of the author-room block. Skin only: no port markup changes. */

/* ── The Authors and Works directories (/author/, /author/#works) ── */
main.research-directory .rx-filters {
  border: 1px solid var(--ar-line);
  border-radius: 3px;
  background: var(--ar-panel);
  padding: 18px 22px;
  margin: 18px 0 12px;
}
main.research-directory .rx-fold-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 0;
  margin-top: 14px;
}
main.research-directory .rx-fold-list > .rx-fold {
  border: 1px solid var(--ar-line);
  border-radius: 3px;
  background: var(--ar-card);
}
main.research-directory .rx-fold-list > .rx-fold[hidden] { display: none; }
main.research-directory .rx-fold-list > .rx-fold > summary { padding: 16px 22px; min-height: 0; }
main.research-directory .rx-fold-list > .rx-fold[open] > summary {
  background: var(--ar-panel);
  border-bottom: 1px solid var(--ar-line);
  border-radius: 3px 3px 0 0;
}
main.research-directory .rx-fold-list > .rx-fold > .rx-fold-body {
  border: 0;
  background: transparent;
  padding: 16px 22px 20px;
}
main.research-directory .rx-fold-list > .rx-more { align-self: flex-start; }

/* Authors: a compact listing, several narrow columns of one-line rows,
   so a shelf of 500 can be scanned for who is here. Ian, 2026-09-23:
   "there are so many authors ... They need to be small and narrow to
   make it easier to browse through them and see who is here at a
   glance." The row is the link; the "Browse works / Browse positions"
   pair repeated it and is dropped here (both are on the room). */
main.research-directory .rx-author-fold .rx-directory {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0 24px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
main.research-directory .rx-author-fold .rx-directory > :not(.rx-author-row) { grid-column: 1 / -1; }
main.research-directory .rx-author-row {
  display: block;
  margin: 0;
  padding: 7px 0 6px;
  border: 0;
  border-bottom: 1px solid var(--ar-line);
  background: transparent;
  min-width: 0;
}
main.research-directory .rx-author-row .rx-author-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
  border: 0;
  min-height: 0;
  color: inherit;
  text-decoration: none;
}
main.research-directory .rx-author-row .rx-author-main > span:first-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
main.research-directory .rx-author-row .rx-author-main strong {
  font-size: 15.5px;
  line-height: 1.3;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
main.research-directory .rx-author-row .rx-author-main:hover strong { color: var(--accent, #b0573a); }
main.research-directory .rx-author-row .rx-author-main small { font-size: 12px; line-height: 1.35; }
main.research-directory .rx-author-row .rx-counts { flex: none; display: block; margin: 0; }
main.research-directory .rx-author-row .rx-counts > span {
  display: none;
  border: 0;
  padding: 0;
  font-size: 12px;
  color: var(--muted, #6b6660);
  white-space: nowrap;
}
main.research-directory .rx-author-row .rx-counts > span:first-child { display: inline; }
main.research-directory .rx-author-row .rx-author-actions { display: none; }
/* "Also on Latin Fathers (2 works)" made every row in a band as tall as
   its longest; the other shelves are listed on the author's own page. */
main.research-directory .rx-author-row .rx-editions { display: none; }
/* The index's own head repeats the page hero ("Authors" twice, and the
   same sentence about rooms). Ian, 2026-09-23: "redundant". The works
   index keeps its head: it is a different page under the same hero. */
body.research-enhanced main#page.research-directory:not(.research-works) > .research-intro { display: none; }

/* Works: each group's works as cards, like the author room's. */
main.research-works .rx-work-fold > .rx-fold-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px;
}
main.research-works .rx-work-fold > .rx-fold-body > :not(.rx-work-row) { grid-column: 1 / -1; }
main.research-works .rx-work-fold > .rx-fold-body > .rx-work-row {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  border: 1px solid var(--ar-line);
  border-radius: 3px;
  background: var(--ar-card);
  padding: 16px 18px 12px;
}
main.research-works .rx-work-row h3 { margin: 0 0 4px; font-size: 18px; line-height: 1.3; }
main.research-works .rx-work-row .rx-work-actions {
  align-self: stretch;
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4px 16px;
  width: auto;
  margin: 0;
  border-top: 1px solid var(--ar-line);
  padding-top: 8px;
}
/* A group inside a group (volume, then author) is a plain fold inside
   the box, not a second box. */
main.research-works .rx-fold-body .rx-fold { border: 0; border-top: 1px solid var(--ar-line); background: transparent; }

/* ── Compare (/compare/) ─────────────────────────────────────────── */
main.research-compare .cd-authors {
  border: 1px solid var(--ar-line);
  border-radius: 3px;
  background: var(--ar-panel);
  padding: 16px 20px;
  margin: 16px 0 0;
}
main.research-compare .cd-chip { background: var(--ar-card); }
main.research-compare .cd-tools {
  border: 1px solid var(--ar-line);
  border-radius: 3px;
  background: var(--ar-panel);
  padding: 16px 20px;
  margin: 12px 0 0;
}
main.research-compare .cd-topic-picker {
  border: 1px solid var(--ar-line);
  border-radius: 3px;
  background: var(--ar-card);
  margin: 12px 0 0;
}
main.research-compare .cd-topic-picker > summary { padding: 12px 18px; }
main.research-compare .cd-topic-head {
  border: 1px solid var(--ar-line);
  border-radius: 3px;
  background: var(--ar-panel);
  padding: 16px 20px;
  margin: 16px 0 14px;
}
main.research-compare .cd-topic-head h3 { margin-top: 0; }
main.research-compare .cd-topic-head .rx-note { margin-bottom: 0; }
main.research-compare .cd-col-head {
  border: 1px solid var(--ar-line);
  border-radius: 3px;
  background: var(--ar-panel);
  padding: 12px 16px 10px;
  margin: 0 0 10px;
}
main.research-compare .cd-col-head h4 { margin-top: 0; }
main.research-compare .cd-pane { border-radius: 3px; background: var(--ar-card); }
main.research-compare .cd-saved { border: 1px solid var(--ar-line); border-radius: 3px; background: var(--ar-card); padding: 0 16px; }

/* ── Search (/search/) ───────────────────────────────────────────── */
.faith-port-search-page main.main { max-width: 1320px; }
.faith-port-search-page #results { display: flex; flex-direction: column; gap: 12px; }
.faith-port-search-page #results > details.result-shelf {
  border: 1px solid var(--ar-line);
  border-radius: 3px;
  background: var(--ar-card);
  margin: 0;
  padding: 0;
}
.faith-port-search-page #results > details.result-shelf > summary { padding: 14px 20px; }
.faith-port-search-page #results > details.result-shelf[open] > summary {
  background: var(--ar-panel);
  border-bottom: 1px solid var(--ar-line);
  border-radius: 3px 3px 0 0;
}
.faith-port-search-page details.result-author {
  border: 1px solid var(--ar-line);
  border-radius: 3px;
  background: var(--ar-card);
  margin: 12px 16px;
}
.faith-port-search-page details.result-author > summary { padding: 12px 16px; border: 0; }
.faith-port-search-page details.result-author[open] > summary { border-bottom: 1px solid var(--ar-line); }
.faith-port-search-page details.result-author > .search-work-block { padding: 4px 16px 10px; }
.faith-port-search-page .results-pager {
  border: 1px solid var(--ar-line);
  border-radius: 3px;
  background: var(--ar-panel);
  padding: 8px 12px;
}

/* ── Connections (/connections/) ─────────────────────────────────── */
body.web-page #connection-examples > button {
  border: 1px solid var(--ar-line);
  border-radius: 3px;
  background: var(--ar-card);
  padding: 14px 18px;
  text-align: left;
}
body.web-page #connection-examples > button:hover { border-color: var(--ar-line-strong); }

/* ── Dictionary of Catholic Theology: an entry ───────────────────── */
/* The article ran the full 1,150px of its pane, justified. It reads in
   a page card at a book's measure now, under a boxed head. */
.faith-port-dtc-page .art .inner { max-width: 1000px; margin: 0 auto; }
.faith-port-dtc-page .art .inner > h1 {
  border: 1px solid var(--ar-line);
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  background: var(--ar-panel);
  margin: 0;
  padding: 22px 28px 6px;
}
.faith-port-dtc-page .art .inner > .frlemma {
  border: 1px solid var(--ar-line);
  border-top: 0;
  border-bottom: 0;
  background: var(--ar-panel);
  margin: 0;
  padding: 0 28px 6px;
}
.faith-port-dtc-page .art .inner > .meta {
  border: 1px solid var(--ar-line);
  border-top: 0;
  border-radius: 0 0 3px 3px;
  background: var(--ar-panel);
  margin: 0 0 18px;
  padding: 6px 28px 16px;
}
.faith-port-dtc-page .art .inner > .body {
  border: 1px solid var(--ar-line);
  border-radius: 3px;
  background: var(--ar-card);
  padding: 32px 44px;
}
.faith-port-dtc-page .art .inner > .body > * { max-width: 72ch; margin-left: auto; margin-right: auto; }
.faith-port-dtc-page .art .inner > .srcnote { border-radius: 3px; margin-top: 18px; }

@media (max-width: 640px) {
  main.research-directory .rx-filters { padding: 14px 16px; }
  main.research-directory .rx-fold-list > .rx-fold > summary { padding: 14px 16px; }
  main.research-directory .rx-fold-list > .rx-fold > .rx-fold-body { padding: 12px 12px 14px; }
  main.research-compare .cd-authors,
  main.research-compare .cd-tools,
  main.research-compare .cd-topic-head { padding: 12px 14px; }
  .faith-port-search-page details.result-author { margin: 10px 8px; }
  .faith-port-dtc-page .art .inner > h1,
  .faith-port-dtc-page .art .inner > .frlemma,
  .faith-port-dtc-page .art .inner > .meta { padding-left: 16px; padding-right: 16px; }
  .faith-port-dtc-page .art .inner > .body { padding: 20px 18px; }
}

/* ── Dictionary: no footer; the index and top bar fold (Ian, 2026-09-23) ──
   The dictionary is a full-window reading tool; the site footer under it
   was a second scroll to nowhere. The fold strip and its two states are
   driven by faith-dtc-chrome.js. Wide screens only: phones already get
   one flowing column. */
body.dtc-page .site-footer { display: none; }
.faith-port-dtc-page .dtc-chrome { display: none; }
@media (min-width: 761px) {
  .faith-port-dtc-page .dtc-chrome {
    display: flex;
    flex: none;
    gap: 20px;
    align-items: center;
    padding: 6px 1.4rem;
    border-bottom: 1px solid var(--ar-line);
    background: var(--ar-panel);
  }
  .faith-port-dtc-page .dtc-fold {
    background: none;
    border: 0;
    padding: 4px 0;
    font: inherit;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted, #6b6660);
    cursor: pointer;
  }
  .faith-port-dtc-page .dtc-fold:hover,
  .faith-port-dtc-page .dtc-fold:focus-visible { color: var(--ink, #2d2927); }
  /* "Hide search bar" folds away everything above the panes: the bar,
     and "Pick up where you left off" under it (Ian, 2026-09-23). */
  .faith-port-dtc-page.dtc-no-top > .top,
  .faith-port-dtc-page.dtc-no-top > .dtc-resume { display: none; }
  .faith-port-dtc-page.dtc-no-list .main { grid-template-columns: minmax(0, 1fr); }
  .faith-port-dtc-page.dtc-no-list .main > .list { display: none; }
}
/* The index expanded over the article: headwords in columns, each
   letter's heading across the full width (faith-dtc-chrome.js). */
@media (min-width: 761px) {
  .faith-port-dtc-page.dtc-wide-list .main { grid-template-columns: minmax(0, 1fr); }
  .faith-port-dtc-page.dtc-wide-list .main > .art { display: none; }
  /* A letter at a time, never across the pane. The pane is a
     fixed-height scroller: columns set on it overflowed sideways and
     the spanning letter headings collapsed onto the rows. Each letter's
     headwords sit in their own .hw-group (faith-dtc-chrome.js), which
     grows to its content. */
  .faith-port-dtc-page.dtc-wide-list .main > .list {
    display: block;
    border-right: 0;
    padding: 0 1.4rem 2rem;
  }
  .faith-port-dtc-page.dtc-wide-list .main > .list > .lether {
    position: static;
    margin: 18px 0 6px;
    padding: 6px 0 6px;
  }
  .faith-port-dtc-page.dtc-wide-list .main > .list > .lether:first-child { margin-top: 6px; }
  /* Row after row, so that scrolling down moves through the alphabet
     (Ian: "This should scroll vertically, not horizontally"); newspaper
     columns made a reader scroll down one column and back up for the
     next. The grid failed once before because the port gives .hw
     width: 100%, which a grid sizes as one unwrapped line and then
     wraps into a narrower cell: the text ran out of its row. width:
     auto lets the row be as tall as its tallest headword. */
  .faith-port-dtc-page.dtc-wide-list .hw-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    column-gap: 28px;
  }
  .faith-port-dtc-page.dtc-wide-list .hw-group > .hw {
    display: block;
    width: auto;
    min-width: 0;
    height: auto;
    border-bottom: 1px solid var(--ar-line);
  }
  .faith-port-dtc-page.dtc-wide-list .main > .list > .more {
    position: static;
    display: block;
    width: auto;
    max-width: 320px;
    margin: 24px auto 8px;
  }
}
/* An author's works are always alphabetical now (faith-author-order.js),
   so the port's "Order works" choice has nothing left to choose. */
main.research-room:has(.rx-profile) .rx-filters label:has(> #room-work-order) { display: none; }

/* "Pick up where you left off": a row of the recent articles, each a
   card with its own × (faith-dtc-chrome.js), with room around it. */
.faith-port-dtc-page .dtc-resume:not([hidden]) { padding: 16px 1.4rem 14px; }
/* The arrow sits right after the label (Ian, 2026-09-23), not out at
   the far edge of the bar. */
.faith-port-dtc-page .dtc-resume .rz-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  margin: 0 0 8px;
}
.faith-port-dtc-page .dtc-resume.is-folded .rz-head { margin-bottom: 0; }
.faith-port-dtc-page .dtc-resume .rz-fold {
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--muted, #6b6660);
  cursor: pointer;
}
.faith-port-dtc-page .dtc-resume .rz-fold::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease, margin 0.15s ease;
}
/* Down when open, pointing right when folded, as the All Works fold. */
.faith-port-dtc-page .dtc-resume.is-folded .rz-fold::before { transform: rotate(-45deg); margin-top: 0; margin-left: -3px; }
.faith-port-dtc-page .dtc-resume .rz-fold:hover,
.faith-port-dtc-page .dtc-resume .rz-fold:focus-visible { border-color: var(--ar-line); color: var(--ink, #2d2927); }
.faith-port-dtc-page .dtc-resume .rz-row[hidden] { display: none; }
.faith-port-dtc-page .dtc-resume .rz-label {
  margin: 0;
  font: 600 0.76rem/1.3 var(--sans, sans-serif);
  color: var(--accent2, #7a4a2a);
}
.faith-port-dtc-page .dtc-resume .rz-row { display: flex; flex-wrap: wrap; gap: 10px; }
.faith-port-dtc-page .dtc-resume .rz-wrap { position: relative; display: inline-flex; max-width: 320px; }
.faith-port-dtc-page .dtc-resume .rz {
  max-width: 100%;
  padding: 0.55rem 2.2rem 0.55rem 0.85rem;
  font: 400 0.85rem/1.35 var(--font-body, serif);
  color: var(--fg, #2d2927);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.faith-port-dtc-page .dtc-resume .rz-x {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted, #6b6660);
  font: 400 18px/1 var(--sans, sans-serif);
  cursor: pointer;
}
.faith-port-dtc-page .dtc-resume .rz-x:hover,
.faith-port-dtc-page .dtc-resume .rz-x:focus-visible { background: var(--highlight, #efe6d8); color: var(--ink, #2d2927); }

/* One bar: title, then search, count and alphabet on the same line, the
   search box narrow (Ian, 2026-09-23). The band keeps its class so the
   port's and the phone layout's rules for it still apply. */
.faith-port-dtc-page > .top { align-items: center; row-gap: 8px; }
.faith-port-dtc-page > .top > .sband {
  flex: 0 1 auto;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  gap: 12px;
}
.faith-port-dtc-page > .top #q {
  flex: 0 1 240px;
  width: 240px;
  min-width: 160px;
  padding: 0.4rem 0.75rem;
  font-size: 0.95rem;
  border-radius: 8px;
}
@media (max-width: 760px) {
  .faith-port-dtc-page > .top > .sband { flex: 1 1 100%; margin-left: 0; }
  .faith-port-dtc-page > .top #q { flex: 1 1 auto; width: auto; }
}

/* The entry's own ×, top right of its head (faith-dtc-chrome.js). */
.faith-port-dtc-page .art .inner { position: relative; }
.faith-port-dtc-page .art .inner > .dtc-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--muted, #6b6660);
  font: 400 22px/1 var(--sans, sans-serif);
  cursor: pointer;
}
.faith-port-dtc-page .art .inner > .dtc-close:hover,
.faith-port-dtc-page .art .inner > .dtc-close:focus-visible { border-color: var(--ar-line); background: var(--ar-card); color: var(--ink, #2d2927); }

/* ── Search results: thin-line tree (Ian, 2026-09-24) ─────────────────
   "Major alignment issues": shelf, author and work were boxes inside
   boxes with three left edges, the browser's triangles, underlined
   controls and a boxed pager. Now one card level (the shelf); author and
   work are hairline rows inside it, each level one step (--sr-step) in
   from the last; folds turn a thin terracotta chevron on the right, as
   on Topics; a passage is an eyebrow reference, the snippet, and an
   arrow link. The two blocks above in this file (Search) still set the
   shelf card; this block wins on source order and on its own
   specificity where the port's #results rules outrank a class. */
.faith-port-search-page {
  --sr-pad: 20px;
  --sr-step: 18px;
  --sr-accent: var(--tfr-btn, var(--color-secondary, #c1593c));
}
.faith-port-search-page .bhero-kicker a { color: inherit; }

/* Folds: no browser triangle anywhere in the results. */
.faith-port-search-page #results summary { list-style: none; position: relative; cursor: pointer; }
.faith-port-search-page #results summary::-webkit-details-marker { display: none; }
.faith-port-search-page #results summary::marker { content: ""; }
.faith-port-search-page #results details > summary::after {
  content: "";
  position: absolute;
  right: var(--sr-pad);
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--sr-accent);
  border-bottom: 1.5px solid var(--sr-accent);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.15s ease;
}
.faith-port-search-page #results details:not([open]) > summary::after { transform: translateY(-30%) rotate(-45deg); }
.faith-port-search-page #results summary:focus-visible { outline: 2px solid var(--sr-accent); outline-offset: -2px; border-radius: 3px; }

/* Level 1: the shelf, the one card. */
.faith-port-search-page #results { gap: 14px; }
.faith-port-search-page #results > details.result-shelf,
.faith-port-search-page #results > details.scripture-work {
  border: 1px solid var(--ar-line);
  border-radius: 3px;
  background: var(--ar-card);
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.faith-port-search-page #results > details.result-shelf > summary {
  font: 600 19px/1.35 var(--font-body, Georgia, serif);
  letter-spacing: 0;
  color: var(--fg, #2d2927);
  min-height: 0;
  padding: 16px calc(var(--sr-pad) + 24px) 16px var(--sr-pad);
  background: var(--ar-panel);
  border-radius: 0;
}
.faith-port-search-page #results > details.result-shelf[open] > summary { border-bottom: 1px solid var(--ar-line); }

/* Level 2: the author, a hairline row inside the shelf. */
.faith-port-search-page #results details.result-author {
  border: 0;
  border-top: 1px solid var(--ar-line);
  border-radius: 0;
  background: none;
  margin: 0;
  padding: 0;
}
.faith-port-search-page #results details.result-shelf[open] > summary + details.result-author { border-top: 0; }
.faith-port-search-page #results details.result-author > summary {
  font: 600 16px/1.4 var(--font-body, Georgia, serif);
  color: var(--fg, #2d2927);
  min-height: 0;
  padding: 13px calc(var(--sr-pad) + 24px) 13px calc(var(--sr-pad) + var(--sr-step));
  border: 0;
}
.faith-port-search-page #results details.result-author[open] > summary { border-bottom: 0; }
.faith-port-search-page #results details.result-author > summary::after { right: calc(var(--sr-pad) + 2px); width: 6px; height: 6px; }
.faith-port-search-page #results details.result-author > .search-work-block { margin: 0; }
.faith-port-search-page #results { padding-left: 0; padding-right: 0; }

/* Level 3: the work, a hairline row that starts at its own indent. */
.faith-port-search-page #results .scripture-work,
.faith-port-search-page #results details.result-author > .scripture-work {
  border: 0;
  border-top: 1px solid var(--ar-line);
  padding: 0;
  margin: 0 0 0 calc(var(--sr-pad) + var(--sr-step) * 2);
}
.faith-port-search-page #results > details.scripture-work { margin: 0; }
.faith-port-search-page #results .scripture-work > summary {
  font: 600 16px/1.4 var(--font-body, Georgia, serif);
  color: var(--fg, #2d2927);
  min-height: 0;
  padding: 12px calc(var(--sr-pad) + 24px) 12px 0;
}
.faith-port-search-page #results > details.scripture-work > summary { padding-left: var(--sr-pad); }
.faith-port-search-page #results .scripture-work > summary span {
  display: block;
  margin-top: 3px;
  font: 400 13px/1.45 var(--font-ui, Georgia, serif);
  color: var(--muted, #6f6a64);
}
.faith-port-search-page #results .scripture-work > summary::after { right: var(--sr-pad); width: 6px; height: 6px; }
.faith-port-search-page #results .scripture-work:not([open]) > summary { padding-bottom: 12px; }

/* Level 4: the passage, under its work's title. */
.faith-port-search-page #results .meaning-locations,
.faith-port-search-page #results .exact-locations,
.faith-port-search-page #results .search-work-block,
.faith-port-search-page #results .matched-section-list { padding: 0 var(--sr-pad) 6px 0; }
.faith-port-search-page #results > details.scripture-work > .meaning-locations,
.faith-port-search-page #results > details.scripture-work > .exact-locations { padding-left: var(--sr-pad); }
.faith-port-search-page #results .search-work-block { padding-left: calc(var(--sr-pad) + var(--sr-step) * 2); }
.faith-port-search-page #results .search-result {
  position: relative;
  display: block;
  border: 0;
  border-top: 1px solid var(--ar-line);
}
/* Save sits at the foot of the row, on the arrow link's line, so the
   snippet keeps the full width (a side column squeezed it on a phone). */
.faith-port-search-page #results .search-result > .search-save { position: absolute; right: 0; bottom: 0; }
.faith-port-search-page #results .search-result > .sr { padding-right: 0; }
.faith-port-search-page #results .search-result:not(:has(.sr-ex)) > .sr { padding-right: 110px; }
.faith-port-search-page #results .search-work-block > .search-result:first-child { border-top: 0; }
.faith-port-search-page #results .sr,
.faith-port-search-page #results .sr:hover {
  display: block;
  margin: 0;
  padding: 12px 0 14px;
  border: 0;
  border-radius: 0;
  background: none;
  transform: none;
  box-shadow: none;
  color: var(--fg, #2d2927);
  text-decoration: none;
}
.faith-port-search-page #results .sr .sr-cite {
  font: 600 11px/1.5 var(--font-ui, Georgia, serif);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sr-accent);
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}
.faith-port-search-page #results .sr .sr-cite:empty { display: none; }
.faith-port-search-page #results .sr .sr-cite .sr-sec { letter-spacing: 0.08em; }
.faith-port-search-page #results .sr > div:not(.sr-cite):not(.sr-ex) {
  font: 600 16px/1.4 var(--font-body, Georgia, serif);
}
.faith-port-search-page #results .sr-ex {
  font: 400 15.5px/1.6 var(--font-body, Georgia, serif);
  color: var(--fg, #2d2927);
  margin: 0;
  overflow-wrap: anywhere;
}
.faith-port-search-page #results .sr-ex:empty { display: none; }
.faith-port-search-page #results .sr > small[hidden] { display: none; }
.faith-port-search-page #results .mo-sr-go {
  display: inline-block;
  margin-top: 8px;
  font: 600 13px/1.4 var(--font-ui, Georgia, serif);
  color: var(--sr-accent);
}
.faith-port-search-page #results .sr:hover .mo-sr-go,
.faith-port-search-page #results .sr:focus-visible .mo-sr-go { text-decoration: underline; text-underline-offset: 3px; }
.faith-port-search-page #results .sr:hover .sr-ex { color: var(--fg, #2d2927); }
.faith-port-search-page #results .sr:focus-visible { outline: 2px solid var(--sr-accent); outline-offset: 2px; }
.faith-port-search-page #results .sr-compact .sr-ex,
.faith-port-search-page #results.sr-compact .sr-ex { display: none; }
.faith-port-search-page #results.sr-compact .sr { padding: 9px 0; }
.faith-port-search-page #results.sr-compact .mo-sr-go { margin-top: 2px; }

/* Save: a quiet text affordance at the row's foot, not an underlined link. */
.faith-port-search-page #results .search-save {
  min-height: 44px;
  margin: 0;
  padding: 12px 0 14px 8px;
  border: 0;
  background: none;
  color: var(--muted, #6f6a64);
  font: 400 13px/1.4 var(--font-ui, Georgia, serif);
  text-decoration: none;
  white-space: nowrap;
}
.faith-port-search-page #results .search-save:hover,
.faith-port-search-page #results .search-save:focus-visible { color: var(--sr-accent); }
.faith-port-search-page #results .search-save[aria-pressed="true"] { color: var(--sr-accent); }

/* Nested folds inside a work (matching sections, the guidance note). */
.faith-port-search-page #results details.matching-sections { margin: 0 0 8px; }
.faith-port-search-page #results details.matching-sections > summary {
  font: 600 13px/1.4 var(--font-ui, Georgia, serif);
  color: var(--sr-accent);
  min-height: 0;
  padding: 8px 32px 8px 0;
}
.faith-port-search-page #results details.matching-sections > summary::after { right: 6px; width: 5px; height: 5px; }
.faith-port-search-page #results details.search-guidance { margin: 0; }
.faith-port-search-page #results details.search-guidance > summary {
  display: inline-block;
  font: 400 13px/1.4 var(--font-ui, Georgia, serif);
  color: var(--muted, #6f6a64);
  min-height: 0;
  padding: 4px 22px 4px 0;
}
.faith-port-search-page #results details.search-guidance > summary::after { right: 4px; width: 5px; height: 5px; }
.faith-port-search-page #results details.search-guidance > p { max-width: 68ch; margin: 4px 0 6px; font-size: 14px; }

/* Location pager inside a work. */
.faith-port-search-page #results .location-pager { border-top: 1px solid var(--ar-line); padding: 8px 0; }
.faith-port-search-page #results .location-pager button {
  min-height: 34px;
  padding: 4px 12px;
  border: 1px solid var(--sr-accent);
  border-radius: 3px;
  background: none;
  color: var(--sr-accent);
  font: 400 13px/1 var(--font-ui, Georgia, serif);
}

/* The toolbar: count, then the joined group, then Compact on its own. */
.faith-port-search-page .count-row { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin: 6px 0 12px; }
.faith-port-search-page .count-row #count { flex: 1 1 220px; width: auto; margin: 0; font-size: 13px; }
.faith-port-search-page .count-row .group-controls { display: inline-flex; flex-wrap: nowrap; gap: 0; margin: 0; }
.faith-port-search-page .count-row .group-controls[hidden] { display: none; }
.faith-port-search-page .count-row .group-controls button,
.faith-port-search-page .count-row .group-controls #meaningBroaden,
.faith-port-search-page .count-row #densityBtn {
  min-height: 36px;
  margin: 0;
  padding: 6px 14px;
  border: 1px solid var(--sr-accent);
  border-radius: 0;
  background: none;
  color: var(--sr-accent);
  font: 400 13px/1.2 var(--font-ui, Georgia, serif);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.faith-port-search-page .count-row .group-controls > button + button { margin-left: -1px; }
.faith-port-search-page .count-row .group-controls > button:first-child { border-radius: 3px 0 0 3px; }
.faith-port-search-page .count-row .group-controls > button:last-child { border-radius: 0 3px 3px 0; }
.faith-port-search-page .count-row .group-controls > button:only-child { border-radius: 3px; }
.faith-port-search-page .count-row #densityBtn { border-radius: 3px; flex: none; }
.faith-port-search-page .count-row .group-controls button:hover:not(:disabled),
.faith-port-search-page .count-row .group-controls button:focus-visible,
.faith-port-search-page .count-row #densityBtn:hover,
.faith-port-search-page .count-row #densityBtn[aria-pressed="true"] {
  position: relative;
  background: var(--sr-accent);
  color: var(--tfr-btn-ink, #fff);
}
.faith-port-search-page .count-row .group-controls button:disabled { opacity: 0.55; cursor: default; }

/* The pager: a plain row, and none at all for a single page. */
.faith-port-search-page .results-pager {
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0;
  margin: 0 0 12px;
}
.faith-port-search-page .results-pager:has(> button:first-child:disabled):has(> button:last-child:disabled) { display: none; }
.faith-port-search-page .results-pager button {
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--sr-accent);
  border-radius: 3px;
  background: none;
  color: var(--sr-accent);
  font: 400 13px/1.2 var(--font-ui, Georgia, serif);
}
.faith-port-search-page .results-pager button:hover:not(:disabled) { background: var(--sr-accent); color: var(--tfr-btn-ink, #fff); }
.faith-port-search-page .results-pager button:disabled { border-color: var(--ar-line); color: var(--muted, #6f6a64); opacity: 1; }

@media (max-width: 640px) {
  .faith-port-search-page { --sr-pad: 14px; --sr-step: 12px; }
  .faith-port-search-page #results > details.result-shelf > summary { font-size: 17px; }
  .faith-port-search-page #results details.result-author { margin: 0; }
  /* Phone: Expand · Collapse joined with Compact beside them, and
     Search more passages on its own line under them. */
  .faith-port-search-page .count-row { column-gap: 0; justify-content: flex-start; }
  .faith-port-search-page .count-row #count { flex-basis: 100%; }
  .faith-port-search-page .count-row .group-controls:not([hidden]) { display: contents; }
  .faith-port-search-page .count-row #densityBtn { order: 3; margin-left: 10px; }
  .faith-port-search-page .count-row .group-controls #meaningBroaden { order: 4; flex-basis: 100%; margin: 8px 0 0; border-radius: 3px; }
  .faith-port-search-page .count-row .group-controls > button:nth-last-child(2):has(+ #meaningBroaden) { border-radius: 0 3px 3px 0; }
}

/* ── An author with no room (faith-author-page.js) ─────────────────────
   Ian, 2026-09-24: "EVERY author needs a page without exception." The
   ported room exists only for mined authors; everyone else gets this:
   the header retitled for them, About when the library has a biography,
   and their works by collection in thin-line rows. The shell's own
   output (#page) is hidden, since it would draw the directory under it. */
html.fr-author-own main#page { display: none; }
.fr-own { max-width: 860px; margin: 0 auto; padding: 40px 24px 96px; font-family: var(--font-body, "Source Serif Pro", Georgia, serif); color: var(--fg, #2d2927); }
.fr-own-block { margin: 0 0 44px; }
/* body.research-enhanced h2/h3 (the port) outrank a bare class. */
section.fr-own h2.fr-own-h,
section.fr-own h3.fr-own-coll {
  font-family: var(--font-body, "Source Serif Pro", Georgia, serif);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-secondary, #c1593c);
  margin: 0 0 14px;
}
section.fr-own h3.fr-own-coll { margin: 28px 0 8px; color: var(--muted, #6b6660); letter-spacing: 0.16em; }
.fr-own-lede { font-size: 19px; line-height: 1.5; margin: 0 0 14px; }
.fr-own-bio { font-size: 16px; line-height: 1.65; margin: 0 0 14px; color: var(--fg, #2d2927); }
.fr-own-works { list-style: none; padding: 0; margin: 0; border-bottom: 1px solid var(--border, #d8d8d3); }
.fr-own-works li { border-top: 1px solid var(--border, #d8d8d3); }
.fr-own-work { display: flex; gap: 16px; align-items: baseline; justify-content: space-between; padding: 12px 0; color: inherit; text-decoration: none; }
.fr-own-work:hover .fr-own-t { color: var(--color-secondary, #c1593c); }
.fr-own-t { font-size: 18px; line-height: 1.35; }
.fr-own-m { flex: none; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted, #6b6660); white-space: nowrap; }
.fr-own-more { font-size: 15px; margin: 8px 0 0; }
.fr-own-link { color: var(--color-secondary, #c1593c); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (max-width: 640px) {
  .fr-own { padding: 28px 16px 72px; }
  .fr-own-work { flex-direction: column; gap: 2px; }
  .fr-own-t { font-size: 17px; }
}

/* ── THE AUTHOR ROOM IN THE LIBRARY'S DRESS (Ian, 2026-09-24: "Get the
   author page design up to speed with everything else.") ──────────────
   Skin only: the ported research shell's markup is untouched, every rule
   is scoped to its room (main.research-room) and states only what makes
   it read as the rest of TFR: the joined thin-line group for tabs,
   toggles and actions (the About page's .faith-mf-tabs), 3px thin-line
   boxes and fields, terracotta small-caps eyebrows, terracotta Scripture
   bars, a hairline chevron on the disclosures. The shelf names the port
   prints are relabelled by assets/js/page/faith-author-skin.js. */
main.research-room {
  --room-line: var(--color-card-border, #d9c6a7);
  --room-accent: var(--color-secondary, #c1593c);
  --room-ink: var(--color-dark, #2d2927);
  --room-card: var(--color-white, #fffdfa);
}

/* Tabs: one joined group, the chosen one filled. 1px gaps over a tan
   ground draw the dividers, so a phone's grid wraps without doubling. */
main.research-room .pseg {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  padding: 0;
  margin: 8px 0 28px;
  border: 1px solid var(--room-line);
  border-radius: 3px;
  overflow: hidden;
  background: var(--room-line);
  align-items: stretch;
  /* The port's phone strip scrolls sideways behind a fading mask; the
     joined group wraps instead, so neither is wanted. */
  overflow: hidden;
  -webkit-mask-image: none;
  mask-image: none;
}
main.research-room .pseg button {
  flex: 1 1 auto;
  min-height: 48px;
  padding: 10px 16px;
  border: 0;
  border-radius: 0;
  background: var(--room-card);
  color: var(--room-ink);
  font: 15px/1.25 var(--font-body, "Source Serif Pro", Georgia, serif);
  text-align: center;
  white-space: nowrap;
}
main.research-room .pseg button:hover { color: var(--room-accent); background: var(--room-card); }
main.research-room .pseg button.on,
main.research-room .pseg button.on:hover { background: var(--room-accent); color: #fff; border: 0; }
main.research-room .pseg button:focus-visible { outline: 2px solid var(--room-accent); outline-offset: -4px; }
main.research-room .pseg button.on:focus-visible { outline-color: #fff; }

/* Eyebrows: section labels and field labels in terracotta small caps. */
main.research-room .rx-filters label,
main.research-room .rx-filters .rx-search,
main.research-room .view > label {
  font: 600 11px/1.4 var(--font-body, "Source Serif Pro", Georgia, serif);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--room-accent);
}
main.research-room .rx-reception-pane .volhead,
main.research-room .volhead {
  font: 600 12px/1.4 var(--font-body, "Source Serif Pro", Georgia, serif);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--room-accent);
  margin: 26px 0 10px;
}
main.research-room .volhead:first-child { margin-top: 6px; }
main.research-room .volhead span { font-size: 11px !important; letter-spacing: 0.14em; color: var(--color-muted, #6b6660) !important; }

/* Fields: thin line, 3px, the reading face, no inherited eyebrow. */
main.research-room input[type="search"],
main.research-room input[type="text"],
main.research-room select {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--room-line);
  border-radius: 3px;
  background-color: var(--room-card);
  color: var(--room-ink);
  font: 15px/1.3 var(--font-body, "Source Serif Pro", Georgia, serif);
  letter-spacing: 0;
  text-transform: none;
}
main.research-room input[type="search"]:focus,
main.research-room select:focus { outline: none; border-color: var(--room-accent); }
/* A long choice ("All works in this room") stays on one line and the
   chevron sits at the right edge, not after the words. */
main.research-room select { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@supports (appearance: base-select) {
  main.research-room select { display: flex !important; align-items: center; justify-content: space-between; border-radius: 3px; }
  main.research-room select::picker-icon { margin: 0 2px 0 auto !important; flex: none; }
}

/* Boxes: 1px tan, 3px corners, everywhere the room draws one. */
main.research-room .rx-profile,
main.research-room .rx-filters,
main.research-room .ar-stat,
main.research-room .rx-pane,
main.research-room .rx-work-row,
main.research-room .rx-work-list > *,
main.research-room .cd-work { border-radius: 3px; }

/* Scripture: the book bars in terracotta. */
main.research-room .bkrow i { background: var(--room-accent); opacity: 0.85; }
main.research-room .bkrow:hover i { opacity: 1; }

/* Actions (Open all · Collapse all · Reset filters) and the reception
   toggle (His reception · His sources): joined thin-line groups. */
main.research-room .rx-result-actions,
main.research-room .rx-results-line > span { display: inline-flex; flex-wrap: nowrap; gap: 0; }
main.research-room .rx-results-line .rx-text-link,
main.research-room .view button.chip#rin,
main.research-room .view button.chip#rout {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--room-line);
  border-radius: 0;
  background: var(--room-card);
  color: var(--room-ink);
  font: 14px/1.2 var(--font-body, "Source Serif Pro", Georgia, serif);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
main.research-room .rx-results-line .rx-text-link + .rx-text-link,
main.research-room .view button.chip#rout { margin-left: -1px; }
main.research-room .rx-results-line .rx-text-link:first-of-type,
main.research-room .view button.chip#rin { border-radius: 3px 0 0 3px; }
main.research-room .rx-results-line .rx-text-link:last-of-type,
main.research-room .view button.chip#rout { border-radius: 0 3px 3px 0; }
main.research-room .rx-results-line .rx-text-link:only-of-type { border-radius: 3px; }
main.research-room .rx-results-line .rx-text-link:hover,
main.research-room .view button.chip#rin:hover,
main.research-room .view button.chip#rout:hover { position: relative; z-index: 1; border-color: var(--room-accent); color: var(--room-accent); }
main.research-room .view button.chip.on#rin,
main.research-room .view button.chip.on#rout { position: relative; z-index: 1; background: var(--room-accent); border-color: var(--room-accent); color: #fff; }
main.research-room .view div:has(> #rin) { gap: 0 !important; align-items: center; }
main.research-room .view div:has(> #rin) > #rq {
  flex: 1 1 220px;
  margin-left: 12px;
  min-height: 38px;
  border: 1px solid var(--room-line) !important;
  border-radius: 3px !important;
  background: var(--room-card) !important;
  font: 15px/1.3 var(--font-body, "Source Serif Pro", Georgia, serif) !important;
  padding: 0 12px !important;
}

/* Disclosures: a hairline chevron instead of the browser's triangle. */
main.research-room :is(.rx-profile, .rx-author-bio, .rx-secondary, .rx-position-coverage, .rx-historical, .rx-context) > summary {
  list-style: none;
  position: relative;
  padding-left: 20px;
  cursor: pointer;
}
main.research-room :is(.rx-profile, .rx-author-bio, .rx-secondary, .rx-position-coverage, .rx-historical, .rx-context) > summary::-webkit-details-marker { display: none; }
main.research-room :is(.rx-profile, .rx-author-bio, .rx-secondary, .rx-position-coverage, .rx-historical, .rx-context) > summary::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(-45deg);
  transition: transform 0.15s ease;
  opacity: 0.75;
}
main.research-room :is(.rx-profile, .rx-author-bio, .rx-secondary, .rx-position-coverage, .rx-historical, .rx-context)[open] > summary::before { transform: translateY(-70%) rotate(45deg); }

@media (max-width: 640px) {
  main.research-room .pseg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; padding: 0; position: static; }
  main.research-room .pseg button { min-height: 44px; padding: 8px 6px; font-size: 13px; white-space: normal; }
  main.research-room .pseg button:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  main.research-room .pseg button:last-child:nth-child(3n + 2) { grid-column: span 2; }
  main.research-room .rx-results-line { flex-wrap: wrap; gap: 8px; }
  main.research-room .view div:has(> #rin) > #rq { flex-basis: 100%; margin: 10px 0 0; }
}

/* Positions in the thin-line manner (Ian, 2026-09-24, on Anselm's
   Positions tab). The loci heads were large spaced caps and each topic a
   25px display-face title. Now: the loci head a terracotta small-caps
   eyebrow with its count right and muted; each topic a hairline row at
   body-heading size, its meta line small and muted, a thin terracotta
   chevron on the right as on Topics; an opened topic's works are
   thin-line cards. */
main.research-room .rx-loci-jump a:hover { color: var(--room-accent); border-bottom-color: var(--room-accent); }
/* The site theme's `html.fr-ghost-site #page h3` (an id) outranks a class. */
body main.research-room .rx-loci-group > h3.rx-loci-head,
html.fr-ghost-site #page .rx-loci-group > h3.rx-loci-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 30px 0 0;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--room-line);
  font: 600 12px/1.4 var(--font-body, "Source Serif Pro", Georgia, serif);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--room-accent);
}
body main.research-room .rx-loci-group:first-child > h3.rx-loci-head { margin-top: 8px; }
body main.research-room .rx-loci-group > h3.rx-loci-head small {
  flex: none;
  font: 400 12px/1.4 var(--font-body, "Source Serif Pro", Georgia, serif);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-muted, #6b6660);
  font-variant-numeric: tabular-nums;
}
main.research-room .rx-loci-list { border-top: 0; }
main.research-room .rx-position-topic { border-bottom: 1px solid var(--room-line); }
main.research-room .rx-position-topic > summary {
  position: relative;
  min-height: 0;
  padding: 14px 32px 14px 0;
  gap: 12px;
}
main.research-room .rx-position-topic > summary strong {
  font: 600 1.15em/1.3 var(--font-body, "Source Serif Pro", Georgia, serif);
  color: var(--room-ink);
}
main.research-room .rx-position-topic > summary:hover strong { color: var(--room-accent); text-decoration: none; }
main.research-room .rx-position-topic > summary small { font-size: 13px; margin-top: 3px; color: var(--color-muted, #6b6660); }
main.research-room .rx-position-topic > summary::after {
  position: absolute;
  right: 6px;
  top: 50%;
  margin: 0;
  border-color: var(--room-accent);
  transform: translateY(-30%) rotate(-45deg);
}
main.research-room .rx-position-topic[open] > summary::after { transform: translateY(-70%) rotate(45deg); }
main.research-room .rx-position-topic[open] > summary { padding-bottom: 12px; }
main.research-room .rx-position-body { padding: 0 0 18px; }
main.research-room .rx-position-body:not(.rx-position-compare) { border: 0; border-radius: 0; }
/* A topic's evidence, opened from Positions or from Topics (Ian,
   2026-09-24, on Anselm's Grace: "These should be fixed on author pages
   too"). Both are statementPane: .rx-position-body on Positions,
   .rx-pane#room-topic-evidence on Topics. The pane's own box goes; each
   work is a thin-line card with a terracotta chevron for the port's
   "+"/"-", its count, "open at" and "Save work" one joined group; each
   entry a terracotta eyebrow, the summary in the body face, its three
   actions one joined group with "Read the passage" the primary. */
main.research-room .rx-pane { border: 0; border-radius: 0; padding: 0; background: transparent; }
main.research-room :is(.rx-pane, .rx-position-body) .cd-work {
  border: 1px solid var(--room-line);
  border-radius: 3px;
  background: var(--room-card);
  padding: 0 16px;
  margin: 0 0 10px;
}
main.research-room :is(.rx-pane, .rx-position-body) .cd-work:first-child { border-top: 1px solid var(--room-line); }
main.research-room :is(.rx-pane, .rx-position-body) .cd-work > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0;
  padding: 12px 0;
  font-size: 15px;
  list-style: none;
}
main.research-room :is(.rx-pane, .rx-position-body) .cd-work > summary::-webkit-details-marker { display: none; }
main.research-room :is(.rx-pane, .rx-position-body) .cd-work > summary::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin: 0 14px 0 2px;
  border-right: 1.5px solid var(--room-accent);
  border-bottom: 1.5px solid var(--room-accent);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
main.research-room :is(.rx-pane, .rx-position-body) .cd-work[open] > summary::before { content: ""; transform: translateY(-2px) rotate(45deg); }
main.research-room :is(.rx-pane, .rx-position-body) .cd-work > summary > span { flex: 1 1 260px; min-width: 0; margin-right: 14px; }
main.research-room :is(.rx-pane, .rx-position-body) .cd-work > summary strong { font-weight: 600; color: var(--room-ink); }
main.research-room :is(.rx-pane, .rx-position-body) .cd-work > summary:hover strong { color: var(--room-accent); }
main.research-room :is(.rx-pane, .rx-position-body) .cd-work > summary > span small {
  margin-left: 8px;
  font-size: 14px;
  font-variant-caps: small-caps;
  letter-spacing: 0.04em;
  color: var(--color-muted, #6b6660);
}
main.research-room :is(.rx-pane, .rx-position-body) .cd-work[open] > summary { border-bottom: 1px solid var(--room-line); }
/* The count, "open at col. N" and "Save work": one joined group. */
main.research-room :is(.rx-pane, .rx-position-body) .cd-work > summary > :is(.cd-n, .cd-read, .pinb-work),
main.research-room :is(.rx-pane, .rx-position-body) .rx-excerpt .rx-source > div > :is(.rx-text-link, .peekbtn, .pinb) {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  min-width: 0;
  margin: 0;
  padding: 0 11px;
  border: 1px solid var(--room-line);
  border-radius: 0;
  background: var(--room-card);
  color: var(--room-ink);
  font: 13px/1.2 var(--font-body, "Source Serif Pro", Georgia, serif);
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  opacity: 1;
  cursor: pointer;
}
main.research-room :is(.rx-pane, .rx-position-body) .cd-work > summary > .cd-n {
  border-radius: 3px 0 0 3px;
  color: var(--color-muted, #6b6660);
  font-variant-numeric: tabular-nums;
  cursor: inherit;
}
main.research-room :is(.rx-pane, .rx-position-body) .cd-work > summary > :is(.cd-read, .pinb-work) { margin-left: -1px; }
main.research-room :is(.rx-pane, .rx-position-body) .cd-work > summary > :last-child { border-radius: 0 3px 3px 0; }
main.research-room :is(.rx-pane, .rx-position-body) .cd-work > summary > .cd-n:last-child { border-radius: 3px; }
main.research-room :is(.rx-pane, .rx-position-body) .rx-excerpt .rx-source > div { display: inline-flex; flex-wrap: nowrap; gap: 0; }
main.research-room :is(.rx-pane, .rx-position-body) .rx-excerpt .rx-source > div > * + * { margin-left: -1px; }
main.research-room :is(.rx-pane, .rx-position-body) .rx-excerpt .rx-source > div > :first-child { border-radius: 3px 0 0 3px; }
main.research-room :is(.rx-pane, .rx-position-body) .rx-excerpt .rx-source > div > :last-child { border-radius: 0 3px 3px 0; }
main.research-room :is(.rx-pane, .rx-position-body) .rx-excerpt .rx-source > div > :only-child { border-radius: 3px; }
/* "Read the passage" is the primary: the terracotta outline. */
main.research-room :is(.rx-pane, .rx-position-body) .rx-excerpt .rx-source > div > .rx-text-link { position: relative; z-index: 1; border-color: var(--room-accent); color: var(--room-accent); }
main.research-room :is(.rx-pane, .rx-position-body) .cd-work > summary > :is(.cd-read, .pinb-work):hover,
main.research-room :is(.rx-pane, .rx-position-body) .rx-excerpt .rx-source > div > :is(.peekbtn, .pinb):hover { position: relative; z-index: 2; border-color: var(--room-accent); color: var(--room-accent); }
main.research-room :is(.rx-pane, .rx-position-body) .rx-excerpt .rx-source > div > .rx-text-link:hover,
main.research-room :is(.rx-pane, .rx-position-body) .rx-excerpt .rx-source > div > .peekbtn.on,
main.research-room :is(.rx-pane, .rx-position-body) .cd-work > summary > .pinb-work.on,
main.research-room :is(.rx-pane, .rx-position-body) .rx-excerpt .rx-source > div > .pinb.on { position: relative; z-index: 2; background: var(--room-accent); border-color: var(--room-accent); color: #fff; text-decoration: none; }
main.research-room :is(.rx-pane, .rx-position-body) .rx-excerpt { border-color: var(--room-line); }
main.research-room :is(.rx-pane, .rx-position-body) .cd-fold-body { padding: 0 0 4px 22px; }
main.research-room :is(.rx-pane, .rx-position-body) .cd-fold-body .rx-excerpt { padding: 4px 0 16px; }
main.research-room :is(.rx-pane, .rx-position-body) :is(.cd-fold-body, .cd-sec) > .rx-excerpt:last-child { border-bottom: 0; }
/* A long work's sections: the same chevron, smaller, muted. */
main.research-room :is(.rx-pane, .rx-position-body) .cd-sec { border-top: 1px solid var(--room-line); margin: 0; }
main.research-room :is(.rx-pane, .rx-position-body) .cd-sec:first-child { border-top: 0; }
main.research-room :is(.rx-pane, .rx-position-body) .cd-sec > summary { align-items: center; gap: 0; padding: 10px 0; font-size: 14px; }
main.research-room :is(.rx-pane, .rx-position-body) .cd-sec > summary::-webkit-details-marker { display: none; }
main.research-room :is(.rx-pane, .rx-position-body) .cd-sec > summary::before {
  content: "";
  width: 5px;
  height: 5px;
  margin: 0 12px 0 1px;
  border-right: 1.25px solid var(--room-accent);
  border-bottom: 1.25px solid var(--room-accent);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
main.research-room :is(.rx-pane, .rx-position-body) .cd-sec[open] > summary::before { content: ""; transform: translateY(-2px) rotate(45deg); }
main.research-room :is(.rx-pane, .rx-position-body) .cd-sec > summary > span { margin-right: 12px; }
main.research-room :is(.rx-pane, .rx-position-body) .cd-sec .rx-excerpt { padding-left: 18px; }
main.research-room :is(.rx-pane, .rx-position-body) .rx-evidence-kind {
  display: block;
  margin: 14px 0 6px;
  font: 600 11.5px/1.4 var(--font-body, "Source Serif Pro", Georgia, serif);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--room-accent);
}
main.research-room :is(.rx-pane, .rx-position-body) .rx-excerpt .rx-source { margin-top: 10px; gap: 8px 16px; }
main.research-room :is(.rx-pane, .rx-position-body) .rx-excerpt .rx-source > span { font-size: 13px; color: var(--color-muted, #6b6660); }
/* "Read page annotation": a thin chevron, no browser triangle. */
main.research-room .rx-context { margin: 4px 0 2px; }
main.research-room .rx-context > summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font: 14px/1.3 var(--font-body, "Source Serif Pro", Georgia, serif);
  color: var(--room-accent);
}
main.research-room .rx-context > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
main.research-room .rx-context > p { margin: 4px 0 8px 20px; font-size: 15px; line-height: 1.6; color: var(--room-ink); }
/* The meta line, its "Also discusses" topics quiet links into the room
   (faith-author-skin.js makes them the rail's own [data-t] buttons). */
main.research-room :is(.rx-pane, .rx-position-body) .rx-annotation { margin: 10px 0 2px; font: 13px/1.5 var(--font-body, "Source Serif Pro", Georgia, serif); color: var(--color-muted, #6b6660); }
main.research-room .rx-annotation .fr-also {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--room-line);
  text-underline-offset: 3px;
  cursor: pointer;
}
main.research-room .rx-annotation .fr-also:hover,
main.research-room .rx-annotation .fr-also:focus-visible { color: var(--room-accent); text-decoration-color: currentColor; }
@media (max-width: 640px) {
  main.research-room :is(.rx-pane, .rx-position-body) .cd-work { padding: 0 12px; }
  main.research-room :is(.rx-pane, .rx-position-body) .cd-fold-body { padding-left: 0; }
  main.research-room :is(.rx-pane, .rx-position-body) .cd-sec .rx-excerpt { padding-left: 0; }
  main.research-room :is(.rx-pane, .rx-position-body) .cd-work > summary > span small { display: block; margin: 2px 0 0; }
  main.research-room :is(.rx-pane, .rx-position-body) .cd-work > summary > :is(.cd-n, .cd-read, .pinb-work),
  main.research-room :is(.rx-pane, .rx-position-body) .rx-excerpt .rx-source > div > :is(.rx-text-link, .peekbtn, .pinb) { min-height: 44px; }
  main.research-room :is(.rx-pane, .rx-position-body) .cd-work > summary > .cd-n { margin-left: 23px; }
  main.research-room :is(.rx-pane, .rx-position-body) .rx-excerpt .rx-source > div > :is(.rx-text-link, .peekbtn, .pinb) { padding: 0 8px; font-size: 12.5px; }
  main.research-room :is(.rx-pane, .rx-position-body) .rx-excerpt .rx-source > div { max-width: 100%; }
  main.research-room :is(.rx-pane, .rx-position-body) .cd-work > summary::before { align-self: flex-start; margin-top: 7px; }
  main.research-room .rx-context > summary { min-height: 44px; }
}
main.research-room #positions-count { font-size: 14px; color: var(--color-muted, #6b6660); }

/* ── An author with no room, in the room's dress (faith-author-page.js).
   Ian, 2026-09-24, on Boethius: "Why is his author page like this and
   not like everyone else's?" The page draws the room's own markup in a
   <main class="research research-room"> of its own, so every rule above
   applies. These rules only place that main as the port places #page,
   and cover what a room has and it does not (no topic rail). */
/* What faith-site-theme.css gives the port's main#page, for this main. */
html.fr-author-own main#frAuthorOwn { max-width: 1320px; width: 100%; margin: 0 auto; padding: 42px 24px 72px; min-width: 0; box-sizing: border-box; background: var(--bg); color: var(--fg); }
html.fr-ghost-site main#frAuthorOwn h1 { color: var(--fg); font: 400 clamp(34px, 4vw, 48px)/1.18 var(--font-display); letter-spacing: 0; margin-bottom: 18px; }
html.fr-ghost-site main#frAuthorOwn h3 { color: var(--fg); font-family: var(--font-display); }
html.fr-ghost-site main#frAuthorOwn :is(input, select, textarea) { color: var(--fg); background: var(--card); border-color: var(--border); font-family: var(--font-body); min-height: 44px; }
html.fr-ghost-site main#frAuthorOwn input::placeholder { color: var(--muted); opacity: 1; }
html.fr-ghost-site main#frAuthorOwn button { font-family: var(--font-body); }
main#frAuthorOwn .fr-own-grid { display: block; margin-top: 26px; }
main#frAuthorOwn .ar-stat[hidden] { display: none; }
main#frAuthorOwn .fr-own-dek { font: 17px/1.55 var(--font-body, "Source Serif Pro", Georgia, serif); color: var(--room-ink); margin: 0 0 14px; max-width: 75ch; }
main#frAuthorOwn .fr-own-works-list > .volhead:first-child { margin-top: 18px; }
main#frAuthorOwn .fr-own-works-list .rx-work-list { margin-top: 0; }
main#frAuthorOwn .fr-own-rbar { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.6rem 0 0.2rem; }
main#frAuthorOwn .fr-own-rbar #rq { font: inherit; }
main#frAuthorOwn .fr-own-rline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.34rem 0;
  border-bottom: 1px solid var(--room-line);
}
main#frAuthorOwn .fr-own-rline .nm a { color: var(--room-ink); text-decoration: none; }
main#frAuthorOwn .fr-own-rline .nm a:hover { color: var(--room-accent); }
main#frAuthorOwn .bkrow { cursor: default; }
main#frAuthorOwn form.srow { display: flex; gap: 0; margin-top: 12px; max-width: 640px; }
main#frAuthorOwn form.srow input[type="search"] { flex: 1 1 auto; min-width: 0; border-radius: 3px 0 0 3px; }
main#frAuthorOwn form.srow button {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--room-accent);
  border-radius: 0 3px 3px 0;
  background: var(--room-accent);
  color: #fff;
  font: 15px/1 var(--font-body, "Source Serif Pro", Georgia, serif);
  cursor: pointer;
}
@media (max-width: 640px) {
  html.fr-author-own main#frAuthorOwn { padding: 28px 20px 56px; }
  main#frAuthorOwn h1 { font-size: 34px; margin-bottom: 2px; }
  main#frAuthorOwn .fr-own-grid { margin-top: 8px; }
  main.research-room .rx-position-topic > summary strong { font-size: 1.05em; }
  body main.research-room .rx-loci-group > h3.rx-loci-head { flex-wrap: wrap; gap: 2px 12px; }
}

/* Rings and Tradition sit on the page the way Timeline does: no plate,
   no hairline frame, no cream ground (Ian, 2026-09-25: "Everything
   should look like timeline"). The canvas paints no background of its
   own, so the page shows through. */
#faith-web-constellations .cn-stage{background:transparent;border:0;border-radius:0}

/* ── THE WORK PAGE'S INDEXES IN THE LIBRARY'S DRESS. Scoped to
   main.research-work: compact five-up indexes, ruled reading rows, quiet text
   actions, and a restrained preview. */
main.research-work {
  --wk-accent: var(--color-secondary, #c1593c);
  --wk-ink: var(--ink, #2d2927);
  --wk-muted: var(--muted, #6b6660);
}
/* Books and topics are compact indexes. Five cards share one detail panel,
   which opens beneath their row instead of lengthening the whole page. */
main.research-work .vc-expand-group { margin: 0 0 12px; }
main.research-work .vc-index-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
main.research-work .vc-index-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 76px;
  padding: 13px 14px 11px;
  border: 1px solid var(--ar-line);
  border-radius: 3px;
  background: var(--ar-card);
  color: var(--wk-ink);
  text-align: left;
  cursor: pointer;
}
main.research-work .vc-index-card > span {
  overflow-wrap: anywhere;
  font: 600 16px/1.25 var(--font-body, "Source Serif Pro", Georgia, serif);
}
main.research-work .vc-index-card > small {
  color: var(--wk-muted);
  font: 12px/1.3 var(--font-body, "Source Serif Pro", Georgia, serif);
  font-variant-numeric: tabular-nums;
}
main.research-work .vc-index-card:hover { border-color: var(--ar-line-strong); }
main.research-work .vc-index-card[aria-expanded="true"] {
  border-color: var(--wk-accent);
  box-shadow: inset 0 3px 0 var(--wk-accent);
  color: var(--wk-accent);
}
main.research-work .vc-index-card:focus-visible { outline: 2px solid var(--wk-accent); outline-offset: 2px; }
main.research-work .vc-section-meta {
  margin-left: 8px;
  color: var(--wk-muted);
  font: 13px/1.4 var(--font-body, "Source Serif Pro", Georgia, serif);
  white-space: nowrap;
}
main.research-work .vc-expand-panel {
  margin: 10px 0 24px;
  padding: 0 18px 18px;
  border: 1px solid var(--ar-line);
  border-radius: 3px;
  background: var(--ar-card);
}
main.research-work .vc-expand-panel[hidden] { display: none; }
main.research-work .vc-expand-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 64px;
  border-bottom: 1px solid var(--ar-line);
}
main.research-work .vc-expand-panel > header h3 { margin: 0; color: var(--wk-ink); font: 500 23px/1.2 var(--font-display, "EB Garamond", Georgia, serif); }
main.research-work .vc-expand-panel > header p { margin: 3px 0 0; color: var(--wk-muted); font-size: 12px; }
main.research-work .vc-panel-close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wk-muted);
  font: 24px/1 var(--font-body, Georgia, serif);
  cursor: pointer;
}
main.research-work .vc-panel-close:hover { color: var(--wk-accent); }
main.research-work .vc-panel-close:focus-visible { outline: 2px solid var(--wk-accent); outline-offset: 0; }
main.research-work .vc-chapter-filter {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--ar-line);
  font: 600 11.5px/1.4 var(--font-body, "Source Serif Pro", Georgia, serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wk-muted);
}
main.research-work .vc-chapter-filter select {
  min-width: min(320px, 100%);
  min-height: 40px;
  padding: 8px 34px 8px 11px;
  border: 1px solid var(--ar-line);
  border-radius: 3px;
  background: var(--ar-card);
  color: var(--wk-ink);
  font: 15px/1.3 var(--font-body, "Source Serif Pro", Georgia, serif);
  letter-spacing: 0;
  text-transform: none;
}
main.research-work .vc-chapter-filter select:focus-visible {
  outline: 2px solid var(--wk-accent);
  outline-offset: 2px;
  border-color: var(--wk-accent);
}
main.research-work .vc-filter-bar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 320px));
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ar-line);
}
main.research-work .vc-filter-bar .vc-chapter-filter {
  display: grid;
  align-content: start;
  gap: 5px;
  margin: 0;
  padding: 0;
  border: 0;
}
main.research-work .vc-filter-bar .vc-chapter-filter select { width: 100%; min-width: 0; }
main.research-work .vc-book-panel > .vc-status {
  min-height: 0;
  margin: 0;
  padding: 10px 0 0;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wk-muted);
}
main.research-work .vc-book-panel > .vcits {
  padding: 0 !important;
  border-bottom: 0;
  border-top: 0;
}
main.research-work .vc-topic-panel > .ev { padding: 16px 0 !important; border-bottom: 1px solid var(--ar-line); }
main.research-work .vc-topic-panel > .ev:last-of-type { border-bottom: 0; }
main.research-work .vc-page-refs { padding-top: 16px; border-top: 1px solid var(--ar-line); }
main.research-work .vc-page-refs h4 { margin: 0 0 10px; color: var(--wk-muted); font: 600 11px/1.4 var(--font-body, Georgia, serif); letter-spacing: 0.14em; text-transform: uppercase; }
main.research-work .vc-page-refs > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 16px; }
main.research-work .vc-page-ref { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; min-height: 44px; border-bottom: 1px solid var(--ar-line); }
main.research-work .vc-page-ref > span:first-child { margin-right: auto; color: var(--wk-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
main.research-work .vc-page-ref .vact { display: flex; align-items: center; gap: 14px; }
main.research-work .vc-page-ref .vact > :is(.readbtn, .peekbtn) { min-height: 32px; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--wk-ink) !important; font: 12px/1.2 var(--font-body, Georgia, serif) !important; }
main.research-work .vc-page-ref .vact > .readbtn { color: var(--wk-accent) !important; }
main.research-work .vc-page-ref .vact > :is(.readbtn, .peekbtn):hover { color: var(--wk-accent) !important; }
/* What the rows show: an eyebrow, with its one action as a thin-line box. */
main.research-work .vc-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 4px 0 10px;
  font: 600 11.5px/1.4 var(--font-body, "Source Serif Pro", Georgia, serif);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wk-accent);
}
main.research-work :is(.vc-status .rx-text-link, .vc-all) {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--ar-line);
  border-radius: 3px;
  background: var(--ar-card);
  color: var(--wk-ink);
  font: 13px/1.2 var(--font-body, "Source Serif Pro", Georgia, serif);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
}
main.research-work :is(.vc-status .rx-text-link, .vc-all):hover { border-color: var(--wk-accent); color: var(--wk-accent); }
main.research-work .vc-note { color: var(--wk-muted); font-size: 13px; }
/* Inset like the chips and rows, which take the box's 20px from details.wdet. */
main.research-work .vc-book-panel > .vc-status { padding-inline: 0; }
main.research-work .vc-book-panel > :is(.vc-all, .vc-note) { margin: 10px 0 0; }
/* The rows: hairlines, the reference in ink, the kind as a word. */
main.research-work .vcits { margin: 0; padding: 0; border-left: 0; border-top: 1px solid var(--ar-line); }
main.research-work .vc.vc-row { min-height: 50px; padding: 8px 4px; border-bottom: 1px solid var(--ar-line); }
main.research-work .vc.vc-row .vref { color: var(--wk-ink); font-size: 15px; font-weight: 600; text-decoration: none; }
main.research-work .vc.vc-row .vref:hover { color: var(--wk-accent); text-decoration: underline; text-underline-offset: 3px; }
main.research-work .vc.vc-row .vpg { color: var(--wk-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
main.research-work .vc.vc-row .howtag {
  justify-self: start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none !important;
  color: var(--wk-muted);
  font: 600 11px/1.3 var(--font-body, "Source Serif Pro", Georgia, serif);
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
main.research-work .vc.vc-row .howtag.how-quotes { color: var(--wk-accent); }
main.research-work .vc.vc-row .howtag.how-cites { color: var(--wk-ink); }
main.research-work .vc.vc-row .howtag.how-alludes { color: var(--allusion, #2b6a6e); font-style: italic; }
main.research-work .vc.vc-row .howtag.how-expounds { color: var(--wk-ink); }
main.research-work .vc-kinds-line { color: var(--wk-muted); }
main.research-work .vc-kinds-line .how-alludes { color: var(--allusion, #2b6a6e); }
/* Open and Preview are quiet commands. Reading the page remains primary. */
main.research-work .vc.vc-row .vact { gap: 16px; }
main.research-work .vc.vc-row .vact > :is(.readbtn, .peekbtn) {
  min-height: 32px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--wk-ink) !important;
  font: 13px/1.2 var(--font-body, "Source Serif Pro", Georgia, serif) !important;
}
main.research-work .vc.vc-row .vact > .readbtn { color: var(--wk-accent) !important; }
main.research-work .vc.vc-row .vact > .peekbtn { margin-left: 0; }
main.research-work .vc.vc-row .vact > :is(.readbtn, .peekbtn):is(:hover, .on) { color: var(--wk-accent) !important; text-decoration: underline; text-underline-offset: 3px; }
/* The preview: a thin-line box, its head an eyebrow over the reader. */
main.research-work .vc.vc-row > .peekwrap.on > div { border: 1px solid var(--ar-line); border-radius: 3px; background: var(--ar-panel); }
main.research-work .vc.vc-row > .peekwrap .peekhead { padding: 8px 14px; border-bottom: 1px solid var(--ar-line); background: var(--ar-panel); }
main.research-work .vc.vc-row > .peekwrap .peekhead strong {
  font: 600 11.5px/1.4 var(--font-body, "Source Serif Pro", Georgia, serif);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wk-accent);
}
main.research-work .vc.vc-row > .peekwrap .peekhead :is(a, button) { color: var(--wk-ink); font-size: 13px; }
main.research-work .vc.vc-row > .peekwrap .peekhead :is(a, button):hover { color: var(--wk-accent); }

/* Its topics use the same editorial rows: the statement in ink, a stance as a
   terracotta small-caps word, then quiet metadata and actions. */
main.research-work .wdet .ev { padding: 12px 20px 14px !important; border-bottom: 1px solid var(--ar-line); }
main.research-work .wdet .ev:last-child { border-bottom: 0; }
main.research-work .wdet .ev .q { font-size: 16px !important; line-height: 1.6; color: var(--wk-ink); }
main.research-work .wdet .ev .stance {
  display: block;
  width: fit-content;
  margin: 0 0 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: 600 11px/1.3 var(--font-body, "Source Serif Pro", Georgia, serif);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  vertical-align: baseline;
  color: var(--wk-accent);
}
main.research-work .wdet :is(.ev > .m, div:not(.ev) > .m) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  font-size: 13px;
  color: var(--wk-muted);
}
main.research-work .wdet .ev > .m { margin: 8px 0 0 !important; }
/* Metadata and actions read as a byline, not a segmented control. */
main.research-work .wdet .ev > .m > span:first-child,
main.research-work .wdet div:not(.ev) > .m > span:nth-child(2),
main.research-work .wdet .m > .readbtn,
main.research-work .wdet .m > .peekbtn,
main.research-work .wdet .m > .pinb {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  min-width: 0;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--wk-ink) !important;
  font: 13px/1.2 var(--font-body, "Source Serif Pro", Georgia, serif) !important;
  opacity: 1 !important;
  text-decoration: none;
  white-space: nowrap;
}
/* Page numbers stay quiet and tabular. */
main.research-work .wdet .ev > .m > span:first-child,
main.research-work .wdet div:not(.ev) > .m > span:nth-child(2) {
  margin-left: 0;
  color: var(--wk-muted) !important;
  font-variant-numeric: tabular-nums;
}
main.research-work .wdet .m > .readbtn { color: var(--wk-accent) !important; }
main.research-work .wdet .m > :is(.readbtn, .peekbtn, .pinb):is(:hover, .on) { color: var(--wk-accent) !important; text-decoration: underline; text-underline-offset: 3px; }
/* Legacy authority rows, retained for older work records. */
main.research-work .wdet > div:not(.ev) > .m { margin: 0 !important; padding: 6px 0; border-bottom: 1px solid var(--ar-line); }
main.research-work .wdet > div:not(.ev) > .m:last-child { border-bottom: 0; }
main.research-work .wdet > div:not(.ev) > .m > span:first-child {
  flex: 0 1 auto;
  min-width: 0;
  margin-right: 12px;
  color: var(--wk-ink);
  font-size: 15px !important;
}
main.research-work .wdet > div:not(.ev) > .m > span:first-child i { font-style: italic; }
/* the group keeps one right-hand column; the resolved work reads after the citation */
main.research-work .wdet > div:not(.ev) > .m > :is(span:nth-child(2), .readbtn, .peekbtn) { order: 2; }
main.research-work .wdet > div:not(.ev) > .m > span:nth-child(2) { margin-left: auto; }
main.research-work .wdet > div:not(.ev) > .m > span[style*="faint"] { order: 1; margin: 0 16px 0 0; font-size: 13px !important; color: var(--wk-muted) !important; }
main.research-work .wdet > div:not(.ev) > .m > span[style*="faint"] a { color: var(--wk-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ar-line-strong); }
main.research-work .wdet > div:not(.ev) > .m > span[style*="faint"] a:hover { color: var(--wk-accent); }
/* The work's kind beside its author: a thin-line label, not a pill. */
main.research-work .deck .pill {
  padding: 1px 8px;
  border: 1px solid var(--ar-line);
  border-radius: 3px;
  font: 600 11px/1.6 var(--font-body, "Source Serif Pro", Georgia, serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wk-muted);
}
/* Authority panels use a compact bibliography: citation, page, action. */
main.research-work .vc-authority-rows { border-top: 1px solid var(--ar-line); }
main.research-work .vc-authority-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px 22px;
  min-height: 54px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--ar-line);
}
main.research-work .vc-authority-citation { min-width: 0; color: var(--wk-ink); font-size: 15px; }
main.research-work .vc-authority-citation > span { display: block; overflow-wrap: anywhere; }
main.research-work .vc-authority-citation small { display: block; margin-top: 2px; color: var(--wk-muted); font-size: 12px; }
main.research-work .vc-authority-page { color: var(--wk-muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
main.research-work .vc-authority-row .vact { display: flex; align-items: center; gap: 14px; }
main.research-work .vc-authority-row .vact > :is(.readbtn, .peekbtn) { min-height: 32px; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--wk-ink) !important; font: 13px/1.2 var(--font-body, Georgia, serif) !important; }
main.research-work .vc-authority-row .vact > .readbtn { color: var(--wk-accent) !important; }
main.research-work .vc-authority-row .vact > :is(.readbtn, .peekbtn):hover { color: var(--wk-accent) !important; text-decoration: underline; text-underline-offset: 3px; }
main.research-work :is(.vc-authority-row, .vc-page-ref) > .peekwrap { grid-column: 1 / -1; flex: 1 0 100%; min-width: 0; }
/* On a phone citations and controls get separate, predictable lines. */
@media (max-width: 640px) {
  main.research-work .vc-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main.research-work .vc-index-card { min-height: 72px; padding: 12px; }
  main.research-work .vc-expand-panel { margin-top: 8px; padding: 0 14px 14px; }
  main.research-work .vc-page-refs > div { grid-template-columns: 1fr; }
  main.research-work .vc-section-meta { display: block; margin: 4px 0 0; white-space: normal; }
  main.research-work .vc-filter-bar { grid-template-columns: 1fr; gap: 10px; }
  main.research-work .vc-chapter-filter { align-items: stretch; flex-direction: column; gap: 6px; }
  main.research-work .vc-chapter-filter select { width: 100%; min-width: 0; min-height: 44px; }
  main.research-work .vc.vc-row .vact > :is(.readbtn, .peekbtn),
  main.research-work .wdet .m > :is(.readbtn, .peekbtn, .pinb) { min-height: 44px; }
  main.research-work .vc.vc-row .vact { gap: 18px; }
  main.research-work .vc.vc-row { padding-block: 12px; row-gap: 6px; }
  main.research-work .wdet > div:not(.ev) > .m > span:first-child { flex: 1 1 100%; margin: 0 0 4px; }
  main.research-work .wdet > div:not(.ev) > .m > span[style*="faint"] { flex: 1 1 100%; margin: 0 0 6px; }
  main.research-work .wdet > div:not(.ev) > .m > span:nth-child(2) { margin-left: 0; }
  main.research-work .vc-authority-row { grid-template-columns: 1fr auto; gap: 2px 16px; padding-block: 12px; }
  main.research-work .vc-authority-citation { grid-column: 1 / -1; }
  main.research-work .vc-authority-row .vact > :is(.readbtn, .peekbtn) { min-height: 44px; }
  body.research-page:has(main.research-work) .fr-survey-tab {
    top: 62%;
    right: 0;
    bottom: auto;
    width: 30px;
    max-width: 30px;
    padding: 10px 6px;
    overflow: hidden;
    font-size: 0;
    white-space: nowrap;
    writing-mode: vertical-rl;
  }
  body.research-page:has(main.research-work) .fr-survey-tab::after { content: "Feedback"; font-size: 12px; }
}
@media (min-width: 641px) and (max-width: 980px) {
  main.research-work .vc-index-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  main.research-work .vc-page-refs > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}