/* d-recreation: the long-form pages (notes, the Flip Education long read, the system deep dives, the
   method, legal, the 404) and the frame around the fleet map. Linked from article.html only; site.css is
   not touched. Every class from the old pages arrives with an "ar-" prefix (tools/articles.py), so none of
   them meets a site.css rule by accident.

   Colour map, old palette -> D (tools/articles.py COLOURS writes these as classes or var() in styles):
     #6d4a68, #7a3f74 old accent and its chart series  -> --accent (jade)
     #a88ba0          old warm accent (small dots)     -> --ar-accent-soft
     #a8712a          old second series (ochre)        -> --ar-s2 (ink)
     #1a1712 ink -> --ink        #6b6353, #97907e soft and faint text -> --ink-2 (4.5:1 and up)
     #dde0d2 hairline -> --hair  #fbfbf6 raised paper -> --ar-raised (the ground: no boxes)
     #e9e6e0 #d9c9d6 #b99cb4 #8f6a89 #5d3f58 (the GitHub wall) -> --ar-h0 .. --ar-h4, a jade ramp
   Type: one family (Rethink Sans, from site.css); reading text 20px on a column of 44rem at most, which
   holds 60-75 characters a line; D's push line is kept from 1240px up, where the column still reaches
   that measure. */

:root {
  --ar-raised: var(--ground);
  --ar-s2: var(--ink);
  --ar-accent-soft: #5f9e83;
  --ar-h0: rgba(22, 52, 40, .085);
  --ar-h1: #b0d3c3;
  --ar-h2: #78b299;
  --ar-h3: #3a8a69;
  --ar-h4: #17664c;
  --ar-measure: 44rem;
  --ar-text: 1.25rem;
  --ar-lead: 1.6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ar-accent-soft: #4c8d72;
    --ar-h0: rgba(227, 238, 232, .075);
    --ar-h1: #1f4a3a;
    --ar-h2: #2d7155;
    --ar-h3: #4d9e7c;
    --ar-h4: #7ccfab;
  }
}

/* ---------- mast: the title, then the standfirst and the meta lines under it ---------- */
.art-mast h1 { font-size: clamp(2.75rem, 4.3vw, 70px); max-width: 17em; text-wrap: balance; }
.art-mast:has(.art-sub) h1 { padding-block-end: 2rem; }
.art-sub { max-width: var(--ar-measure); padding-block-end: var(--innerPad); position: relative; z-index: 3; }
.art-standfirst { color: var(--ink-2); }
.art-meta { font-size: var(--size-s) !important; color: var(--ink-2); }
.art-standfirst + .art-meta { margin-block-start: 1.4em; }
.art-meta + .art-meta { margin-block-start: .35em; }
.art-sub .back { margin-block-start: 1em; }

/* ---------- a note's header picture (style C, illustrations/STYLE.md): starts on the reading column's left edge,
   runs wider than the text, in the print frame ---------- */
.art-header { margin: 0 0 var(--innerPad); max-width: 60rem; }
.art-header img { display: block; width: 100%; height: auto; }
@media (min-width: 1240px) { .art-header { margin-inline-start: var(--centerMargin); } }
@media (max-width: 767px) { .art-header { margin-block-end: 2.4rem; } }

/* ---------- the reading column ---------- */
.art-body { max-width: var(--ar-measure); font-size: var(--ar-text); line-height: var(--ar-lead); }
@media (min-width: 1240px) {
  .art-sub, .art-body { margin-inline-start: var(--centerMargin); }
}
.art-body p, .art-body li, .art-body dd { font-size: var(--ar-text); line-height: var(--ar-lead); }
.art-body p + p { margin-block-start: 1em; }
.art-body > p:first-child, .art-body > .ar-rail-track + section > p:first-of-type { margin-block-start: 0; }
.art-body h2 { font-size: 1.875rem; line-height: 1.25; margin-block: 2.2em .6em; text-wrap: balance; }
.art-body h3 { font-size: 1.375rem; line-height: 1.3; margin-block: 1.8em .5em; }
.art-body h2 + p, .art-body h3 + p { margin-block-start: 0; }
.art-body strong, .art-body b { font-weight: 700; }
.art-body ul:not([class]), .art-body ol:not([class]) { padding-inline-start: 1.3em; margin-block: 1em; }
.art-body ul:not([class]) { list-style: disc; }
.art-body ol:not([class]) { list-style: decimal; }
.art-body ul:not([class]) > li + li, .art-body ol:not([class]) > li + li { margin-block-start: .45em; }
.art-body li::marker { color: var(--ink-2); }
.art-body a:not([class]), .art-body a.ar-link {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
  text-decoration-color: currentColor; transition: text-decoration-color var(--t-line) var(--ease-line);
}
@media (hover: hover) { .art-body a:not([class]):hover, .art-body a.ar-link:hover { text-decoration-color: transparent; } }
.art-body hr.ar-rule { border: 0; height: 1px; background: var(--hair); margin-block: 2.6rem; }
.art-body .ar-sig { font-size: var(--size-s); color: var(--ink-2); }
.art-body .ar-sig a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.art-body .ar-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.art-body em { font-style: italic; }

/* figures: real screenshots in D's Print frame (site.css .frame); charts on the ground, in D's colours */
.art-body figure { margin-block: 2.6rem; }
.art-body figcaption { max-width: 40rem; line-height: 1.5; }
.art-body .frame img { width: 100%; height: auto; }
.art-body .frame picture { display: block; }
.art-body svg { color: var(--ink); }
.art-body svg text { font-family: var(--font); }
.ar-dgwrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ar-dgwrap > svg, .ar-dgwrap svg { display: block; width: 100%; height: auto; }
.ar-diagram-scroll svg, .ar-diagram-fit svg { display: block; max-width: 100%; height: auto; }
/* a chart with a phone drawing: the wide one from 768px up, the phone one below it. Same words and data;
   the phone one is drawn for a 342px column (viewBox 342 wide), so it shows about 1:1 on a 390px phone and
   its smallest label is 12.5px (11.4px on a 360px phone) */
.art-body svg.ar-only-narrow { display: none; }
.ar-plate { width: 70%; margin-inline: auto; }
.ar-plate img { background: #f6f8f7; }

/* legend chips (the notes' charts) */
.ar-lg { font-size: .875rem; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: 0 0 .7rem; }
.ar-lg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-inline-end: .4rem; }

/* the notes' diagrams (.dg) */
.ar-dg { width: 100%; height: auto; display: block; }
.ar-dg rect, .ar-dg line, .ar-dg path { stroke: var(--ink); stroke-width: 1.5; fill: none; }
.ar-dg rect { fill: var(--ar-raised); }
.ar-dg text { font-size: 12px; fill: var(--ink); }
.ar-dg .ar-lbl { font-size: 11.5px; fill: var(--ink-2); }
.ar-dg .ar-row { font-size: 11.5px; font-weight: 700; fill: var(--ink-2); }
.ar-dg .ar-dash { stroke-dasharray: 5 4; stroke: var(--ink-2); }
.ar-dg .ar-ghost { stroke: var(--ink-2); stroke-dasharray: 5 4; fill: none; }
.ar-dg .ar-ghost-t { fill: var(--ink-2); }
.ar-dg .ar-new, .ar-dg .ar-new rect, .ar-dg .ar-new line { stroke: var(--accent); }
.ar-dg .ar-new text { fill: var(--accent); }
.ar-dg .ar-ah { fill: var(--ink); stroke: none; }
.ar-dg .ar-ah-a { fill: var(--accent); stroke: none; }
.ar-dg .ar-ah-f { fill: var(--ink-2); stroke: none; }
.ar-dg .ar-hair { stroke: var(--hair); stroke-width: 1; }
/* the constitution's two charts */
.ar-dg .ar-grid { stroke: var(--hair); stroke-width: 1; }
.ar-dg .ar-series { fill: none; stroke: var(--accent); stroke-width: 2; }
.ar-dg .ar-dot { fill: var(--accent); stroke: none; }
.ar-dg .ar-dot-before { fill: var(--ar-s2); stroke: none; }
.ar-dg .ar-dumb { stroke: var(--hair); stroke-width: 2; }
.ar-dg .ar-base { stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 4 3; }
.ar-dg text.ar-tick { font-size: 12px; fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.ar-dg text.ar-lab { font-size: 13px; fill: var(--ink); font-weight: 600; }
.ar-dg text.ar-val { font-size: 13px; fill: var(--ink); font-variant-numeric: tabular-nums; }
.ar-dg .ar-note { fill: var(--ink-2); font-weight: 400; font-size: 12px; }

/* bars with names (the notes' .fig, /flip/'s funnel) */
div.ar-fig { margin-block: 2.6rem; }
div.ar-fig .ar-fprow { display: grid; grid-template-columns: 13rem minmax(0, 1fr) 3rem; align-items: center; column-gap: 1rem; margin-block-end: .7rem; }
.ar-fpname { font-size: 1rem; color: var(--ink); }
.ar-fpnum, .ar-fpcost { font-size: 1rem; color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; }
div.ar-fig .ar-fntrack { display: flex; height: 1.1rem; min-width: 0; box-shadow: inset 0 0 0 1px var(--hair); }
.ar-fnbar { display: block; height: 100%; background: var(--accent); min-width: 2px; }
div.ar-fig > p { font-size: var(--size-s) !important; line-height: 1.5 !important; color: var(--ink-2) !important; }
.ar-funnel { margin-block: 1.9rem 1.1rem; }
.ar-fnrow { display: grid; grid-template-columns: 13rem minmax(0, 1fr) 4rem; align-items: center; column-gap: 1rem; margin-block-end: .75rem; }
.ar-fnname { font-size: 1rem; line-height: 1.3; }
.ar-fnname em { display: block; font-style: normal; font-size: .875rem; color: var(--ink-2); margin-block-start: .15rem; }
.ar-funnel .ar-fntrack { min-width: 0; }
.ar-funnel .ar-fnbar { height: .8rem; min-width: 3px; }
.ar-fnnum { font-size: 1rem; text-align: right; font-variant-numeric: tabular-nums; }

/* /flip/: the false-alarm squares */
.ar-fpchart { margin-block: 1.8rem 1.1rem; }
.ar-fpchart .ar-fprow { display: grid; grid-template-columns: 12rem minmax(0, 1fr) 1.8rem 5.4rem; align-items: center; column-gap: 1rem; margin-block-end: .6rem; }
.ar-fphead .ar-fpname { visibility: hidden; }
.ar-fphead .ar-fpnum { display: none; }
.ar-fphead .ar-fpcost { grid-column: 3 / 5; }
.ar-fphead span { font-size: .875rem; color: var(--ink-2); }
.ar-fpcells { display: flex; gap: 3px; min-width: 0; }
.ar-fpcells i { flex: 1 1 0; min-width: 0; max-width: 13px; aspect-ratio: 1; display: block; box-shadow: inset 0 0 0 1px var(--hair); }
.ar-fpcells i.ar-on { background: var(--accent); box-shadow: none; }

/* /flip/: four figures in one row */
.ar-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem 1.5rem; margin-block: 2.8rem; }
.ar-stat b { display: block; font-size: clamp(1.75rem, 2.2vw, 2.25rem); font-weight: 400; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ar-stat span { display: block; font-size: 1rem; line-height: 1.4; color: var(--ink-2); margin-block-start: .45rem; text-wrap: balance; }

/* /flip/: chapters, numbers, pull lines, stories, the day, the org chart */
.art-long > section + section { margin-block-start: 4.5rem; }
.art-long .ar-chapter > h2 { margin-block-start: 0; }
.art-body h2 .ar-n { font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; margin-inline-end: .55em; }
.art-body b.ar-fig, .art-body b.ar-n { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.art-body p.ar-pull { font-size: 1.375rem; font-weight: 400; line-height: 1.45; margin-block: 2.4rem; padding-block: 1.1rem 1.2rem; border-block: 1px solid var(--hair); max-width: 34rem; text-wrap: balance; }
.ar-story { margin-block: 2.6rem; padding-block-start: 1.6rem; border-top: 1px solid var(--hair); }
.ar-story h3 { margin-block-start: 0; }
.art-body .ar-lesson { font-weight: 600; }
.ar-dayline { position: relative; margin-block: 2rem; }
.ar-dayline::before { content: ""; position: absolute; left: 5px; top: 1.1rem; bottom: 1.1rem; width: 2px; background: var(--hair); }
.ar-dayline li { position: relative; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: .5rem 0 .5rem 2rem; }
.ar-dayline li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: 12px; height: 12px; border-radius: 50%; background: var(--ground); border: 2px solid var(--ink); }
.ar-dayline time { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; padding-block-start: .15rem; }
.ar-dayline span { font-size: 1.0625rem; line-height: 1.5; }
.ar-orgchart { display: grid; grid-template-columns: 1fr 1fr; margin-block: 2.4rem; border-top: 1px solid var(--hair); }
.ar-orgcol { padding: 1.3rem 1.4rem 0 0; }
.ar-orgcol + .ar-orgcol { padding-inline: 1.4rem 0; border-inline-start: 1px solid var(--hair); }
.art-body .ar-orgcol ul { list-style: none; padding: 0; margin: 0; }
.ar-orgcol h4 { font-size: 1rem; font-weight: 700; margin-block-end: .7rem; }
.ar-orgcol li { font-size: 1rem !important; line-height: 1.45 !important; padding-block: .5rem; border-bottom: 1px solid var(--hair); }
.ar-orgcol li:last-child { border-bottom: 0; }
.ar-orgcol.ar-ghost h4, .ar-orgcol.ar-ghost li { color: var(--ink-2); }
.ar-orgcol .ar-who { font-weight: 700; }

/* /flip/: the fleet map, cut to its middle band; the whole map is one click away */
.frame.ar-shot-crop { display: block; height: 26rem; }
/* .art-body img.ar-shot (height: auto) used to win over this rule, so the frame showed the map's top strip
   (column headers over empty columns); the extra class makes the crop hold */
.art-body .ar-shot-crop img.ar-shot { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.ar-shot-crop .ar-veil { display: none; }
.ar-shot-crop .ar-more { position: absolute; z-index: 3; right: .8rem; bottom: .8rem; font-size: .9375rem; font-weight: 500; color: var(--ink); background: var(--panel); padding: .4rem .75rem; border-radius: var(--print-radius); box-shadow: var(--print-shadow); }
@media (hover: hover) { .ar-shot-crop:hover .ar-more { color: var(--panel); background: var(--ink); } }
.art-body img.ar-shot { width: 100%; height: auto; display: block; }

/* /flip/: the chapter list, in the left column from 1240px up */
.ar-rail-track { display: none; }
@media (min-width: 1240px) {
  .art-long { position: relative; }
  .ar-rail-track { display: block; position: absolute; top: 0; bottom: 0; right: calc(100% + var(--innerPad)); width: 16rem; }
  .ar-rail { position: sticky; top: 8rem; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
  .art-body .ar-rail a { font-size: 1rem; color: var(--ink-2); padding-block: .3rem; text-decoration: none; transition: color var(--t-line) var(--ease-line); }
  .art-body .ar-rail a.here { color: var(--accent); font-weight: 500; }
}
@media (min-width: 1240px) and (hover: hover) { .ar-rail a:hover { color: var(--ink); } }

/* the system pages: facts, the zero table, three charts */
.ar-facts { margin-block: 2.4rem 2.8rem; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hair); }
.ar-facts dl { display: grid; grid-template-columns: 11rem minmax(0, 1fr); }
.ar-facts dt { font-size: 1rem; color: var(--ink-2); padding-block: .65rem; border-bottom: 1px solid var(--hair); }
.ar-facts dd { font-size: 1.0625rem !important; line-height: 1.45 !important; padding-block: .65rem; border-bottom: 1px solid var(--hair); }
.ar-facts dt:last-of-type, .ar-facts dd:last-of-type { border-bottom: 0; }
.ar-ztwrap { max-width: 100%; overflow-x: auto; }
.ar-zt { width: 100%; border-collapse: collapse; font-size: 1rem; }
.ar-zt th { text-align: left; font-weight: 600; font-size: .9375rem; color: var(--ink-2); padding: 0 .6rem .5rem 0; border-bottom: 1px solid var(--ink); }
.ar-zt td { padding: .4rem .6rem .4rem 0; border-bottom: 1px solid var(--hair); }
.ar-zt .ar-n { text-align: right; font-variant-numeric: tabular-nums; padding-inline-end: 0; }
.ar-zt tr.ar-zero td { color: var(--ink-2); }
.ar-zt td.ar-big, .ar-zt td.ar-z { font-weight: 700; }
.ar-gscb, .ar-cit { width: 100%; height: auto; display: block; }
.ar-gscb-grid { stroke: var(--hair); stroke-width: 1; }
.ar-gscb-tick, .ar-cit-tick { font-size: 12px; fill: var(--ink-2); }
.ar-gscb-val { font-size: 13px; font-weight: 700; fill: var(--ink); font-variant-numeric: tabular-nums; }
.ar-gscb-note, .ar-cit-note { font-size: 12.5px; fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.ar-gscb-bar { fill: var(--accent); stroke: none; }
.ar-gscb-brace { stroke: var(--ink-2); stroke-width: 1; }
.ar-cit-ok { fill: none; stroke: var(--ink-2); stroke-width: 1; }
.ar-cit-bad { fill: var(--accent); stroke: none; }

/* /method/: sections, the working rules as a plain two-column list (no boxes) */
.art-method > section { margin-block-start: 3.4rem; padding-block-start: 3rem; border-top: 1px solid var(--hair); }
.art-method > section > h2 { margin-block-start: 0; }
.art-method .ar-num { font-variant-numeric: tabular-nums; }
.ar-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem 2rem; margin-block-start: 2.2rem; }
.ar-card { display: flex; flex-direction: column; gap: .55rem; padding-block-start: 1.1rem; border-top: 1px solid var(--hair); }
.ar-card svg { width: 28px; height: 28px; color: var(--ink); }
.ar-card h3 { font-size: 1.25rem; line-height: 1.3; margin: .1rem 0 0; }
.art-body .ar-card p { font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.art-body .ar-card p + p { margin-block-start: 0; }
.art-body .ar-card .ar-receipt { color: var(--ink); padding-block-start: .7rem; border-top: 1px solid var(--hair); margin-block-start: auto; }

/* /legal.html */
.art-legal h2 { font-size: 1.375rem; margin-block: 2em .5em; }
.art-legal > h2:first-child { margin-block-start: 0; }
.art-body .ar-muted { font-size: var(--size-s); color: var(--ink-2); margin-block-start: 2rem; }

/* /blog/: the notes, date in the left column (like the years on the record) */
.ar-posts { border-bottom: 1px solid var(--hair); }
.ar-posts li { position: relative; border-top: 1px solid var(--hair); }
.art-body .ar-posts a { display: flex; flex-direction: column; padding-block: 1.5rem 1.6rem; text-decoration: none; }
.ar-posts .ar-t { order: 1; font-size: var(--size-m); font-weight: 700; line-height: 1.3; text-wrap: balance; }
.ar-posts .ar-x { order: 2; font-size: 1.125rem !important; line-height: 1.5 !important; color: var(--ink-2); margin-block-start: .45rem; }
.ar-posts .ar-d { order: 3; font-size: var(--size-s); color: var(--ink-2); margin-block-start: .55rem; font-variant-numeric: tabular-nums; }
.ar-posts .ar-t { background-image: linear-gradient(currentColor, currentColor); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--t-hover) var(--ease-out); align-self: flex-start; }
@media (hover: hover) { .ar-posts a:hover .ar-t { background-size: 100% 2px; } }
@media (min-width: 1240px) {
  .ar-posts .ar-d { position: absolute; right: calc(100% + var(--innerPad)); top: 1.5rem; margin: 0; line-height: 1.95rem; white-space: nowrap; }
}

/* the 404 */
.art-404 p { font-size: var(--size-m); line-height: 1.45; }

/* the fleet map: its own page inside D's header and footer, set down like a print */
.page-fleet main { padding-block: 9.5rem var(--vertGap); }
.page-fleet .fleet-root {
  /* the map's script fits the node columns to the canvas but not the column headers above them, so a short
     canvas pushes the headers out of the top. The toolbar takes about 285px of this height; 920px leaves a
     canvas of about 636px, where the headers show at 1280x800, 1440x900, 1470x956, 1536x864 and 1920x1080
     (measured, default view); a tall window still gets the window height */
  --fleet-h: max(920px, calc(100svh - 11.5rem));
  position: relative; isolation: isolate; overflow: clip;
  border-radius: var(--print-radius); box-shadow: var(--print-shadow);
}

/* the map's note under the canvas used to be pinned to the window (the map was the whole page); inside a
   longer page it would sit over the footer, so on narrow screens it sits under the map instead */
@media (max-width: 900px) {
  .page-fleet .fleet-root .stage-note { position: static; max-width: none; margin: 12px 14px 0; }
}

/* old colours as D tokens (tools/articles.py writes these classes in place of fill/stroke colours) */
.art-body svg .ar-f-accent { fill: var(--accent); }        .art-body svg .ar-s-accent { stroke: var(--accent); }
.art-body svg .ar-f-accent-soft { fill: var(--ar-accent-soft); } .art-body svg .ar-s-accent-soft { stroke: var(--ar-accent-soft); }
.art-body svg .ar-f-s2 { fill: var(--ar-s2); }             .art-body svg .ar-s-s2 { stroke: var(--ar-s2); }
.art-body svg .ar-f-ink { fill: var(--ink); }              .art-body svg .ar-s-ink { stroke: var(--ink); }
.art-body svg .ar-f-ink2 { fill: var(--ink-2); }           .art-body svg .ar-s-ink2 { stroke: var(--ink-2); }
.art-body svg .ar-f-hair { fill: var(--hair); }            .art-body svg .ar-s-hair { stroke: var(--hair); }
.art-body svg .ar-f-raised { fill: var(--ar-raised); }     .art-body svg .ar-s-raised { stroke: var(--ar-raised); }
.art-body svg .ar-f-ground { fill: var(--ground); }        .art-body svg .ar-s-ground { stroke: var(--ground); }
.art-body svg .ar-f-h0 { fill: var(--ar-h0); }
.art-body svg .ar-f-h1 { fill: var(--ar-h1); }
.art-body svg .ar-f-h2 { fill: var(--ar-h2); }
.art-body svg .ar-f-h3 { fill: var(--ar-h3); }
.art-body svg .ar-f-h4 { fill: var(--ar-h4); }

/* ---------- tablet and narrow laptops: one left-aligned column ---------- */
@media (max-width: 1239px) {
  .art-sub, .art-body { margin-inline-start: 0; }
}

/* ---------- phone ---------- */
@property --ar-edge { syntax: '<length>'; inherits: false; initial-value: 0px; }
@keyframes ar-edge { from, 92% { --ar-edge: 3rem; } to { --ar-edge: 0px; } }
@media (max-width: 767px) {
  :root { --ar-text: 1.125rem; }
  .art-mast:has(.art-sub) h1 { padding-block-end: 1.3rem; }
  .art-mast h1 { font-size: 2.1rem; }
  .art-sub { padding-block-end: 2.4rem; }
  .art-body h2 { font-size: 1.5rem; }
  .art-body h3 { font-size: 1.25rem; }
  .art-body figure { margin-block: 2rem; }
  .art-body p.ar-pull { font-size: 1.25rem; }
  .art-body svg.ar-only-wide { display: none; }
  .art-body svg.ar-only-narrow { display: block; width: 100%; max-width: 26rem; height: auto; }
  .ar-dg.ar-only-narrow text { font-size: 13px; }
  .ar-dg.ar-only-narrow .ar-lbl, .ar-dg.ar-only-narrow .ar-row, .ar-dg.ar-only-narrow text.ar-tick,
  .ar-dg.ar-only-narrow .ar-note, .ar-only-narrow .ar-cit-tick, .ar-only-narrow .ar-gscb-tick,
  .ar-only-narrow .ar-gscb-note { font-size: 12.5px; }
  /* a chart without a phone drawing: held at a width where its 12px labels stay 11px or more, scrolled
     sideways, with the right edge faded while there is more to see (scroll-driven; no fade without support) */
  .ar-dgwrap > svg:not(.ar-only-wide):not(.ar-only-narrow) { min-width: 600px; }
  .ar-diagram-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ar-diagram-scroll svg:not(.ar-only-wide):not(.ar-only-narrow) { max-width: none; }
  @supports (animation-timeline: scroll()) {
    .ar-dgwrap, .ar-diagram-scroll {
      mask-image: linear-gradient(to right, #000 calc(100% - var(--ar-edge)), transparent);
      animation: ar-edge linear both; animation-timeline: scroll(self inline);
    }
  }
  .ar-plate { width: 100%; }
  div.ar-fig .ar-fprow, .ar-fnrow { grid-template-columns: minmax(0, 1fr) 3.4rem; row-gap: .3rem; margin-block-end: 1rem; }
  div.ar-fig .ar-fpname, .ar-fnname { grid-column: 1 / -1; }
  .ar-fpchart .ar-fprow { grid-template-columns: minmax(0, 1fr) 1.6rem 4.2rem; column-gap: .6rem; row-gap: .3rem; margin-block-end: 1rem; }
  .ar-fpchart .ar-fpname { grid-column: 1 / -1; }
  /* the column labels stay on phones: the false alarms over the squares and their count, the price over the price */
  .ar-fpchart .ar-fphead { align-items: end; margin-block-end: .7rem; }
  .ar-fpchart .ar-fphead .ar-fpname { display: none; }
  .ar-fpchart .ar-fphead > span:nth-child(2) { grid-column: 1 / 3; }
  .ar-fpchart .ar-fphead .ar-fpcost { grid-column: 3; }
  .ar-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.2rem; }
  .ar-stat b { font-size: 1.75rem; }
  .ar-orgchart { grid-template-columns: minmax(0, 1fr); }
  .ar-orgcol, .ar-orgcol + .ar-orgcol { padding: 1.2rem 0 0; border-inline-start: 0; }
  .ar-orgcol + .ar-orgcol { border-top: 1px solid var(--hair); margin-block-start: 1rem; }
  .ar-dayline li { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .frame.ar-shot-crop { height: 15rem; }
  /* phones: the same middle band as desktop, scaled to the column, so all four columns show (re-check N1, 25 Sep) */
  .art-body .ar-shot-crop img.ar-shot { object-fit: cover; object-position: center 38%; }
  .ar-facts dl { grid-template-columns: minmax(0, 1fr); }
  .ar-facts dt { padding-block-end: .1rem; border-bottom: 0; }
  .ar-facts dd { padding-block-start: 0; }
  .ar-zt { min-width: 20rem; }
  .ar-cards { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .art-method > section { margin-block-start: 2.6rem; padding-block-start: 2.4rem; }
  .art-body .ar-posts a { padding-block: 1.2rem 1.3rem; }
  .ar-posts .ar-t { font-size: 1.3rem; }
  .page-fleet main { padding-block-start: 7.5rem; }
}
/* a personal project's mark at the top of its page (Raian, 6 Oct 2026: the Walkably project should feature the new logo icon) */
.art-body .ar-mark { display: block; width: 56px; height: 56px; margin-block-end: 1.6rem; }
.art-body .ar-mark img { display: block; width: 100%; height: 100%; }