/* Clovermind: the research pages (research.html, research-001.html, research-002.html).
   Linked after css/main.css, which supplies the tokens, header, footer, cards, captions and the
   .papers rows. This sheet adds two things:
   1. the research index: the page title over the wide pencil plate (main.css sizes the plate and, from
      1180px, sets the title in its open left side), and the papers as a list of rows (title, date and tag,
      and each paper's own dek);
   2. the reading layout: a back link and the date/tag line over a Newsreader title and dek, a sticky
      table of contents beside the text from 1180px (js/article.js marks the section in view), Hanken
      body at a comfortable measure, figures in paper mats inside cards, quiet tables, and the notes.
   Everything reads without JS and under reduced motion. */

:root {
  --measure: 35rem;                      /* the text column: about 70 characters of 18px Hanken per line */
  --box: 41rem;                          /* the notes card and the wide table: their text sits at the measure */
  --wide: 55rem;                         /* figures, the valley, the head and the next paper run this wide (880px) */
  --toc: 208px;
  --col-gap: clamp(56px, 6vw, 96px);
}

/* ============================================================
   1. Research index
   ============================================================ */

.r-lead { padding-top: clamp(24px, 3.2vw, 48px); padding-top: round(clamp(24px, 3.2vw, 48px), 1px); }
.r-stage { position: relative; }

/* The title stands above the plate; from 1180px it is set over the sheet's open left side, the net keeping to
   the right. Its box there is the plate's own height (main.css, .r-stage > .r-title), so it centres on the sheet. */
.r-title { margin-bottom: clamp(28px, 4vw, 44px); }

@media (min-width: 1180px) {
  .r-title {
    position: absolute; left: 0; top: 0; z-index: 1;
    width: 100%;
    display: flex; align-items: center;
    margin: 0; padding: 0 0 8px clamp(56px, 5.4vw, 80px);
    font-size: 3.5rem;                   /* 56px, the .display maximum: a single word, set on the open paper */
    pointer-events: none;
  }
}

/* the papers: one card of rows, as on the home page, with each paper's dek beside its title */
.r-papers { margin-top: clamp(32px, 3.6vw, 52px); padding: var(--s-2) clamp(24px, 4vw, 56px); }
.r-papers .paper {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) 48px;
  column-gap: clamp(24px, 4vw, 64px);
  padding: clamp(32px, 3.4vw, 48px) 0;
  align-items: start;
}
.r-papers .paper-meta { grid-column: 1; grid-row: 1; }
.r-papers .paper-title { grid-column: 1; grid-row: 2; font-size: clamp(1.625rem, 1.2rem + 1vw, 2.25rem); line-height: 1.12; }
.r-papers .paper-dek {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  color: var(--graphite); font-size: 16px; line-height: 1.6; text-wrap: pretty;
}
.r-papers .paper-go { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.r-papers .paper--ghost { padding-block: var(--s-6) var(--s-5); }

/* ============================================================
   2. The article: back link, date and tag, title, dek
   ============================================================ */

.article { padding-top: clamp(24px, 3.6vw, 56px); }

/* one column below 1180px, centred on the reading measure */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "back" "head" "body" "next";
  max-width: 45rem;
  margin-inline: auto;
}

.article-back { grid-area: back; margin-bottom: var(--s-5); }
.arrow-link--back { margin-left: -2px; }
.arrow-link--back svg { transform: scaleX(-1); }
.arrow-link--back:hover svg { transform: scaleX(-1) translateX(3px); }

.article-head {
  grid-area: head; min-width: 0;
  max-width: var(--wide);
  padding-bottom: clamp(36px, 4vw, 52px);
  margin-bottom: clamp(36px, 4vw, 52px);
  border-bottom: 1px solid var(--hairline);
}
.article-meta { font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--graphite); }
.article-head .display { margin-top: var(--s-4); max-width: 17em; }
.article-dek {
  margin-top: clamp(20px, 2.4vw, 28px);
  max-width: 34em;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);   /* 20 to 24px */
  line-height: 1.42; letter-spacing: -0.006em;
  color: var(--graphite); text-wrap: pretty;
}

/* ============================================================
   3. The table of contents (wide screens only; js/article.js marks the section in view)
   ============================================================ */

.article-toc { grid-area: toc; display: none; }
.article-toc ol { border-left: 1px solid var(--hairline); }
.article-toc a {
  display: flex; align-items: center; min-height: 44px;
  margin-left: -1px; padding: 6px 0 6px 18px;
  border-left: 1px solid transparent;
  font-size: 14.5px; line-height: 1.4; font-weight: 500;
  color: var(--graphite); text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}
.article-toc a:hover { color: var(--ink); }
.article-toc a.is-active { color: var(--ink); border-left-color: var(--pencil); }
.article-toc a:focus-visible { outline-offset: -2px; }

@media (min-width: 1180px) {
  .article-layout {
    max-width: none; margin-inline: 0;
    grid-template-columns: var(--toc) minmax(0, 1fr);
    grid-template-areas: "back head" "toc body" ". next";
    column-gap: var(--col-gap);
  }
  /* the back link sits in the margin column, level with the date line */
  .article-back { margin: -12px 0 0; align-self: start; }
  .article-toc {
    display: block; align-self: start;
    position: sticky; top: calc(var(--header) + 32px);
    max-height: calc(100vh - var(--header) - 64px); overflow-y: auto;
    padding: 2px 0;   /* keeps the focus ring inside the scroll box */
    transition: top .3s cubic-bezier(.2, .7, .2, 1);
  }
  /* the header slides away while reading down (js/site.js): the contents follow it up */
  .header-hidden .article-toc { top: 32px; max-height: calc(100vh - 64px); }
}

/* ============================================================
   4. The body
   ============================================================ */

.article-body { grid-area: body; min-width: 0; font-size: 18px; line-height: 1.72; color: var(--ink); }
.article-body > * { max-width: var(--measure); }
.article-body > .a-note, .article-body > .a-table-wrap:not(.a-table-wrap--narrow) { max-width: var(--box); }
.article-body > * + * { margin-top: 1.1em; }
.article-body > :first-child { margin-top: 0; }
.article-body [id] { scroll-margin-top: calc(var(--header) + 24px); }

.article-body h2 {
  margin-top: clamp(56px, 6vw, 80px);
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.625rem, 1.25rem + .9vw, 2.125rem);   /* 26 to 34px */
  line-height: 1.16; letter-spacing: -0.014em;
  text-wrap: balance; font-variant-numeric: lining-nums;
}
.article-body > h2 + * { margin-top: 20px; }
.article-body > h2:first-child { margin-top: 0; }

/* "Strange thing one": the article's own numbering, a quiet line over its heading */
.article-body .sec-num { margin-top: clamp(56px, 6vw, 80px); font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--graphite); }
.article-body .sec-num + h2 { margin-top: 10px; }

/* "The biology": a subheading inside a section */
.article-body h3 {
  margin-top: 44px;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.25rem, 1.15rem + .3vw, 1.375rem);   /* 20 to 22px */
  line-height: 1.3; letter-spacing: -0.006em;
}
.article-body > h3 + p { margin-top: 10px; }

/* Figures: the chart printed onto a mat, the mat set in a card, the caption in the card below it.
   The charts are drawn on white; multiplied onto the mat they read as ink on the paper. */
.article-body > .a-fig, .article-body > .a-fig + * { margin-top: clamp(36px, 4vw, 48px); }
.article-body > h2 + .a-fig { margin-top: 28px; }
.a-fig {
  max-width: var(--wide);
  background: var(--card); border-radius: var(--r-xl); box-shadow: 0 0 0 1px var(--edge);
  padding: var(--inset);
}
.a-plate {
  background: var(--mat); border-radius: var(--r-md);
  padding: clamp(10px, 2.2vw, 28px);
  isolation: isolate;
}
.a-plate img { width: 100%; height: auto; mix-blend-mode: multiply; }
/* each chart links to its full-size image (same tab), so a phone reader can open it and zoom in */
.a-plate-link { display: block; cursor: zoom-in; border-radius: 6px; }
.a-plate-link:focus-visible { outline-offset: 4px; }
.a-fig > .fig { padding: 14px 14px 6px; max-width: 64ch; }

/* The valley: two states, side by side */
.article-body > .valley { max-width: var(--wide); margin-top: clamp(28px, 3vw, 36px); }
.article-body > .valley + * { margin-top: clamp(28px, 3vw, 36px); }
.valley { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.valley > div {
  background: var(--card); border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--edge);
  padding: clamp(18px, 2vw, 24px) clamp(18px, 2.2vw, 28px) clamp(20px, 2.2vw, 26px);
}
.valley .vk { font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--ink); }
.valley .vv { margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--graphite); text-wrap: pretty; }

/* Tables: hairlines only, numbers set in tabular figures and aligned on the right */
.article-body > .a-table-wrap { margin-top: clamp(32px, 3.6vw, 44px); }
.article-body > .a-table-wrap + * { margin-top: clamp(32px, 3.6vw, 44px); }
.a-table-wrap { overflow-x: auto; }
.a-table {
  width: 100%; border-collapse: collapse;
  font-size: 16px; line-height: 1.45;
  font-variant-numeric: tabular-nums lining-nums;
}
.a-table thead th {
  padding: 0 20px 12px 0; vertical-align: bottom; text-align: left;
  font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--graphite);
  border-bottom: 1px solid var(--hairline-strong);
}
.a-table tbody th, .a-table td { padding: 12px 20px 12px 0; border-bottom: 1px solid var(--hairline); text-align: left; }
.a-table tbody th { font-weight: 500; }
.a-table tbody th, .a-table td { white-space: nowrap; }   /* "4-class" and every number stay whole; the heads may wrap */
.a-table thead th { text-wrap: balance; }
.a-table .num { text-align: right; }
.a-table-wrap--narrow { max-width: 26rem; }   /* a two-column table reads as a list, not a spread */
.a-table th:last-child, .a-table td:last-child { padding-right: 0; }

/* The notes: the honest part of each article, set apart on a card */
.a-note {
  background: var(--card); border-radius: var(--r-xl); box-shadow: 0 0 0 1px var(--edge);
  padding: clamp(24px, 3vw, 40px) clamp(22px, 3vw, 40px);
  font-size: 17px; line-height: 1.7;
}
.a-note p + p { margin-top: 1em; }
.article-body > h2 + .a-note { margin-top: 24px; }

/* the closing provenance line: the article's own footer */
.article-body > .a-close {
  margin-top: clamp(48px, 5vw, 64px); padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 16px; line-height: 1.55; color: var(--graphite);
  text-wrap: pretty;
}

/* ============================================================
   5. After the article: the other paper, one row in a card, so the page has a way onward
   ============================================================ */

.article-next { grid-area: next; min-width: 0; max-width: var(--wide); margin-top: clamp(64px, 7vw, 96px); }
.article-next .paper { grid-template-columns: minmax(0, 1fr) 48px; }
.article-next .paper-go { grid-row: 1 / span 3; }
.article-next .paper-dek { grid-column: 1; max-width: 56ch; color: var(--graphite); font-size: 16px; line-height: 1.6; text-wrap: pretty; }

/* ============================================================
   6. Responsive
   ============================================================ */

@media (max-width: 900px) {
  .r-papers .paper { grid-template-columns: minmax(0, 1fr) 48px; row-gap: var(--s-3); column-gap: var(--s-5); }
  .r-papers .paper-dek { grid-column: 1; grid-row: 3; align-self: start; max-width: 52ch; }
  .r-papers .paper-go { grid-column: 2; grid-row: 1 / span 3; }
}

@media (max-width: 600px) {
  .r-papers { padding: var(--s-1) 26px; }
  /* as on the home page: the arrow is a cue at the top right, level with the date line, and the title and
     dek run the full width of the row */
  .r-papers .paper { grid-template-columns: minmax(0, 1fr); padding: 28px 0; }
  .r-papers .paper-go { grid-area: auto; align-self: start; top: 16px; }   /* 28px row top + half the 20px date line - 22px */
  .article-next .paper { grid-template-columns: minmax(0, 1fr); }
  .article-next .paper-go { grid-area: auto; }
  .r-papers .paper-title { font-size: 1.5rem; line-height: 1.18; }   /* as on the home page's rows */

  .article-head .display { font-size: clamp(2.125rem, 1.6rem + 2.4vw, 2.5rem); }   /* 34 to 40px: long titles stay four or five lines */
  .article-body { font-size: 17px; line-height: 1.7; }
  .a-note { font-size: 16.5px; }
  .a-plate { padding: 8px; }
  .a-fig > .fig { padding: 12px 8px 4px; }
  .valley { grid-template-columns: 1fr; }
  .a-table { font-size: 15px; }
  .a-table thead th { font-size: 13.5px; padding-right: 14px; }
  .a-table tbody th, .a-table td { padding-right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .article-toc a, .arrow-link--back svg { transition: none; }
}

@media print {
  .site-header, .site-footer, .article-toc, .article-back, .article-next { display: none; }
  .article-layout { display: block; max-width: none; }
  .a-fig, .a-note, .valley > div { box-shadow: 0 0 0 1px var(--hairline); break-inside: avoid; }
}