/* Article pages (spec docs/specs/2026-10-10-blog-redesign.md), laid out like a case study: the
   title and deck, the facts row, the article's black cover with its own terrain, the text beside
   its contents, then its service and the next three articles as Blog cards (styles.css). Type
   stays in the shared typography.css roles; this file only places, sizes and colours. */
.article-page { background: var(--color-white); }
.article-shell { padding: calc(var(--nav-clearance) + clamp(2rem, 5vw, 5rem)) var(--page-gutter) clamp(5rem, 10vw, 10rem); }
.article-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.5rem; margin-bottom:clamp(2rem,4vw,4rem); }
.article-meta p { margin:0; }
.article-muted { color: var(--color-text-grey); }
.article-back { color:inherit; text-decoration:none; }
.article-back:hover, .article-back:focus-visible { background:var(--color-highlight-lilac); }
.article-title { max-width:17ch; text-wrap:balance; }
.article-deck { max-width:34ch; margin-top:var(--space-heading-subtitle); text-wrap:pretty; }

/* The case studies' facts row. */
.article-facts { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:1.5rem clamp(1rem, 2vw, 2rem); margin:clamp(3rem, 6vw, 6rem) 0 clamp(2rem, 4vw, 3.5rem); }
.article-facts div { display:grid; align-content:start; gap:.35rem; padding-top:1rem; border-top:var(--rule); min-width:0; }
.article-facts dt { color:var(--color-text-grey); }
.article-facts dd { margin:0; }
.article-facts a { color:inherit; text-decoration:none; }
.article-facts a:hover, .article-facts a:focus-visible { background:var(--color-highlight-lilac); }
@media (max-width:1000px) { .article-facts { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:600px) { .article-facts { grid-template-columns:repeat(2, minmax(0, 1fr)); } }

/* The cover: the article's own terrain on black, where a case study has its reel. */
.article-cover { position:relative; margin:0; display:grid; grid-template-rows:auto 1fr auto; aspect-ratio:21 / 9; padding:clamp(1.25rem, 3.6vw, 4rem) clamp(1.25rem, 4.5vw, 4.5rem); border-radius:var(--blog-radius); background:var(--color-black); color:var(--color-white); overflow:hidden; isolation:isolate; }
.article-cover-terrain { position:absolute; inset:0; z-index:-1; display:block; width:100%; height:100%; }
.article-cover-top, .article-cover-foot { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.article-cover-foot { grid-row:3; }
.article-cover-top > span:last-child, .article-cover-foot > .type-number { color:color-mix(in srgb, var(--color-white) 78%, transparent); }
.article-cover .blog-tag { position:static; padding:.5rem 1rem .5rem .8rem; }
.article-cover .blog-tag svg { width:18px; height:18px; }
@media (max-width:700px) { .article-cover { aspect-ratio:4 / 3; } }

.article-reading { display:grid; grid-template-columns:minmax(12rem,1fr) minmax(0,2fr); gap:clamp(2rem,6vw,7rem); margin-top:clamp(4rem,8vw,8rem); }
.article-aside { align-self:start; position:sticky; top:calc(var(--nav-clearance) + 1rem); }
.article-aside > p { color:var(--color-text-grey); }
/* The contents: each entry's rule fills with ink as its section is read (assets/article.js), and
   the section being read takes the light purple. */
.article-toc { list-style:none; padding:0; margin:1rem 0 0; border-bottom:var(--rule); }
.article-toc a { position:relative; display:grid; grid-template-columns:2.25rem minmax(0,1fr); gap:.75rem; padding:.8rem 0 .9rem; border-top:var(--rule); color:var(--blog-muted); text-decoration:none; transition:color .3s ease; }
.article-toc a::before { content:""; position:absolute; left:0; right:0; top:-1px; height:1px; background:var(--page-ink); transform-origin:0 50%; transform:scaleX(var(--read, 0)); }
.article-toc-n { color:var(--color-text-grey); }
.article-toc a:hover, .article-toc a.is-current { color:var(--page-ink); }
.article-toc a.is-current .article-toc-t { background:var(--color-highlight-lilac); -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.article-body { max-width:42rem; }
.article-section-n { margin:clamp(3rem,6vw,4.5rem) 0 .75rem; color:var(--color-text-grey); }
.article-body > :first-child { margin-top:0; }
.article-body h2 { margin:0 0 1rem; scroll-margin-top:calc(var(--nav-clearance) + 3rem); text-wrap:balance; }
.article-body h3 { margin:2rem 0 1rem; }
.article-body p, .article-body li { text-wrap:pretty; }
/* .text-large resets paragraph margins, so the article's paragraphs get the shared gap back. */
.article-body p + p { margin-top:var(--space-paragraph); }
.article-body ul, .article-body ol { padding-left:1.3em; margin:1.5rem 0; }
.article-body li+li { margin-top:.65rem; }
.article-body a { color:inherit; text-underline-offset:.2em; text-decoration-thickness:1px; }
.article-body a:hover { background:var(--color-highlight-lilac); }
.article-body blockquote { margin:2rem 0; padding-left:1.5rem; border-left:3px solid var(--color-highlight-lilac); }
.article-body hr { display:none; }
.article-body pre { max-width:100%; overflow:auto; white-space:pre-wrap; }
.article-body table { width:100%; border-collapse:collapse; }
.article-body th,.article-body td { padding:.5rem; text-align:left; vertical-align:top; }
.article-body img { max-width:100%; height:auto; }
.article-note { margin:2.5rem 0 0; }

/* Its service, as a row of the services index; Studio articles point to the case studies. */
.article-service, .article-next { margin-top:clamp(5rem,10vw,9rem); }
.article-service > p, .article-next > p { color:var(--color-text-grey); }
.article-service-row { margin-top:1rem; display:grid; grid-template-columns:7% minmax(0,1fr) minmax(0,1fr) 2rem; gap:.35rem clamp(1rem,3vw,3rem); align-items:baseline; padding:clamp(1rem,2vw,1.5rem) 0; border-top:var(--rule); border-bottom:var(--rule); color:inherit; text-decoration:none; }
.article-service-n { color:var(--color-text-grey); }
.article-service-line { color:var(--blog-muted); }
.article-service-arrow { justify-self:end; transition:transform .5s var(--blog-ease); }
.article-service-row:hover .article-service-arrow, .article-service-row:focus-visible .article-service-arrow { transform:translateX(.35rem); }
.article-service-row:hover .article-service-name, .article-service-row:focus-visible .article-service-name { background:var(--color-highlight-lilac); }
.article-next .blog-cards { margin-top:1.5rem; }
.article-close { margin-top:clamp(3rem,6vw,5rem); }
@media(max-width:900px){
  .article-reading { grid-template-columns:1fr; gap:2.5rem; }
  .article-aside { position:static; }
}
@media(max-width:700px){
  .article-shell { padding-top:calc(var(--nav-clearance) + 2rem); }
  .article-meta { gap:.5rem 1rem; }
  .article-service-row { grid-template-columns:2.5rem minmax(0,1fr) 1.5rem; }
  .article-service-line { grid-column:2; grid-row:2; }
  .article-service-arrow { grid-column:3; grid-row:1; }
}
@media (prefers-reduced-motion: reduce) { .article-toc a, .article-service-arrow { transition:none; } }