/* ============================================================================
   GT · GRAND TOUR move #13 — "Stop numbering in articles"  (CSS-ONLY)
        prepared 20 Jul 2026 · NOT deployed.

   Numbers the section H2s of a long-form article as journey stops, so a reader
   always knows which stop they are at. Pure CSS counters — NO markup change.

   ---- WHY (reconcile with GT#12) --------------------------------------------
   GT#12 (gt12_itinerary.js) is the fixed left-gutter rail that numbers the SAME
   stops, but it is DESKTOP-ONLY — it hides below 1000px (and when the gutter is
   too tight). So #13's real value is the MOBILE + mid-width win: it gives the
   same stop-wayfinding exactly where the rail is hidden. On wide desktop, where
   the rail already shows the number in the gutter, the inline number goes quiet
   (lighter ink, accent tick dropped) so the two read as ONE system, not a
   double-shout.

   ---- SCOPE (matches gt12's selector set EXACTLY) ---------------------------
   gt12 targets, inside main#content, the DIRECT-CHILD H2s of a prose column:
       .pf-narrow > h2   ·   .article-content > h2   ·   .entry-content > h2
   and only activates with >= 3 such H2s. This file reuses that selector set
   verbatim (via :is()) plus a >=3 gate, so numbers appear on precisely the
   pages the rail appears on and nowhere else. Home, about, hubs, listings, the
   whale-curve page and the SEO method pages (.seo-content, a DIFFERENT column
   the rail also ignores) all have zero qualifying H2s → no numbers.

   Nav modules — "Keep exploring" (.related) and "Next stop"
   (#cnp-continue-journey) — sit OUTSIDE main#content, and their H2s are not
   direct children of a prose column, so the child-combinator scoping already
   excludes them (verified against live HTML).

   ---- THE >=3 GATE ----------------------------------------------------------
   Verified live, the two long-form architectures are:
     • blog posts    — ONE .article-content column with N direct-child H2s.
     • method/pillar — N `section.pf-sec` sibling sections (direct children of
                       main#content), each -> div.pf-wrap > div.pf-narrow > h2
                       (one H2 per section; the .pf-narrow blocks are NOT
                       siblings, so the count must key on the .pf-sec siblings).
   So ">= 3 stops" is a forgiving :has() list matching EITHER:
     a) a prose column whose 3rd direct H2 exists   (blog / single column), OR
     b) a 3rd sibling section.pf-sec                 (method / multi-section).
   A hypothetical 1–2 stop article matches neither → no numbers (the rail would
   also stay hidden). Over-matching the gate is harmless: ::before only paints
   on a qualifying prose-column > h2, which non-article pages never have.

   ---- PALETTE (Instrument tokens) -------------------------------------------
     soft-ink #6E6253 · quieter ink #9A8F7C · one accent tick #C75B22 (burnt
     orange) · IBM Plex Mono. Nothing animates → prefers-reduced-motion safe.

   Reversible: delete this file + its enqueue. No markup, no JS, no PII.
   ========================================================================== */

/* The >=3 gate is repeated as the :has() prefix on each rule below. Kept literal
   (CSS has no selector variables) so the scope is auditable at every rule. */

/* -- 1. reading root: establish the stop counter, only when >= 3 stops exist -- */
main#content:has(
  .pf-narrow > h2:nth-of-type(3),
  .article-content > h2:nth-of-type(3),
  .entry-content > h2:nth-of-type(3),
  .pf-sec ~ .pf-sec ~ .pf-sec
){
  counter-reset: gt13-stop;
}

/* -- 2. count each qualifying stop (the EXACT gt12 selector set) -------------- */
main#content:has(
  .pf-narrow > h2:nth-of-type(3),
  .article-content > h2:nth-of-type(3),
  .entry-content > h2:nth-of-type(3),
  .pf-sec ~ .pf-sec ~ .pf-sec
) :is(.pf-narrow, .article-content, .entry-content) > h2{
  counter-increment: gt13-stop;
}

/* -- 3. the station-number tab: a calm mono label ABOVE the (serif) heading --- */
main#content:has(
  .pf-narrow > h2:nth-of-type(3),
  .article-content > h2:nth-of-type(3),
  .entry-content > h2:nth-of-type(3),
  .pf-sec ~ .pf-sec ~ .pf-sec
) :is(.pf-narrow, .article-content, .entry-content) > h2::before{
  content: counter(gt13-stop, decimal-leading-zero);  /* 01, 02, 03 … automatic */
  display: block;
  width: max-content;          /* tab only as wide as the number — never full row */
  max-width: 100%;             /* and never wider than the column → no overflow    */
  margin: 0 0 .5em;            /* breathing room above the heading                 */
  padding-left: 13px;          /* room for the accent tick                         */
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, "Consolas", monospace;
  font-size: .72rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .2em;
  color: #6E6253;              /* soft-ink                                         */
  /* one small accent (max): a 2.5px burnt-orange "you are here" tick before it */
  background: radial-gradient(circle 2.5px at 4px 50%, #C75B22 99%, transparent 100%) no-repeat;
}

/* -- 4. reconcile with GT#12 on wide desktop --------------------------------- */
/* The rail is visible >= 1000px and already numbers these stops in the gutter,
   so keep the inline number a whisper here (quieter ink matching the rail's
   passed-stop label, accent tick dropped) — one system, calm. */
@media (min-width: 1000px){
  main#content:has(
    .pf-narrow > h2:nth-of-type(3),
    .article-content > h2:nth-of-type(3),
    .entry-content > h2:nth-of-type(3),
    .pf-sec ~ .pf-sec ~ .pf-sec
  ) :is(.pf-narrow, .article-content, .entry-content) > h2::before{
    color: #9A8F7C;            /* quieter soft-ink (= rail's passed-stop ink)      */
    background: none;          /* the gutter rail carries the burnt-orange node    */
    padding-left: 0;
    font-size: .68rem;
    opacity: .8;
  }
}

/* -- 5. print: no stop tabs on paper (the rail is print-hidden too) ----------- */
@media print{
  main#content :is(.pf-narrow, .article-content, .entry-content) > h2::before{
    content: none;
  }
}