/* =========================================================
   Research highlight pages — shared stylesheet.
   Loaded in addition to site.css from each
   ResearchPages/*.html file.
   ========================================================= */

/* ---- page frame ---------------------------------------- */
.rp-wrap{
  max-width: 1080px;
  margin: 0 auto;
  /* The gutter is a variable because .rp-toc reaches into it with a negative
     margin, and the two must stay equal at every breakpoint or the rail hangs
     off the page and opens a horizontal scrollbar. */
  --rp-pad: 56px;
  padding: 24px var(--rp-pad) 0;
  /* The reading column. Body paragraphs, figures, captions, the pull-quote, the
     citation panel and the sibling nav all measure against this one value, so
     the narrative keeps a single right edge instead of six. Held here rather
     than in :root because research-page.css is loaded on every page of the
     site, and this only means anything inside .rp-wrap. */
  --rp-col: 820px;
}

/* ---- top-right nav block (back link + sibling papers) -- */
/* Narrow, and pushed out of the text column into the page gutter: the negative
   right margin is exactly --rp-pad, so the rail's right edge lands on .rp-wrap's
   outer edge and it reads as marginal apparatus rather than as a block competing
   with the header for the same column.

   It stays a float rather than becoming a positioned rail like .rs-toc on
   Publications. That one is pure convenience over a short page; this
   one carries the only "back to Publications" link at the top of the
   page, and a positioned version would need ~1424px of viewport and vanish
   below it. In flow it survives every width. */
.rp-toc{
  float: right;
  width: 188px;
  margin: 0 calc(-1 * var(--rp-pad)) 20px 32px;
  font-family: 'Inter', sans-serif;
}
/* Set down from 11px/.16em: at that size the back link measured ~211px and
   wrapped inside the narrower rail. 10px/.10em brings it to ~177px, so it holds
   one line and also sits quieter than the .h label below it. */
.rp-toc .back{
  display: inline-block;
  font-size: 10px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  transition: color .15s;
}
.rp-toc .back:hover{ color: var(--sage); }
.rp-toc .h{
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 500;
  margin: 14px 0 8px;
}
.rp-toc .list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rp-toc .list a{
  display: block;
  padding: 10px 12px;
  border-radius: 3px;
  text-decoration: none;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  background: var(--cream);
  transition: background .15s, border-color .15s, color .15s;
}
.rp-toc .list a:hover{
  background: var(--cream-2);
  border-color: var(--sage);
}
.rp-toc .list .meta{
  display: block;
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 3px;
}
.rp-toc .list .ti{
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  line-height: 1.25;
  color: var(--ink);
  text-wrap: balance;
}
.rp-toc .list .current a,
.rp-toc .list a[aria-current="page"]{
  background: var(--sage);
  border-color: var(--sage);
  cursor: default;
}
/* The fill below is var(--sage), which dark mode rebinds from green to gold, so
   a hardcoded rgba(247,243,232,.7) left this label at 1.6:1 there. Off the theme
   token instead, and at .85 rather than .7: composited on the fill that measures
   4.7:1 in light and 6.4:1 in dark, where .7 stayed under AA in both. */
.rp-toc .list .current .meta,
.rp-toc .list a[aria-current="page"] .meta{ color: rgba(var(--cream-rgb),.85); }
.rp-toc .list .current .ti,
.rp-toc .list a[aria-current="page"] .ti{ color: var(--cream); }

/* ---- header ------------------------------------------- */
/* 580px is kept on purpose, and is not the same kind of number as --rp-col. A
   56px H1 wants a short measure — this is about 26 characters a line — and the
   lede at 22px lands near 66, both textbook. Widening it to match the narrative
   column would make the type worse, not better.

   What did read as wrong was the rule that used to close this block: it stopped
   at 580px while every rule below it spans 820px, and a misaligned *rule* is
   visible in a way a ragged text block never is. It could not simply be widened,
   because .rp-toc floats top-right and the two collide across a range of
   viewport widths. So the rule moved down to .rp-meta, which clears the float
   vertically and can span the column properly.

   That also puts the break in the right place. Title, lede, authors and DOI are
   one unit — the paper's identity — and the old rule cut through the middle of
   it, separating the lede from its own author line. */
.rp-header{
  margin: 0;
  width: fit-content;
  max-width: 580px;
}
.rp-header .titles{ min-width: 0; }
.rp-header .eyebrow{
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 500;
  margin-bottom: 18px;
}
.rp-header .eyebrow .dot{
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--rule); display: inline-block;
}
.rp-header .eyebrow > span{ white-space: nowrap; }
.rp-header .eyebrow .prize{
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--gold-text);
  border: 1px solid rgba(var(--gold-rgb),.35);
  background: var(--gold-fill);
  padding: 3px 8px; border-radius: 999px;
  letter-spacing: .14em;
  white-space: nowrap;
}
.rp-header h1{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 56px;
  line-height: 1.04;
  letter-spacing: .005em;
  color: var(--ink);
  margin: 0 0 24px;
  text-wrap: balance;
}
.rp-header .lede{
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
}
.rp-header .lede em{ color: var(--sage); font-style: italic; }

/* ---- author line + DOI button -------------------------- */
/* Closes the masthead. The cap is what the rule is for — it is the one block
   here that could otherwise have run the full 968px wrap, and it now ends level
   with every figure, caption and panel below it. */
.rp-meta{
  margin: 32px 0 0;
  max-width: var(--rp-col);
  padding-bottom: 30px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--ink-3);
}
.rp-meta .authors strong{ color: var(--ink-2); font-weight: 500; }
.rp-meta .doi-btn{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Inter', sans-serif; font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--rule);
  padding: 8px 14px; border-radius: 999px;
  white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.rp-meta .doi-btn:hover{
  border-color: var(--sage);
  color: var(--sage);
  background: var(--cream-2);
}
.rp-meta .doi-btn .arrow{ opacity: .65; }

/* An .rp-glance "at-a-glance" tile was styled here and never used by any page.
   Removed rather than left dormant: this stylesheet is in _quarto.yml's global
   `css:` list, so every rule in it downloads on every page of the site. Recover
   from git if the tile is ever wanted — writing the three sets of summary
   content is the real work, not the CSS. */

/* ---- narrative body ----------------------------------- */
.rp-body{
  margin: 64px 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 64px;
}
.rp-body .section{
  display: block;
}
.rp-body .section .head{
  margin-bottom: 20px;
}
.rp-body .section .num{
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
/* No max-width here: a character cap forced every section heading onto two
   lines even when it comfortably fits one. Headings wrap only when the column
   itself is too narrow, and `balance` then splits them evenly. */
.rp-body .section h2{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.15;
  margin: 0;
  color: var(--ink);
  letter-spacing: .005em;
  text-wrap: balance;
}
.rp-body .section .text > *:first-child{ margin-top: 0; }
/* The measure is capped on the paragraphs, not on `.text`: figures and the
   pull-quote are siblings inside the same container, and a narrower parent
   would shrink them too (max-width is a ceiling a child cannot exceed).

   --rp-col rather than a `ch` figure, because the number that matters is the
   figure width this has to line up with; a character cap would drift away from
   it the moment the font-size moved. At 21px Cormorant (~0.39em average letter,
   narrow for a serif) 820px runs about 100 characters, past the usual 90-odd
   ceiling — carried by the 1.65 leading and by these sections being short.
   Uncapped it would run the full 968px column, about 118. */
.rp-body .section .text p{
  font-family: 'Cormorant Garamond', serif;
  font-size: 21px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 20px;
  max-width: var(--rp-col);
  text-wrap: pretty;
}
.rp-body .section .text p:last-child{ margin-bottom: 0; }
.rp-body .section .text em{ color: var(--sage); font-style: italic; }

/* drop cap for the first paragraph of the first section */
.rp-body .section:first-child .text > p:first-child::first-letter{
  font-family: 'Cormorant Garamond', serif;
  float: left;
  font-size: 58px;
  line-height: .9;
  padding: 6px 10px 0 0;
  color: var(--sage);
  font-weight: 500;
}

/* ---- figures ------------------------------------------ */
/* Every figure on every highlight page renders at one width, left-aligned with
   the body text, so a column of figures reads as a single sequence rather than
   as art of varying importance. The cap is on the <figure>, not the <img>, so
   the caption's rule stays flush with the image edge. */
.rp-fig{
  margin: 28px 0 8px;
  max-width: var(--rp-col);
}
.rp-fig img{
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: var(--cream-2);
  border-radius: 2px;
}
/* Every figure here is a plot exported on white, which glares against the
   #0f1a1c ground in dark mode. Same idea as the poster thumbnails in talks.css,
   but not the same numbers: those are decorative and get brightness(.82) with
   hover to restore, while these are the content of the page and have to stay
   readable at rest — there is no hover on touch.

   brightness() and not opacity: brightness scales each channel, so white falls
   to grey while black stays black and the contrast inside the plot survives.
   Opacity blends toward the dark page instead, which darkens the whites AND
   lifts the blacks, flattening the figure.

   The sepia is the part doing the real work. This palette is warm throughout —
   #0f1a1c ground, #e9e0c8 ivory text — so a plot's neutral white reads as
   foreign even once it is dim. A tenth of a step pulls it into the ivory family.
   It does tint the data colours slightly, so it is deliberately kept small. */
:root[data-theme="dark"] .rp-fig img{
  filter: brightness(.86) sepia(.10) saturate(.95);
}
/* The caption shares the column, so it ends flush with the figure it belongs to
   instead of stopping ~330px short of it. It previously carried its own 62ch
   measure on the argument that a caption running the figure's full width reads
   badly — true in general, but these captions are 120-160 characters, which is
   one or two lines at this width, and the cost of a long measure is losing your
   place on the line return. The rule and the indent already mark them as
   secondary, so they do not also need the lowest-contrast ink.

   If a caption ever grows past a few lines, put a `ch` cap back. */
.rp-fig figcaption{
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-top: 12px;
  padding-left: 14px;
  border-left: 2px solid var(--rule);
  max-width: var(--rp-col);
}
.rp-fig figcaption .lbl{
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: .04em;
  margin-right: 8px;
}

/* ---- pull-quote / highlight box ----------------------- */
/* Shares the column too. Left at 66ch it would have been the one element
   stopping short of the common right edge, and as a filled box with a border
   that reads as ragged rather than as an inset. */
.rp-pull{
  margin: 28px 0;
  padding: 22px 28px;
  max-width: var(--rp-col);
  border-left: 3px solid var(--sage);
  background: linear-gradient(to right, var(--cream-2) 0%, transparent 100%);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 23px;
  line-height: 1.5;
  color: var(--ink-2);
}
.rp-pull strong{ color: var(--ink); font-style: normal; font-weight: 500; }

/* ---- citation block ----------------------------------- */
/* Capped like everything else in the narrative. Uncapped it filled the 968px
   .rp-wrap and so ended 148px to the right of the last paragraph and figure
   above it — most visible here because it is a bordered, filled panel. */
.rp-cite{
  margin: 96px 0 0;
  max-width: var(--rp-col);
  padding: 32px 36px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--cream-2);
}
.rp-cite .lbl{
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 500;
  margin-bottom: 14px;
}
.rp-cite .full{
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 18px;
}
.rp-cite .full strong{ color: var(--ink); font-weight: 500; }
.rp-cite .actions{
  display: flex; flex-wrap: wrap; gap: 10px;
}
.rp-cite .actions a{
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--rule);
  padding: 7px 13px; border-radius: 999px;
  transition: border-color .15s, color .15s, background .15s;
}
.rp-cite .actions a:hover{
  border-color: var(--sage);
  color: var(--sage);
  background: var(--cream);
}
.rp-cite .actions a.primary{
  background: var(--sage);
  color: var(--cream);
  border-color: var(--sage);
}
.rp-cite .actions a.primary:hover{
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}

/* ---- sibling navigation ------------------------------- */
.rp-siblings{
  margin: 80px 0 0;
  max-width: var(--rp-col);
  padding: 32px 0 0;
  border-top: 1px solid var(--rule);
}
/* An h3 rather than a div so the h4 card titles below it do not jump a level
   from the last section h2. The margin is set on both sides because the heading
   tag brings its own from the Bootstrap bundle. */
.rp-siblings .h{
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 20px;
  font-weight: 500;
}
.rp-siblings .row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.rp-siblings a.sib{
  display: block;
  padding: 22px 24px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--cream);
  text-decoration: none;
  transition: border-color .15s, background .15s, transform .15s;
}
.rp-siblings a.sib:hover{
  border-color: var(--sage);
  background: var(--cream-2);
  transform: translateY(-1px);
}
.rp-siblings a.sib .meta{
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.rp-siblings a.sib h4{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 6px;
  color: var(--ink);
  text-wrap: balance;
}
.rp-siblings a.sib .chip{
  display: inline-block;
  margin-top: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--sage);
}

/* ---- responsive --------------------------------------- */
@media (max-width: 720px){
  .rp-toc{ float: none; width: auto; margin: 28px 0 0; }
  .rp-toc .list{ display: grid; grid-template-columns: 1fr; }
}
@media (max-width: 960px){
  /* Keeps the 24px of the base rule above: dropping it left the page flush
     against the site bar between 721 and 960px, because these pages have no
     .page-head and site.css zeroes main's padding for data-page="research". */
  .rp-wrap{ --rp-pad: 32px; padding: 24px var(--rp-pad) 0; }
  .rp-header h1{ font-size: 42px; }
  .rp-meta{ padding-bottom: 24px; }
  .rp-body{ margin-top: 40px; gap: 48px; }
  .rp-body .section{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .rp-body .section .head{ position: static; }
  .rp-body .section h2{ font-size: 26px; }
  .rp-cite{ padding: 24px 22px; margin-top: 64px; }
  .rp-siblings .row{ grid-template-columns: 1fr; }
}

@media (max-width: 540px){
  .rp-wrap{ --rp-pad: 22px; }
  .rp-header h1{ font-size: 36px; }
}