/* ============================================================
   The Lately journal: /journal/ and /journal/<story>/
   Layout from Figma "Lately" → "Blog" → "01 / The library" (1440, 1200
   channel) and "01 / Mobile" (390), brought into the site's own language:
   main.css tokens (ink tints, the site hairline, Cream, Linen, Pulse; no
   Evergreen on these pages since round three, CONTRACT.md §17.1), 20px
   gutters, the 120/72px rhythm, product-page eyebrow chips and the footer
   chips' text-roll hover. The Worker renders the pages from the database
   (content/journal/render.mjs, worker/journal/public.js); behaviour lives in
   web/js/journal.js.

   Loaded after main.css and navigation.css; adds jr- classes and --jr-
   tokens only. Hover is a colour fade (--fade); photos zoom; nothing lifts.
   ============================================================ */

.journal-page {
  --jr-muted: var(--ink-65);      /* secondary text: 5.2:1 on Cream, 4.7:1 on Linen */
  --jr-block: 30px;               /* between paragraphs, lists and the like */
  --jr-break: 56px;               /* around what breaks the page up: figures, pull quotes, callouts, tables */
  --jr-section: 68px;             /* above a section heading; 18px after it */
  --jr-anchor-offset: 110px;      /* clears the floating header when jumping to a section */
  --jr-ease: cubic-bezier(.22, 1, .36, 1);   /* the menu's spring-less ease-out */
  --jr-safety: #f8e9df;           /* a breath of Pulse on Cream, for safety callouts (4.6:1 for muted text) */
  --jr-pulse-ink: #a73820;        /* the darker Pulse of the Figma frame, for small labels: 5.16:1 on Linen, 6.23:1 on Cream */
  --jr-link: var(--orange);       /* links in the words, at rest: Pulse, never underlined */
  --jr-link-hover: var(--jr-pulse-ink);   /* and the darker Pulse on hover */
  --jr-foot-rule: #dcd5c7;        /* the warm hairline over "A little more to explore" (Figma) */
  --jr-golden-ink: #91592a;       /* Golden hour (#e9a05d), deepened only as far as small text on Linen needs: 4.55:1, 4.64:1 on Linen hover */
}

.jr-wrap {
  width: min(var(--channel), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.jr-icon { display: block; flex-shrink: 0; }
.jr-icon--arrow { color: var(--orange); transition: transform 0.45s var(--jr-ease); }

/* ---------- Text roll (the footer chips' hover): two labels stacked in one cell, the second waits
   below and slides up. A grid cell, so the box fits the longer label ("Copy link" → "Link copied"). */
.jr-roll { display: inline-grid; overflow: hidden; vertical-align: top; }
.jr-roll__text { grid-area: 1 / 1; white-space: nowrap; transition: transform 0.45s var(--jr-ease); }
.jr-roll__text + .jr-roll__text { transform: translateY(100%); }

/* ---------- Linen pill button: "Load more stories", "See all stories" ---------- */
.jr-button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 0 26px 0 30px;
  border-radius: var(--radius-pill);
  background: var(--linen);
  font: 200 18px/1.3 var(--font-headline);
  color: var(--ink);
  transition: var(--fade);
}
.jr-button:hover { background: var(--linen-hover); }
.jr-button:hover .jr-roll__text { transform: translateY(-100%); }
.jr-button:hover .jr-roll__text + .jr-roll__text { transform: none; }
.jr-button .jr-icon--arrow { color: var(--ink); width: 20px; height: 20px; }
.jr-button:hover .jr-icon--arrow { transform: translateX(4px); }

/* ============================================================
   Index: the library
   ============================================================ */

.jr-intro { padding-top: 56px; }
.jr-intro__title {
  font-family: var(--font-headline);
  font-weight: 200;
  font-size: clamp(3.125rem, 5.56vw, 5rem);    /* 80px; 50px on phones */
  line-height: 1.12;
}
.jr-intro__lede {
  margin-top: 22px;
  max-width: 900px;
  font: 200 clamp(1.125rem, 1.6vw, 1.4375rem)/1.45 var(--font-text);   /* 23px; 18px */
  color: var(--jr-muted);
}

/* No divider between the introduction and the library: space alone separates them. */
.jr-library {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  column-gap: 48px;
  align-items: start;
}

/* ---------- Filters (desktop sidebar) ---------- */
.jr-filters { position: sticky; top: 100px; margin-top: 12px; }
.jr-filters__title { font: 400 18px/1.45 var(--font-text); }

.jr-pill select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
/* The Linen highlight is one element that glides to the chosen topic (placed by journal.js). */
.jr-topics-wrap { position: relative; margin: 16px -12px 0; }
.jr-topics__thumb {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 44px;
  border-radius: 12px;
  background: var(--linen);
  opacity: 0;
  pointer-events: none;
}
.jr-topics-wrap.is-ready .jr-topics__thumb {
  opacity: 1;
  transition: transform 0.45s var(--jr-ease), height 0.45s var(--jr-ease);
}
.jr-topics { position: relative; display: flex; flex-direction: column; gap: 3px; }
.jr-topic {
  width: 100%;
  min-height: 44px;
  padding: 11px 12px;
  border-radius: 12px;
  text-align: left;
  font: 300 15px/1.45 var(--font-text);
  color: var(--jr-muted);
  transition: var(--fade);
}
.jr-topic:hover { color: var(--ink); }
.jr-topic[aria-pressed="true"] { color: var(--ink); font-weight: 400; }
/* Before journal.js has placed the highlight (and without it), the chosen topic carries its own. */
.jr-topics-wrap:not(.is-ready) .jr-topic[aria-pressed="true"] { background: var(--linen); }

/* ---------- Toolbar: search + layout switch ---------- */
.jr-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.jr-search { position: relative; width: min(426px, 100%); }
.jr-search .jr-icon--search {
  position: absolute;
  left: 20px;
  top: 16px;
  color: var(--jr-muted);
  pointer-events: none;
  transition: color var(--fade-duration) ease, transform 0.45s var(--jr-ease);
}
.jr-search:focus-within .jr-icon--search { color: var(--ink); transform: scale(1.06); }
.jr-search__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 52px;
  padding: 0 20px 0 54px;
  border: 1px solid var(--rule);
  border-radius: 26px;
  background: var(--cream);
  font: 300 16px/1.45 var(--font-text);
  color: var(--ink);
  transition: border-color var(--fade-duration) ease, background-color var(--fade-duration) ease;
}
.jr-search__input::placeholder { color: var(--jr-muted); opacity: 1; }
.jr-search__input:hover { border-color: rgba(70, 77, 132, 0.45); }
.jr-search__input:focus { background: var(--white); }
.jr-search__input::-webkit-search-cancel-button { cursor: pointer; }

.jr-view {
  position: relative;
  display: flex;
  gap: 9px;
  padding: 6px;
  border-radius: 26px;
  background: var(--linen);
}
.jr-view__thumb {
  position: absolute;
  left: 6px;
  top: 6px;
  width: 62px;
  height: 40px;
  border-radius: 20px;
  background: var(--cream);
  transition: transform 0.45s var(--jr-ease);
}
.jr-library[data-view="list"] .jr-view__thumb { transform: translateX(71px); }
.jr-view__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 40px;
  border-radius: 20px;
  color: var(--jr-muted);
  transition: color var(--fade-duration) ease;
}
.jr-view__btn:hover,
.jr-view__btn[aria-pressed="true"] { color: var(--ink); }

/* ---------- Pill: the topic choice on tablets and phones ---------- */
.jr-pills { display: none; }
.jr-pill { position: relative; }
.jr-pill select {
  height: 44px;
  padding: 0 44px 0 20px;
  border-radius: 22px;
  background: var(--linen);
  font: 400 16px/1.35 var(--font-text);
  transition: var(--fade);
}
.jr-pill select:hover { background: var(--linen-hover); }
.jr-pill .jr-icon--chevron { position: absolute; right: 18px; top: 14px; pointer-events: none; }

.jr-count { margin-top: 25px; font: 300 13px/1.45 var(--font-text); color: var(--jr-muted); }

/* ---------- The grid of stories ---------- */
.jr-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 24px;
}
.jr-grid__item { display: flex; min-width: 0; }
.jr-grid__item[hidden] { display: none; }

/* View transitions (filters, sort): the cards glide to their new places and cross-fade. Only the
   cards take part (not the whole page), and the overlay lets clicks through, so the controls stay
   usable while cards are still moving. */
:root:has(body.jr-index-page) { view-transition-name: none; }
::view-transition { pointer-events: none; }
::view-transition-group(*) { animation-duration: 0.45s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
::view-transition-old(*),
::view-transition-new(*) { animation-duration: 0.3s; }

/* Card: Linen r20, 16:9 photo, 22px insets. The title link's ::after makes the whole card the target. */
.jr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: var(--radius);
  background: var(--linen);
  overflow: hidden;
  isolation: isolate;
  transition: var(--fade);
}
.jr-card:hover { background: var(--linen-hover); }
.jr-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: #e6dbc5; }
.jr-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--jr-ease);
}
.jr-card:hover .jr-card__media img { transform: scale(1.05); }
.jr-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 17px; }
.jr-card__topic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font: 400 13px/1.45 var(--font-text);
  color: var(--jr-muted);
}
.jr-card:hover .jr-icon--arrow { transform: translateX(4px); }
.jr-card__title {
  margin-top: 11px;
  min-height: 2.4em;              /* two lines, so the read times line up across a row */
  font: 200 27px/1.2 var(--font-headline);
  text-wrap: pretty;
}
.jr-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.jr-card__link:focus-visible { outline: none; }
.jr-card:has(.jr-card__link:focus-visible) { outline: 2px solid var(--orange); outline-offset: 3px; }
.jr-card__meta {
  margin-top: auto;
  padding-top: 30px;
  font: 300 12px/1.45 var(--font-text);
  color: var(--jr-muted);
}

/* Open card: "A little more to explore", where an article closes. No panel; the photo carries an 18px
   radius, as the Figma frame draws it. */
.jr-card--open { background: none; border-radius: 0; overflow: visible; }
.jr-card--open:hover { background: none; }
.jr-card--open .jr-card__media { border-radius: 18px; }
.jr-card--open .jr-card__body { padding: 22px 0 0; }
.jr-card--open .jr-card__title { transition: color var(--fade-duration) ease; }
.jr-card--open:hover .jr-card__title { color: var(--orange); }
.jr-card--open .jr-card__link::after { border-radius: 18px; }

/* ---------- Empty state and "Load more" ---------- */
.jr-empty {
  margin-top: 24px;
  padding: 48px 32px;
  border-radius: var(--radius);
  background: var(--linen);
  text-align: center;
}
.jr-empty[hidden] { display: none; }
.jr-empty__text { max-width: 480px; margin-inline: auto; font: 200 20px/1.45 var(--font-text); }
.jr-empty .jr-button { margin-top: 20px; background: var(--cream); }
.jr-empty .jr-button:hover { background: var(--white); }

.jr-more { margin-top: 64px; display: flex; justify-content: center; }
.jr-more[hidden] { display: none; }
.jr-more__short { display: none; }

/* Without JavaScript every story shows and the controls (which need it) are left out. */
html:not(.js) .jr-filters,
html:not(.js) .jr-toolbar,
html:not(.js) .jr-pills { display: none; }
html:not(.js) .jr-library { grid-template-columns: minmax(0, 1fr); }

/* List layout (desktop only): photo left, words right. */
@media (min-width: 1100px) {
  .jr-library[data-view="list"] .jr-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .jr-library[data-view="list"] .jr-card { flex-direction: row; }
  .jr-library[data-view="list"] .jr-card__media { flex: 0 0 300px; aspect-ratio: 16 / 9; }
  .jr-library[data-view="list"] .jr-card__body { padding: 24px 28px 20px; }
  .jr-library[data-view="list"] .jr-card__title { min-height: 0; }
}

/* ============================================================
   Article (CONTRACT.md §16.3, §17.1): the topic, the title, the hero at
   the width of the text column, the standfirst, the key facts, the byline
   (under 1100px); then the contents column and the prose. On a desktop the
   signature column stands level with the title and keeps beside the prose.
   The article closes with the Sources and "A little more to explore".
   ============================================================ */

.jr-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  justify-self: start;
  margin-top: 20px;
  padding: 3px 0;
  font: 300 15px/1.45 var(--font-text);
  color: var(--jr-muted);
  transition: color var(--fade-duration) ease;
}
.jr-back .jr-icon { color: var(--ink); transition: transform 0.45s var(--jr-ease); }
.jr-back:hover { color: var(--ink); }
.jr-back:hover .jr-icon { transform: translateX(-4px); }

/* The product pages' eyebrow chip (product.css .eyebrow), Linen, its words in Golden hour made deep
   enough to read (Shad, 6 October: lighter than Evergreen, from the Linen and Golden hour family). It
   links to the topic. */
.jr-eyebrow {
  display: inline-block;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--linen);
  font: 400 15px/1.35 var(--font-text);
  color: var(--jr-golden-ink);
  transition: var(--fade);
}
.jr-eyebrow:hover { background: var(--linen-hover); }

.jr-story__title {
  margin-top: 24px;
  max-width: 740px;
  font-family: var(--font-headline);
  font-weight: 200;
  font-size: clamp(2.5rem, 4.72vw, 4.25rem);    /* 68px; 40px on phones */
  line-height: 1.08;
  text-wrap: balance;
}

/* The hero: directly under the title, the full width of the text column. */
.jr-story__media { margin: 36px 0 0; }
.jr-story__img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  background: #e6dbc5;
}

.jr-story__standfirst {
  margin-top: 32px;
  font: 200 clamp(1.1875rem, 1.6vw, 1.4375rem)/1.45 var(--font-text);   /* 23px; 19px */
  color: var(--jr-muted);
  text-wrap: pretty;
}

/* Key facts: a compact strip under the standfirst. A label for a title, then at most four facts in
   small type, one line each (the writer keeps them to twelve words). */
.jr-keyfacts {
  margin-top: 28px;
  padding: 14px 20px 16px;
  border-radius: 16px;
  background: var(--linen);
}
.jr-keyfacts__title { font: 400 12px/1.45 var(--font-text); color: var(--jr-pulse-ink); }
.jr-keyfacts__list { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.jr-keyfacts__list li {
  position: relative;
  padding-left: 15px;
  font: 300 15px/1.5 var(--font-text);
  text-wrap: pretty;
}
.jr-keyfacts__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.75em - 2.5px);       /* the middle of the first line */
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
}

/* The byline, under 1100px (the signature column says the same on a desktop): a round photo beside
   "Written and signed by" and the name, the credentials line, then the reading time. With the dates
   shown (SHOW_DATES in render.mjs) they sit before it, a small dot between each. */
.jr-byline { display: flex; align-items: flex-start; gap: 14px; margin-top: 26px; }
.jr-byline .jr-person__photo { width: 44px; height: 44px; }
.jr-byline__text { display: flex; flex-direction: column; min-width: 0; padding-top: 1px; }
.jr-byline__signed { font: 300 15px/1.4 var(--font-text); color: var(--jr-muted); }
.jr-byline__signed .jr-person__name { color: var(--ink); }
.jr-byline__credentials { margin-top: 2px; font: 300 13px/1.45 var(--font-text); color: var(--jr-muted); }
.jr-byline__time { display: flex; flex-wrap: wrap; align-items: center; margin-top: 6px; font: 300 13px/1.45 var(--font-text); color: var(--jr-muted); }
.jr-byline__item { white-space: nowrap; }
.jr-byline__item + .jr-byline__item::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 9px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}
.jr-byline time,
.jr-signed time { font-variant-numeric: tabular-nums; }

/* The signature column (desktop, Figma "01 / Article / Desktop"): label and value pairs, the label in
   12px Light muted and the value 23px below its top in 15px ink, 52px from a value to the next label.
   "Written and signed by" over a small round photo and the name (a link to the author page), the
   credentials beneath in the label's style, lined up with the name; "Reading time" over "6 minutes";
   then Copy link 71px below the last value. */
.jr-signed__pair + .jr-signed__pair { margin-top: 30px; }
.jr-signed__label { font: 300 12px/1.45 var(--font-text); color: var(--jr-muted); }
.jr-signed__value { margin-top: 5.6px; font: 400 15px/1.45 var(--font-text); color: var(--ink); }
.jr-signed__note { font: 300 12px/1.45 var(--font-text); color: var(--jr-muted); text-wrap: balance; }
.jr-signed__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.jr-signed__who .jr-person__photo { width: 28px; height: 28px; }
.jr-signed__who .jr-person__glyph { width: 16px; height: 16px; }
.jr-signed__who .jr-person__name { min-width: 0; }
.jr-signed__value:has(.jr-signed__who) + .jr-signed__note { margin-top: 1px; padding-left: 38px; }
.jr-story__meta .jr-copy { margin-top: 49px; }

/* The author's round photo: an empty circle holds a quiet figure until the author has a picture. */
.jr-person__photo {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--linen);
  color: var(--jr-muted);
}
.jr-person__img { width: 100%; height: 100%; object-fit: cover; }
.jr-person__name { font-weight: 400; transition: color var(--fade-duration) ease; }
a.jr-person__name:hover { color: var(--orange); }

.jr-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  margin-top: 22px;
  padding: 0 16px 0 20px;
  border-radius: 21px;
  background: var(--linen);
  font: 400 16px/1.35 var(--font-text);
  text-align: left;
  transition: var(--fade);
}
.jr-copy:hover { background: var(--linen-hover); }
.jr-copy.is-copied .jr-roll__text { transform: translateY(-100%); }
.jr-copy.is-copied .jr-roll__text + .jr-roll__text { transform: none; }
.jr-copy__icons { position: relative; width: 18px; height: 18px; }
.jr-copy__icons .jr-icon {
  position: absolute;
  inset: 0;
  transition: opacity 0.3s ease, transform 0.45s var(--jr-ease);
}
.jr-copy__icons .jr-icon--check { color: var(--jr-pulse-ink); opacity: 0; transform: scale(0.6) rotate(-12deg); }
.jr-copy.is-copied .jr-icon--link { opacity: 0; transform: scale(0.6) rotate(12deg); }
.jr-copy.is-copied .jr-icon--check { opacity: 1; transform: none; }

/* Contents: a sticky column on desktop (a Pulse marker follows the section being read), a Linen
   disclosure on smaller screens. Short labels, one line each, close together. */
.jr-toc__title { font: 300 12px/1.45 var(--font-text); color: var(--jr-muted); }
.jr-toc__track { position: relative; margin-top: 12px; padding-left: 16px; }
.jr-toc__track::before {          /* the hairline the marker runs along */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule);
}
.jr-toc__marker {
  position: absolute;
  left: -0.5px;
  top: 0;
  width: 2px;
  height: 19px;
  border-radius: 2px;
  background: var(--orange);
  opacity: 0;
  transition: transform 0.5s var(--jr-ease), height 0.5s var(--jr-ease), opacity 0.3s ease;
}
.jr-toc__track.is-ready .jr-toc__marker { opacity: 1; }
.jr-toc__list { display: flex; flex-direction: column; gap: 10px; }
.jr-toc__link {
  display: block;
  font: 400 14px/1.35 var(--font-text);
  color: var(--jr-muted);
  text-wrap: balance;
  transition: color var(--fade-duration) ease;
}
.jr-toc__link:hover,
.jr-toc__link[aria-current="true"] { color: var(--ink); }

.jr-toc-small { display: none; border-radius: 23px; background: var(--linen); interpolate-size: allow-keywords; }
.jr-toc-small__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 0 18px 0 20px;
  list-style: none;
  font: 400 16px/1.35 var(--font-text);
  cursor: pointer;
  border-radius: 23px;
}
.jr-toc-small__summary::-webkit-details-marker { display: none; }
.jr-toc-small .jr-icon--chevron { width: 20px; height: 20px; transition: transform 0.45s var(--jr-ease); }
.jr-toc-small[open] .jr-icon--chevron { transform: rotate(180deg); }
/* Opens with a height animation where the browser supports ::details-content; snaps elsewhere. */
.jr-toc-small::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.45s var(--jr-ease), content-visibility 0.45s allow-discrete;
}
.jr-toc-small[open]::details-content { block-size: auto; }
.jr-toc-small__list { display: flex; flex-direction: column; gap: 10px; padding: 4px 20px 18px; }
.jr-toc-small__list a { font: 400 15px/1.4 var(--font-text); color: var(--jr-muted); transition: color var(--fade-duration) ease; }
.jr-toc-small__list a:hover { color: var(--ink); }

/* Body copy: Stack Sans Text Light (300) at 20px (17px on phones) in a 720px measure, on a slightly
   more open line (CONTRACT.md §16.3); the headings keep their own weights. Text follows text closely;
   figures, pull quotes, callouts and tables take more room, so they break the page up; a section
   heading takes the most. */
.jr-prose {
  font: 300 clamp(1.0625rem, 1.39vw, 1.25rem)/1.72 var(--font-text);
  color: var(--ink);
}
.jr-prose > * + * { margin-top: var(--jr-block); }
.jr-prose > :is(.jr-figure, .jr-quote, .jr-callout, .jr-table-wrap, .jr-keyfacts) + *,
.jr-prose > * + :is(.jr-figure, .jr-quote, .jr-callout, .jr-table-wrap, .jr-keyfacts) { margin-top: var(--jr-break); }
.jr-prose > * + .jr-prose__h2 { margin-top: var(--jr-section); }
.jr-prose > * + .jr-prose__h3 { margin-top: calc(var(--jr-block) + 14px); }
.jr-prose > .jr-prose__h2 + * { margin-top: 18px; }
.jr-prose > .jr-prose__h3 + * { margin-top: 12px; }
.jr-prose__h2 {
  font: 200 clamp(1.875rem, 2.64vw, 2.375rem)/1.2 var(--font-headline);   /* 38px; 30px */
  scroll-margin-top: var(--jr-anchor-offset);
  text-wrap: balance;
}

/* Inline marks: strong is the one phrase in a section to take away, emphasis a term or an aside. */
.jr-story strong { font-weight: 500; color: var(--ink); }
.jr-story em { font-style: italic; }

/* Pull quote: one sentence set large in the headline face, the Pulse bar drawing down beside it.
   The opening mark hangs, so the words line up with the lines beneath. */
.jr-quote { position: relative; margin: 0; padding: 6px 0 6px 34px; }
.jr-quote::before {               /* the Pulse bar draws down as the quote arrives */
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 2px;
  background: var(--orange);
  transform-origin: 50% 0;
}
.js .jr-quote[data-reveal]::before {
  transform: scaleY(0);
  transition: transform 1.1s var(--jr-ease) 0.25s;
}
.js .jr-quote.in-view::before { transform: none; }
.jr-quote__text { margin: 0; }
.jr-quote__text p {
  max-width: 660px;
  font: 200 clamp(2rem, 3.2vw, 2.875rem)/1.14 var(--font-headline);   /* 46px; 32px */
  text-indent: -0.29em;           /* the width of the opening mark in this face */
  text-wrap: balance;
}
.jr-quote strong { font-weight: inherit; color: var(--orange); }
.jr-quote__cite { margin-top: 18px; font: 300 14px/1.45 var(--font-text); color: var(--jr-muted); }

/* ---------- The body's other blocks (CONTRACT.md §2): links, lists, callouts, figures, tables.
   One language with the rest: Linen panels at r20, Pulse for the one thing that matters and for
   links, the darker Pulse (--jr-pulse-ink) for small labels. ---------- */

/* Links in the words (prose, key facts, captions, the author's bio) are Pulse at rest and never
   underlined; weight 400 against the 300 body is the cue that is not colour (CONTRACT.md §17.1, the
   reasoning in design/spec/superpowers/notes/r1-public.md). Hover turns them the darker Pulse and
   nothing else changes; focus keeps the site's ring (main.css :focus-visible). */
.jr-prose a:not(.jr-button),
.jr-keyfacts a,
.jr-profile__bio a {
  color: var(--jr-link);
  font-weight: 400;
  text-decoration: none;
  transition: color var(--fade-duration) ease;
}
.jr-prose a:not(.jr-button):hover,
.jr-keyfacts a:hover,
.jr-profile__bio a:hover { color: var(--jr-link-hover); }

/* The Sources list is the exception (Shad, 6 October): its numbers carry the Pulse, so the titles
   rest in ink and turn Pulse on hover. Still never underlined. */
.jr-sources a {
  color: var(--ink);
  font-weight: 400;
  text-decoration: none;
  transition: color var(--fade-duration) ease;
}
.jr-sources a:hover { color: var(--orange); }
.jr-story a strong { color: inherit; }

.jr-prose__h3 {
  font: 300 clamp(1.3125rem, 1.67vw, 1.5rem)/1.3 var(--font-text);   /* 24px; 21px */
  scroll-margin-top: var(--jr-anchor-offset);
  text-wrap: balance;
}

.jr-list { padding-left: 1.3em; }
.jr-list--ul { list-style: disc; }
.jr-list--ol { list-style: decimal; }
.jr-list li { padding-left: 0.2em; }
.jr-list li + li { margin-top: 10px; }
.jr-list li::marker { color: var(--orange); }

/* Callouts: a note is a Linen panel under a label in the darker Pulse; safety carries the Pulse bar
   the quotes use, on a breath of Pulse, under an ink label. */
.jr-callout {
  position: relative;
  padding: 24px 28px 26px;
  border-radius: var(--radius);
  background: var(--linen);
  font-size: 0.9em;
  line-height: 1.62;
}
.jr-callout__title { font: 400 13px/1.45 var(--font-text); color: var(--jr-pulse-ink); }
.jr-callout__title + p { margin-top: 6px; }
.jr-callout--safety { padding-left: 34px; background: var(--jr-safety); }
.jr-callout--safety::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 24px;
  bottom: 24px;
  width: 3px;
  border-radius: 2px;
  background: var(--orange);
}
.jr-callout--safety .jr-callout__title { color: var(--ink); }

/* Figures: set wide, the full width of the prose (720px at most), the caption beneath in italic, in
   the secondary ink. Photos keep the r20 and Linen ground; diagrams sit straight on the Cream, with no
   line around them (CONTRACT.md §17.1). */
.jr-figure { width: 100%; margin: 0; }
.jr-figure__img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: var(--linen);
}
.jr-figure__img--svg { aspect-ratio: 16 / 9; object-fit: contain; background: var(--cream); }
.jr-figure__caption {
  max-width: 640px;
  margin-top: 12px;
  font: italic 300 13px/1.5 var(--font-text);
  color: var(--jr-muted);
  text-wrap: pretty;
}

/* Tables scroll inside their own box on a phone; the page never scrolls sideways. */
.jr-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  background: var(--linen);
  -webkit-overflow-scrolling: touch;
}
.jr-table-wrap:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.jr-table { width: 100%; min-width: 420px; border-collapse: collapse; font: 300 16px/1.45 var(--font-text); }
.jr-table caption { padding: 20px 22px 4px; text-align: left; font: 400 13px/1.45 var(--font-text); color: var(--jr-pulse-ink); }
.jr-table th,
.jr-table td { padding: 14px 22px; text-align: left; vertical-align: top; border-top: 1px solid var(--rule); }
.jr-table thead th { border-top: 0; font-weight: 400; font-size: 13px; color: var(--jr-muted); }
.jr-table tbody th { font-weight: 400; }

/* ---------- Sources: numbered, each a target for its citation marks ---------- */
.jr-sources {
  margin-top: calc(var(--jr-block) * 1.5);
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}
.jr-sources__title { font: 200 clamp(1.625rem, 2.08vw, 1.875rem)/1.2 var(--font-headline); }   /* 30px; 26px */
.jr-sources__list { margin-top: 22px; display: flex; flex-direction: column; gap: 6px; }
.jr-source {
  display: flex;
  gap: 14px;
  padding: 10px 12px;
  margin-inline: -12px;
  border-radius: 14px;
  scroll-margin-top: var(--jr-anchor-offset);
  transition: background-color 0.6s ease;
}
.jr-source:target { background: var(--linen); }
.jr-source__n {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--linen);
  font: 400 12px/1 var(--font-text);
  color: var(--orange);
}
.jr-source:target .jr-source__n { background: var(--cream); }
.jr-source__text { display: flex; flex-direction: column; min-width: 0; font: 300 15px/1.5 var(--font-text); overflow-wrap: anywhere; }
.jr-source__meta { margin-top: 2px; font-size: 13px; color: var(--jr-muted); }

/* An article or card with no photo yet keeps the 16:9 space, quietly. */
.jr-card__media--empty { background: linear-gradient(135deg, var(--linen), var(--linen-hover)); }

/* ---------- The author page: /journal/author/<slug>/ ---------- */
.jr-profile__head {
  margin-top: 50px;
  display: grid;
  grid-template-columns: 160px minmax(0, 720px);
  gap: clamp(28px, 4.17vw, 60px);
  align-items: start;
}
.jr-profile__photo {
  display: grid;
  place-items: center;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--linen);
  color: var(--jr-muted);
}
.jr-profile__photo .jr-person__glyph { width: 56px; height: 56px; }
.jr-profile__img { width: 100%; height: 100%; object-fit: cover; }
.jr-profile__label { font: 400 15px/1.35 var(--font-text); color: var(--jr-pulse-ink); }
.jr-profile__name {
  margin-top: 12px;
  font-family: var(--font-headline);
  font-weight: 200;
  font-size: clamp(2.5rem, 4.72vw, 4.25rem);
  line-height: 1.08;
}
.jr-profile__credentials { margin-top: 18px; font: 400 17px/1.45 var(--font-text); }
.jr-profile__role { font: 300 15px/1.45 var(--font-text); color: var(--jr-muted); }
.jr-profile__bio { margin-top: 26px; font: 300 clamp(1.0625rem, 1.39vw, 1.25rem)/1.65 var(--font-text); }
.jr-profile__bio p + p { margin-top: 16px; }
.jr-profile__links { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.jr-profile__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px 0 18px;
  border-radius: var(--radius-pill);
  background: var(--linen);
  font: 400 15px/1.35 var(--font-text);
  transition: var(--fade);
}
.jr-profile__link:hover { background: var(--linen-hover); }
.jr-profile__link:hover .jr-roll__text { transform: translateY(-100%); }
.jr-profile__note { margin-top: 26px; font: 300 14px/1.5 var(--font-text); color: var(--jr-muted); }
.jr-profile__stories { margin-top: var(--rhythm); padding-top: 42px; border-top: 1px solid var(--rule); }
.jr-grid--profile { margin-top: 32px; }

/* Not found, and the journal resting. */
.jr-message { padding-block: 96px 24px; }
.jr-message__back { margin-top: 32px; }

/* "A little more to explore", where an article closes (Figma "01 / Article / Desktop"): 198px after
   the last line of the article (188 here, the last source keeps 10 of its own), a warm hairline
   across the channel, the heading 42px under it with "All stories" on its right, then three open
   cards 32px below, and as much cream under them as the frame leaves above the footer's wordmark
   (199px from the last card line to the wordmark). Tablets: one rhythm above, two cards. Phones:
   one card and no "All stories", as the frame draws it. */
.jr-related {
  margin-top: 188px;
  padding: 41px 0 33px;
  border-top: 1px solid var(--jr-foot-rule);
}
.jr-related__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.jr-related__head .jr-all { margin-top: 8px; }   /* its line sits 20px under the heading's top */
.jr-related__title { font: 200 clamp(2.125rem, 3.2vw, 2.875rem)/1.2 var(--font-headline); }   /* 46px; 34px */
.jr-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font: 300 16px/1.45 var(--font-text);
  transition: color var(--fade-duration) ease;
}
.jr-all .jr-icon { transition: transform 0.45s var(--jr-ease); }
.jr-all:hover { color: var(--orange); }
.jr-all:hover .jr-icon { transform: translate(3px, -3px); }
.jr-related__list {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
}
.jr-related__item { display: flex; min-width: 0; }

/* ---------- Desktop article grid: contents | 720 story | signature ----------
   Row 1 the way back, row 2 the head, row 3 the prose, row 4 the sources. The signature column starts
   on the head's row, its first label level with the top of the title (Figma: 4px under the title's
   line), and spans rows 2 and 3, so it stays in view (sticky) from the top of the article on. Its top
   margin is the head's 50px, the topic chip (a 1.35 line of 15px with 10px above and below), the
   title's 24px and those 4px; with no topic the chip's share drops out. The contents column keeps
   beside the prose (row 3). */
@media (min-width: 1100px) {
  .jr-story__grid {
    display: grid;
    grid-template-columns: minmax(140px, 180px) minmax(0, 720px) minmax(140px, 180px);
    column-gap: clamp(32px, 4.17vw, 60px);
    justify-content: space-between;
    align-items: start;
  }
  .jr-back { grid-column: 1 / 3; grid-row: 1; }
  .jr-story__head { grid-column: 2; grid-row: 2; margin-top: 50px; }
  .jr-story__meta { grid-column: 3; grid-row: 2 / 4; margin-top: calc(50px + 24px + 4px); position: sticky; top: var(--jr-anchor-offset); }
  .jr-story__grid:has(.jr-eyebrow) .jr-story__meta { margin-top: calc(50px + 15px * 1.35 + 20px + 24px + 4px); }
  .jr-toc { grid-column: 1; grid-row: 3; margin-top: 76px; position: sticky; top: var(--jr-anchor-offset); }
  .jr-prose { grid-column: 2; grid-row: 3; margin-top: 76px; }
  .jr-sources { grid-column: 2; grid-row: 4; }
  .jr-byline { display: none; }   /* the signature column says it */
}

/* ============================================================
   Tablets: one column, pills instead of the sidebar
   ============================================================ */
@media (max-width: 1099px) {
  .jr-library { grid-template-columns: minmax(0, 1fr); }
  .jr-filters,
  .jr-view { display: none; }
  .jr-search { width: 100%; }
  .jr-pills { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
  .jr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }

  .jr-story__grid { display: flex; flex-direction: column; width: min(720px, 100% - 2 * var(--gutter)); }
  .jr-story__head { margin-top: 44px; }
  .jr-story__meta,
  .jr-toc { display: none; }
  .jr-story__media { margin-top: 30px; }
  .jr-toc-small { display: block; margin-top: 40px; }
  .jr-prose { margin-top: 44px; }

  .jr-related { margin-top: var(--rhythm); padding-bottom: 0; }
  .jr-related__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .jr-related__item:nth-child(n + 3) { display: none; }
}

/* ============================================================
   Phones (Figma "01 / Mobile", 390 wide; the site's 20px gutters)
   ============================================================ */
@media (max-width: 640px) {
  .journal-page { --jr-block: 24px; --jr-break: 42px; --jr-section: 52px; --jr-anchor-offset: 96px; }

  .jr-intro { padding-top: 48px; }
  .jr-intro__title { line-height: 1.08; }
  .jr-intro__lede { margin-top: 21px; }
  .jr-library { margin-top: 34px; }
  .jr-count {               /* no visible count on phones in the design; it is still announced */
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .jr-grid { margin-top: 42px; grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .jr-more { margin-top: 40px; }
  .jr-button--more { width: 100%; justify-content: space-between; padding: 0 20px 0 24px; }
  .jr-more__long { display: none; }
  .jr-more__short { display: inline-grid; }

  .jr-back { margin-top: 24px; }
  .jr-eyebrow { padding: 8px 16px; font-size: 14px; }
  .jr-story__title { margin-top: 20px; line-height: 1.1; }
  .jr-story__media { margin-top: 24px; }
  .jr-story__standfirst { margin-top: 22px; line-height: 1.48; }
  .jr-keyfacts { margin-top: 22px; padding: 12px 16px 14px; }
  .jr-keyfacts__list li { font-size: 14px; }
  .jr-byline { margin-top: 22px; gap: 12px; }
  .jr-byline .jr-person__photo { width: 40px; height: 40px; }
  .jr-byline__signed { font-size: 14px; }
  .jr-byline__credentials,
  .jr-byline__time { font-size: 12px; }
  .jr-quote { padding-left: 24px; }
  .jr-quote::before { top: 6px; bottom: 6px; }

  .jr-callout { padding: 20px 22px; }
  .jr-callout--safety { padding-left: 30px; }
  .jr-callout--safety::before { left: 14px; top: 20px; bottom: 20px; }
  .jr-profile__head { grid-template-columns: minmax(0, 1fr); margin-top: 32px; gap: 24px; }
  .jr-profile__photo { width: 96px; height: 96px; }
  .jr-message { padding-top: 56px; }

  .jr-related { padding-top: 32px; }
  .jr-related__head .jr-all { display: none; }
  .jr-related__list { grid-template-columns: minmax(0, 1fr); margin-top: 28px; }
  .jr-related__item:nth-child(n + 2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .jr-card:hover .jr-card__media img { transform: none; }
  .js .jr-quote[data-reveal]::before { transform: none; }
  .jr-toc-small::details-content { transition: none; }
  .jr-source { transition: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none; }
}

@media print {
  .jr-filters, .jr-toolbar, .jr-pills, .jr-more, .jr-toc, .jr-toc-small, .jr-copy, .jr-related { display: none; }
  .jr-source__link::after { content: " " attr(href); font-size: 12px; color: var(--jr-muted); }
  .jr-library { grid-template-columns: minmax(0, 1fr); }
}