:root{
  --mx: clamp(16px, 3vw, 24px);
  --w: min(1180px, 94vw);
  --brand:#2563eb;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif;line-height:1.6;color:#111827;background:#fff}
a{color:#1d4ed8}
.container{max-width:var(--w);margin-inline:auto;padding:24px var(--mx)}
.prose h1,.prose h2,.prose h3{line-height:1.25;margin:1.6rem 0 .7rem}
.prose p{margin:0 0 1rem}
.lead{font-size:1.1rem;color:#334155}
img.responsive{display:block;max-width:100%;height:auto;border-radius:12px}

.toc{
  background:turquoise;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:16px;
  margin:1rem 0 1.5rem;
}
.toc a{
  text-decoration:none;
  color:#000; /* black links per user */
}

.note,.tip,.warn{border-radius:12px;padding:16px;margin:1rem 0}
.note{background:#f8fafc;border:1px solid #e2e8f0}
.tip{background:#f0fdf4;border:1px solid #dcfce7}
.warn{background:#fff7ed;border:1px solid #ffedd5}

.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:1fr}
@media (min-width:880px){.grid-2{grid-template-columns:1fr 1fr}}
.card{border:1px solid #e5e7eb;border-radius:14px;padding:16px;background:#fff}

.table-wrap{overflow:auto;border:1px solid #e5e7eb;border-radius:12px;margin:1rem 0}
table{width:100%;border-collapse:collapse}
th,td{padding:12px;border-bottom:1px solid #e5e7eb;text-align:left}
th{background:#f8fafc;font-weight:600;white-space:nowrap}

.btn-primary{display:inline-block;padding:10px 16px;border-radius:10px;background:var(--brand);color:#fff;text-decoration:none}

/* Ad fragments */
.ad-wrap{margin:32px 0}
.ad-label{font-size:.8rem;color:#64748b;margin-bottom:6px;display:block}

/* Simple header/footer for demo */
.site-header{background:#0f172a;color:#fff}
.site-header .container{display:flex;gap:16px;align-items:center;justify-content:space-between}
.site-header nav a{color:#cbd5e1;text-decoration:none;margin:0 8px}
.site-header nav a:hover{color:#fff}
.site-footer{background:#f1f5f9;color:#334155}
.site-footer .container{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Reset & Base */
body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color: #fefefe;
  color: #333;
  line-height: 1.6;
}

/* Header */
header {
  background: linear-gradient(90deg, #ff6b6b, #f7b733);
  padding: 20px 40px;
  text-align: center;
  color: white;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}

header h1 {
  font-size: 2.5em;
  margin: 0;
  font-weight: bold;
}

nav {
  margin-top: 10px;
}

nav a {
  color: white;
  text-decoration: none;
  margin: 0 15px;
  font-weight: 500;
}

nav a:hover {
  text-decoration: underline;
}

/* Footer */
footer {
  background-color: #444;
  color: #eee;
  padding: 25px 40px;
  text-align: center;
}


footer a {
  color: #f7b733;
  text-decoration: none;
  margin: 0 10px;
}

footer a:hover {
  text-decoration: underline;
}

/* Article Container */
.container {
  max-width: 900px;
  margin: auto;
  padding: 40px 20px;
}

/* Buttons */
.btn-primary {
  display: inline-block;
  padding: 10px 20px;
  background-color: #ff6b6b;
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
}

.btn-primary:hover {
  background-color: #e34d4d;
}

/* Images */
img {
  max-width: 100%;
  border-radius: 8px;
  margin-top: 20px;
}

footer p a {
  margin: 0 8px;
  font-weight: bold;
  color: #f7b733;
}

footer p a:hover {
  color: #ff6b6b;
  text-decoration: underline;
}
.prose p { margin: 0 0 1rem; }
.nav { display:flex; gap:.75rem; align-items:center; }
.btn-primary, .btn-secondary {
  display:inline-block; padding:.6rem .9rem; border-radius:10px; text-decoration:none;
}
.btn-primary { background:#2563eb; color:#fff; }
.btn-secondary { background:#e5e7eb; color:#111827; }