/* ============================================================
   Journal (2026-09-19). The reading pages under journal/, all
   generated by tools/build-journal.py from _journal/*.md.

   Paper light, with a Medium-style reading column. The light comes from site.js the
   same way About's team band does: <main data-light> is a light zone, and
   paintTheme() scrubs every ground token to the warm off-white. The zone
   covers the whole page, so it is simply light from the first frame.
   The values below are that same light theme, set up front so the page
   doesn't flash dark before site.js runs. site.js then writes identical
   values inline.
   ============================================================ */
html:root {
  --ink: rgb(244, 242, 237);
  --ink-2: rgb(255, 255, 255);
  --ink-3: rgb(232, 230, 224);
  --paper: rgb(20, 16, 15);
  --paper-2: rgb(26, 26, 26);
  --dim: rgb(86, 84, 90);
  --smoke: rgba(20, 16, 15, 0.56);
  --hairline: rgba(20, 16, 15, 0.16);
  --accent: rgb(211, 47, 60);
  --mark: rgb(211, 47, 60);
  --grain-opacity: 0.32;

  --jr-serif: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --jr-col: 680px;
  --jr-wide: 1040px;
}

.jr {
  font-weight: 400;
  letter-spacing: 0;
  padding-top: clamp(28px, 7vh, 88px);
  padding-bottom: clamp(72px, 12vh, 140px);
}

/* one centred column, the width of the text plus the page gutter */
.jr-head,
.jr-end,
.jr-more,
.jr-ihead,
.jr-index .jr-list {
  width: min(100% - 2 * var(--gutter), var(--jr-col));
  margin-inline: auto;
}

.jr-meta {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--dim);
  letter-spacing: -0.005em;
}

/* ---------------------------------------------------------- header */
.jr-kicker {
  display: inline-block;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.jr-kicker:hover { border-color: var(--paper); color: var(--paper); }

.jr-title {
  margin-top: clamp(22px, 3vw, 32px);
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(38px, 5.4vw, 62px);
  line-height: 1.03;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.jr-sub {
  margin-top: 14px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--dim);
  text-wrap: pretty;
}

.jr-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(26px, 3.4vw, 36px);
  padding-block: 16px;
  border-block: 1px solid var(--hairline);
}
.jr-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--ink-3);
}
.jr-byline-text { display: flex; flex-direction: column; gap: 2px; }
.jr-author { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }

/* ---------------------------------------------------------- body
   The column is a grid, so a figure can step out of the text measure
   to the wide track or the full width without any wrapper markup. */
.jr-prose {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start] minmax(0, calc((var(--jr-wide) - var(--jr-col)) / 2))
    [text-start] min(100% - 2 * var(--gutter), var(--jr-col)) [text-end]
    minmax(0, calc((var(--jr-wide) - var(--jr-col)) / 2)) [wide-end]
    minmax(var(--gutter), 1fr) [full-end];
  margin-top: clamp(32px, 4.4vw, 48px);
  font-family: var(--jr-serif);
  font-optical-sizing: auto;
  font-size: 20px;
  line-height: 1.66;
  letter-spacing: -0.003em;
  color: var(--paper);
}
.jr-prose > * { grid-column: text; }
.jr-prose > .jr-fig--wide { grid-column: wide; }
.jr-prose > .jr-fig--full { grid-column: full; }
@media (max-width: 600px) { .jr-prose { font-size: 18px; line-height: 1.62; } }

.jr-prose p + p,
.jr-prose p + ul, .jr-prose p + ol,
.jr-prose ul + p, .jr-prose ol + p { margin-top: 1.35em; }

.jr-prose h2,
.jr-prose h3 {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-top: 1.9em;
}
.jr-prose h2 { font-size: 1.45em; }
.jr-prose h3 { font-size: 1.15em; }
.jr-prose h2 + p, .jr-prose h3 + p { margin-top: 0.5em; }

.jr-prose a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--fast) var(--ease);
}
.jr-prose a:hover { color: var(--accent); }
.jr-prose strong { font-weight: 600; }
.jr-prose code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.84em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: rgba(20, 16, 15, 0.07);
}

.jr-prose ul, .jr-prose ol { padding-left: 1.3em; }
.jr-prose ul { list-style: disc; }
.jr-prose ol { list-style: decimal; }
.jr-prose li + li { margin-top: 0.45em; }
.jr-prose li::marker { color: var(--dim); }

.jr-prose blockquote {
  margin-block: 1.6em;
  padding-left: 22px;
  border-left: 3px solid var(--paper);
  font-style: italic;
}
.jr-prose .jr-pull {
  margin-block: 1.4em;
  padding: 0;
  border: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.jr-break {
  border: 0;
  margin-block: 2.2em;
  text-align: center;
  color: var(--dim);
}
.jr-break::before { content: '·  ·  ·'; white-space: pre; font-size: 26px; letter-spacing: 0.3em; }

/* the sign-off every post ends on, with the writer's credit above it */
.jr-signoff {
  margin-top: 2.4em;
  font-style: italic;
  color: var(--dim);
}
.jr-signoff p + p { margin-top: 0.2em; }

/* ---------------------------------------------------------- figures */
.jr-fig { margin-block: 2.1em; }
.jr-fig:first-child { margin-top: 0; }
.jr-fig img,
.jr-fig video {
  /* portrait shots would otherwise run a screen and a half tall */
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 86vh;
  margin-inline: auto;
  border-radius: 4px;
  background: var(--ink-3);
}
.jr-fig--wide img, .jr-fig--wide video,
.jr-fig--full img, .jr-fig--full video { width: 100%; object-fit: cover; }
.jr-fig--full img, .jr-fig--full video { border-radius: 0; }
.jr-fig figcaption {
  margin-top: 12px;
  text-align: center;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--dim);
}
.jr-embed { aspect-ratio: 16 / 9; }
.jr-embed iframe { width: 100%; height: 100%; border: 0; border-radius: 4px; }
.jr-cover { margin-bottom: 2.3em; }

/* ---------------------------------------------------------- end */
.jr-end {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 28px;
  margin-top: clamp(48px, 7vw, 72px);
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  font-size: 15px;
  font-weight: 600;
}
.jr-end a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color var(--fast) var(--ease);
}
.jr-end a:hover { color: var(--accent); }
.jr-end svg { width: 15px; height: 15px; flex: none; }
.jr-back { color: var(--dim); }
/* a thumb needs more than the 21px line (2026-09-26 mobile sweep) */
@media (pointer: coarse) {
  .jr-end a { padding-block: 10px; margin-block: -10px; }
}
.jr-orig:only-child { margin-left: 0; }

.jr-more { margin-top: clamp(72px, 10vw, 112px); }
.jr-more-h {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ---------------------------------------------------------- list */
.jr-ihead { margin-bottom: clamp(28px, 5vw, 56px); }
.jr-ititle {
  font-family: 'Hanson', var(--display);
  font-weight: 700;
  font-size: clamp(48px, 10vw, 104px);
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--accent);
}
.jr-ihead .jr-meta { margin-top: 14px; }

.jr-list { border-top: 1px solid var(--hairline); }
.jr-item { border-bottom: 1px solid var(--hairline); }
.jr-item-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 4vw, 40px);
  padding-block: clamp(22px, 3vw, 30px);
}
.jr-item-title {
  margin-top: 8px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  transition: color var(--fast) var(--ease);
}
.jr-item-link:hover .jr-item-title { color: var(--accent); }
.jr-item-sub {
  margin-top: 6px;
  font-family: var(--jr-serif);
  font-size: 17px;
  line-height: 1.45;
  color: var(--dim);
}
@media (max-width: 600px) { .jr-item-sub { font-size: 15px; } }
.jr-item-shot {
  width: clamp(84px, 12vw, 120px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  background: var(--ink-3);
}
.jr-item-shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.jr-item-link:hover .jr-item-shot img { transform: scale(1.04); }

/* ---------------------------------------------------------- progress */
.jr-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 400;
  pointer-events: none;
}
.jr-progress span {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}