/* Article lock-up (About, and later case studies): label line, title, a bold lead paragraph, then two columns of body text.
   Uses the lock-up for the label + title, so it lines up with the pager the same way.
   <div class="lockup article">
     <p class="lockup__meta lockup__meta--solo"><strong>About Me</strong></p>
     <h2 class="lockup__title t-h1">Title</h2>
     <p class="article__lead t-h4">Lead paragraph</p>
     <div class="article__cols"><div class="t-body"><p>…</p></div><div class="t-body"><p>…</p><p>…</p></div></div>
     <a class="button" href="#">Back to work</a>
   </div> */
.article { width: min(100%, calc(var(--container) - var(--pager-offset))); }   /* full container width, minus the pager's share */
.article .lockup__title { margin: var(--space-3) 0 var(--space-3); }
.article__lead { margin: 0; color: var(--color-ink); }
.article__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); margin: var(--space-6) 0 var(--space-6); }
.article__cols p { margin: 0; color: var(--color-ink); }
.article__cols p + p { margin-top: 0; }
@media (max-width: 900px) { .article__cols { grid-template-columns: 1fr; gap: var(--space-5); } }

/* On the landing page's About slide the copy sits over the picture: every line of text is HIGHLIGHTED with the page colour (#E8E9E3), like a highlighter pen, instead of a box behind it.
   Each text run is wrapped in <span class="hl"> (inline, so the colour hugs each line; box-decoration-break: clone gives every wrapped line its own padding). */
#about .article__lead .hl { padding-block: .1em; }   /* the lead has taller lines: less padding, so a line's highlight never cuts the descenders of the line above */


/* A line of links at the end of a column (Instagram | paperdandy.co.uk): bold, a little air above, underlined on hover. */
.article__cols p.article__links { margin-top: 10px; }
.article__links a { text-decoration: none; }
.article__links a:hover, .article__links a:focus-visible { text-decoration: underline; }