/* article.css - T1-WORK-ORDER.md. ONLY what public/components/cases.css (byte-identical copy of
   page/cases's file, never edited) does not already provide for a `reshaped` article body:
   1. inline-link colour (cases.css never defines an .inline-link class - blog.css's own
      `.article-col a.inline-link` is scoped to the OLD two-column body this template no longer
      uses for a reshaped entry).
   2. fix round 1 (issue #112 F1): blog.css's `.art-meta` (block 3-5: category chip + reading time +
      H1 + byline) only had a flat 22px top padding - no nav clearance at all, so the fixed site nav
      (public/site.css `.nav`) sat on top of the chip row / H1 at scroll 0. Loaded AFTER blog.css
      (this file is the LAST head stylesheet, ArticleLayout.astro), so this longhand `padding-top`
      wins the cascade over blog.css's shorthand `padding` at equal (single-class) specificity.
      `--nav-h` is the same site.css token cases.css itself uses for `.case-hero`'s own nav
      clearance (96px desktop / 72px <900px, public/site.css:16,575) - same clearance rule, not a
      hand-picked number.
   3. T1 R2 (owner row 2026-09-30, "title right below the banner"): the cover (`.ph-cover`) now
      renders FIRST in <article>, H1 immediately after with nothing between, ONE merged meta row
      under the H1. Nav clearance moves to whichever element is actually first:
        - no cover: `.art-meta` keeps rule 2's padding-top unchanged (same formula = "today's
          clearance" - ArticleLayout.astro puts the H1 as `.art-meta`'s own first child now, so the
          H1 still clears the nav by the same margin as before).
        - cover present: `.ph-cover` itself takes the clearance (longhand `margin-top` over
          blog.css's shorthand `margin`, same trick as rule 2) and `.ph-cover + .art-meta` (two
          classes, beats blog.css's bare `.art-meta` on specificity regardless of source order)
          drops back to a small gap. blog.css's `.art-h1 { margin-top: 16px }` is left alone (H1 is
          `.art-meta`'s first child either way) and stacks with that gap - 8px + 16px = 24px,
          inside the 12-32px contract band at every viewport (the gap is a fixed px sum, not
          affected by --nav-h or font-size). */
.art-meta { padding-top: calc(var(--nav-h) + 22px); }
/* The clearance is PADDING on the <article>, never the cover's margin-top: that margin collapsed
   through the zero-height [data-nav-hero] marker before <article>, pushed the marker to y=118, and
   site.js syncNav() then dropped the nav's `solid` class at scroll 0 (white menu text on cream -
   owner screenshot 2026-09-30). probe-blog `navsolid` guards it. */
.art-cover-first { padding-top: calc(var(--nav-h) + 22px); }
.art-cover-first > .ph-cover { margin-top: 0; }
.ph-cover + .art-meta { padding-top: 8px; }
/* the merged meta row (chip + byline text + reading time, one wrapping flex row via blog.css's
   existing `.cat-row { display:flex; flex-wrap:wrap; gap:10px }`) - byline moved in as a plain
   inline span; blog.css's `.byline { margin-top: 14px }` was sized for its old block position and
   would drop this span out of vertical alignment with its flex siblings, so it is zeroed here and
   the same 14px gap is put back between the H1 and the row instead (today's H1->byline offset). */
.art-h1 + .cat-row { margin-top: 14px; }
.cat-row .byline { margin-top: 0; }
.case-main a.inline-link { color: var(--green-mid, var(--green)); text-decoration: underline; text-underline-offset: 3px; }

/* fix round 1 (F2): R8's side-column flip is now `?side=left` (was the wrong-way `?side=right`,
   ArticleLayout.astro's inline script). cases.css's `.case-art` sets EXPLICIT column widths
   (minmax(0,720px) clamp(250px,22vw,300px)) - swapping only `.case-main`/`.case-side`'s
   grid-column (as the old `?side=right` rule did) drops each into the OTHER column's width,
   squeezing the article into the 300px slot. The fix swaps the grid-template-columns order too,
   so each region keeps its own 720px/300px width, just on the other side. */
@media (min-width: 900px) {
  /* `data-side` sits on `.case-art` itself (ArticleLayout.astro's inline script), not an ancestor -
     `.case-art[data-side="left"]` (same-element compound selector), never `[data-side="left"]
     .case-art` (a descendant selector that can never match its own element). */
  .case-art[data-side="left"] { grid-template-columns: clamp(250px, 22vw, 300px) minmax(0, 720px); }
  [data-side="left"] .case-main { grid-column: 2; }
  [data-side="left"] .case-side { grid-column: 1; }
}