/* Content pages — page masthead, prose, doc index cards. Built on site.css. */

/* page masthead */
.page-head{ border-bottom:1px solid var(--color-divider); padding:calc(var(--space-8) * 1.1) 0 var(--space-8); }
.page-head h1{ font-size:clamp(34px,4.4vw,54px); line-height:1.02; letter-spacing:-0.02em; margin:var(--space-3) 0 0; max-width:20ch; }
.page-head .lede{ font-size:18px; line-height:1.5; max-width:56ch; margin-top:var(--space-4); color:color-mix(in srgb,var(--color-text) 74%,transparent); }
.page-meta{ display:flex; gap:var(--space-4); margin-top:var(--space-5); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:color-mix(in srgb,var(--color-text) 48%,transparent); }

/* band variants */
section.band-tight{ padding:calc(var(--space-8) * 1.1) 0; }
section.band-top{ border-top:1px solid var(--color-divider); }

/* doc layout */
.doc-single{ max-width:min(var(--wrap),78ch); }
.doc-grid{ display:grid; grid-template-columns:minmax(0,1fr) 200px; gap:var(--space-8); align-items:start; }
.doc-toc{ position:sticky; top:84px; border-left:1px solid var(--color-divider); padding-left:var(--space-4); }
.doc-toc .eyebrow{ margin-bottom:var(--space-3); }
.doc-toc ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.doc-toc ul ul{ margin-top:9px; padding-left:var(--space-3); }
.doc-toc a{ font-size:13px; line-height:1.35; color:color-mix(in srgb,var(--color-text) 66%,transparent); }
.doc-toc a:hover{ color:var(--color-accent); }
@media(max-width:900px){ .doc-grid{ grid-template-columns:1fr; } .doc-toc{ position:static; border-left:0; border-top:1px solid var(--color-divider); padding:var(--space-4) 0 0; } }

/* prose */
.prose{ font-size:16px; line-height:1.68; color:color-mix(in srgb,var(--color-text) 88%,transparent); }
.prose > * + *{ margin-top:var(--space-4); }
.prose h2{ font-size:28px; letter-spacing:-0.012em; margin-top:calc(var(--space-8) * 0.9); padding-top:var(--space-4); border-top:1px solid var(--color-divider); }
.prose h3{ font-size:20px; letter-spacing:-0.008em; margin-top:var(--space-6); }
.prose h4{ font-family:var(--mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--color-accent); margin-top:var(--space-6); }
.prose h2 + *,.prose h3 + *,.prose h4 + *{ margin-top:var(--space-3); }
.prose p{ max-width:74ch; }
.prose a{ color:var(--color-accent-700); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:color-mix(in srgb,var(--color-accent) 45%,transparent); }
.prose a:hover{ color:var(--color-accent); text-decoration-color:currentColor; }
.prose strong{ font-weight:700; color:var(--color-text); }
.prose ul,.prose ol{ padding-left:0; list-style:none; display:grid; gap:var(--space-2); max-width:74ch; }
.prose li{ position:relative; padding-left:22px; }
.prose ul > li::before{ content:"+"; position:absolute; left:0; top:0; font-family:var(--mono); color:var(--color-accent); }
.prose ol{ counter-reset:step; }
.prose ol > li{ counter-increment:step; }
.prose ol > li::before{ content:counter(step,decimal-leading-zero); position:absolute; left:0; top:1px; font-family:var(--mono); font-size:12px; color:var(--color-accent); }
.prose li > ul,.prose li > ol{ margin-top:var(--space-2); }
.prose code{ font-family:var(--mono); font-size:0.88em; background:var(--color-surface); border:1px solid var(--color-divider); padding:1px 5px; }
.prose pre{ background:var(--term-bg); color:var(--term-fg); font-family:var(--mono); font-size:13.5px; line-height:1.7; padding:16px 18px; overflow-x:auto; box-shadow:var(--shadow-lg); }
.prose pre code{ background:none; border:0; padding:0; font-size:inherit; color:inherit; }
.prose blockquote{ border-left:2px solid var(--color-accent); padding-left:var(--space-4); color:color-mix(in srgb,var(--color-text) 66%,transparent); }
.prose blockquote p{ margin:0; }
.prose hr{ border:0; border-top:1px solid var(--color-divider); }
.prose img{ display:block; max-width:100%; border:1px solid var(--color-divider); }
.prose table{ width:100%; border-collapse:collapse; font-size:14px; }
.prose th{ text-align:left; font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:color-mix(in srgb,var(--color-text) 60%,transparent); padding:var(--space-3); border-bottom:1px solid var(--color-divider); }
.prose td{ padding:var(--space-3); border-bottom:1px solid color-mix(in srgb,var(--color-text) 9%,transparent); }
.prose .term{ margin-top:var(--space-4); }

/* callout */
.callout{ padding:var(--space-5); background:transparent; }
.callout-title{ font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--color-accent); margin-bottom:var(--space-2); }
.callout-body > *{ margin:0; }
.callout-body > * + *{ margin-top:var(--space-3); }

/* index cards */
.card-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--space-6); }
.doc-card{ display:flex; flex-direction:column; gap:var(--space-2); padding:var(--space-6); color:var(--color-text); background:transparent; }
.doc-card:hover{ color:var(--color-text); background:color-mix(in srgb,var(--color-text) 3%,transparent); }
.doc-card .tag{ font-size:11px; letter-spacing:0.04em; color:var(--color-accent); }
.doc-card h3{ font-size:20px; letter-spacing:-0.008em; margin:0; }
.doc-card p{ font-size:14px; line-height:1.55; color:color-mix(in srgb,var(--color-text) 70%,transparent); margin:0; }
.doc-card .go{ margin-top:auto; padding-top:var(--space-3); font-size:12px; letter-spacing:0.06em; color:var(--color-accent); }