:root{
--bg:#ffffff;
--text:#111827;
--muted:#6b7280;
--accent:#2d6cdf;
--radius:8px;
--max-width:900px;
--gutter:20px;
font-size:16px;
}

/* Lightweight reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
padding:40px 16px;
background:var(--bg);
color:var(--text);
font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height:1.6;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}





/* Keep main/article content readable */
.container > main,
.container > article,
.container > .content{
min-width:0;
grid-column: 1 / -1;
}

/* When there is enough room, place article/content in the second column */
@media (min-width:860px){
.container > main,
.container > article,
.container > .content{
grid-column: 2 / 3;
}
}

/* Headings and text styles */
h1{
font-size:1.75rem;
margin:0 0 8px 0;
line-height:1.15;
color:var(--text);
}
.lead{color:var(--muted);margin-bottom:24px;font-size:1rem}
.section{background:transparent;padding:18px 20px;margin-bottom:18px;border-radius:var(--radius);border:1px solid rgba(15,23,42,0.04)}
.section h2{margin:0 0 8px 0;font-size:1.125rem;color:var(--text)}
.section p{margin:0 0 10px 0;color:var(--muted);font-size:0.98rem}

/* Sidebar content (when present) keep a compact readable style */
.container > aside p,
.container > aside .meta{
color:var(--muted);
margin:6px 0;
font-size:0.95rem;
text-align:center;
}

/* If the sidebar contains lists, keep them centered but readable */
.container > aside ul{list-style:none;padding:0;margin:8px 0;display:inline-block;text-align:left}
.container > aside ul li{margin:6px 0;color:var(--muted);font-size:0.95rem}

/* Small print / meta */
.small{font-size:0.875rem;color:var(--muted)}

/* Cards and utilities */
.card{background:#fff;border:1px solid rgba(15,23,42,0.04);padding:12px;border-radius:8px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.center{text-align:center}

/* Responsive: stack columns on narrow screens */
@media (max-width:859px){
.container{grid-template-columns:1fr;gap:18px}
.container > aside{grid-column:1 / -1;text-align:left;padding:0}
.container > aside p,
.container > aside .meta{ text-align:left }
h1{font-size:1.5rem}
body{padding:24px 12px}
}