/* Résumé-mode stylesheet — loads AFTER theme.css and exploratory.css and
   only adds or overrides. All colours and fonts come from theme.css; the
   margin apparatus, links, ledger voice and type scale come from
   exploratory.css untouched. What this file adds:
     · the INK RIBBON fixed at the top of the window; the mono top bar
       (narrow windows) sticks under it; the SIDEBAR CARD (wide windows)
       is a paper card resting on the left ribbon's texture — the same
       card language as the margin boxes on the right rail.
     · the SECTION rows: one grid (mono key | body) for news, papers,
       awards, projects, teaching, talks, writings.
     · THREE ANNOTATION VOICES per item (the "sub-features"):
         the ledger line — mono 0.8rem grey: dates, coauthors, venues, places
         the STAMP — mono 0.7rem UPPERCASE chip: category-like words (a
           paper's stage, a role, a talk type, a kind); .stamp.neon is the
           one loud mark, set by an item's `badge:`
         the FIGURE — bold serif, tabular numerals: ratings, amounts, sizes
   Zero JavaScript: the current section is marked by a CSS scroll-driven
   animation where supported (Chrome, Edge, Safari 26+), and by the clicked
   anchor (:target) everywhere else. */

/* ---- the ink ribbon stays put while scrolling ---- */
html { border-top: 0; padding-top: var(--top-rule, 4px); }
html::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--top-rule, 4px);
  background: var(--accent);
  z-index: 100;
}
/* short pages (a paper, the writings list): keep the ribbon and rail
   running to the bottom of the window instead of stopping at the footer */
body { min-height: calc(100vh - var(--top-rule, 4px)); }

/* ---- THE MENU: a stable line of sections ---- */
/* Sits under the bio and sticks to the top of the window while a section is
   read. One section shows below it at a time: the one named in the address
   (/#teaching — CSS :target, no script), research when none is. The
   selected chip wears the marker, as a current page does. */
.menu {   /* the sticky block: the main row (chips + masthead, the rule under it), then the mini ribbon, then an apron */
  position: sticky;
  top: var(--top-rule, 0px);
  z-index: 40;
  background: var(--bg);
  margin: 1.55rem 0 0;   /* the gap from the now line: ~24% less than before (23 Oct 2026) */
  --menu-apron: 1rem;   /* the band of background BELOW the mini ribbon: rows scrolling up vanish there, before they touch it */
  padding: 0.5rem 0 var(--menu-apron);
  font-family: var(--font-mono);
  font-size: 0.8rem;   /* mono-meta, like the chips */
  line-height: 1.7;
  box-shadow: -0.75rem 0 0 var(--bg), 0.75rem 0 0 var(--bg);   /* its background a little wider than the column: an italic letter leaning past the column's edge vanishes under the menu too (30 Oct 2026) */
}
.menu-main {   /* the chips and the masthead on one floor; the rule is the row's bottom edge */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;   /* the rule is the same distance under the chips, stuck or not */
  gap: 0.2rem 1.5rem;
  min-height: 3.4rem;   /* ≥ the 3rem photo + its 0.3rem margin + the 1px rule (border-box): the same height with or without the masthead, nothing jumps */
  border-bottom: 1px solid var(--hairline);
}
.menu-sub {   /* the MINI RIBBON: the shown section's groups, as on/off tabs in ink (the live row under the greyed main row); one row's height even when empty */
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.2rem;
  min-height: 2.15rem;   /* one row of 0.8rem tabs (line 1.7) + the padding: one height even when the row is empty */
  padding-top: 0.75rem;   /* the room between the rule and the mini ribbon */
  font-size: 0.8rem;   /* = the main tabs (23 Oct 2026; was 0.7rem) */
}
.menu-sub .sub { display: none; flex-wrap: inherit; gap: inherit; }
.sub-toggle { display: none; }
/* BY STAGE OR BY TOPIC (30 Oct 2026, Ameek): the research row of the mini ribbon carries both sets of tabs
   and, FIRST, the switch between them (submenu.liquid); chrome.html moves the rows. The tabs are one
   group after the switch: when the window is too narrow for both on one line, the GROUP drops below
   the switch (Ameek, 30 Oct 2026: the switch stays up; before, it sat at the end and dropped itself) */
.arrange-toggle { display: none; }
.menu-sub .tabs { display: flex; flex-wrap: inherit; gap: 0 1.2rem; }
.menu-sub .tabs:empty { display: none; }
.menu-sub .sub[data-for="research"] { column-gap: 2.6rem; row-gap: 0.45rem; }   /* the switch, set apart from the tabs; and, when the tabs drop below it, a little room between the two lines (31 Oct 2026, Ameek) */
.menu-sub .arrange { white-space: nowrap; }   /* by: topic / stage */
.menu-sub .arrange .k { color: var(--muted); }   /* "by:" and the "/" are read, not pressed */
body:not(:has(#r-by-topic:checked)) .menu-sub .by-topic,
body:has(#r-by-topic:checked) .menu-sub .by-stage { display: none; }
.menu-sub .arrange label { color: var(--muted); }   /* the mode NOT in use is grey from the start, like "by:" and the "/" (Ameek, 30 Oct 2026; hover brings it to ink) */
body:has(#r-by-stage:checked) .menu-sub label[for="r-by-stage"],
body:has(#r-by-topic:checked) .menu-sub label[for="r-by-topic"] { background: var(--highlight); color: var(--ink); }   /* the mode in use: ink, on the marker, like an open tab */
body:has(#r-by-topic:checked) .menu-sub .sub[data-for="research"] .tabs { column-gap: 2.2rem; }   /* the topic tabs, set further apart: each is a phrase (30 Oct 2026, Ameek) */
#research .grp:not(:has(.rrow)) { display: none; }   /* the arrangement not in use: its groups are empty */
/* THE CV (30 Oct 2026, Ameek): "about (cv ›)" in the main ribbon — the about tab, then the CV's chip in
   brackets, opening the PDF in a frame card like a paper's (partials/cv-chip.liquid; pinned in the rail:
   breakpoints.liquid). A chip line (.rline) in the ribbon's voice: the tabs' size and floor; the
   brackets grey (read, not pressed); the chip ink with a thin green underline, and grey with the rest of the row
   once a tab is open (Ameek, 30 Oct 2026) */
.menu-main > .cv-chip { font-size: inherit; line-height: inherit; color: var(--muted); margin-bottom: 0.55rem; margin-left: calc(0.45em - 1.5rem); }   /* = the tabs' floor; set close to "about" (the row's gap taken back) */
.menu .cv-chip .mtrig { text-decoration: underline; text-decoration-color: var(--link); text-decoration-thickness: var(--cv-underline, 1.5px); text-underline-offset: var(--underline-offset, 4px); }
.menu .cv-chip { --mark-x: 0.2em; }   /* a narrower highlight here, so the brackets stay clear of it (and of the open "about") */
.menu .cv-chip .k { margin: 0 0.12em; }
.menu .cv-chip .mtrig { padding-top: calc(var(--mark-top) + 0.155em); padding-bottom: calc(var(--mark-bottom) + 0.1em); }   /* its highlight as tall as the tabs' (measured in Chrome and Safari) */
.menu .cv-chip .mtrig::after { display: inline; position: static; line-height: 0; }   /* the arrow as part of the text, so the underline runs under it too (an inline-block would not carry it); line-height 0: the large arrow would make the line taller and lift "cv" off the tabs' baseline */
.menu .cv-chip .marginreader { font-size: var(--stamp-size, 0.7rem); line-height: 1.4rem; }   /* the card's controls as on a paper's card */
.menu .cv-chip .mtrig.m-close { color: var(--ink); }   /* greys with the row once a tab is open (the rule under "THE TABS"), but in ink while its card is open */
@media (hover: hover) { .menu .cv-chip .mtrig:hover { color: var(--ink); } }
/* THE TABS (24 Oct 2026): no underlines — the mono voice is the cue for
   "you can click this" (the ToDo in Y. Design-Research/ideas.md, tried here
   first). With nothing open every tab is ink. Open one and it wears the neon
   marker while the rest of its row turns grey; the mini ribbon that appears
   under it is in ink, so it reads as the live row, and it does the same when
   one of its own tabs is pressed. Hover (only where there is one: no sticky
   hover on phones) is a faint marker and brings a grey tab back to ink. */
.menu a, .menu label { color: var(--ink); text-decoration: none; cursor: pointer; }
.menu-main > label { margin-bottom: 0.55rem; }   /* the chips' distance above the rule — a margin, so the highlight covers the words alone */
:where(body:has(.menu-toggle:checked, .sections > section:target, .sections > section :target)) .menu-main > label,
:where(body:has(.menu-toggle:checked, .sections > section:target, .sections > section :target)) .menu-main > .cv-chip .mtrig,
:where(body:has(.sub-toggle:checked)) .menu-sub label { color: var(--muted); }   /* the rest of a row, once one of its tabs is open (:where keeps these weak: the hover and the open tab win) */
@media (hover: hover) {
  .menu a:hover, .menu label:hover { color: var(--ink); background: var(--highlight-faint); }
}
.menu-toggle { display: none; }
/* which section shows: a pressed chip; else the address; else NONE — the page is the bio and the ribbon until a chip is pressed (pressing it again closes the section: chrome.html) */
.sections > section { display: none; }
body:has(#m-about:checked) #about,
body:has(#m-research:checked) #research,
body:has(#m-academic:checked) #academic,
body:has(#m-data:checked)     #data,
body:has(#m-projects:checked) #projects,
body:has(#m-writing:checked)  #writing,
body:not(:has(.menu-toggle:checked)) .sections > section:is(:target, :has(:target)) { display: block; }
/* the open tab: the highlight, kept while it is open */
body:has(#m-about:checked) .menu label[for="m-about"],
body:has(#m-research:checked) .menu label[for="m-research"],
body:has(#m-academic:checked) .menu label[for="m-academic"],
body:has(#m-data:checked)     .menu label[for="m-data"],
body:has(#m-projects:checked) .menu label[for="m-projects"],
body:has(#m-writing:checked)  .menu label[for="m-writing"],
body:not(:has(.menu-toggle:checked)):has(#about:target) .menu label[for="m-about"],
body:not(:has(.menu-toggle:checked)):has(#research:target, #research :target) .menu label[for="m-research"],
body:not(:has(.menu-toggle:checked)):has(#academic:target, #academic :target) .menu label[for="m-academic"],
body:not(:has(.menu-toggle:checked)):has(#data:target, #data :target)     .menu label[for="m-data"],
body:not(:has(.menu-toggle:checked)):has(#projects:target, #projects :target) .menu label[for="m-projects"],
body:not(:has(.menu-toggle:checked)):has(#writing:target, #writing :target)  .menu label[for="m-writing"] {
  background: var(--highlight); color: var(--ink);
}
/* the mini ribbon shows the row of the shown section (the same three cases) */
body:has(#m-about:checked) .menu-sub .sub[data-for="about"],
body:has(#m-research:checked) .menu-sub .sub[data-for="research"],
body:has(#m-academic:checked) .menu-sub .sub[data-for="academic"],
body:has(#m-data:checked)     .menu-sub .sub[data-for="data"],
body:has(#m-projects:checked) .menu-sub .sub[data-for="projects"],
body:has(#m-writing:checked)  .menu-sub .sub[data-for="writing"],
body:not(:has(.menu-toggle:checked)):has(#about:target) .menu-sub .sub[data-for="about"],
body:not(:has(.menu-toggle:checked)):has(#research:target, #research :target) .menu-sub .sub[data-for="research"],
body:not(:has(.menu-toggle:checked)):has(#academic:target, #academic :target) .menu-sub .sub[data-for="academic"],
body:not(:has(.menu-toggle:checked)):has(#data:target, #data :target)     .menu-sub .sub[data-for="data"],
body:not(:has(.menu-toggle:checked)):has(#projects:target, #projects :target) .menu-sub .sub[data-for="projects"],
body:not(:has(.menu-toggle:checked)):has(#writing:target, #writing :target)  .menu-sub .sub[data-for="writing"] { display: flex; }
/* the masthead at the menu's RIGHT end: the name in bold and a small photo.
   Hidden until the menu has STUCK to the top (the script in chrome.html adds
   .stuck when .menu-mark, just above the menu, has scrolled out); it goes
   back to the top. */
.menu .who { display: none; align-items: flex-end; gap: 0.7rem; margin-left: auto; color: var(--ink); }   /* the menu's own voice (mono, the chips' size); not a link — a reminder of whose page it is, nothing more */
.menu .who span { margin-bottom: 0.55rem; }   /* = the chips' margin: same font, same floor, same baseline */
.menu.stuck .who { display: flex; }
.menu .who img { height: 3rem; width: auto; display: block; margin-bottom: 0.3rem; }   /* the photo clears the rule */
/* ---- THE OTHER PAGES (24 Oct 2026) ----
   A paper, a project, the writings list and the chat's own page open under
   the same ribbon, as the home page's looks once it has stuck: the tabs are
   links home (/#research opens research there), the page's own section is
   marked open and the rest grey, the masthead is always on
   (partials/page-menu.liquid, included by chrome.html on every page but
   home). Their titles take the group headings' voice at the prose size. */
body.face-rl:has(.menu-page) { padding-top: 0; }   /* the ribbon sits where the stuck one does, under the ink rule */
.menu.menu-page { margin-top: 0; margin-bottom: 0.8rem; }
.menu-page .who { display: flex; }
.menu-main > a:not(.who) { margin-bottom: 0.55rem; }   /* the tabs' floor, as for the labels on the home page */
:where(.menu-page:has(a[aria-current])) .menu-main > a:not(.who),
:where(.menu-page:has(a[aria-current])) .menu-main > .cv-chip .mtrig { color: var(--muted); }
/* there the masthead is the way back to the home page: on hover the name
   takes the faint marker (the photo stays as it is) */
.menu a.who:hover { background: none; }
@media (hover: hover) { .menu a.who:hover span { background: var(--highlight-faint); } }
.menu-page .menu-main > a[aria-current] { background: var(--highlight); color: var(--ink); }
article.essay > header h1, h1.page-h { font-size: 1.1rem; line-height: 1.4; font-weight: 600; margin: 0 0 0.4rem; }
article.essay > header .stamp { white-space: normal; }   /* a stage written on two lines for the key column ("Job market / paper") runs on one line here */
/* the chat's own page (/ask/): the ribbon, its title, and the chat (the same
   document the card holds, /ask/card/) filling the rest of the window */
body.face-rl:has(.ask-page) { padding-bottom: 1rem; min-height: 0; }
body:has(.ask-page) main { display: flex; flex-direction: column; height: calc(100vh - var(--top-rule, 4px) - 1rem); height: calc(100dvh - var(--top-rule, 4px) - 1rem); }
.ask-page { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ask-page .sr-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }   /* the chat's own head shows the name (26 Oct 2026); this one is for screen readers */
.marginframe.mapp .newtab { grid-column: 2; }   /* the chat card: "open ↗" right after "✕ close" (no download in between) */
/* the connect page (/ask/connect/): the rows' grammar; an address or a command
   to copy sits in mono in a hairline box, with its "copy" chip */
.connect .rlist { margin-top: 0.8rem; }
.connect-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 1rem; }
button.back { font: inherit; font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink); background: none; border: 0; cursor: pointer; padding: var(--mark-top) var(--mark-x) var(--mark-bottom); margin: calc(-1 * var(--mark-top)) calc(-1 * var(--mark-x)) calc(-1 * var(--mark-bottom)); }
@media (hover: hover) { button.back:hover { background: var(--highlight-faint); } }
/* THE LIBRARY (/ask/library/, 27 Oct 2026): the letters in the key column; each paper a line of a
   reference list — "Authors (year)" in ink, the title in grey serif, a hanging indent — the job
   market paper in its place, in semi-bold and marked by a tag (mono behind the green rule) */
.lib-papers { list-style: none; margin: 0; padding: 0; }
.lib-papers li { margin: 0 0 0.45rem; padding-left: 1.2em; text-indent: -1.2em; font-size: 0.95rem; line-height: 1.4; }
.lib-papers .lib-t { color: var(--muted); }
.lib-own .lib-au { font-weight: 600; }
.lib-tag { display: inline-block; text-indent: 0; margin-left: 0.35em; padding-left: 0.45em; border-left: 2px solid var(--link); font-family: var(--font-mono); font-size: var(--stamp-size, 0.7rem); color: var(--ink); white-space: nowrap; }
.lib-note { margin-top: 1.2rem; font-size: 0.85rem; color: var(--muted); }
.addr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.8rem; margin: 0; }
.addr code { font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.4; border: 1px solid var(--hairline); padding: 0.15rem 0.45rem; }   /* wraps only at the break points the page marks (after //, before . and /) */
button.copy { font: inherit; font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink); background: none; border: 0; padding: 0 0.15em; cursor: pointer; }
@media (hover: hover) { button.copy:hover { background: var(--highlight-faint); } }
.ask-page iframe { flex: 1; min-height: 24rem; width: calc(100% + 1.7rem); margin: 0 -0.85rem; border: 0; display: block; }   /* wider by the chat's own side padding (ask.css, in a frame: 0.85rem), so its words line up with the title and the ribbon */
/* while a section is open, the sections area is never shorter than the window:
   a short section cannot pull the stuck menu back down. With none open the
   page simply ends at the ribbon. */
body:has(.menu-toggle:checked) .sections,
body:has(.sections > section:target, .sections > section :target) .sections { min-height: calc(100vh - 7rem); }
.sections > .rs, .sections h3.rs-sub, .sections .rrow[data-address] { scroll-margin-top: 7.3rem; }   /* a section, a sub-heading or a row with an address (/#job-market-paper) reached by it lands below the sticky menu */
.sections > .rs { padding-top: 0.8rem; }
.rs-about p { max-width: none; }   /* the about tab: the bio's continuation, in the body voice */
/* THE TYPE SCALE (23 Oct 2026) — two families, six sizes, one line spacing:
   serif 2.2rem name · 1.1rem prose · 1rem row titles and group headings
   (headings bold) · 0.9rem card text; mono 0.8rem navigation and secondary
   lines · 0.75rem tags, chips and dates. Bold only for the name, group
   headings, the job-market / award tags and "now"; no italics. Prose and
   cards share one line spacing, close to the rows' 1.4 line grid. */
.rs-hero > p, .rs-about p, .marginbox, .marginreader .mr-box { line-height: 1.45; }
/* a plain document page ("how ask works"): a table of specs, spaced like a paragraph */
.doc table.specs { margin: 0.4rem 0 1.4rem; border-collapse: collapse; }
.doc table.specs td { padding: 0.15rem 1.5rem 0.15rem 0; vertical-align: baseline; }
.doc table.specs thead { display: none; }
.sections > .rs.rs-about { padding-top: 0; }   /* the about tab: its paragraph starts close under the menu */
.rs-about > p:first-child { margin-top: 0; }

/* the "now" line under the bio: one mono sentence for the season */
.now {   /* the season's line, in the job-market stamp's accent: the green rule runs down both lines */
  display: grid; grid-template-columns: auto 1fr; column-gap: 0.9em; align-items: baseline;   /* the panel's full width: the text wraps with it */
  color: var(--muted);
  border-left: 3px solid var(--link); padding-left: 0.5em; margin: 1.4rem 0 0;
}
.now-k { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink); font-weight: 700; }   /* a label: mono, bold, lowercase, like the job market paper's tag */
.now-t { font-size: 1rem; line-height: 1.45; }   /* a sentence, so serif (26 Oct 2026); its link is mono */

/* The window-width switches (the card beside its link vs below it, the ⌄
   arrow) are generated from the theme.css knobs — see breakpoints.liquid
   (beside the css folder). */

/* ---- sections ---- */
.rs-hero { padding-top: 0; }
.rs > h2 { margin-top: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 0.8rem; }
.rs-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;   /* mono-micro */
  font-weight: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.rs-count a { color: var(--muted); }
.kicker {
  font-family: var(--font-mono);
  font-size: 0.7rem;   /* mono-micro */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.25rem;
}
h3.rs-sub {   /* a group inside a section (research: working papers / works in progress / …): the serif at the titles' size, set apart by weight alone */
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin: 1.2rem 0 0.3rem;   /* a group heading sits close to the rows above it (they already carry --row-between / --paper-between below) */
}
.rs > h3.rs-sub:first-child, .rs > :first-child + h3.rs-sub { margin-top: 0.4rem; }
/* ---- the hero: the photo beside the name, FIXED at every window size ---- */
/* The photo keeps --portrait-width (theme.css) and the name keeps its size
   whatever the window does; on a narrow phone the name may wrap to two
   lines, nothing else moves. The image is Ameek's Lightroom edit with the
   background made transparent and NOTHING else touched — it sits straight
   on the paper: no frame, no corner radius, no forced aspect box, no blend. */
.hero { align-items: center; gap: 1.5rem; margin: 0.25rem 0 2rem; }
figure.portrait.hero-portrait {        /* outranks exploratory's figure.portrait rules */
  flex: 0 0 var(--portrait-width, 11rem);
  width: var(--portrait-width, 11rem);
  margin: 0;
}
figure.portrait.hero-portrait img {
  aspect-ratio: auto;
  width: 100%;
  height: auto;
  background: none;
  object-fit: contain;
  border: 0;
  border-radius: 0;
}
.rs-hero h1 { font-size: 2.2rem; margin: 0 0 0.45rem; }   /* the one larger h1: the name */
.affil { font-size: 1rem; line-height: 1.5; margin: 0 0 0.45rem; color: var(--muted); }   /* read, not clicked: serif and grey (the email under it is a link: mono) — 26 Oct 2026 */
/* a link inside serif prose (the bio, the about tab, a page's text, a card)
   switches to mono a size down, so it sits level with the words around it */
.rs-hero > p:not(.meta):not(.now):not(.affil) a, .now-t a, .rwith a, .rs-about p a, .connect > p a, article.essay > p:not(.meta) a, .rtext a, .marginbox a { font-size: 0.85em; }
.rs-hero .meta { margin: 0; }

/* ---- rows: mono key on the left, body on the right ---- */
ul.rlist { list-style: none; padding: 0; margin: 0; }
.rrow {
  display: grid;
  grid-template-columns: var(--key-width, 10.5rem) minmax(0, 1fr);  /* date + a two-line boxed stage fit in the key column */
  gap: 0 var(--key-gap, 1rem);
  align-items: baseline;   /* the date's baseline meets the title's */
  padding: var(--row-between, 0.8rem) 0;   /* no rules between entries: spacing does the separating (between rows: twice this) */
}
.rkey {
  font-family: var(--font-mono);
  font-size: 0.8rem;   /* mono-meta */
  color: var(--muted);
  white-space: nowrap;
  padding-top: 0;
}
.rtitle { font-size: 1rem; line-height: 1.4; margin: 0; }   /* small-body */
/* A title reached by a link (/#job-market-paper: the "now" line, the about
   tab, a shared address) FLASHES: the faint marker comes up behind its words
   and fades (24 Oct 2026; the script in chrome.html adds .flash). The padding
   reaches a hair past the words, line by line; the margin takes it back, so
   nothing moves. */
.rt { -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0.05em 0.15em; margin: 0 -0.15em; }
.rt.flash { animation: title-flash 3.5s ease-out; }   /* 27 Oct 2026 (Ameek): longer (was 2.2 s) and deeper (--highlight-flash, theme.css; was the hover's faint marker) */
@keyframes title-flash {
  0% { background-color: transparent; }
  8%, 55% { background-color: var(--highlight-flash); }
  100% { background-color: transparent; }
}
.rline {
  font-family: var(--font-mono);
  font-size: var(--stamp-size, 0.7rem);   /* the chips wear the stamp's size (theme.css) */
  color: var(--muted);
  margin: 0;
  line-height: 1.4rem;   /* the title's line box: the chips sit on the same grid as a title's second line */
}
.rtext { font-size: 1rem; line-height: 1.45; margin: 0.2rem 0 0; }   /* small-body */
.rtext p { margin: 0; }
/* ---- paper rows ---- */
/* Key column: the date, with the stage as a boxed stamp under it. Body:
   the title in serif running straight into the coauthors in mono, then a
   line of "PDF · abstract ›" (PDF only when the paper has one), both
   underlined like links; the › becomes ⌄ on windows where
   the abstract opens below instead of in the margin. Every paper block
   is the same height (four title lines) however long its title. */
.rkey { white-space: normal; }
.rdate { display: block; white-space: nowrap; line-height: 1.4rem; margin: 0; font-size: var(--date-size, 0.7rem); }   /* one title line tall: the stamp starts on line 2 */
/* the stage under the date: no box — a short ink rule to its left marks
   it as a label (style C of the 21 Oct comparison; alternatives noted in
   ideas.md). Same lowercase mono as the date, first letter capitalised;
   a "\n" in the stage breaks it onto two lines. */
.rkey .stamp + .stamp { margin-top: 0.2rem; }
.rkey .stamp {
  display: block;          /* several stamps (a project's funders) stack, one per line */
  width: fit-content;
  max-width: 100%;
  white-space: pre-line;   /* a "\n" in the stage text breaks the line */
  text-align: left;
  line-height: 1.4;
  color: var(--ink);
  border: 0;
  border-left: 3px solid var(--link);   /* the same green as the link underlines */
  border-radius: 0;
  padding: 0 0 0 0.5em;
  font-size: var(--stamp-size, 0.7rem);   /* theme.css */
  margin-top: var(--stamp-lift, 0.25rem);   /* lands its first baseline on the title's second line */
}
.rkey .stamp::first-letter { text-transform: uppercase; }
.rkey .stamp.jmp, .rkey .stamp.strong { font-weight: 700; }   /* the job market paper; an award */   /* the job market paper's stamp, set apart from ordinary stages */
/* a paper's date lives INSIDE its stamp, greyed, under the tag — the green
   rule runs down the whole block */
.stamp .when { display: block; font-size: var(--date-size, 0.7rem); font-weight: normal; color: var(--muted); margin-top: 0.15rem; white-space: nowrap; }
/* the abstract card opens BESIDE its link, centred on it: absolutely
   positioned, so it pins to the line of the "abstract ›" that opened it
   (the exploratory face keeps its window-pinned reader). It sizes to its
   text and scrolls inside only when taller than the window. */
.rwith { display: block; font-size: 0.9rem; line-height: 1.4rem; color: var(--muted); }   /* read (names, a department, a paper's title), so serif (26 Oct 2026) */   /* co-authors / department / place: its own line under the title, on the grid */
/* a project's grants: one mono line each — the amount as the figure, the scheme, its years */
.grants { list-style: none; margin: 0.15rem 0 0; padding: 0; font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.7; color: var(--muted); }
.grants .figure { margin-right: 0.45em; }
.grants .gy { margin-left: 0.7em; color: var(--muted); }
.rline .mtrig {   /* a chip that opens a card: mono, ink, no underline; its arrow says where the card opens */
  font-size: inherit;
  color: var(--ink);
  word-spacing: calc(var(--arrow-gap, 0.1em) - 0.6em);   /* the label text ends in a space (mono spaces are ~0.6em): shrink it to the gap knob */
}
.rline .mtrig::before { content: none; }
.rline .mtrig::after {
  content: "›";
  font-size: var(--arrow-size, 1em);
  display: inline-block;   /* lifted as a box: a lift never grows the line */
  position: relative;
  top: calc(-1 * var(--arrow-lift, 0em));
}
.rline .m-direct { display: none; }   /* the frame's plain-link twin: phones only (mobile.css) */
/* THE MARKER'S ROOM (24 Oct 2026, Ameek: the highlight hugged the words):
   a highlight reaches past the words by --mark-x sideways, --mark-top
   above and --mark-bottom below (theme.css); negative margins take the room back, so no
   word moves. Links and chips in a line of text: */
/* a link inside a sentence keeps the sentence's colour (base.css, LINKS; 27 Oct 2026) */
.now a, .rs-hero > p:not(.meta) a, .rwith a, .rs-about p a, .connect > p a, article.essay > p a, .rtext a, .marginbox a { color: inherit; }
.mtrig, .rline a, .now a, .meta a, .mframes .yr, .margin-close span, button.copy,
.rs-hero > p a, .rs-about p a, .connect > p a, article.essay > p a, .rtext a, .marginbox a {
  padding: var(--mark-top) var(--mark-x) var(--mark-bottom);
  margin: calc(-1 * var(--mark-top)) calc(-1 * var(--mark-x)) calc(-1 * var(--mark-bottom));
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* these had a sliver of padding of their own (0.15em): it stays theirs */
.mtrig:not(.rline .mtrig), button.copy { margin-left: calc(0.15em - var(--mark-x)); margin-right: calc(0.15em - var(--mark-x)); }
/* things a line tall already (the ribbon's tabs, the masthead's name, a
   frame card's controls): the room sideways only, their other margins kept */
.menu-main > label, .menu-main > a:not(.who), .menu-sub label:not(.marginreader label), .menu a.who span, .marginframe .dl, .marginframe .newtab {
  padding-left: var(--mark-x); padding-right: var(--mark-x);
  margin-left: calc(-1 * var(--mark-x)); margin-right: calc(-1 * var(--mark-x));
}
/* …and a touch more room below the letters than the line gives them (theme.css, --mark-drop) */
.menu-main > label, .menu-main > a:not(.who), .menu a.who span { padding-bottom: var(--mark-drop); margin-bottom: calc(0.55rem - var(--mark-drop)); }
.menu-sub label:not(.marginreader label) { padding-bottom: var(--mark-drop); margin-bottom: calc(-1 * var(--mark-drop)); }
/* ---- paper rows (research): the key column holds the STAMP alone, no date
   (Ameek, 22 Oct 2026) — a labelled left margin; the title column stays clean ---- */
.rkey > .stamp:first-child { margin-top: 0; }   /* no date above it: the stamp sits on the title's line */
.rrow.paper { padding: var(--paper-between, 0.6rem) 0; }            /* between papers: twice this */
.rrow.paper .rline { margin-top: var(--paper-within, 0.45rem); }     /* title → chips */
.rrow.paper .rbody { min-height: 0; }                                /* no forced four-line block */

/* a card's "sample numbers" marker: the one thing on the page that says the data is not real yet */
.marginbox .sample { color: var(--muted); font-style: italic; }
.marginbox .cap { display: block; color: var(--muted); font-size: 0.85em; margin-bottom: 0.35rem; }   /* a card's caption: what the numbers are */
.marginbox a { white-space: nowrap; }

/* ---- the three annotation voices ---- */
.stamp {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--stamp-size, 0.7rem);   /* theme.css */
  letter-spacing: 0.02em;
  text-transform: none;   /* lowercase, as written */
  color: var(--ink);
  border: 0;
  border-left: 3px solid var(--link);   /* the ONE stamp style everywhere: a green left rule, no box */
  padding: 0 0 0 0.5em;
  line-height: 1.4;
  white-space: pre-line;
}
.stamp.neon, .stamp.jmp, .stamp.strong { font-weight: 700; }   /* a badge (an award, "new"): the stamp in bold. No neon — the full marker means "open" (24 Oct 2026) */
.figure {   /* a number on the chip line (a rating, an amount): emphasis, so a tag — ink mono behind the green left rule */
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  border-left: 3px solid var(--link);
  padding-left: 0.4em;
}
/* a page's tags (a paper, a project): stamps in a row under the title */
.tagline { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; margin: 0.55rem 0 0; }
.tagline .stamp { line-height: 1.4; }

/* ---- the scroll ribbon (live face) ---- */
/* A frozen slice of the panel: once the photo and name have scrolled off
   the top, a solid ribbon slides in — air above, a tiny photo and the
   name, a blank band below, a hairline rule at the bottom — the same
   width as the panel, carrying the panel's edge rules. Driven by a
   scroll-driven animation (Chrome, Edge, Safari 26+); elsewhere it
   simply never appears. */
.scroll-ribbon {
  position: fixed;
  top: var(--top-rule, 0px);
  left: var(--page-left);
  width: var(--panel);
  z-index: 60;
  height: var(--ribbon-height, 6rem);
  display: flex;
  align-items: center;
  padding-left: var(--column-inset, 1.25rem);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-top: 0;
  font-family: var(--font-body);
  font-weight: bold;
  font-size: 1.1rem;
  color: var(--ink);
  opacity: 0;
  translate: 0 -100%;
  pointer-events: none;
}
.scroll-ribbon img { height: var(--ribbon-photo, 3.2rem); width: auto; display: block; }
/* the name: a clear gap after the photo, a little larger than before */
.scroll-ribbon span { margin-left: 1.6rem; font-size: 1.3rem; }
@supports (animation-timeline: view()) and (timeline-scope: --x) {
  body.face-rl { timeline-scope: --hero; }
  body.face-rl .hero { view-timeline-name: --hero; }
  .scroll-ribbon { animation: ribbon-in linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
  @keyframes ribbon-in { from { opacity: 0; translate: 0 -100%; } to { opacity: 1; translate: 0 0; } }
}

/* ---- margin FRAMES: a whole PDF or page in a big card ---- */
/* Header row: ✕ close on the left, "open ↗" on the right; the frame fills
   the rest. Wide windows pin it to the window's right edge, as tall as
   the window allows (see breakpoints.css.liquid); narrow windows open it
   below the link like every other card, three-quarters of the window
   tall. */
input.margin-toggle:checked + .marginreader.marginframe { overflow: hidden; }
input.margin-toggle:checked + .marginreader.marginframe .mr-box {
  display: grid;
  grid-template-columns: auto auto 1fr;   /* ✕ close · ⤓ download · open ↗ */
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.35rem 1.75rem;
  align-items: baseline;
  padding: var(--frame-inset, 0.5rem);   /* theme.css: the margin around the viewer */
  overflow: hidden;
}
input.margin-toggle:checked + .marginreader.marginframe .margin-close { grid-column: 1; position: static; margin: 0; padding: 0; align-self: baseline; }   /* outranks the text cards' sticky, padded close */
.marginframe .dl, .marginframe .newtab {
  justify-self: start;
  align-self: baseline;
  line-height: inherit;
  font-family: var(--font-mono);
  font-size: 0.7rem;   /* mono-micro, like ✕ close */
  color: var(--ink);   /* clickable, so ink */
  text-decoration: none;
}
.marginframe .dl { grid-column: 2; }
.marginframe .newtab { grid-column: 3; }
.marginframe .arr { font-size: 1.25em; }
/* the frame card with a choice of documents: ✕ close · years · open ↗ —
   every year is a link (ink); the one in the frame wears the full marker */
.mframes .yrs { grid-column: 2; justify-self: start; align-self: baseline; font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); }
.mframes .yr { color: var(--ink); }
.mframes .yr.on, .mframes .yr.on:hover { background: var(--highlight); }
/* an app card (the "ask" chat) is taller than a document card: a conversation needs the room */
.marginframe.mapp { --frame-ratio: 1.6; }   /* a little shorter than before (1.8), 26 Oct 2026 */
.marginframe iframe {
  grid-column: 1 / -1;
  align-self: stretch;     /* fills the row under the top line; NOT height: 100% — Safari resolves that against the whole card and the frame runs past its bottom */
  width: 100%;
  height: auto;
  min-height: 0;
  border: 0;
  border-radius: 4px;
  background: #ffffff;
}