/* site.css — docs + landing layout on top of LombokCSS tokens. */
.hero { padding: 56px 0 24px; }
.hero h1 { font-size: 2.4rem; margin: 0 0 8px; letter-spacing: -0.02em; }
.hero .lead { font-size: 1.15rem; max-width: 60ch; }
.chip { display:inline-block; padding:2px 10px; border:1px solid var(--lc-border); border-radius:999px; font-size:.8rem; color:var(--lc-muted); margin-right:6px; }
.demo-grid { display:grid; grid-template-columns:1fr; gap:16px; }
@media(min-width:800px){ .demo-grid{ grid-template-columns:repeat(3,1fr);} }
.demo { height: 220px; }
.card-grid { display:grid; grid-template-columns:1fr; gap:16px; }
@media(min-width:800px){ .card-grid{ grid-template-columns:repeat(2,1fr);} }
pre { background: var(--lc-surface-2, #f1f3f5); padding: 14px 16px; border-radius: 10px; overflow:auto; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
:not(pre) > code { background: var(--lc-surface-2, #f1f3f5); padding: 1px 6px; border-radius: 5px; }

/* docs */
.docs-layout { display:grid; grid-template-columns:1fr; gap:24px; padding-block:24px; }
@media(min-width:900px){ .docs-layout{ grid-template-columns:220px 1fr; } }
.docs-nav { display:flex; flex-direction:column; gap:2px; position:sticky; top:16px; align-self:start; }
.docs-nav a { padding:7px 12px; border-radius:8px; color:var(--lc-text); text-decoration:none; }
.docs-nav a:hover { background:var(--lc-surface-2, #f1f3f5); }
.docs-nav a.active { background:var(--lc-accent, #2f6bd8); color:#fff; }
.docs-content { min-width:0; }
.docs-content h1 { margin-top:0; }
.docs-content table { border-collapse:collapse; width:100%; margin:12px 0; }
.docs-content th, .docs-content td { border:1px solid var(--lc-border); padding:7px 10px; text-align:left; font-size:.92rem; }