/* 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 top bar (narrow windows) sticks under the ribbon ---- */
@media (min-width: 31rem) {
  header.site { margin-left: calc(-1 * var(--column-inset, 1.25rem)); padding-left: var(--column-inset, 1.25rem); }
}
header.site {
  position: sticky;
  top: var(--top-rule, 4px);
  z-index: 40;
  background: var(--bg);
  margin: 0 -1.25rem 2.9rem;
  padding: 0.55rem 1.25rem 0.65rem;
}

/* ---- the sidebar card (hidden until the window is wide enough) ---- */
.sb { display: none; }
.sb .site-name { display: block; font-size: 1rem; margin-bottom: 0.9rem; }
.sb-nav {
  display: grid;
  gap: 0.28rem;
  margin-bottom: 1rem;
  padding-top: 0.2rem;
}
.sb-nav a { color: var(--ink); text-decoration: none; width: fit-content; }
.sb-nav a:hover { background: var(--highlight); }
.sb-nav a.current { box-shadow: inset 0 -0.45em 0 var(--highlight); }
.sb-links {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  border-top: 1px solid var(--hairline);
  padding-top: 0.8rem;
}
.sb-links a { color: var(--muted); text-decoration: none; width: fit-content; }
.sb-links a:hover { background: var(--highlight); color: var(--ink); }

/* ---- the current section, marked in BOTH navs ---- */
/* 1. everywhere: the clicked anchor keeps the marker (:target). */
body:has(#about:target)    .rnav a[href$="#about"],
body:has(#research:target) .rnav a[href$="#research"],
body:has(#awards:target)   .rnav a[href$="#awards"],
body:has(#data:target)     .rnav a[href$="#data"],
body:has(#teaching:target) .rnav a[href$="#teaching"],
body:has(#talks:target)    .rnav a[href$="#talks"],
body:has(#writings:target) .rnav a[href$="#writings"] {
  box-shadow: inset 0 -0.45em 0 var(--highlight);
}
/* 2. where scroll-driven animations exist: the marker follows the scroll.
   Each section owns a view timeline; a "reading line" sits a quarter of
   the way down the window; a nav item is marked while its section
   crosses that line. (Sections use padding, not margins, so their boxes
   abut and exactly one is always current.) */
@supports (timeline-scope: --x) {
  body:has(#about:target)    .rnav a[href$="#about"],
  body:has(#research:target) .rnav a[href$="#research"],
  body:has(#awards:target)   .rnav a[href$="#awards"],
  body:has(#data:target)     .rnav a[href$="#data"],
  body:has(#teaching:target) .rnav a[href$="#teaching"],
  body:has(#talks:target)    .rnav a[href$="#talks"],
  body:has(#writings:target) .rnav a[href$="#writings"] { box-shadow: none; }
  body { timeline-scope: --s-about, --s-research, --s-awards,
                         --s-data, --s-teaching, --s-talks, --s-writings; }
  .rs { view-timeline-inset: 25% 75%; }
  #about    { view-timeline-name: --s-about; }
  #research { view-timeline-name: --s-research; }
  #awards   { view-timeline-name: --s-awards; }
  #data     { view-timeline-name: --s-data; }
  #teaching { view-timeline-name: --s-teaching; }
  #talks    { view-timeline-name: --s-talks; }
  #writings { view-timeline-name: --s-writings; }
  .rnav a[href$="#about"]    { animation: spy linear; animation-timeline: --s-about; }
  .rnav a[href$="#research"] { animation: spy linear; animation-timeline: --s-research; }
  .rnav a[href$="#awards"]   { animation: spy linear; animation-timeline: --s-awards; }
  .rnav a[href$="#data"]     { animation: spy linear; animation-timeline: --s-data; }
  .rnav a[href$="#teaching"] { animation: spy linear; animation-timeline: --s-teaching; }
  .rnav a[href$="#talks"]    { animation: spy linear; animation-timeline: --s-talks; }
  .rnav a[href$="#writings"] { animation: spy linear; animation-timeline: --s-writings; }
  @keyframes spy { from, to { box-shadow: inset 0 -0.45em 0 var(--highlight); } }
}

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

/* ---- sections ---- */
.rs { padding-top: 2.9rem; scroll-margin-top: 6.5rem; }   /* below the sticky bar */
.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 {
  font-family: var(--font-mono);
  font-size: 0.7rem;   /* mono-micro */
  font-weight: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.45rem 0 0.2rem;
}
/* ---- 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 3.6rem; }   /* generous air before the bio */
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-family: var(--font-mono); font-size: 0.8rem; line-height: 1.6; margin: 0 0 0.5rem; }
.rs-hero .meta { margin: 0; }

/* ---- rows: mono key on the left, body on the right ---- */
ul.rlist { list-style: none; padding: 0; margin: 0 0 0.6rem; }
.rrow {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);  /* date + a two-line boxed stage fit in the key column */
  gap: 0 1rem;
  padding: 0.6rem 0;   /* no rules between entries: spacing does the separating */
}
.rkey {
  font-family: var(--font-mono);
  font-size: 0.8rem;   /* mono-meta */
  color: var(--muted);
  white-space: nowrap;
  padding-top: 0.2rem;
}
.rtitle { font-size: 1rem; line-height: 1.4; margin: 0; }   /* small-body */
.rline {
  font-family: var(--font-mono);
  font-size: 0.8rem;   /* mono-meta */
  color: var(--muted);
  margin: 0.2rem 0 0;
  line-height: 1.7;    /* room for the chips */
}
.rtext { font-size: 1rem; line-height: 1.45; margin: 0.2rem 0 0; }   /* small-body */
.rtext p { margin: 0; }
@media (max-width: 640px) and (hover: none) and (pointer: coarse) {   /* phones stack the rows; desktop windows freeze at --page-min instead */
  .rrow { grid-template-columns: minmax(0, 1fr); }
  .rkey { padding-top: 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; margin-bottom: 0.3rem; }
/* 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 {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  white-space: pre-line;
  text-align: left;
  line-height: 1.4;
  color: var(--ink);
  border: 0;
  border-left: 2px solid var(--ink);
  border-radius: 0;
  padding: 0 0 0 0.5em;
}
.rkey .stamp::first-letter { text-transform: uppercase; }
/* 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 { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); margin-left: 0.6em; }   /* a clear gap after the title */
.rrow.paper .rbody { min-height: 5.6rem; }   /* 4 × the title's 1.4rem line */
.rline .mtrig {
  font-size: inherit;
  padding: 0;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--link);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}
.rline .mtrig::before { content: none; }
.rline .mtrig::after { content: "\00a0›"; }
/* ---- the three annotation voices ---- */
.stamp {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8rem;   /* mono-meta — the same size as "abstract" */
  letter-spacing: 0.02em;
  text-transform: none;   /* lowercase, as written */
  color: var(--ink);
  border: 1px solid var(--muted);
  border-color: color-mix(in srgb, var(--muted) 55%, transparent);
  border-radius: 3px;
  padding: 0 0.4em;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: 0.08em;
}
.stamp.neon { background: var(--highlight); border-color: transparent; }
.figure {
  font-family: var(--font-body);
  font-size: 1rem;     /* small-body */
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* tags on résumé-mode piece pages are plain chips (no tag index here) */
span.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;   /* mono-micro */
  color: var(--muted);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 0 0.45em;
  margin-right: 0.3em;
}

/* ---- 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:not(.has-sidebar) { timeline-scope: --hero; }
  body.face-rl:not(.has-sidebar) .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; } }
}