/* =========================================================================
   article.css — content layer for blogs, pillars and white paper landing
   pages. Derived from the provided homepage design. Uses only existing
   color tokens and font families from styles.css. No new fonts or colors.
   ========================================================================= */

/* ---- Breadcrumb ------------------------------------------------------ */
.breadcrumb { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-top: clamp(24px, 4vw, 40px); }
.breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.breadcrumb li { display: flex; align-items: center; gap: 8px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb li + li::before { content: "/"; color: var(--line); }
.breadcrumb [aria-current="page"] { color: var(--fg-soft); }

/* ---- Article hero ---------------------------------------------------- */
.article-hero { padding-top: clamp(20px, 3vw, 36px); padding-bottom: clamp(20px, 3vw, 36px); }
.article-hero .meta { font-family: "JetBrains Mono", monospace; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 22px; }
.article-hero h1 { font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: -0.04em; line-height: 0.98; max-width: 20ch; }
.article-hero .standfirst { font-size: clamp(1.12rem, 1.8vw, 1.4rem); line-height: 1.45; color: var(--fg-soft); max-width: 60ch; margin-top: 24px; letter-spacing: -0.01em; }

/* ---- Layout: prose + aside ------------------------------------------- */
.article-shell { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(36px, 5vw, 72px); align-items: start; padding-bottom: clamp(60px, 8vw, 110px); }
.article-shell.no-aside { grid-template-columns: minmax(0, 760px); justify-content: center; }
@media (max-width: 940px) { .article-shell { grid-template-columns: minmax(0, 1fr); } .article-aside { position: static !important; order: 2; } }

/* ---- Prose ----------------------------------------------------------- */
.prose { max-width: 72ch; }
.prose > * + * { margin-top: 1.3em; }
.prose p { color: var(--fg-soft); font-size: 1.08rem; line-height: 1.65; }
.prose h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); letter-spacing: -0.03em; line-height: 1.06; margin-top: 1.8em; padding-top: 0.4em; }
.prose h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); letter-spacing: -0.02em; line-height: 1.15; margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.2em; color: var(--fg-soft); display: flex; flex-direction: column; gap: 0.5em; }
.prose li { font-size: 1.04rem; line-height: 1.55; }
.prose li::marker { color: var(--accent); }
.prose a { color: var(--fg); font-weight: 560; border-bottom: 1px solid var(--accent); padding-bottom: 1px; transition: color .2s, background-color .2s; }
.prose a:hover { color: var(--accent); }
.prose strong { color: var(--fg); font-weight: 680; }
.prose blockquote { border-left: 2px solid var(--accent); padding: 4px 0 4px 22px; color: var(--fg); font-size: 1.18rem; line-height: 1.5; letter-spacing: -0.01em; font-weight: 520; }
.prose figure { margin: 0; }
.prose figcaption { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 12px; text-align: center; }

/* ---- Key takeaways block --------------------------------------------- */
.takeaways { background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 4px; padding: clamp(22px, 3vw, 32px); }
.takeaways h2 { font-family: "JetBrains Mono", monospace; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; padding: 0; font-weight: 500; }
.takeaways ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.takeaways li { display: flex; gap: 12px; font-size: 1rem; line-height: 1.5; color: var(--fg); }
.takeaways li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 8px; background: var(--accent); border-radius: 1px; transform: rotate(45deg); }

/* ---- Data table (extends .compare from pages.css) -------------------- */
.prose table, .data-table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--surface); font-size: 0.96rem; }
.prose th, .prose td, .data-table th, .data-table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose tr:last-child td, .data-table tr:last-child td { border-bottom: 0; }
.prose thead th, .data-table thead th { background: var(--surface-2); font-family: "JetBrains Mono", monospace; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 500; }

/* ---- Aside (sticky download / toc) ----------------------------------- */
.article-aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 22px; }
.aside-card { border: 1px solid var(--line); border-radius: 4px; background: var(--surface); padding: 24px 22px; }
.aside-card.accent { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 6%, var(--surface)); }
.aside-card h3 { font-size: 1.15rem; letter-spacing: -0.02em; }
.aside-card p { color: var(--muted); font-size: 0.92rem; line-height: 1.5; margin-top: 10px; }
.aside-card .btn { margin-top: 16px; width: 100%; justify-content: center; }
.aside-card .toc-title { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.aside-card .toc { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.aside-card .toc a { color: var(--fg-soft); font-size: 0.92rem; line-height: 1.35; }
.aside-card .toc a:hover { color: var(--accent); }

/* ---- Definition / glossary ------------------------------------------- */
.glossary { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.glossary dt, .glossary .term { font-weight: 680; color: var(--fg); }
.glossary dd, .glossary .def { color: var(--muted); margin: 4px 0 0; line-height: 1.55; }

/* ---- Inline newsletter strip ----------------------------------------- */
.news-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(28px, 4vw, 44px) 0; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.news-strip h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -0.03em; }
.news-strip p { color: var(--muted); margin-top: 10px; font-size: 0.98rem; line-height: 1.5; max-width: 44ch; }
.news-form { display: flex; gap: 10px; flex-wrap: wrap; }
.news-form input { flex: 1 1 200px; background: var(--surface); border: 1px solid var(--line); border-radius: 2px; padding: 12px 14px; font: inherit; font-size: 1rem; color: var(--fg); }
.news-form input:focus { outline: none; border-color: var(--accent); }
.news-form .form-status { flex-basis: 100%; font-size: 0.88rem; color: var(--muted); margin: 0; }
.news-form .form-status.ok { color: var(--accent); font-weight: 600; }
@media (max-width: 720px) { .news-strip { grid-template-columns: 1fr; gap: 20px; } }

/* ---- Article footer CTA / related ------------------------------------ */
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.related .r-card { border: 1px solid var(--line); border-radius: 4px; padding: 22px 20px 24px; background: var(--surface); transition: transform .35s cubic-bezier(.2,.7,.3,1), border-color .3s; display: flex; flex-direction: column; gap: 8px; }
.related .r-card:hover { transform: translateY(-4px); border-color: var(--fg); }
.related .r-tag { font-family: "JetBrains Mono", monospace; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.related .r-card h3 { font-size: 1.08rem; letter-spacing: -0.02em; line-height: 1.2; }
.related .r-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
@media (max-width: 760px) { .related { grid-template-columns: 1fr; } }

/* ---- Last reviewed stamp --------------------------------------------- */
.reviewed { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--muted); margin-top: 28px; }

/* ---- White paper gate ------------------------------------------------ */
.gate-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
@media (max-width: 860px) { .gate-grid { grid-template-columns: 1fr; gap: 40px; } }
.gate-list { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 12px; }
.gate-list li { display: flex; gap: 12px; color: var(--fg-soft); font-size: 1rem; line-height: 1.5; }
.gate-list li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 8px; background: var(--accent); border-radius: 1px; transform: rotate(45deg); }
.gate-note { font-size: 0.82rem; color: var(--muted); margin-top: 16px; line-height: 1.5; }

/* ---- Blog index listing ---------------------------------------------- */
.post-list { border-top: 1px solid var(--fg); }
.post-row { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(16px, 4vw, 48px); padding: clamp(24px, 3vw, 36px) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.post-row .p-tag { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.post-row h3 { font-size: clamp(1.25rem, 2.2vw, 1.7rem); letter-spacing: -0.025em; line-height: 1.1; }
.post-row h3 a:hover { color: var(--accent); }
.post-row p { color: var(--muted); font-size: 0.96rem; line-height: 1.5; margin-top: 8px; max-width: 60ch; }
.post-row .p-stage { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; }
@media (max-width: 680px) { .post-row { grid-template-columns: 1fr; gap: 6px; } .post-row .p-stage { display: none; } }

/* ---- Cluster grid (blog index, pillar) ------------------------------- */
.cluster-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cluster-card { border: 1px solid var(--line); border-radius: 4px; padding: 28px 26px 30px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; transition: transform .35s cubic-bezier(.2,.7,.3,1), border-color .3s; }
.cluster-card:hover { transform: translateY(-4px); border-color: var(--fg); }
.cluster-card .c-tag { font-family: "JetBrains Mono", monospace; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.cluster-card h3 { font-size: 1.25rem; letter-spacing: -0.025em; line-height: 1.12; }
.cluster-card p { color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
.cluster-card .c-foot { margin-top: auto; padding-top: 8px; }
@media (max-width: 860px) { .cluster-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cluster-grid { grid-template-columns: 1fr; } }