/* /blog/<slug>/ · the article (Site · Blog & changelog, 14 Oct 2026). adam.new's article page in this site's grid:
   the back link and the category, the H1, author · date, then the body. The long-read is the /learn/ guides' (mono
   kicker, big H1, grid-paper figure boxes), set as one 680 px column that starts at the label column (5 of 12), with
   figures running out to the container's right edge. The page frame (.site-wrap, .site-hero, .site-h1, .site-sec,
   .site-head, .site-grid) is the shell's (/marketing/shared/site/site.css); every rule here sits under .ar, or .bf, the figure
   contract with Motion · Blog figures. Tokens from /shared/adam-v1.css. */

.ar {
  --ar-measure: 680px;
}
.ar :where(.ar-top, .ar-body, .ar-body *, .ar-end) { box-sizing: border-box; }
.ar :where(.ar-body) :where(h2, h3, p, ul, ol, figure, blockquote) { margin: 0; padding: 0; }

/* ---------------------------------------------------------------- the head: back link and category, then the H1;
   author · date is the section head's label, so it sits under the H1 on the hairline */
.ar-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; font: 400 12px/18px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ar-top > :first-child { grid-column: 1 / span 4; justify-self: start; }
.ar-top > :last-child { grid-column: 5 / -1; }
.ar-back { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
.ar-back svg { width: 16px; height: 16px; flex: none; transition: transform .2s ease; }
.ar-back:hover svg { transform: translateX(-3px); }
.ar-back:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ar-cat::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; background: var(--ink); vertical-align: 1px; }
.ar-hero .ar-h1 { max-width: 12.5em; margin-top: 56px; }
.ar-meta .post-date { color: inherit; }

/* ---------------------------------------------------------------- the body: one column under the label (column 5 of 12) */
.ar-body { grid-column: 5 / -1; min-width: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.ar-body > :not(figure) { max-width: var(--ar-measure); }
.ar-body > * + * { margin-top: 1.1em; }
.ar-body p { text-wrap: pretty; }
.ar-body h2 { margin-top: 64px; font: var(--k-weight, 400) 32px/1.12 var(--font-display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.ar-body h2 + * { margin-top: 20px; }
.ar-body > :first-child { margin-top: 0; }
.ar-body h3 { font: 500 17px/1.4 var(--font-body); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.ar-body .ar-sub { margin-top: 40px; font-weight: 500; color: var(--ink); }
.ar-body .ar-sub + p { margin-top: 12px; }
.ar-body a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--ink) 40%, transparent); overflow-wrap: anywhere; }
.ar-body a:hover { text-decoration-color: var(--link-hover-line, var(--accent)); text-decoration-thickness: var(--link-hover-thickness, 2px); }
.ar-body :is(ul, ol):not(.ar-steps) { padding-left: 0; list-style: none; }
.ar-body :is(ul, ol):not(.ar-steps) > li { position: relative; padding-left: 24px; }
.ar-body :is(ul, ol):not(.ar-steps) > li + li { margin-top: 8px; }
.ar-body ul:not(.ar-steps) > li::before { content: ""; position: absolute; left: 2px; top: .66em; width: 6px; height: 6px; background: var(--ink); }
.ar-body blockquote { padding-left: 24px; border-left: 2px solid var(--ink); }
/* Sliders' four pain points: numbered rows, a hairline between */
.ar-steps { list-style: none; border-top: 1px solid var(--line); }
.ar-steps > li { display: grid; grid-template-columns: 48px minmax(0, 1fr); padding: 20px 0; border-bottom: 1px solid var(--line); }
.ar-step-n { font: 400 12px/24px var(--font-mono); letter-spacing: .04em; color: var(--muted); }
.ar-steps h3 { margin-bottom: 6px; }

/* ---------------------------------------------------------------- the tick ruler (Tong, 15 Oct; left column, 3.2) and the contents rail (review 3.1)
   From 1024 px up Shell's tick ruler (.site-ruler, ruler.js) sits in columns 1–4 beside the body, where the contents
   rail was: sticky under the compact bar, a tick per block down the column's right side, the H2s major, the current
   name horizontal beside the ticks. The body keeps its one column at 5, on the same row. The rail
   (.site-contents--fold, contents.js) is the phone and tablet "Contents" disclosure above the body. Every block lands
   under the compact header, where a #link, a click on the ruler and its reading line agree. */
.ar-body > * { scroll-margin-top: calc(var(--hd-h-s, 56px) + 32px); }
@media (min-width: 1024px) { .ar-body { grid-row: 1; } }

/* ---------------------------------------------------------------- figures (the contract with Motion · Blog figures)
   <figure class="bf" data-fig="<slug>-<n>" style="--ar:16/10"><div class="bf-art"></div><figcaption>…</figcaption></figure>
   .bf-art is the drawing's frame on grid paper (the blog thumbnails' paper); while the figure's module arrives, Blog
   figures' loading sketch draws on it (sketching.js). A module draws on a transparent ground inside .bf-art. */
.ar-body > figure { margin-top: 48px; margin-bottom: 48px; }
.ar-body > figure:first-child { margin-top: 0; }
.ar-body > figure + figure { margin-top: 24px; }
.bf { max-width: 100%; }
.bf-art {
  --g1: color-mix(in srgb, var(--ink) 5%, transparent);
  --g2: color-mix(in srgb, var(--ink) 8.5%, transparent);
  position: relative; display: block; width: 100%; aspect-ratio: var(--ar, 16 / 10); overflow: hidden;
  background-color: var(--surface);
  background-image:
    linear-gradient(to right, var(--g2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--g2) 1px, transparent 1px),
    linear-gradient(to right, var(--g1) 1px, transparent 1px),
    linear-gradient(to bottom, var(--g1) 1px, transparent 1px);
  background-size: calc(100% / 8) calc(100% / 5), calc(100% / 8) calc(100% / 5), calc(100% / 40) calc(100% / 25), calc(100% / 40) calc(100% / 25);
  background-position: -0.5px -0.5px;
}
.bf figcaption { display: flex; gap: 16px; align-items: baseline; margin-top: 12px; max-width: var(--ar-measure); font: 400 14px/1.5 var(--font-body); color: var(--muted); text-wrap: pretty; }
.bf-n { flex: none; font: 400 12px/18px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.bf-c a { color: var(--ink); }
/* ---------------------------------------------------------------- the end */
.ar-end { margin: 96px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font: 400 12px/18px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }

@media (max-width: 1023px) {
  .ar-body { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .ar-top > :first-child { grid-column: 1 / span 6; }
  .ar-top > :last-child { grid-column: 7 / -1; }
  .ar-hero .ar-h1 { margin-top: 40px; }
  .ar-body { font-size: 16px; }
  .ar-body h2 { margin-top: 48px; font-size: 28px; }
  .ar-body > figure { margin-top: 36px; margin-bottom: 36px; }
  .bf figcaption { flex-direction: column; gap: 4px; }
  .ar-steps > li { grid-template-columns: 32px minmax(0, 1fr); }
  .ar-end { margin-top: 72px; }
}
@media (prefers-reduced-motion: reduce) { .ar-back svg { transition: none; } }