/* ==========================================================================
   article.css — the long-form page under /ideas/<slug>/.

   Nothing here is a new design system. An article is the site's existing type
   steps, hairlines, figure idiom and chrome, arranged for reading instead of
   for announcing. Three components are new and only three:

     .artbody   the reading column
     .spec      a datum table on hairlines
     .fig*      figures at the width of the reading column

   Everything else — .opener, .band, .rule-top, .figcap, .link, .entry — is
   the chrome every other page is built from.

   ONE THING IS SCOPED DIFFERENTLY, AND ONLY HERE: the column is CENTRED.
   Every other page on this site is built on the 1fr 2fr spine, and this file
   used to argue that an article should be too — that prose, tables and
   figures starting on the site's one vertical seam was worth more than a
   centred measure. Rendered, it was not. The seam put a 450px empty column
   beside every paragraph of a 10,000px page, and a reader with a title, a
   standfirst and six figures all sitting right of centre reads the layout
   as a mistake, which on a page whose whole argument is care is the most
   expensive thing it could read as.

   So under .art the opener and the reading column are one centred track:
   1fr / the column / 1fr. The COLUMN IS THE SAME WIDTH IT ALWAYS WAS — the
   same fraction of the same measure the 2fr track gave it, ~900px at the
   reference viewport, which is the width the source frames were cut at.
   Nothing about the figures changed. Only where the column sits changed.

   The spine is untouched everywhere else: the ideas index, the studio page,
   connect and the footer are all still on 1fr 2fr.
   ========================================================================== */

/* --------------------------------------------------------------------------
   THE CENTRED COLUMN

   --read is a fraction, not a new width (A8). It is exactly what the spine's
   2fr track resolved to: two thirds of the measure less the gutter. Change
   the spine and this follows it.

   --measure is the prose measure that already governed every paragraph on
   this page, in em like every measure here (B6). Once the column is centred
   the measure has to be centred inside it too: a 560px paragraph flush-left
   in a 908px column is a page centred in its figures and left-weighted in
   its words, which is the original defect in a smaller box.

   IT IS APPLIED ON THE COLUMN'S CHILDREN, NOT ON THE TYPE INSIDE THEM, and
   that placement is the whole reason it works. `40em` resolves against the
   font size of whatever element carries it, so a cap written onto .spec —
   which is mono at 12px — is 480px while the same cap on a 14px paragraph is
   560px, and two centred blocks 40px apart in width do not share a left
   edge. The column's children carry no type class and therefore all sit at
   the body step, so the measure resolves once and every block lines up.

   FIGURES take the whole column. TEXT takes the measure. Both are centred on
   the same axis, so the page has one centre line and figures step out past
   the words on both sides rather than on one. The test is the ELEMENT, not a
   class: <figure> is the tag for "this is the evidence", and the node canvas
   and the finish strip that arrived from the studio page are figures without
   being .fig.
   -------------------------------------------------------------------------- */
.art {
  --read: calc((100% - var(--grid-gap)) * 2 / 3);
  --measure: 40em;
}
.art .opener,
.art .artbody {
  display: grid;
  grid-template-columns: 1fr minmax(0, var(--read)) 1fr;
  align-items: start;
}
.art .opener > *,
.art .artbody > * { grid-column: 2; min-width: 0; }
/* width:100% is load-bearing, not decoration. An auto margin on a grid item
   overrides `stretch`, so without a definite width the box falls back to
   shrink-to-fit and a three-column table centres at its own content width
   instead of on the measure — four tables, four different left edges. */
.art .artbody > *:not(figure) { width: 100%; max-width: var(--measure); margin-inline: auto; }

/* The section label stops being the left half of a seam and becomes a line
   above its own section. It takes .utility because that is what a label is
   set in on THIS page type already: the article's kicker, its plate line and
   every figure caption are mono uppercase, and a 24px uppercase .h5 stacked
   directly over a 32px statement is two headings arguing, not a label and a
   statement. A6 is unmoved — this is a label, which is what the register is
   for. The element is still an <h2> and still carries the id the section is
   labelled by. */
.art .opener { gap: var(--space-sm) var(--grid-gap); }

/* --------------------------------------------------------------------------
   THE OPENER

   Kicker, title, standfirst, then a plate line on a hairline. The title block
   takes the measure like everything else, so the page has ONE left edge from
   the title to the footer. The title wraps to two lines at the reference
   viewport where it used to run to one; that is the cost, and it is cheaper
   than a title hanging 170px left of every word under it.
   -------------------------------------------------------------------------- */
.art__title { margin-block: var(--space-2xs) var(--space-2xs); }
/* The plate is three label/value pairs on ONE line. Its gutter was fitted when
   the opener ran the full 2fr column; on the measure, --space-xl put the third
   pair on a second line, and a plate that wraps reads as a plate that did not
   fit rather than as two rows of data. One step down the same scale. */
.art__plate {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-lg);
  border-top: 1px solid var(--border);
  padding-top: var(--space-xs);
  margin-top: var(--space-md);
  width: 100%;
}

/* --------------------------------------------------------------------------
   THE READING COLUMN

   The column is sized above. What is left here is the rhythm down it, and
   the measure centred inside it.
   -------------------------------------------------------------------------- */
.artbody {
  gap: var(--space-2xl) var(--grid-gap);
  margin-top: var(--space-2xl);
}

/* Paragraph measure in em, like every measure on this site (B6). Prose is
   ink, not --ink-muted: a whole page of quiet grey is a page nobody finishes.
   The muted register goes on captions, plates and table labels, where it
   means "this is annotation". */
.copy { display: flex; flex-direction: column; gap: var(--space-md); align-items: flex-start; }
.copy .link { margin-top: var(--space-2xs); }
/* The section statement sits on the same measure and the same centre line as
   the prose under it, or the two read as two different columns. */
.art .opener__label,
.art .opener__body { max-width: var(--measure); margin-inline: auto; width: 100%; }

/* An indented aside: the one place an article steps out of the running text,
   for a note about what the source does not contain. A hairline on the left,
   the same hairline the tier figure hangs its tiers off. */
.note {
  border-left: 1px solid var(--border);
  padding-left: var(--space-md);
}

@media (max-width: 768px) {
  .art .opener,
  .art .artbody { grid-template-columns: 1fr; }
  .art .opener > *,
  .art .artbody > * { grid-column: 1; }
  .art .opener { gap: var(--space-sm); }
  .artbody { gap: var(--space-xl); }
  /* One column, one left inset: there is nothing left to centre against. */
  .art .artbody > *:not(figure),
  .art .opener__label,
  .art .opener__body { margin-inline: 0; }
}

/* --------------------------------------------------------------------------
   THE SPEC TABLE

   Plate data, in rows. Mono uppercase is the site's one register for plate
   data (A6) and this is plate data, so the whole table takes .utility and
   the label column takes --ink-muted, exactly the way every label/value pair
   on this site is set apart: by colour weight, not by a fill.

   No zebra, no header fill, no vertical rules. A row is a hairline, which is
   the same object every other rule on the site is.
   -------------------------------------------------------------------------- */
/* No cap and no auto margin here: the table's wrapper is the column child and
   already carries the measure. A second cap in the mono step would be 480px
   against the wrapper's 560 and the table would sit off the page's one edge. */
.spec { width: 100%; border-collapse: collapse; }
.spec th, .spec td {
  text-align: left;
  vertical-align: baseline;
  padding-block: var(--space-2xs);
  padding-right: var(--space-md);
  border-bottom: 1px solid var(--border);
  font-weight: 400;
}
.spec thead th { color: var(--ink-muted); border-bottom-color: var(--ink); }
.spec tbody th { color: var(--ink-muted); }
.spec td:last-child, .spec th:last-child { padding-right: 0; text-align: right; }
/* A two-column table is a label and its value, so the value belongs on the
   trailing edge — the same place the re-rank table puts its metric. A table
   with three or more columns is a list of records, and a right-aligned middle
   would read as a column of its own. */
.spec--wide td:last-child, .spec--wide th:last-child { text-align: left; }
.spec__cap { padding-top: var(--space-xs); }

@media (max-width: 600px) {
  .spec th, .spec td { padding-right: var(--space-xs); }
}

/* --------------------------------------------------------------------------
   FIGURES

   Same anatomy as every figure on the site: a well the ratio class shapes, a
   cover-cropped image inside it, and a museum caption under it in mono. The
   only thing this file adds is the two multi-cell arrangements, and both are
   grids on the layout gutter rather than on a new number.
   -------------------------------------------------------------------------- */
.fig { margin: 0; }
.fig__frame {
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ground-2);
}
.fig__frame img { width: 100%; height: 100%; object-fit: cover; }

/* A figure whose source is narrow. The column is ~900px and some of these
   frames were cut at 470; running one of those to the full column is a box
   twice the width of the picture inside it. A fraction, not a new width (A8). */
.fig--half { max-width: 50%; margin-inline: auto; }
@media (max-width: 768px) { .fig--half { margin-inline: 0; } }
@media (max-width: 600px) { .fig--half { max-width: none; } }

.fig-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); align-items: start; }
.fig-quad { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); align-items: start; }
.fig__cell { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3xs); }
.fig__cell .fig__frame { margin-bottom: var(--space-2xs); }

@media (max-width: 600px) {
  .fig-quad { grid-template-columns: 1fr 1fr; row-gap: var(--space-lg); }
  .fig-pair { grid-template-columns: 1fr; row-gap: var(--space-lg); }
}

/* --------------------------------------------------------------------------
   THE TAIL

   One entry row to the sibling article, on the shared .entry component, so
   the end of an article is the same object the index is made of. It is a
   sibling of the opener rather than a child, so it takes --read and the auto
   margins directly: same column, same centre line, one mechanism.
   -------------------------------------------------------------------------- */
.art__more { margin-top: var(--space-md); width: var(--read); margin-inline: auto; }
@media (max-width: 768px) { .art__more { width: auto; margin-inline: 0; } }