/* ============================================================
   LONG-FORM — insights and case studies
   Loaded after site.css and practice.css. These pages reuse the
   practice hero, sheets, project cards and closer; this file adds
   only what a long text needs: a reading column, its type, and the
   facts beside a case study. Diamonds are still the only bullet.
   ============================================================ */

/* ---------- Article hero: copy only, no cluster ---------- */
.hero--article .hero__grid{grid-template-columns:minmax(0,1fr)}
.hero--article .hero__copy{max-width:820px}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--muted-dark)}
.byline .dia{--dia:6px}

/* ---------- Reading column ---------- */
.article{display:flex;flex-direction:column;align-items:center}
.article>*{width:100%;max-width:720px}
.article__cover{margin-bottom:clamp(32px,5vw,56px)}
.article>.article__cover{max-width:960px}
.article__cover img{display:block;width:100%;height:auto;border-radius:24px}

.prose{font-size:17px;line-height:1.7;color:var(--body);text-wrap:pretty}
.prose>*+*{margin-top:1.15em}
.prose h2,.prose h3,.prose h4{color:var(--ink);font-weight:800;text-wrap:balance}
.prose h2{max-width:none;margin-top:1.9em;font-size:clamp(26px,3vw,36px);line-height:1.05;letter-spacing:-.025em}
.prose h3{margin-top:1.7em;font-size:clamp(20px,2vw,24px);line-height:1.15;letter-spacing:-.015em}
.prose h4{margin-top:1.5em;font-size:17px;line-height:1.3}
.prose>:first-child{margin-top:0}
.prose strong,.prose b{font-weight:700;color:var(--ink)}
/* Ink with a gold underline: --gold-text alone fails AA for body-size
   text on ivory (DESIGN_SYSTEM.md §3). */
.prose a{font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold-text);text-decoration-thickness:2px;text-underline-offset:4px;transition:text-decoration-color .2s}
.prose a:hover{text-decoration-color:var(--ink)}
.prose ul,.prose ol{display:flex;flex-direction:column;gap:.5em}
.prose ul>li{position:relative;padding-inline-start:24px}
.prose ul>li::before{content:"";position:absolute;inset-inline-start:2px;top:.72em;width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}
.prose ol{counter-reset:item}
.prose ol>li{position:relative;padding-inline-start:34px;counter-increment:item}
.prose ol>li::before{content:counter(item,decimal-leading-zero);position:absolute;inset-inline-start:0;font-size:14px;font-weight:800;line-height:1.95;color:var(--ink)}
.prose blockquote{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;margin-block:1.8em;font-size:clamp(22px,2.4vw,28px);font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.prose blockquote::before{content:"";width:14px;height:14px;margin-top:.35em;background:var(--gold);transform:rotate(45deg)}
.prose blockquote p+p{margin-top:.6em}
.prose img{display:block;width:100%;height:auto;border-radius:20px}
.prose figure{margin-block:1.8em}
.prose figcaption{margin-top:10px;font-size:13px;line-height:1.5;color:var(--body)}
.prose code{padding:2px 6px;border-radius:6px;background:var(--card);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em}
.prose pre{padding:20px 22px;border-radius:18px;background:var(--ink);color:var(--ivory);font-size:14px;line-height:1.6;overflow-x:auto;direction:ltr;text-align:left}
.prose pre code{padding:0;background:none;font-size:inherit}

/* ---------- Case study: facts beside the story (.study, not the profile's .case) ---------- */
.study{display:grid;grid-template-columns:minmax(0,300px) minmax(0,720px);justify-content:center;align-items:start;gap:clamp(32px,6vw,88px)}
.study--solo{grid-template-columns:minmax(0,720px)}
.facts{position:sticky;top:32px;display:flex;flex-direction:column;gap:8px}
.facts div{padding:16px 20px;border:1px solid var(--card-border);border-radius:18px;background:var(--card)}
.facts dt{font-size:12px;font-weight:700;color:var(--body)}
.facts dd{margin-top:2px;font-size:15px;font-weight:700;color:var(--ink)}

@media (max-width:860px){
  .study{grid-template-columns:minmax(0,1fr)}
  .facts{position:static;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
}
@media (max-width:620px){
  .prose{font-size:16px}
}