:root{
  --bg:#f8fafc; --card:#ffffff; --text:#0f172a; --muted:#475569; --border:#e2e8f0; --primary:#4f46e5; --ring:#6366f1;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
a{color:#1d4ed8} a:focus{outline:2px solid var(--ring);outline-offset:2px} a:hover{text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1200px;margin-inline:auto;padding:0 1rem}
.skip{position:absolute;left:-9999px;top:auto}
.skip:focus{left:1rem;top:1rem;background:var(--primary);color:#fff;padding:.5rem .75rem;border-radius:.5rem;z-index:1000}
.navbar{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);border-bottom:1px solid var(--border);z-index:999}
.navbar .row{display:flex;align-items:center;justify-content:space-between;height:56px}
.brand{display:inline-flex;gap:.5rem;align-items:center;color:var(--text);font-weight:700;text-decoration:none}
.nav{display:flex;gap:.25rem;flex-wrap:wrap}
.nav a{display:inline-block;padding:.5rem .75rem;border-radius:.5rem;color:#334155;text-decoration:none;border:1px solid transparent}
.nav a:hover{background:#f1f5f9}
.nav a.current{background:var(--primary);color:#fff;border-color:var(--primary)}
main{outline:none}
.section{padding:2rem 0}
.section h1{font-size:clamp(1.25rem,2.2vw,1.8rem);margin:0 0 .25rem;font-weight:800}
.section p.lead{color:var(--muted);margin:.25rem 0 1.25rem}
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-200-1{grid-template-columns:1fr}
.card{background:var(--card);border:1px solid var(--border);border-radius:1rem;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card-body{padding:1rem}
.badge{display:inline-flex;align-items:center;padding:.25rem .5rem;border:1px solid var(--border);border-radius:999px;font-size:.75rem;color:#0f172a;background:#fff}
.progress{height:.6rem;background:#e2e8f0;border-radius:999px;overflow:hidden}
.progress > span{display:block;height:100%;background:var(--primary)}
.footer{border-top:1px solid var(--border);background:#fff}
.footer .row{padding:1rem 0;color:#334155;font-size:.9rem;display:grid;gap:.5rem}
/* Responsive breakpoints: ~576, 768, 992 */
@media (min-width:576px){
  .grid-200-1{grid-template-columns:200px 1fr}
}
@media (min-width:768px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:992px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
}
/* Buttons for lightbox */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:.5rem;border:1px solid var(--border);background:#fff;color:#0f172a;text-decoration:none}
.btn:hover{background:#f8fafc}
/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;padding:1rem;z-index:1000}
.lightbox[aria-hidden="false"]{display:flex}
.lightbox .panel{max-width:1100px;width:100%}
.lightbox img{max-height:80vh;width:100%;object-fit:contain;border-radius:.75rem}
.lightbox .meta{display:flex;justify-content:space-between;gap:.5rem;margin-top:.5rem;color:#e5e7eb;align-items:center}
.lightbox .meta strong{color:#fff}
.lb-btn{padding:.4rem .6rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff}
.lb-btn:hover{background:rgba(255,255,255,.15)}
.figure{position:relative;border:1px solid var(--border);border-radius:.75rem;overflow:hidden}
.figure img{height:12rem;width:100%;object-fit:cover;transition:transform .25s ease}
.figure:hover img{transform:scale(1.03)}
.figure figcaption{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);color:#fff;font-size:.75rem;padding:.25rem .5rem}
/* Accessibility focus */
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:.25rem}