/* ===============================================================
   ARTICLE SINGLE  —  the jrs_articles template (added 2026-09-04)

   Every value below resolves to a token that already exists. Two line
   weights only, as normalised on 2026-09-04: --rule-structural (the thin
   line) and --section-border (the section line). --box-quiet is the same
   #B0B0B0 as the thin line, used where a control needs an outline.
   =============================================================== */

/* The article's page head is .jrs-pagehead with a modifier — same band, same
   stub, same black edge. Only the TITLE size changes: an academic title runs
   to twenty words, and --h1 (54px) turns one into five lines. It stays an
   <h1>; the tag and the visual size are separate, as the system requires. */
.jrs-pagehead--article .jrs-pagehead__title {
  font-size: var(--h2);
  line-height: var(--lh-h2);
  /* No cap: content fills its block (Monica, 2026-08-29 / 2026-09-09).
     A 34ch cap left ~510px empty to the right of the title in a 1140 band.
     text-wrap: balance already keeps the line breaks even. */
}

.jrs-arthead__eyebrow {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: var(--space-xs);
}
.jrs-arthead__authors {
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  color: var(--ink);
  margin: 0;
  /* No cap — content fills its block. */
}
.jrs-arthead__cite {
  font-size: var(--text-meta);
  line-height: 1.6;
  color: var(--neutral-600);
  margin: 0;
  /* No cap — content fills its block. */
  font-variant-numeric: tabular-nums;
}
.jrs-arthead__actions {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-s);
}
.jrs-arthead__note {
  font-size: var(--text-meta);
  color: var(--neutral-600);
}

/* The open-access marker. Outlined, not filled — a tint would need a colour
   the palette does not hold, which is the same call made for the term counts. */
.jrs-oa {
  display: inline-block;
  font-size: var(--text-micro);
  font-weight: var(--fw-label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--brand-deep);
  border: var(--box-quiet);
  padding: 2px 8px;
}

/* ---------------------------------------------------------------
   TWO REAL COLUMNS
   .jrs-read (720px) is retired: content fills its block. So the body is a
   genuine split rather than a narrow column with 420px of dead space beside
   it. Asymmetric because the jobs differ — the abstract is reading matter,
   the aside is reference. Same mechanism as .jrs-cols: gap 0, padding INSIDE
   each cell, so the rule runs the full column height.
   --------------------------------------------------------------- */
.jrs-artcols {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  border-top: var(--rule-structural);
}
.jrs-artcols__main,
.jrs-artcols__aside { align-items: stretch; min-width: 0; }
.jrs-artcols__main > *,
.jrs-artcols__aside > * { max-width: 100%; }
.jrs-artcols__main {
  padding: var(--space-l) var(--space-m) 0 0;
  border-right: var(--rule-structural);
}
.jrs-artcols__aside { padding: var(--space-l) 0 0 var(--space-m); }

.jrs-aside__block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-xs);
  padding-block: var(--space-m);
  border-top: var(--rule-structural);
}
.jrs-aside__block:first-child { border-top: 0; padding-top: 0; }

/* ---------------------------------------------------------------
   THE ISSUE THIS ARTICLE IS IN
   --------------------------------------------------------------- */
.jrs-issuecard {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--space-s);
  align-items: start;
}
.jrs-issuecard__cover img {
  display: block;
  width: 100%;
  aspect-ratio: var(--ratio-cover);
  object-fit: cover;
  border: var(--box-quiet);
  transition: border-color var(--motion-fast) var(--motion-ease);
}
.jrs-issuecard__name {
  font-size: var(--h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-head);
  color: var(--heading-page);
  margin: 0;
  padding-top: 0;
  border-top: 0;
}
.jrs-issuecard__name a { color: inherit; text-decoration: none; }
.jrs-issuecard__name a::after { content: ""; position: absolute; inset: 0; }
.jrs-issuecard:hover .jrs-issuecard__name,
.jrs-issuecard:hover .jrs-issuecard__name a { color: var(--primary-hover); }
.jrs-issuecard:hover .jrs-issuecard__cover img { border-color: var(--black); }
.jrs-issuecard:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.jrs-issuecard__name a:focus-visible { outline: none; }

/* ---------------------------------------------------------------
   CITE THIS ARTICLE
   A standalone thing gets a box; a series gets rules.
   --------------------------------------------------------------- */
.jrs-cite { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-s); }
.jrs-cite__text {
  background: var(--grey);
  border: var(--box-quiet);
  padding: var(--space-s);
  margin: 0;
  font-size: var(--text-meta);
  line-height: 1.6;
  color: var(--ink);
}
.jrs-cite__text em { font-style: italic; }
.jrs-cite__actions { display: flex; flex-flow: row wrap; gap: var(--space-2xs); }

/* The secondary button the token set has always specified and the class layer
   never carried: transparent, outlined in the deep green. Hover is the one
   move every button makes — fill deepens, label goes white. */
.jrs-btn--outline,
.jrs-prose a.jrs-btn--outline {
  background: transparent;
  color: var(--btn-secondary-fg);
  border: var(--btn-secondary-border);
}
.jrs-btn--outline:hover,
.jrs-btn--outline:focus-visible,
.jrs-prose a.jrs-btn--outline:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--white);
}

/* ---------------------------------------------------------------
   THE READER
   No viewer plugin: /secure-pdf/ already streams Content-Disposition: inline,
   so the browser renders it in its own viewer. Mobile browsers refuse to do
   that inside a page and show an empty box, so below 860px the embed is
   dropped and the link under it becomes the control.
   --------------------------------------------------------------- */
.jrs-reader { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-s); }
.jrs-reader__frame {
  display: block;
  width: 100%;
  height: clamp(520px, 78vh, 900px);
  border: var(--box-quiet);
  background: var(--grey);
}
.jrs-reader__nope {
  margin: 0;
  padding: var(--space-m);
  font-size: var(--text-meta);
  color: var(--neutral-600);
}
.jrs-reader__away { margin: 0; }
@media (min-width: 861px) { .jrs-reader__away { display: none; } }

/* ---------------------------------------------------------------
   TOPICS  —  the keyword terms, as the archive links them
   --------------------------------------------------------------- */
.jrs-topics { display: flex; flex-flow: row wrap; gap: var(--space-xs); }
.jrs-topics a {
  display: inline-block;
  font-size: var(--text-meta);
  line-height: 1.4;
  color: var(--brand-deep);
  border: var(--box-quiet);
  padding: 4px 11px;
  text-decoration: none;
  transition: border-color var(--motion-fast) var(--motion-ease),
              background-color var(--motion-fast) var(--motion-ease);
}
.jrs-topics a:hover { border-color: var(--brand-deep); background: var(--grey); }

/* ---------------------------------------------------------------
   PREVIOUS / NEXT  —  the journal's reading order, inside the issue
   --------------------------------------------------------------- */
.jrs-pn {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  border-top: var(--rule-structural);
}
.jrs-pn__side {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2xs);
  padding: var(--space-m) var(--space-m) var(--space-m) 0;
  border-right: var(--rule-structural);
}
.jrs-pn__side:last-child {
  border-right: 0;
  padding-right: 0;
  padding-left: var(--space-m);
  text-align: right;
}
.jrs-pn__title {
  font-size: var(--h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-head);
  color: var(--heading-page);
  margin: 0;
  padding-top: 0;
  border-top: 0;
}
.jrs-pn__title a { color: inherit; text-decoration: none; }
.jrs-pn__title a::after { content: ""; position: absolute; inset: 0; }
.jrs-pn__side:hover .jrs-pn__title,
.jrs-pn__side:hover .jrs-pn__title a { color: var(--primary-hover); }
.jrs-pn__side:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.jrs-pn__title a:focus-visible { outline: none; }

/* ---------------------------------------------------------------
   BOOK AND MEDIA REVIEWS  —  the work under review
   --------------------------------------------------------------- */
.jrs-book {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: var(--space-m);
  align-items: start;
}
.jrs-book img {
  display: block;
  width: 100%;
  aspect-ratio: var(--ratio-cover);
  object-fit: cover;
  border: var(--box-quiet);
}

/* ---------------------------------------------------------------
   STACKED  —  every vertical rule becomes a horizontal one, or the page
   grows a stray line down the middle of a phone screen.
   --------------------------------------------------------------- */
@media (max-width: 860px) {
  .jrs-artcols { grid-template-columns: 1fr; }
  .jrs-artcols__main {
    border-right: 0;
    border-bottom: var(--rule-structural);
    padding: var(--space-m) 0;
  }
  .jrs-artcols__aside { padding: var(--space-m) 0 0; }

  .jrs-reader__frame { display: none; }

  /* The grid must collapse at the SAME width the rules turn horizontal.
     Left to auto-fit, 20rem tracks still made two columns at 800px while the
     borders had already switched — a horizontal rule under the left cell only,
     and no rule between them. */
  .jrs-pn { grid-template-columns: 1fr; }
  .jrs-pn__side {
    border-right: 0;
    border-bottom: var(--rule-structural);
    padding: var(--space-m) 0;
  }
  .jrs-pn__side:last-child {
    border-bottom: 0;
    padding-left: 0;
    padding-bottom: 0;
    text-align: left;
  }

  .jrs-book { grid-template-columns: 110px 1fr; gap: var(--space-s); }
  .jrs-pagehead--article .jrs-pagehead__title { max-width: none; }
  .jrs-issuecard { grid-template-columns: 72px 1fr; }
}

/* --- ARTICLE SINGLE, corrections found on the rendered page 2026-09-04 --- */

/* The issue card is a grid built for a cover plus text. Until the cover is
   wired up there is no first cell, so the text was laying out inside a 96px
   column. The text-only variant is one column. */
.jrs-issuecard--text { grid-template-columns: 1fr; }

/* .label carries the type treatment but no colour, so section labels inherited
   --ink and read as body text. Scoped rather than baked into .label, which is
   used on black bands too, where green would be wrong. */
.jrs-artcols__main > .label,
.jrs-aside__block > .label,
.jrs-pn__side > .label { color: var(--brand-deep); }

/* The stub sets its own margin-bottom AND is the first child of a .jrs-stack,
   so the gap under it was 20px + the stack's own. The stack owns spacing here. */
.jrs-pagehead--article .jrs-pagehead__stub { margin-bottom: 0; }

/* The head's action row is a Bricks block, i.e. a flex COLUMN by default, and
   .jrs-btn sets align-self: flex-start on itself — which in a row means top,
   not left. State the direction, and let the buttons sit on the baseline. */
.jrs-arthead__actions { flex-direction: row; }
.jrs-arthead__actions > .jrs-btn { align-self: center; }

/* The eyebrow is a block too. */
.jrs-arthead__eyebrow { flex-direction: row; }

/* The reader's section heading puts the download button on the right of the rule. */
.jrs-sechead { justify-content: space-between; }