/*==============================================================================
  CSIGNAL SKIN, ARTICLES PAGE
  ----------------------------------------------------------------------------
  Page-specific companion to csignal-skin.css for /articles/v2.php.
  Load it AFTER csignal-skin.css. Everything is scoped to body.cs-skin, so it
  cannot touch /articles/index.php or any other page.

  WHY A SEPARATE FILE, not sections 20+ of csignal-skin.css: the skin was being
  written in another session while this was built (sections 15 to 19, the work
  page, appeared mid-review). Two writers on one file loses work. Fold this in
  as sections 20 to 25 once the skin is quiet.

  WHAT IS ALREADY INHERITED from csignal-skin.css and not repeated here:
    section 1   the Season sweep, ink ground, Bricolage on h1-h4
    section 2   the whole header
    section 11  buttons
    section 12  footer
    section 14  selection and focus
    section 15  .intro as an ink block, and .intro__gradient hidden
    section 18  .testimonial and .experts, both shared includes on this page

  RULE FOR THIS FILE, same as the skin: colour, type, borders and decoration.
  No layout, no spacing, no DOM, no copy. The one exception is a max-width on
  the H1 above 1200px, which stops the larger display face running under the
  absolutely positioned newsletter card. That is a collision fix, not a design
  change, and it is commented where it happens.

  NOTE ON font-family: the sweep in section 1 is a scoped universal carrying
  !important. Every font override below therefore carries !important too. A
  non-important declaration cannot beat an important one at any specificity.

  NO STEPPED EDGE ON THIS PAGE. Section 19 draws the seam where ink meets
  paper, and every band on /articles is ink: intro, list, testimonial, experts,
  footer. A seam between two ink sections is invisible. The newsletter card is
  the page's one paper surface and a seam does not belong inside a component.
==============================================================================*/

/*------------------------------------------------------------------------------
  20. Tokens
  csignal-skin.css defines --cs-display and --cs-body on body.cs-skin but not
  --cs-mono, which lives on .cs-fontvars in csignal-hero.css and so never
  reaches <body>. The metric labels below need it, so it is topped up here.
------------------------------------------------------------------------------*/

body.cs-skin {
  --cs-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

/*------------------------------------------------------------------------------
  21. Intro: content plane and decoration
  Section 15 already paints .intro ink and hides the teal-into-violet blur.
  Two things are left. The work hero lifts .intro .container-fluid above the
  deco; this page uses .container, so it needs its own rule. And the deco
  itself, which is positioned for a tall hero there and a compact one here.
------------------------------------------------------------------------------*/

body.cs-skin .intro .container { position: relative; z-index: 1; }

/* .intro's ink ground, its positioning context and the kill on the old blurred
   orb all used to come free from csignal-skin.css section 15. Sections 15 to 19
   were refactored out of that file on 12 Sep, so this page now owns them.

   Keep them here even if a generic .intro treatment reappears in the skin:
   this page should not silently change shape when a file it does not control
   is reorganised again. */
body.cs-skin .intro {
  background-color: var(--ink);
  position: relative;
  /* clip, not hidden: the deco bleeds off the left edge and must be cut by the
     section rather than adding a horizontal scrollbar. overflow-x alone leaves
     any sticky behaviour further down the page intact. */
  overflow-x: clip;
}

/* The teal-into-violet blurred orb. 864px across, positioned top:50% and so
   spilling roughly 216px above the section and far below it, which is the wash
   that ran behind the header and over the first row of cards. Off-palette on
   both counts, and CSignal has no gradients or blurs anywhere. */
body.cs-skin .intro__gradient { display: none; }

/* THE DECO LAYER. Without these three rules the layer is position:static and
   the shape renders inline, in normal flow, at the top of the section: it sits
   above the H1 and pushes the whole page down by its own height. That is
   exactly what happened when an edit to the shape rules took the layer's
   positioning with it. If the shape ever appears above the heading again with
   a band of empty space over it, this is the block that has gone missing. */
body.cs-skin .cs-artdeco {
  position: absolute;
  inset: 0;
  overflow: clip;
  pointer-events: none;
  z-index: 0;
}

body.cs-skin .cs-artdeco__s { position: absolute; display: block; }
body.cs-skin .cs-artdeco__s svg { display: block; }


/* ONE ghosted shape, plus the coral mark on the newsletter card in section 23.
   Two marks, one accent, one bleeding off the frame: the device rules.

   WHY SPIKE AND NOT STORE. This was Store at 480px anchored top left, and it
   rendered as a plain dark rectangle. The intro on this page is only about
   205px tall, the layer clips to that, and Store's whole character is the
   stepped base at its bottom right, which was never in the window. Anything
   anchored top left in a band this short shows you a square corner.

   Spike is a staircase climbing left to right, so its silhouette IS its top
   edge. Anchored bottom left, bleeding off the left and the bottom, the steps
   are what you see and it reads as a shape from the kit. Verified by rendering
   the block at 1440 and looking at it, not by reasoning about the geometry.
   SIZE IT TO THE BAND. Measured at 1440, .intro is 141px tall, so the shape is
   118px and sits wholly inside it, bleeding off the left edge only. At 200px it
   was taller than the band, the layer clipped the top third off, and it went
   back to reading as a rectangle. If you resize it, re-measure the band. */
body.cs-skin .cs-artdeco__s--spike {
  bottom: 12px;
  left: -22px;
  /* Own keyframe. This used to reuse cs-workfloat from csignal-skin.css
     section 15, which no longer exists. @keyframes resolve by source order and
     not by specificity, so a new name is declared rather than an existing one
     redeclared. */
  animation: cs-artfloat 9s ease-in-out infinite;
}

@keyframes cs-artfloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

@media (prefers-reduced-motion: reduce) {
  body.cs-skin .cs-artdeco__s--spike { animation: none; }
}

/* Below 1200 the newsletter card drops under the title and fills the left of
   the intro, so there is no clear ground left for the shape to sit on. */
@media (max-width: 1199px) {
  body.cs-skin .cs-artdeco { display: none; }
}

/*------------------------------------------------------------------------------
  22. The H1
  "Articles" plus a second clause in a span. It was Season Sans 400 at 20 to
  28px with the span in Season Serif, which is the old brand's pairing. It
  becomes the display face at Display M, with the span carrying the muted text
  role rather than a second family.
------------------------------------------------------------------------------*/

body.cs-skin .articles-header-row__title {
  font-family: var(--cs-display) !important;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--on-ink);
}

body.cs-skin .articles-header-row__title span {
  font-family: var(--cs-display) !important;
  font-weight: 700;
  color: var(--on-ink-muted);
}

/* Above 1200 the newsletter card is absolutely positioned top right inside the
   same row. The display face is wider than what it replaces, so the title is
   held back to clear it. Collision fix only. */
@media (min-width: 1200px) {
  body.cs-skin .articles-header-row__title { max-width: 62%; }
}

/*------------------------------------------------------------------------------
  23. Newsletter
  ----------------------------------------------------------------------------
  This card was rgba(255,255,255,0.04) on a 0.08 border, which is the old
  brand's glassmorphism. CSignal is flat, so it becomes the page's one Paper
  surface, and its Subscribe button is the page's one lime hit.

  Lime budget, from the guidelines: one per view, on the single thing you want
  clicked. That is this button. It is why the Featured badge below stays muted
  and the active filter pill is paper rather than lime.
------------------------------------------------------------------------------*/

/* The coral Signal mark, hung off the card's top left corner, half on and half
   off. It replaces a coral Spark that sat mid-headline: Spark is three detached
   arms, and at 42px against type it read as three random dashes rather than as
   anything from the kit. Signal is the cursor out of the logo and is the most
   recognisable shape in the set, so it survives being small.

   It lives inside .articles-newsletter rather than in the .cs-artdeco layer
   because the card is absolutely positioned above 1200 and static below it.
   Anchoring the mark to the card means it follows at every breakpoint instead
   of being pinned to coordinates that are only right at one width. The card is
   already position:relative and sets no overflow, so the negative offsets show.

   z-index sits above the card, or the opaque Paper ground hides the half that
   overlaps.

   NOT called .cs-pun even though that is the same role on the homepage: the
   skin carries a `body.cs-skin .cs-pun { display: none }` inside a media query
   this file does not own, which would switch this mark off at some widths as a
   side effect. Own name, own behaviour. */
body.cs-skin .cs-nlmark {
  position: absolute;
  top: -22px;
  left: -20px;
  z-index: 1;
  display: block;
  line-height: 0;
  pointer-events: none;
}

body.cs-skin .cs-nlmark svg { display: block; }

body.cs-skin .articles-newsletter {
  background: var(--paper);
  border: 1px solid var(--paper-2);
  border-radius: 16px;
}

body.cs-skin .articles-newsletter__heading {
  font-family: var(--cs-display) !important;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--on-paper);
}

body.cs-skin .articles-newsletter__sub { color: var(--on-paper-muted); }

body.cs-skin .articles-newsletter__input {
  background: #fff;
  border-color: var(--line-on-paper);
  border-right: none;
  color: var(--on-paper);
}

body.cs-skin .articles-newsletter__input::placeholder { color: var(--on-paper-muted); }

/* Blue focus ring, never lime. The lime ring in section 14 is scoped to a and
   button, so inputs are still free to follow the product rule. */
body.cs-skin .articles-newsletter__input:focus {
  border-color: var(--blue);
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

body.cs-skin .articles-newsletter__btn {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink);
  font-weight: 700;
}

body.cs-skin .articles-newsletter__btn:hover {
  background: #E2FF3A;
  border-color: #E2FF3A;
  color: var(--ink);
}

body.cs-skin .articles-newsletter__btn:disabled { background: var(--lime-dim); border-color: var(--lime-dim); }

/* Semantic pair from the guidelines: Lime 700 for a gain, Coral dark for a
   fault. Both are set for ink type on a light ground, which is what the card
   now is. Colour never carries the meaning alone here: the success message
   already prints its own tick. */
body.cs-skin .articles-newsletter__msg--success { color: #33601A; }
body.cs-skin .articles-newsletter__msg--error { color: #9C3312; }

body.cs-skin .articles-newsletter__privacy { color: var(--on-paper-muted); }
body.cs-skin .articles-newsletter__privacy a:hover { color: var(--on-paper); }

/*------------------------------------------------------------------------------
  24. Filter pills
  Already 100px pills, so only colour and type change. Paper on ink for the
  active state, not lime: lime is spent on Subscribe, and two lime elements in
  one fold is exactly the "decoration" the proportion rule warns about. The
  count badge takes the Metric role.
------------------------------------------------------------------------------*/

body.cs-skin .article-filters__link {
  font-family: var(--cs-body) !important;
  font-size: 13px;
  font-weight: 600;
  border-color: var(--line-on-ink);
  color: var(--on-ink-muted);
}

body.cs-skin .article-filters__link:hover {
  background: transparent;
  color: var(--on-ink);
  border-color: rgba(243, 245, 238, 0.45);
}

body.cs-skin .article-filters__link.active {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

body.cs-skin .article-filters__count {
  font-family: var(--cs-mono) !important;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--on-ink-muted);
}

body.cs-skin .article-filters__link.active .article-filters__count {
  color: rgba(14, 28, 22, 0.55);
}

/*------------------------------------------------------------------------------
  25. The list, the featured article and the cards
  ----------------------------------------------------------------------------
  Radii are normalised to the four sanctioned values. The card media was 15px
  and the featured media 12px; both are Card, which is 16px.
------------------------------------------------------------------------------*/

body.cs-skin .articles-list { background-color: var(--ink); }

body.cs-skin .featured-article { border-bottom-color: var(--line-on-ink); }

body.cs-skin .featured-article__media { border-radius: 16px; }

/* Metric role. Muted rather than lime, see the budget note in section 23. */
body.cs-skin .featured-article__badge {
  font-family: var(--cs-mono) !important;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-ink-muted);
}

body.cs-skin .featured-article__title {
  font-family: var(--cs-display) !important;
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--on-ink);
}

body.cs-skin .featured-article__title a:hover { opacity: 1; color: var(--lime); }

body.cs-skin .featured-article__desc { color: var(--on-ink-muted); }

body.cs-skin .featured-article__link {
  font-family: var(--cs-body) !important;
  font-weight: 600;
  color: var(--on-ink);
}

body.cs-skin .featured-article__link:hover { opacity: 1; color: var(--lime); }

body.cs-skin .article__media { border-radius: 16px; }

/* h5, so the section 1 heading rule does not reach it, which is correct: at
   13 to 16px this is UI copy and belongs in the body face. Setting card titles
   in Bricolage because it looks more branded is the mistake the typography
   page calls out by name. */
body.cs-skin .article__title {
  font-family: var(--cs-body) !important;
  font-weight: 600;
  color: var(--on-ink);
}

body.cs-skin .article__title a:hover { opacity: 1; color: var(--lime); }

body.cs-skin .article__type {
  font-family: var(--cs-mono) !important;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-ink-muted);
}

/*------------------------------------------------------------------------------
  26. Back to top
  Was a blurred glass disc. Flat ink, hairline, lime on the arrow at hover.
------------------------------------------------------------------------------*/

body.cs-skin .back-to-top {
  background: var(--ink-2);
  border: 1px solid var(--line-on-ink);
  border-radius: 999px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.cs-skin .back-to-top:hover { background: var(--ink-3); }
body.cs-skin .back-to-top:hover svg { color: var(--lime); }

/*------------------------------------------------------------------------------
  27. The shared includes below the grid
  testimonial.php and experts.php cannot be edited, so both are handled from
  here. csignal-skin.css section 18 used to do this; it went with the work-page
  refactor and only the experts arrow rules survived.
------------------------------------------------------------------------------*/

body.cs-skin .testimonial { background-color: var(--ink); }
body.cs-skin .testimonial__heading { color: var(--on-ink); }
body.cs-skin .testimonial__author { color: var(--on-ink-muted); }

body.cs-skin .experts { background-color: var(--ink); }
body.cs-skin .experts__title { color: var(--on-ink); }
body.cs-skin .experts__description { color: var(--on-ink-muted); }

body.cs-skin .experts__subtitle {
  font-family: var(--cs-mono) !important;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-ink-muted);
}