/* styles/editorial.css
 * Article system from the canvas Editorial board (ouGVN): properties, containers, prose base,
 * lead and contents, headings, inline marks. Lists, tables, code, figures, sidenotes,
 * definition lists, FAQ, pull lines and quotes live in editorial-blocks.css (load it next);
 * heroes, author and previously in editorial-index.css; index pieces in
 * editorial-index-list.css. Viewports: M below 900px, D from 900px, W from 1680px.
 *
 * Containers
 *   .article--rail      three tracks (margin, text, side) on D and W; one column on M.
 *   .article--centered  one measure, with .break-pull / .break-wide / .break-full breakouts.
 * Custom properties (--ed-*, --rail-*) are scoped to .article and the hero roots, not :root.
 * Rail rows: a direct child sits in the text track. A figure's figcaption comes first and
 * takes the margin track; other margin content (.rail-margin) must precede the text in the
 * DOM, or go in a .rail-row wrapper where grid-column places each child. */
@layer editorial {
  .article,
  .post-hero {
    --ed-size: 17px;
    --ed-lh: 1.6;
    --ed-h2-rail: 23px;
    --ed-h2-rail-ls: -0.01em;
    --ed-h2-pad: var(--space-28);
    --ed-h2-centered: 28px;
    --ed-h2-centered-ls: -0.015em;
    --ed-h2-centered-lh: 1.05;
    --ed-h2-centered-pad: var(--space-32) 0 var(--space-4);
    --ed-h3: 20px;
    --ed-h3-ls: -0.01em;
    --ed-pull-line: 23px;
    --ed-pull-line-ls: -0.01em;
    --ed-pull-line-pad: var(--space-12) 0 var(--space-20);
    --ed-pull-rule: 32px;
    --ed-pull-rule-ls: -0.015em;
    --ed-quote-scribble: 40px;
    --ed-quote-scribble-ls: -0.02em;
    --ed-quote-pad: var(--space-40);
    --ed-mark-x: -0.425em;
    --ed-scribble-h: 0.32em;
    --ed-scribble-bottom: -0.22em;
    --ed-scribble-mask: url("/assets/figures/ds/scribble-underline-m.svg");
    --ed-quote: 32px;
    --ed-quote-ls: -0.015em;
    --ed-quote-lh: 1.05;
    --ed-quote-max: none;
    --ed-lead: 18px;
    --ed-dd-lh: 1.4;
    --ed-code-pad: var(--space-14) var(--space-16);
    --ed-code-size: 12px;
    --ed-table-size: 14px;
    --ed-table-first: 200px;
    --ed-gap: var(--space-28);
    --ed-pad-block: var(--space-24) var(--space-56);
    --rail-gap: var(--space-40);
    --rail-margin: 0;
    --rail-text: 0;
    --rail-side: 0;
    --break-pull: 960px;
    --break-wide: 1040px;
  }

  @media (min-width: 900px) {
    .article,
    .post-hero {
      --ed-size: 18px;
      --ed-h2-rail: 32px;
      --ed-h2-rail-ls: -0.015em;
      --ed-h2-centered: 48px;
      --ed-h2-centered-ls: -0.02em;
      --ed-h2-centered-pad: var(--space-48) 0 var(--space-4);
      --ed-h3: 24px;
      --ed-pull-line: 32px;
      --ed-pull-line-ls: -0.015em;
      --ed-pull-rule: 56px;
      --ed-pull-rule-ls: -0.02em;
      --ed-quote-scribble: 72px;
      --ed-quote-scribble-ls: -0.025em;
      --ed-mark-x: -0.472em;
      --ed-scribble-h: 0.28em;
      --ed-scribble-bottom: -0.2em;
      --ed-scribble-mask: url("/assets/figures/ds/scribble-underline.svg");
      --ed-quote: 56px;
      --ed-quote-ls: -0.02em;
      --ed-quote-max: 1120px;
      --ed-lead: 20px;
      --ed-dd-lh: 1.6;
      --ed-code-pad: 18px var(--space-20);
      --ed-code-size: 13px;
      --ed-table-size: 15px;
      --ed-table-first: 300px;
      --ed-pad-block: var(--space-24) var(--space-96);
      /* Rail tracks: the margin grows 200 to 220 from 900 to 1440; the text track holds the
         frame's 640 as soon as it fits and the side track (empty in every essay so far)
         takes what is left, so the measure never collapses between frame widths. */
      --rail-margin: clamp(200px, calc(200px + (100vw - 900px) * 0.037), 220px);
      --rail-text: 640px;
      --rail-side: 340px;
    }
  }

  @media (min-width: 1680px) {
    .article,
    .post-hero {
      --ed-size: 20px;
      --ed-h2-rail: 40px;
      --ed-h2-rail-ls: -0.02em;
      --ed-h2-pad: var(--space-80);
      --ed-h2-centered: 96px;
      --ed-h2-centered-ls: -0.03em;
      --ed-h2-centered-lh: 0.95;
      --ed-h2-centered-pad: var(--space-96) 0 var(--space-8);
      --ed-h3: 28px;
      --ed-h3-ls: -0.015em;
      --ed-pull-line: 64px;
      --ed-pull-line-ls: -0.025em;
      --ed-pull-line-pad: var(--space-40) 0 var(--space-48);
      --ed-pull-rule: 96px;
      --ed-pull-rule-ls: -0.03em;
      --ed-quote-scribble: 120px;
      --ed-quote-scribble-ls: -0.03em;
      --ed-quote-pad: var(--space-56);
      --ed-mark-x: -0.433em;
      --ed-scribble-h: 0.217em;
      --ed-scribble-bottom: -0.167em;
      --ed-scribble-mask: url("/assets/figures/ds/scribble-underline-w.svg");
      --ed-quote: 78px;
      --ed-quote-ls: -0.025em;
      --ed-quote-lh: 0.95;
      --ed-quote-max: 1512px;
      --ed-code-size: 14px;
      --ed-table-size: 16px;
      --ed-table-first: 360px;
      --ed-pad-block: var(--space-32) 115px;
      --rail-gap: var(--space-80);
      --rail-margin: 340px;
      --rail-text: 720px;
      --rail-side: 460px;
      --break-pull: 1080px;
      --break-wide: 1240px;
    }
  }

  /* Containers */
  .article {
    width: 100%;
    max-width: calc(var(--container-max) + 2 * var(--page-gutter));
    margin-inline: auto;
    padding-inline: var(--page-gutter);
  }

  .article--rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--ed-gap);
    padding-block: var(--ed-pad-block);
  }

  .article--rail > *,
  .rail-row > * {
    min-width: 0;
  }

  .article--centered {
    display: flex;
    flex-direction: column;
    gap: var(--ed-gap);
  }

  .article--centered > * {
    width: 100%;
    max-width: var(--measure);
    margin-inline: auto;
  }

  .article--centered > .break-pull {
    max-width: min(var(--break-pull), 100%);
  }

  .article--centered > .break-wide {
    max-width: min(var(--break-wide), 100%);
  }

  .article--centered > .break-full {
    max-width: 100%;
  }

  @media (min-width: 900px) {
    /* Tracks hold the board's 220/640/340 (W 340/720/460) at full width. Between frame
       widths the side track gives way first (see --rail-margin). */
    .article--rail {
      --rail-text-w: min(var(--rail-text), 100% - var(--rail-margin) - 2 * var(--rail-gap));

      grid-template-columns: var(--rail-margin) var(--rail-text-w) minmax(0, var(--rail-side));
      justify-content: center;
      column-gap: var(--rail-gap);
    }

    .article--rail > * {
      grid-column: 2;
    }

    .article--rail > .rail-row,
    .article--rail > .rail-full {
      grid-column: 1 / -1;
    }

    .article--rail > .rail-margin {
      grid-column: 1;
    }

    .article--rail > .rail-side {
      grid-column: 3;
    }

    .article--rail > .rail-wide {
      grid-column: 2 / -1;
    }

    .rail-row {
      display: grid;
      grid-template-columns: subgrid;
    }

    .rail-row > .rail-margin {
      grid-column: 1;
      grid-row: 1;
    }

    .rail-row > .rail-text {
      grid-column: 2;
      grid-row: 1;
    }

    .rail-row > .rail-side {
      grid-column: 3;
      grid-row: 1;
    }
  }

  /* Prose base. --prose-font: sans by default, serif with .prose--serif. */
  .prose {
    --prose-font: var(--font-body);

    color: var(--ink);
    font-family: var(--prose-font);
    font-size: var(--ed-size);
    line-height: var(--ed-lh);
    counter-reset: section;
  }

  .prose--serif {
    --prose-font: var(--font-display);
  }

  .prose :where(p, li, dd) {
    font-family: var(--prose-font);
    font-size: var(--ed-size);
    line-height: var(--ed-lh);
  }

  .prose :where(p) {
    margin: 0;
  }

  /* Lead paragraph and its contents list */
  .prose .lead {
    font-family: var(--font-display);
    font-size: var(--ed-lead);
    line-height: 1.5;
  }

  .prose-lead {
    display: grid;
    gap: var(--space-24);
  }

  .prose-toc {
    order: 1;
    padding-block: var(--space-8);
  }

  .article--rail > .prose-toc {
    order: 0;
  }

  .prose-toc__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 15px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ink-2);
  }

  .prose .prose-toc ol {
    margin: 2px 0 0;
    padding-inline-start: 0;
    gap: 2px;
    list-style: none;
    counter-reset: toc;
  }

  .prose .prose-toc li {
    display: flex;
    gap: var(--space-10);
    padding: var(--space-6) 0;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.4;
    counter-increment: toc;
  }

  .prose .prose-toc li::before {
    content: counter(toc);
    position: static;
    flex: none;
    min-width: 14px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 500;
    color: var(--fern);
  }

  .prose .prose-toc a {
    color: var(--ink-2);
    text-decoration: none;
  }

  .prose .prose-toc a:hover {
    color: var(--fern);
    text-decoration: underline;
  }

  .prose .prose-toc a[aria-current] {
    color: var(--fern);
    font-weight: 600;
  }

  @media (min-width: 900px) {
    .prose-toc {
      padding-block: var(--space-6) 0;
    }

    /* Contents follows the lead in the DOM and starts in the lead's row. Without CSS anchor
       positioning that row grows to fit the list, so no section numeral can reach it. With
       anchor positioning (below) the list runs its full length without sizing any row. */
    .article--rail > .prose-toc {
      grid-column: 1;
      grid-row: 1;
      align-self: start;
      padding: var(--space-6) 0 0;
    }

    .article--rail .prose-lead {
      grid-template-columns: subgrid;
      grid-column: 1 / -1;
      gap: 0 var(--rail-gap);
    }

    .article--rail .prose-lead > .lead {
      grid-column: 2;
      grid-row: 1;
    }

    .article--rail .prose-lead > .prose-toc {
      grid-column: 1;
      grid-row: 1;
      order: 0;
    }
  }

  /* Headings. Rail h2 puts a counter in the margin track; centered h2 is display size. */
  .prose h2,
  .prose h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
    text-wrap: balance;
    scroll-margin-top: calc(var(--nav-h) + var(--space-16));
  }

  /* h2 breaks greedily, as the frames set it ("Choose the reference class before the /
     estimate" at W); balance would move words to the second line. */
  .prose h2 {
    text-wrap: wrap;
    padding-top: var(--ed-h2-pad);
    font-size: var(--ed-h2-rail);
    line-height: 1.05;
    letter-spacing: var(--ed-h2-rail-ls);
  }

  .prose--numbered h2 {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: var(--space-12);
    counter-increment: section;
  }

  .prose--numbered h2::before {
    content: counter(section) / "";
    color: var(--fern);
  }

  .prose--centered h2 {
    padding: var(--ed-h2-centered-pad);
    font-size: var(--ed-h2-centered);
    line-height: var(--ed-h2-centered-lh);
    letter-spacing: var(--ed-h2-centered-ls);
  }

  .prose h3 {
    padding-top: var(--space-12);
    font-size: var(--ed-h3);
    line-height: 1.05;
    letter-spacing: var(--ed-h3-ls);
  }

  /* On the rail the numbered h2 spans the tracks and its numeral sits in the margin track
     of the heading's own row. This is the layout without CSS anchor positioning; the
     @supports block below refines it where anchors exist. */
  @media (min-width: 900px) {
    .article--rail.prose--numbered h2 {
      grid-template-columns: subgrid;
      grid-column: 1 / -1;
      column-gap: var(--rail-gap);
    }

    .article--rail.prose--numbered h2::before {
      grid-column: 1;
    }
  }

  /* W: the rail numeral grows to a 96px ghost figure, right-aligned in the margin and sitting
     on the heading's last line. The board draws it at ink 20% (1.53:1); --ink-48 is the
     closest alpha that clears 3:1 for large text on white (3.15:1). */
  @media (min-width: 1680px) {
    .article--rail.prose--numbered h2 {
      align-items: end;
    }

    .article--rail.prose--numbered h2::before {
      font-size: 96px;
      line-height: 0.95;
      letter-spacing: -0.03em;
      text-align: end;
      color: var(--ink-48);
    }
  }

  /* With CSS anchor positioning the Contents list runs its full length without sizing any row
     (contain: size), so the prose beside it flows on as if it were not there, and each
     numeral is positioned against the article, anchored to its own heading: at the heading's
     first line (D) or on its last line (W), or 16px under the end of the list (--prose-toc)
     when a long list still runs beside the heading, and always 8px under the previous
     numeral (--rail-num), so pushed numerals never stack. The heading sits in the text track;
     at W it keeps the 96px numeral's height and sits on its last line, as the wide frame's
     section row does. */
  @supports (anchor-name: --x) {
    @media (min-width: 900px) {
      .article--rail > .prose-toc {
        contain: size;
      }

      .article--rail > .prose-toc > ol {
        anchor-name: --prose-toc;
      }

      .article--rail.prose--numbered {
        position: relative;
      }

      .article--rail.prose--numbered h2 {
        display: block;
        grid-column: 2;
        anchor-name: --rail-h2;
        anchor-scope: --rail-h2;
      }

      /* grid-column: auto undoes the fallback placement: on a positioned box whose containing
         block is the grid, it would make the margin column its containing block. */
      .article--rail.prose--numbered h2::before {
        position: absolute;
        grid-column: auto;
        position-anchor: --rail-h2;
        top: max(calc(anchor(top) + var(--ed-h2-pad)), calc(anchor(--prose-toc bottom, 0px) + var(--space-16)), calc(anchor(--rail-num bottom, 0px) + var(--space-8)));
        left: var(--page-gutter);
        anchor-name: --rail-num;
        width: var(--rail-margin);
      }
    }

    @media (min-width: 1680px) {
      .article--rail.prose--numbered h2 {
        display: flex;
        flex-direction: column;
        align-items: normal;
        justify-content: flex-end;
        min-height: calc(var(--ed-h2-pad) + 0.95 * 96px);
      }

      .article--rail.prose--numbered h2::before {
        top: max(calc(anchor(bottom) - 0.95 * 96px), calc(anchor(--prose-toc bottom, 0px) + var(--space-16)), calc(anchor(--rail-num bottom, 0px) + var(--space-8)));
      }
    }
  }

  /* Inline marks */
  .prose a:where(:not(.btn, .arrow-link, .cli-link)) {
    color: var(--fern);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }

  .prose a:where(:not(.btn, .arrow-link, .cli-link, .prose-toc a, .post-nav a)) {
    padding: 1px 3px;
    margin: -1px -3px;
    border-radius: var(--radius-sm);
    transition: background-color var(--dur-fast), color var(--dur-fast);
  }

  /* Inline text link contract (actions board s90NN): a #E7F3EF (mist) chip on hover, fern
     chip with white text when pressed; background only, 120ms. */
  .prose a:where(:not(.btn, .arrow-link, .cli-link, .prose-toc a, .post-nav a)):hover {
    background: var(--mist);
  }

  .prose a:where(:not(.btn, .arrow-link, .cli-link, .prose-toc a, .post-nav a)):active {
    background: var(--fern);
    color: var(--white);
  }

  .prose strong {
    font-weight: 600;
  }

  .prose em {
    font-style: italic;
  }

  /* Inline code is the .t-code role in typography.css */

  .prose mark {
    background: var(--mint);
    color: var(--ink);
  }
}