/* ═══════════════════════════════════════════════════════════════════════════
   ARTICLES — insights and guides. Scoped to body.article-desk.

   These are the only pages on the site somebody reads rather than scans, so
   they get the opposite treatment to a landing page: one column at a real
   reading measure, generous leading, a contents rail that tracks where you
   are, and nothing moving. The desk language supplies the surfaces; the
   typography is set for prose.
   ═══════════════════════════════════════════════════════════════════════════ */

body.article-desk { --ar: #60A5FA; }

/* ── masthead ─────────────────────────────────────────────────────────────── */
body.article-desk .ar-head { padding: 48px 0 32px; border-bottom: 1px solid var(--dk-line); }
body.article-desk .ar-kicker {
  font-family: var(--font-family-mono);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ar);
  margin-bottom: 16px;
}
body.article-desk h1.ar-title {
  font-family: 'Bricolage Grotesque', var(--font-family);
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--dk-ink);
  margin: 0;
  max-width: 880px;
}
body.article-desk .ar-standfirst {
  margin: 18px 0 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--dk-mute);
  max-width: 700px;
}
body.article-desk .ar-meta {
  margin: 22px 0 0;
  font-family: var(--font-family-mono);
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #5f6b80;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/* ── layout ───────────────────────────────────────────────────────────────── */
body.article-desk .ar-layout {
  display: grid;
  grid-template-columns: 226px minmax(0, 1fr);
  gap: 60px;
  align-items: start;
  padding: 42px 0 90px;
}
body.article-desk .ar-toc {
  position: sticky;
  top: 28px;
  border-left: 1px solid var(--dk-line);
  padding-left: 20px;
}
body.article-desk .ar-toc h2 {
  font-family: var(--font-family-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5f6b80;
  margin: 0 0 14px;
  font-weight: 400;
}
body.article-desk .ar-toc a {
  display: block;
  padding: 6px 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--dk-dim);
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 12px;
  margin-left: -14px;
  transition: color 0.14s ease, border-color 0.14s ease;
}
body.article-desk .ar-toc a:hover { color: var(--dk-ink); }
body.article-desk .ar-toc a.on { color: var(--ar); border-left-color: var(--ar); }

/* ── the prose itself ─────────────────────────────────────────────────────── */
body.article-desk .ar-body { max-width: 720px; }
body.article-desk .ar-body h2 {
  font-family: 'Bricolage Grotesque', var(--font-family);
  font-weight: 700;
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: -0.022em;
  color: var(--dk-ink);
  margin: 46px 0 14px;
  scroll-margin-top: 24px;
}
body.article-desk .ar-body h2:first-child { margin-top: 0; }
body.article-desk .ar-body h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--dk-ink);
  margin: 30px 0 10px;
}
/* 17px at 1.75 over a 720px measure — set for reading, not for scanning */
body.article-desk .ar-body p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--dk-mute);
  margin: 0 0 18px;
}
body.article-desk .ar-body li {
  font-size: 17px;
  line-height: 1.72;
  color: var(--dk-mute);
  margin-bottom: 9px;
}
body.article-desk .ar-body ul,
body.article-desk .ar-body ol { margin: 0 0 20px; padding-left: 24px; }
body.article-desk .ar-body strong { color: var(--dk-ink); font-weight: 600; }
body.article-desk .ar-body a { color: var(--ar); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--ar) 40%, transparent); }
body.article-desk .ar-body a:hover { border-bottom-color: var(--ar); }
body.article-desk .ar-body blockquote {
  margin: 26px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--ar);
  font-size: 18px;
  line-height: 1.65;
  color: var(--dk-ink);
}
body.article-desk .ar-body code {
  font-family: var(--font-family-mono);
  font-size: 14px;
  color: var(--dk-ink);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--dk-line);
  border-radius: 5px;
  padding: 1px 6px;
}
body.article-desk .ar-body img { max-width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--dk-line); }

/* tables inside an article scroll rather than widen the measure */
body.article-desk .ar-tablewrap {
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid var(--dk-line);
  background: rgba(255, 255, 255, 0.03);
  margin: 24px 0;
}
body.article-desk .ar-body table { width: 100%; border-collapse: collapse; min-width: 480px; }
body.article-desk .ar-body th,
body.article-desk .ar-body td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 14.5px;
  color: var(--dk-mute);
  vertical-align: top;
}
body.article-desk .ar-body th {
  font-family: var(--font-family-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dk-dim);
  font-weight: 400;
  background: rgba(255, 255, 255, 0.03);
}
body.article-desk .ar-body tbody tr:last-child td { border-bottom: 0; }

/* the ask, at the end of the read rather than interrupting it */
body.article-desk .ar-end {
  margin-top: 46px;
  padding: 28px 30px;
  border-radius: 18px;
  border: 1px solid var(--dk-line);
  background: linear-gradient(160deg, color-mix(in srgb, var(--ar) 12%, transparent), rgba(255, 255, 255, 0.02));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
body.article-desk .ar-end h3 {
  font-family: 'Bricolage Grotesque', var(--font-family);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--dk-ink);
  margin: 0 0 8px;
}
body.article-desk .ar-end p { margin: 0 0 18px; font-size: 15px; line-height: 1.62; color: var(--dk-mute); }

@media (max-width: 900px) {
  body.article-desk .ar-layout { grid-template-columns: 1fr; gap: 26px; padding-top: 28px; }
  body.article-desk .ar-toc { position: static; border-left: 0; border-top: 1px solid var(--dk-line); padding: 18px 0 0; margin-left: 0; }
  body.article-desk .ar-toc a { margin-left: 0; border-left: 0; padding-left: 0; }
  body.article-desk .ar-body p, body.article-desk .ar-body li { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   The guides at pages/blog/*.html use their own markup (.article-header,
   .article-content and friends) rather than the .ar-* vocabulary above. Map
   it onto the same reading layout instead of maintaining two.
   ═══════════════════════════════════════════════════════════════════════════ */

body.article-desk .article-page { background: transparent; min-height: 0; }

body.article-desk .article-header,
body.article-desk .article-hero {
  max-width: 1180px;
  margin: 0 auto;
  padding: 44px 32px 32px;
  border-bottom: 1px solid var(--dk-line);
  background: none;
  text-align: left;
}
body.article-desk .article-hero-content { max-width: none; margin: 0; padding: 0; text-align: left; }
body.article-desk .hero-bg,
body.article-desk .hero-gradient,
body.article-desk .hero-grid { display: none; }

body.article-desk .article-category,
body.article-desk .article-badge {
  display: inline-block;
  margin: 0 0 16px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-family: var(--font-family-mono);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ar);
}
body.article-desk .article-header h1,
body.article-desk .article-hero h1 {
  font-family: 'Bricolage Grotesque', var(--font-family);
  font-weight: 700;
  font-size: clamp(30px, 4.1vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.034em;
  color: var(--dk-ink);
  margin: 0;
  max-width: 20ch;
}
body.article-desk .article-header h1 .highlight,
body.article-desk .article-hero h1 .highlight {
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--dk-mute);
}
body.article-desk .article-meta {
  margin: 22px 0 0;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--font-family-mono);
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #5f6b80;
}
body.article-desk .article-date { color: inherit; }

/* the read itself, at a reading measure rather than full bleed */
body.article-desk .article-content {
  max-width: 792px;
  margin: 0 auto;
  padding: 42px 32px 80px;
  background: none;
}
body.article-desk .article-content > h2 {
  font-family: 'Bricolage Grotesque', var(--font-family);
  font-weight: 700;
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: -0.026em;
  color: var(--dk-ink);
  margin: 46px 0 14px;
}
body.article-desk .article-content > h2:first-child { margin-top: 0; }
body.article-desk .article-content h3 { font-size: 17px; font-weight: 600; color: var(--dk-ink); margin: 30px 0 10px; }
body.article-desk .article-content p,
body.article-desk .article-content li { font-size: 17px; line-height: 1.75; color: var(--dk-mute); margin-bottom: 16px; }
body.article-desk .article-content li { margin-bottom: 9px; }
body.article-desk .article-content ul,
body.article-desk .article-content ol { margin: 0 0 20px; padding-left: 24px; }
body.article-desk .article-content strong { color: var(--dk-ink); font-weight: 600; }
body.article-desk .lead { font-size: 19px; line-height: 1.66; color: var(--dk-ink); margin-bottom: 26px; }

/* asides — a callout, a worked example, a formula — are all the same object */
body.article-desk .info-callout,
body.article-desk .example-box,
body.article-desk .tech-box,
body.article-desk .formula-box {
  margin: 26px 0;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid var(--dk-line);
  border-left: 2px solid var(--ar);
  border-radius: 0 12px 12px 0;
}
body.article-desk .info-callout p,
body.article-desk .example-box p,
body.article-desk .tech-box p { font-size: 15px; margin-bottom: 10px; }
body.article-desk .info-callout p:last-child,
body.article-desk .example-box p:last-child { margin-bottom: 0; }
body.article-desk .info-callout h4,
body.article-desk .example-box h4,
body.article-desk .tech-box h4 {
  font-family: var(--font-family-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ar);
  margin: 0 0 12px;
}
body.article-desk .formula,
body.article-desk .formula-box code {
  font-family: var(--font-family-mono);
  font-size: 14.5px;
  color: var(--ar);
  display: block;
  line-height: 1.7;
}

body.article-desk .example-table,
body.article-desk .comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 14.5px;
}
body.article-desk .example-table th,
body.article-desk .comparison-table th {
  padding: 11px 14px;
  text-align: left;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--dk-line);
  font-family: var(--font-family-mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dk-dim);
}
body.article-desk .example-table td,
body.article-desk .comparison-table td {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  color: var(--dk-mute);
}
body.article-desk .example-table tr:last-child td,
body.article-desk .comparison-table tr:last-child td { border-bottom: 0; }
body.article-desk .highlighted td,
body.article-desk td.primary { color: var(--dk-ink); }

/* grids inside a guide sit at the same measure as the prose */
body.article-desk .benefit-grid,
body.article-desk .feature-grid,
body.article-desk .related-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  margin: 26px 0;
  background: var(--dk-line);
  border: 1px solid var(--dk-line);
  border-radius: 14px;
  overflow: hidden;
}
body.article-desk .benefit-card,
body.article-desk .feature-card,
body.article-desk .related-link {
  background: var(--dk-bg);
  border: 0;
  border-radius: 0;
  padding: 20px 22px;
  text-decoration: none;
  transition: background 0.15s ease;
}
body.article-desk .related-link:hover,
body.article-desk .feature-card:hover { background: rgba(255, 255, 255, 0.03); transform: none; }
body.article-desk .benefit-card h4,
body.article-desk .feature-card h4,
body.article-desk .related-link h4,
body.article-desk .related-link strong { font-size: 15px; font-weight: 600; color: var(--dk-ink); margin: 0 0 6px; display: block; }
body.article-desk .benefit-card p,
body.article-desk .feature-card p,
body.article-desk .related-link p { font-size: 13px; line-height: 1.55; color: var(--dk-mute); margin: 0; }

/* the architecture diagram in the video guide */
body.article-desk .architecture-diagram {
  margin: 26px 0;
  padding: 22px;
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid var(--dk-line);
  border-radius: 14px;
}
body.article-desk .diagram-flow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
body.article-desk .diagram-node {
  padding: 10px 14px;
  background: var(--dk-bg) !important;
  border: 1px solid var(--dk-line);
  border-radius: 10px;
  font-family: var(--font-family-mono);
  font-size: 12px;
  color: var(--dk-ink);
}
body.article-desk .diagram-arrow { color: var(--dk-dim); font-family: var(--font-family-mono); }

/* close */
body.article-desk .cta-box {
  margin: 46px 0 0;
  padding: 30px 32px;
  text-align: left;
  background: linear-gradient(155deg, color-mix(in srgb, var(--ar) 12%, transparent), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--dk-line);
  border-radius: 18px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
body.article-desk .cta-box h2,
body.article-desk .cta-box h3 {
  font-family: 'Bricolage Grotesque', var(--font-family);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.026em;
  color: var(--dk-ink);
  margin: 0 0 10px;
}
body.article-desk .cta-box p { margin: 0 0 20px; font-size: 15px; line-height: 1.64; color: var(--dk-mute); }
body.article-desk .cta-box a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  background: var(--dk-ink);
  border: 0;
  border-radius: 10px;
  color: #0a0d13;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}
body.article-desk .cta-box a:hover { background: #fff; }

/* icons in a guide carry no size attributes either */
body.article-desk svg:not([width]) { width: 17px; height: 17px; flex: none; }

@media (max-width: 900px) {
  body.article-desk .article-header,
  body.article-desk .article-hero { padding: 30px 20px 24px; }
  body.article-desk .article-content { padding: 32px 20px 64px; }
  body.article-desk .article-content p,
  body.article-desk .article-content li { font-size: 16px; }
}