/* Article pages (Matt, 2026-10-22): the editorial layout and the image standard, linked from every
   article after theme.css, so equal-specificity rules here win.

   Layout. From 64rem the article spans the same width as the menu and the Keep reading cards: a
   reading column of 42rem (about 72 characters at 19px; it was 95 at 837px) and a right margin. The
   author card opens the margin; pictures follow it there, their right edge on the cards' right
   edge, and a horizontal one reaches into the text, which wraps around it. Below 64rem the article
   is one column as before and the card is hidden (the closing "Written by" block says the same).
   ArticleRenderer marks the opening paragraph as the lead-in and puts Ashley's portrait in the card
   and in the closing block.

   Images. A vertical picture (no wider than 1.15:1, squares included) takes a 26rem slot and a
   horizontal one 36rem: 416px and 576px, so a 4:5 graphic shows at 416×520 and a 4:3 photo at
   576×432, about the same weight. Narrower than a slot (phones), a picture fills the column. One
   shown smaller than its file is a link that opens it full size in the site's image viewer
   (theme.js), cued by a small "View larger" line under it, never over it: many of Ashley's
   pictures are graphics with words up to their edges. */

/* ---- Images, at every width ---- */
.article__body .article__figure--vertical,
.article__body .article__figure--horizontal { margin-left: auto; margin-right: auto; }
.article__body .article__figure--vertical { max-width: 26rem; }
.article__body .article__figure--horizontal { max-width: 36rem; }
.article__body :is(.article__figure--vertical, .article__figure--horizontal) img { margin-left: auto; margin-right: auto; } /* a file smaller than its slot sits centred */
/* A picture outside a figure (post 33's logo sits in a heading) takes the same slots on the image. */
.article__body .article__img--vertical { max-width: min(100%, 26rem); margin-left: auto; margin-right: auto; }
.article__body .article__img--horizontal { max-width: min(100%, 36rem); margin-left: auto; margin-right: auto; }

/* Full-size view: the whole picture is the control. The cue is generated text, so the article's words
   are unchanged; the link's name comes from its aria-label ("View larger: " and the alt text). */
.article__enlarge { display: block; color: inherit; text-decoration: none; cursor: zoom-in; border-radius: var(--t-radius); }
.article__enlarge picture { display: block; }
.article__enlarge::after {
  content: "View larger"; display: block; width: max-content; margin: 0.5rem 0 0 auto; padding-left: 1.3rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B625E' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.3 15.3l5 5M10.5 7.8v5.4M7.8 10.5h5.4'/%3E%3C/svg%3E") left center / 1rem no-repeat;
  font-size: 0.875rem; line-height: 1.5; color: var(--t-seaglass-text); text-underline-offset: 0.2em;
}
/* A credit shares the cue's line, on the left; a long one wraps short of the cue. Neither box is
   positioned, so the credit, later in the figure, stays on top and its own link stays clickable. */
.article__body .article__enlarge + figcaption { margin-top: -1.3125rem; padding-right: 7.5rem; line-height: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .article__enlarge img { transition: box-shadow var(--t-hover-duration) var(--motion-easing-standard); }
}
@media (hover: hover) {
  .article__enlarge:hover img { box-shadow: var(--shadow-medium); }
  .article__enlarge:hover::after { color: var(--t-blue); text-decoration: underline; }
}
.article__enlarge:focus-visible { outline: 2px solid var(--t-seaglass-dark); outline-offset: 3px; }

/* ---- The lead-in and the closing author block, at every width ---- */
.article__body > .article__lead { font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.375rem); line-height: 1.6; color: var(--t-blue); }
.author-lockup--article { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: 1.25rem; align-items: center; }
.author-lockup--article > :not(.author-lockup__portrait) { grid-column: 2; }
.author-lockup__portrait { grid-row: 1 / span 3; display: block; }
.author-lockup__portrait img { display: block; width: 5.5rem; height: 5.5rem; border-radius: 50%; }

/* ---- The author card (shown from 64rem) ---- */
.article-author { display: none; }
.article-author__portrait { grid-row: 1 / span 3; display: block; }
.article-author__portrait img { display: block; width: 4.5rem; height: 4.5rem; border-radius: 50%; }
.article-author__by { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-seaglass-text); }
.article-author__name { margin: 0; font-family: "Newsreader", Georgia, serif; font-size: 1.3rem; line-height: 1.2; color: var(--t-blue); }
.article-author__role { margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--t-seaglass-text); }
.article-author__links { grid-column: 1 / -1; margin: 0.9rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.95rem; }

/* ---- The editorial layout (from 64rem) ---- */
@media (min-width: 64rem) {
  #article > .section__inner { display: flow-root; } /* holds the card and pictures that reach past the last paragraph */
  #article > .section__inner > .article__body { max-width: none; }
  #article > .section__inner > .editorial-note { max-width: 42rem; }
  .article__body > * { max-width: 42rem; }
  .article__body > p, .article__body > ul, .article__body > ol { font-size: 1.1875rem; line-height: 1.68; }
  .article__body > :is(ul, ol) li { font-size: inherit; line-height: inherit; }
  .article__body > .article__lead { font-size: 1.375rem; line-height: 1.6; }

  .article-author {
    float: right; clear: right; width: 26rem; max-width: none; margin: 0.4rem 0 2rem 2.5rem; padding: 1.4rem 1.5rem;
    display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.25rem 1.1rem; align-items: center;
    background: var(--t-sand); border-radius: var(--t-radius);
  }

  /* Pictures step into the margin, one under another and under the card. */
  .article__body > :is(.article__figure--vertical, .article__figure--horizontal) { float: right; clear: right; width: fit-content; margin: 0.4rem 0 1.5rem 2.5rem; }
  .article__body > .article__figure--vertical { max-width: 26rem; }
  .article__body > .article__figure--horizontal { max-width: 36rem; }

  /* A panel, table or quotation never runs under a picture; a video or the pitch deck starts below one. */
  .article__body > :is(blockquote, table, .article__table, .listen-card, .article__blurb) { display: flow-root; }
  .article__body > :is(.video-embed, .slide-deck) { clear: right; }
}

@media print {
  .article__enlarge::after { display: none; }
  .article__body .article__enlarge + figcaption { margin-top: 0.5rem; padding-right: 0; }
}