/* ==========================================================================
   GRO - article pages
   The reading view for /articles/<slug>/. Loaded only by the pieces, on top
   of styles.css and service.css, which supply the tokens, the nav, the .posts
   grid the read-next row reuses and the .svc-cta at the foot.
   ========================================================================== */

/* --- The header of a piece ----------------------------------------------- */
/* Narrower than a service hero: this is the top of something to be read, not
   a pitch, so the title is held to a headline measure and the standfirst sits
   directly under it rather than off to one side. */
.article-head{padding-block:calc(var(--section-y) + 56px) var(--space-12)}
.article-head .container{max-width:var(--container-narrow)}
.article-head h1{
  font-size:var(--size-h1);text-wrap:balance;
  margin-top:var(--space-4);
}
.article-head .lead{margin-top:var(--space-6);max-width:none}

/* Date, category and reading time. Same treatment as the listing cards, so a
   reader arriving from the listing sees the line they just clicked. */
.article-meta{
  display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;
  margin-top:var(--space-8);padding-top:var(--space-6);
  border-top:1px solid var(--border-subtle);
  font-size:var(--size-xs);color:var(--text-muted);font-variant-numeric:tabular-nums;
}

/* Back to the listing. Above the title, small, and not a button: it is an
   escape hatch, not an action anybody came here to take. */
.article-back{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-size:var(--size-sm);font-weight:var(--weight-medium);color:var(--text-muted);
}
.article-back:hover{color:var(--text-accent)}
.article-back .ic{transition:transform var(--dur-fast) var(--ease-out)}
.article-back:hover .ic{transform:translateX(-3px)}

/* --- The body ------------------------------------------------------------ */
/* One measure for the whole piece. Every child inherits it rather than each
   element setting its own, so nothing drifts a few characters wider than the
   paragraph above it. */
.article-body{padding-block:0 var(--section-y)}
.article-body .container{max-width:var(--container-narrow)}

.prose{color:var(--text-body);font-size:var(--size-lead);line-height:var(--leading-body)}
.prose > * + *{margin-top:var(--space-6)}

.prose h2{
  font-size:var(--size-h2);text-wrap:balance;
  margin-top:var(--space-16);
}
.prose h3{
  font-size:var(--size-h3);text-wrap:balance;
  margin-top:var(--space-12);
}
/* A heading that opens the piece should not be pushed down by the rule above:
   the standfirst already gave it room. */
.prose > :first-child{margin-top:0}

.prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose strong,.prose b{color:var(--text-heading);font-weight:700}

/* Lists read as part of the prose, not as a widget dropped into it, so they
   keep the body measure and the body colour and only gain a jade marker. */
/* list-style is cleared explicitly: styles.css only resets ul, so an ol would
   otherwise carry the native marker as well as the counter drawn below. */
.prose ul,.prose ol{list-style:none;padding-left:0;display:grid;gap:var(--space-3)}
.prose ol{counter-reset:prose-ol}
.prose li{position:relative;padding-left:var(--space-8)}
.prose ul > li::before{
  content:"";position:absolute;left:var(--space-3);top:.65em;
  width:6px;height:6px;border-radius:var(--radius-pill);background:var(--jade-400);
}
.prose ol > li{counter-increment:prose-ol}
.prose ol > li::before{
  content:counter(prose-ol) ".";position:absolute;left:0;top:0;
  font-family:var(--font-display);font-weight:var(--weight-display);
  color:var(--jade-400);font-variant-numeric:tabular-nums;
}

/* The one pulled-out line a piece is allowed. Jade rule on the left, no box:
   a card here would read as an advert in the middle of the reading. */
.prose blockquote{
  margin-left:0;margin-right:0;padding-left:var(--space-6);
  border-left:2px solid var(--jade-400);
  font-family:var(--font-display);font-size:var(--size-h3);
  line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);
  color:var(--text-heading);
}

.prose hr{
  border:0;border-top:1px solid var(--border-subtle);
  margin-block:var(--space-16);
}

/* A short aside, for the caveat that would otherwise interrupt a paragraph. */
.prose .note{
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:var(--space-6);
  font-size:var(--size-body);
}
.prose .note p{margin:0}
.prose .note p + p{margin-top:var(--space-4)}

@media (max-width:620px){
  .prose{font-size:var(--size-body)}
}

/* --- Foot of the piece --------------------------------------------------- */
/* Three more to read, on the same card as the listing so the pattern carries
   across. Sits above the closing CTA, because someone who has finished a
   piece is more likely to want another one than a phone call. */
.article-more{background:var(--surface-sunken)}
/* The current piece is filtered out of its own read-next row, so this grid
   always holds one fewer card than the listing does. Two across rather than
   the listing's three, so the row does not sit with a hole on the right. */
.article-more .posts{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:620px){
  .article-more .posts{grid-template-columns:1fr}
}
.article-more .article-more__head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--space-6);flex-wrap:wrap;margin-bottom:var(--space-10);
}