/* ======================================================================================================= */
/* Page layout                                                                                              */
/* ======================================================================================================= */
.site-header { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--line); background: var(--surface); }
.header-inner { display: flex; min-height: 64px; align-items: center; gap: 28px; }
.brand { display: flex; min-width: 194px; align-items: center; gap: 10px; }
.brand-mark { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 7px; background: var(--ink); color: var(--surface); font-family: var(--mono); font-size: 8px; font-weight: 800; letter-spacing: 0.04em; }
.brand strong, .brand small { display: block; line-height: 1.15; }
.brand strong { font-size: 13px; font-weight: 700; letter-spacing: 0.01em; }
.brand small { margin-top: 3px; color: var(--dim); font-size: 10px; }
.main-nav { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.main-nav a { border-radius: 6px; padding: 7px 10px; color: var(--muted); font-size: 12px; }
.main-nav a:hover { background: var(--surface-soft); color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.theme-button { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--muted); font-size: 14px; }
.theme-button:hover { border-color: var(--blue); color: var(--blue); }
.markdown-link { color: var(--blue); font-size: 12px; }
.section { scroll-margin-top: 80px; padding: 58px 0; }
.section + .section { border-top: 1px solid var(--line); }
.section-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 26px; }
.section-number { padding-top: 5px; color: var(--blue); font-family: var(--mono); font-size: 11px; font-weight: 700; }
.section-heading h2 { margin: 0 0 5px; font-size: 32px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.15; }
.section-heading p { max-width: 650px; margin: 0; color: var(--muted); font-size: 14px; }
.example-section { background: var(--surface); }
.footer-inner { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid var(--line); color: var(--dim); font-size: 11px; }
.footer-inner a { color: var(--blue); }