/* UI-019 article page, UI-020 author page and the authors index on the shell
   container (2026-10-12), so they share the header's left and right edge
   with the home page and the Insights list. From 1200px each page is a
   spread on the six tick columns, split on the fourth tick: words on the
   left half, the record and the plate on the right. Below 1200px the pages
   keep their single column. The head geometry (shell edge, tick module,
   ticks across the outer margins) is shared with the list in blog-list.css;
   the base rules stay in article.css, author.css and authors-index.css.
   Loads after blog-list.css; sizes and colours here resolve to tokens. */

/* ---------- article head: title and record ---------- */

/* The title stands over the reading column. The byline and the three dates
   leave their strip and become a ledger on the right half: dashed rules
   under an ink rule, as on the home page, labels on the fourth tick and
   values on the fifth. The article spread starts at 1024px, so no width
   shows a single column beside an empty half. */
@media (min-width: 1024px) {
  .layered-article .page-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
  .layered-article .page-head h1 { margin: 0; padding-inline-end: var(--space-6); text-wrap: balance; }
  .layered-article .dates { display: grid; gap: 0; margin: 0; border-block-start: 2px solid var(--color-text); }
  .layered-article .dates > span {
    display: grid;
    grid-template-columns: calc(100% / 3) minmax(0, 1fr);
    align-items: center;
    gap: 0;
    min-block-size: calc(var(--space-5) + var(--space-4));
    border-block-end: 1px dashed var(--color-border-strong);
  }
}

/* ---------- article body: reading column and plate ---------- */

/* Two halves with no gap, so the cover's left edge is the fourth tick and
   its right edge the header's. The left half less its 2rem inset is the
   40rem reading measure at full width, and never more. The cover is the
   article's plate: it starts level with the first line and stays in view
   while the text scrolls. Stale notice and linked products run the full
   measure; the closing note and the previous and next links close the two
   halves on one rule. */
@media (min-width: 1024px) {
  .article-page {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "stale stale" "main plate" "products products" "note nav";
    align-items: start;
  }
  .article-page > .stale-bar { grid-area: stale; }
  .article-page > .article-main { grid-area: main; padding-inline-end: var(--space-6); }
  .article-page > :is(.article-hero, noscript) {
    grid-area: plate;
    position: sticky;
    inset-block-start: var(--space-6);
    max-width: none;
    margin-block: var(--space-2) 0;
  }
  .article-page > noscript .article-hero { max-width: none; margin: 0; }
  .article-page > .article-products { grid-area: products; }
  .article-page > :is(.srcblock-details, .article-note) { grid-area: note; padding-inline-end: var(--space-6); }
  .article-page > .prevnext { grid-area: nav; }
  .article-page > :is(.srcblock-details, .article-note, .prevnext) {
    max-width: none;
    margin-block-start: var(--space-8);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--color-border);
  }
  .article-page > .prevnext { padding-block-start: var(--space-2); }
}

/* ---------- author head ---------- */

/* A head without a plate keeps its ghost inside the content measure. */
@media (min-width: 768px) {
  .layered.layered-author .ghost,
  :lang(en) .layered.layered-author .ghost { right: var(--head-edge); }
}

/* Plate and name hold the left half; the positioning takes the right half
   with its first line on the name's baseline. */
@media (min-width: 1200px) {
  .layered-author .author-head { grid-template-columns: var(--space-16) minmax(0, 1fr) 50%; align-items: baseline; }
  .layered-author .author-head-text { display: contents; }
  .layered-author .author-avatar { align-self: start; }
  .layered-author .author-head .author-positioning { margin: 0; max-width: none; }
}

/* ---------- authors index ---------- */

/* The index head is the Insights head. On phones its kicker tag is longer
   than the list's, so the ghost steps down to stay clear of it. */
@media (max-width: 640px) {
  .layered-authors .ghost { font-size: 20vw; }
}

/* Three writers on six tick columns: each writer takes two with no gap, so
   the rules between writers stand on the head's ticks. */
@media (min-width: 1200px) {
  .authors-index .masthead { column-gap: 0; }
  .authors-index .writer-cell { padding-inline-end: var(--space-5); }
  .authors-index .writer-cell:nth-child(3n) { padding-inline-end: 0; }
  .authors-index .writer-cell:not(:nth-child(3n + 1)) { padding-inline-start: var(--space-5); }
  .authors-index .writer-cell:not(:nth-child(3n + 1))::before { left: 0; }
}