/* =====================================================================
   Grand Tour #66 - END OF LINE terminus mark
   ---------------------------------------------------------------------
   Rail Instrument voice: a calm buffer-stop at the end of the platform.
   At the very end of a long-form article's body - AFTER the reading
   column, BEFORE the onward-connection modules (.related / "Keep
   exploring" and #cnp-continue-journey / "NEXT STOP") and the footer -
   render ONE subtle terminus mark: a short centred hairline rule capped
   by a small burnt-orange buffer-stop tick, with a mono "END OF LINE"
   label beneath it.

   CSS-ONLY. No markup, no injector. Composed entirely from a single
   ::after pseudo-element on an EXISTING end-of-content anchor, so it
   self-limits to exactly the two article families and can never
   duplicate or collide with the onward-journey modules (which are later
   siblings, outside the anchor).

   ANCHORS (verified against live HTML, 20 Jul 2026):
     - Method / regional profile pages (template cnp-methods-profile /
       cnp-industry, e.g. /activity-based-costing/,
       /methods/time-driven-activity-based-costing/):
         <main id="content" class="cc-pf"> ... last <section.pf-sec> </main>
         <section class="related"> ... </section>
         <section id="cnp-continue-journey"> ... </section>
       -> main#content.cc-pf::after  = last child of <main>, i.e. the
          end of the article body, before .related / #cnp-continue-journey.
       The plain <main id="content"> used by the home, hubs, /about/,
       industry and landing templates has NO .cc-pf class, so it is
       untouched.

     - Blog posts (template cnp-blogpost-praxis, e.g.
       /blog/excel-killing-profitability-model/ and its /pt/ /es/ ...
       localisations):
         <div class="article-body"><div class="article-content"> ...prose... </div></div>
         <section class="related-section"> ("Keep reading") </section>
       -> .article-body .article-content::after = end of the prose,
          before the "Keep reading" related module. The .article-body
          wrapper is blog-only, so no other template can match.

   Monochrome + single burnt-orange accent. Instrument tokens
   (soft-ink #6E6253, hairline #DED3BF, accent #C75B22), IBM Plex Mono
   label. Restrained and small. Respects prefers-reduced-motion. No
   horizontal overflow. Reversible: delete this file (and its enqueue).
   ===================================================================== */

/* --- the terminus mark, shared by both article families ------------- */
main#content.cc-pf::after,
body .article-body .article-content::after{
	content:"END OF LINE";

	/* box: shrink to the label so the hairline is exactly label-width
	   and stays centred in the reading column, never edge-to-edge. */
	display:block;
	width:-moz-max-content;
	width:max-content;
	max-width:min(86%, 260px);
	box-sizing:border-box;
	margin-left:auto;
	margin-right:auto;
	padding-top:19px;                 /* gap between rule/tick and label */

	/* mono label */
	text-align:center;
	font-family:'IBM Plex Mono', var(--cnp-mono, var(--mono, ui-monospace)), ui-monospace, 'SFMono-Regular', Menlo, monospace;
	font-size:11px;
	line-height:1;
	letter-spacing:.32em;
	text-indent:.32em;                /* re-centre against trailing letter-spacing */
	text-transform:uppercase;
	color:var(--cnp-soft, #6E6253);   /* soft-ink */

	/* the platform rail: a short hairline, label-width, centred */
	border-top:1px solid var(--cnp-hair, #DED3BF);

	/* the buffer-stop: a small burnt-orange tick centred on the rail */
	background-image:linear-gradient(#C75B22, #C75B22);
	background-repeat:no-repeat;
	background-size:28px 3px;
	background-position:top center;

	-webkit-user-select:none;
	user-select:none;
}

/* --- per-anchor breathing room -------------------------------------- */
/* Method pages: the last <section.pf-sec> already carries 80px of
   bottom padding, so the mark needs almost nothing above it; keep a
   small gap below before .related picks up its own top spacing. */
main#content.cc-pf::after{
	margin-top:2px;
	margin-bottom:14px;
}

/* Blog posts: the last <p> only leaves a 24px gap, so lift the mark a
   little further off the prose; the .article-body / .related-section
   boundary supplies the space below. */
body .article-body .article-content::after{
	margin-top:44px;
	margin-bottom:10px;
}

/* --- motion: a single calm arrival, opt-in only -------------------- */
/* Default (incl. reduced-motion) = static and fully visible: the
   ::after has no hidden baseline state, so nothing to suppress. */
@media (prefers-reduced-motion:no-preference){
	main#content.cc-pf::after,
	body .article-body .article-content::after{
		animation:gt66-arrive .8s ease-out both;
	}
}
@keyframes gt66-arrive{
	from{ opacity:0; transform:translateY(6px); }
	to{   opacity:1; transform:translateY(0);   }
}

/* --- narrow screens: tighten the tracking so the label stays tidy --- */
@media (max-width:520px){
	main#content.cc-pf::after,
	body .article-body .article-content::after{
		letter-spacing:.26em;
		text-indent:.26em;
	}
}