:root {
  --bg: #ffffff;
  --ink: #121212;
  --muted: #52525b;
  --line: #e4e4e7;
  --panel: #fafafa;
  --accent: #dd0031;
  --soft-accent: #fff1f2;
  --max: 1160px;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    local('Inter Regular'),
    local('Inter'),
    url('/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:
    local('Inter SemiBold'),
    local('Inter'),
    url('/fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    local('Inter Bold'),
    local('Inter'),
    url('/fonts/inter-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    local('Fira Code Regular'),
    local('Fira Code'),
    url('/fonts/fira-code-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src:
    local('Fira Code Medium'),
    local('Fira Code'),
    url('/fonts/fira-code-500.woff2') format('woff2');
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: Inter, system-ui, sans-serif; }
a, button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
.container { width: min(calc(100% - 2rem), var(--max)); margin-inline: auto; }
.site-header { background: var(--ink); color: #fff; border-bottom: 1px solid #27272a; }
.site-header .inner { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding: 1.15rem 0; min-height: 74px; }
.brand { font-weight: 600; font-size: .92rem; letter-spacing: .015em; }
.nav { display:flex; gap:1.35rem; font-size:.9rem; }
.nav a { color:#d4d4d8; }
.nav a:hover, .nav a.active { color:#fff; }
main { min-height: 60vh; }
.site-footer { margin-top: 4rem; border-top:1px solid var(--line); background:#fafafa; }
.site-footer .grid { display:grid; gap:1.5rem; grid-template-columns: 1.5fr 1fr 1fr; padding: 2rem 0; }
.site-footer p, .site-footer li, .site-footer a { color:#52525b; font-size:.9rem; }
.site-footer .title { color: var(--ink); font-weight:700; }
.site-footer h4 { margin:0 0 .6rem; font-size:.75rem; letter-spacing:.08em; color:#71717a; text-transform:uppercase; }
.site-footer ul { list-style:none; padding:0; margin:0; display:grid; gap:.45rem; }
.hero { padding: 3rem 0 1.5rem; display:grid; gap:2rem; grid-template-columns: 1.15fr .85fr; }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; font-weight: 700; }
.h1 { margin:.75rem 0 0; font-size: clamp(2.1rem, 4vw, 3.3rem); line-height:1.04; letter-spacing:-.03em; font-weight: 800; }
.lead { margin:1rem 0 0; color: var(--muted); font-size: 1.05rem; line-height:1.75; max-width: 62ch; }
.button-row { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.5rem; }
.btn { display:inline-flex; padding:.72rem 1rem; border-radius:.55rem; border:1px solid var(--line); font-weight:600; font-size:.92rem; }
.btn.primary { background: var(--accent); border-color: var(--accent); color:#fff; }
.btn.secondary { background:#fff; color:var(--ink); }
.panel { border:1px solid var(--line); background: var(--panel); border-radius: .85rem; padding: 1rem; }
.panel h3 { margin:.2rem 0 .6rem; font-size: .95rem; }
.panel p, .panel li { color: var(--muted); font-size: .9rem; line-height:1.55; }
.cards { display:grid; gap:1rem; grid-template-columns: repeat(3, minmax(0,1fr)); }
.card { border:1px solid var(--line); border-radius:.8rem; background:#fff; padding:1rem; }
.card:hover { border-color:#d4d4d8; }
.card .meta { color:#71717a; font-size:.78rem; display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.card .meta .dot { color:#a1a1aa; }
.card h3 { margin:.6rem 0 0; font-size:1.15rem; line-height:1.25; letter-spacing:-.02em; }
.card h3 a:hover { color: var(--accent); }
.card p { color:var(--muted); font-size:.9rem; line-height:1.55; margin:.7rem 0 0; }
.tags { display:flex; gap:.45rem; flex-wrap:wrap; margin-top:.8rem; }
.tag { display:inline-flex; padding:.28rem .58rem; border-radius:999px; border:1px solid #d4d4d8; background:#fafafa; color:#52525b; font-size:.74rem; font-weight:600; line-height:1; }
.tag:hover { border-color: var(--accent); color: var(--accent); }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin: 1rem 0; }
.section-head h2 { margin:0; font-size:1.55rem; letter-spacing:-.02em; }
.section-head p { margin:.25rem 0 0; color:var(--muted); font-size:.9rem; }
.page-wrap { padding: 2.5rem 0; }
.page-wrap h1 { margin:0; font-size:2.2rem; letter-spacing:-.02em; }
.page-wrap .sub { margin:.7rem 0 0; color:var(--muted); }
.searchbar { margin:1.2rem 0 1.3rem; }
.searchbar input { width:100%; border:1px solid #d4d4d8; border-radius:.55rem; padding:.75rem .9rem; font-size:.95rem; }
.article-layout { padding: 2.25rem 0; display:grid; gap:2.2rem; grid-template-columns: minmax(0,1fr) 19rem; }
.breadcrumbs { color:#71717a; font-size:.82rem; margin-bottom:1.45rem; line-height:1.45; }
.breadcrumbs span { color:#52525b; }
.breadcrumbs a:hover { color: var(--accent); }
.article-header { max-width: 100%; }
.article-eyebrow { display:inline-block; color: var(--accent); font-size:.76rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.95rem; }
.article-eyebrow:hover { text-decoration: underline; text-underline-offset: 2px; }
.article-header h1 { margin:0; font-size: clamp(2.15rem, 3.35vw, 3.05rem); line-height:1.1; letter-spacing:-.035em; font-weight:800; max-width: 22ch; }
.article-header .desc { margin:1.15rem 0 0; color:var(--muted); font-size:1.02rem; line-height:1.7; max-width: 48ch; }
.article-header .meta { display:flex; gap:.72rem; flex-wrap:wrap; color:#71717a; font-size:.83rem; margin-top: 1.05rem; align-items:center; }
.article-header .meta span { line-height:1.2; }
.article-header .tags { margin-top:.9rem; gap:.45rem; }
.article-header .cover { margin-top:1.15rem; border-radius: 1rem; border:1px solid var(--line); overflow:hidden; background:#fff; padding:0; box-shadow: 0 1px 0 rgba(18,18,18,.02); }
.article-header .cover img { width:100%; border-radius: .95rem; }
.article-tools { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:1rem; border:1px solid var(--line); background:var(--panel); border-radius:.8rem; padding:.72rem .9rem; font-size:.84rem; color:var(--muted); }
.article-tools a { color: var(--accent); }
.prose { margin-top: 1.55rem; }
.prose h2, .prose h3, .prose h4 { scroll-margin-top: 5rem; line-height:1.2; letter-spacing:-.02em; }
.prose h2 { margin:2.2rem 0 .95rem; font-size:1.6rem; font-weight:700; }
.prose h3 { margin:1.75rem 0 .8rem; font-size:1.25rem; font-weight:600; }
.prose p, .prose li { color:#27272a; line-height:1.75; }
.prose p { margin:1rem 0; }
.prose ul, .prose ol { margin:.95rem 0 .95rem 1.25rem; padding-left: .4rem; }
.prose li { margin:.35rem 0; }
.prose code { font-family: 'Fira Code', ui-monospace, monospace; background:#f4f4f5; border-radius:.3rem; padding:.08rem .35rem; font-size:.88em; }
.prose pre { overflow:auto; background:#09090b; color:#f4f4f5; border-radius:.8rem; padding: 1rem 1.05rem; border:1px solid #27272a; margin:1.2rem 0; }
.prose pre code { background:transparent; padding:0; color:inherit; }
.prose blockquote { margin:1.15rem 0; padding:.8rem .95rem; border-left:4px solid var(--accent); background:#fff7f8; color:#3f3f46; border-radius:.25rem; }
.prose table { width:100%; border-collapse:collapse; margin:1rem 0; font-size:.9rem; }
.prose th, .prose td { border:1px solid var(--line); padding:.55rem .6rem; vertical-align:top; }
.prose th { background:#fafafa; text-align:left; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.aside { position: sticky; top: 5.6rem; align-self:start; display:grid; gap:1rem; }
.aside .box { border:1px solid var(--line); border-radius:.85rem; padding:1rem; background:#fff; }
.aside .box h3 { margin:.05rem 0 .65rem; font-size:.95rem; font-weight:700; color:#18181b; }
.aside .toc nav > ul, .aside .toc nav > ol, .aside .toc > ul, .aside .toc > ol { list-style:none; padding:0; margin:0; display:grid; gap:.38rem; }
.aside .toc li { font-size:.83rem; color:var(--muted); line-height:1.33; }
.aside .toc li ul, .aside .toc li ol { margin:.28rem 0 0 .9rem; padding:0; list-style:none; display:grid; gap:.28rem; }
.aside .toc a { color:#52525b; text-decoration:none; }
.aside .toc a:hover { color: var(--accent); }
.aside .toc { max-height: 66vh; overflow:auto; }
.aside .toc::-webkit-scrollbar { width: 8px; }
.aside .toc::-webkit-scrollbar-thumb { background:#d4d4d8; border-radius:999px; }
.list-grid { display:grid; gap:1rem; grid-template-columns: repeat(3, minmax(0,1fr)); }
.empty { border:1px dashed #d4d4d8; border-radius:.8rem; padding:1rem; color:var(--muted); }
.newsletter-box { max-width: 780px; margin: 0 auto; border:1px solid var(--line); border-radius:1rem; padding:1.25rem; background:#fff; }
.notice { border:1px solid #fcd34d; background:#fffbeb; color:#92400e; border-radius:.7rem; padding:.75rem .85rem; font-size:.9rem; }
.muted { color: var(--muted); }
hr.sep { border:0; border-top:1px solid var(--line); margin:1.25rem 0; }
@media (max-width: 980px) {
  .hero, .article-layout { grid-template-columns: 1fr; }
  .aside { position: static; }
  .cards, .list-grid { grid-template-columns: 1fr 1fr; }
  .site-footer .grid { grid-template-columns: 1fr; }
  .article-layout { gap:1.4rem; }
  .article-header h1 { max-width: none; }
  .article-header .desc { max-width: none; }
}
@media (max-width: 640px) {
  .cards, .list-grid { grid-template-columns: 1fr; }
  .nav { gap:.8rem; font-size:.9rem; }
  .article-tools { flex-direction: column; }
}