/* Minimal responsive framework + theme */
:root{
  --bg: #ffffff;
  --fg: #0f172a; /* slate-900 */
  --muted: #475569; /* slate-600 */
  --accent: #2563eb; /* blue-600 */
  --accent-contrast: #ffffff;
  --card: #f8fafc; /* slate-50 */
  --border: #e2e8f0; /* slate-200 */
}
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b1220;
    --fg: #e5e7eb;
    --muted: #94a3b8;
    --accent: #60a5fa;
    --accent-contrast: #0b1220;
    --card: #0f172a;
    --border: #1f2937;
  }
}
html, body { height: 100%; }
body{
  margin:0; font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg); color: var(--fg);
}
.container{ max-width: 60rem; margin-inline: auto; padding: clamp(16px, 2vw, 24px); }

/* Header / Nav */
.site-header{ position: sticky; top:0; z-index: 50; backdrop-filter: saturate(180%) blur(8px); background: color-mix(in srgb, var(--bg) 85%, transparent); border-bottom: 1px solid var(--border); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand{ font-weight: 800; letter-spacing: .2px; text-decoration:none; color: var(--fg); }
.links{ display:flex; gap:.5rem; align-items:center; }
.links a{ text-decoration:none; color: var(--fg); padding:.5rem .75rem; border-radius: .6rem; }
.links a.active{ background: var(--accent); color: var(--accent-contrast); }
.links a:hover{ background: var(--card); }

.burger{ display:none; position: relative; border:1px solid var(--border); background: var(--card); padding:.5rem .6rem; border-radius:.6rem; cursor:pointer; }
.burger .bar{ display:block; width:20px; height:2px; background: var(--fg); margin:3px 0; }
.burger.open{ background: var(--accent); }
.burger.open .bar{ background: var(--accent-contrast); }
.burger .label{ position:absolute; left:-9999px; }

/* Layout */
main{ padding-block: 1rem 3rem; }
.page {}
.card{ background: var(--card); border:1px solid var(--border); border-radius: 1rem; padding: clamp(16px, 2.5vw, 28px); box-shadow: 0 1px 0 rgba(0,0,0,.04); }
.hero{ display:grid; gap:1.5rem; grid-template-columns: 1fr 1fr; align-items:start; }
.hero-img{ width:100%; height:auto; border-radius: 1rem; object-fit: cover; border:1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.inset-img{ width:70%; height:auto; border-radius: 1rem; object-fit: cover; border:1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,.08); }

h1{ font-size: clamp(1.6rem, 2.2rem, 2.2rem); line-height:1.2; margin:.2rem 0 0; }
h2{ font-size: clamp(1.3rem, 1.6rem, 1.6rem); margin: 1.25rem 0 .25rem; }
h3{ font-size: 1.125rem; margin: 1rem 0 .25rem; }
p{ margin: .75rem 0; }
ul, ol{ padding-left: 1.25rem; }
.badge{ display:inline-block; background: var(--bg); border:1px solid var(--border); border-radius:999px; padding:.25rem .6rem; font-size:.85rem; color: var(--muted); }
.button{ text-decoration:none; background: var(--accent); color: var(--accent-contrast); padding:.6rem .9rem; border-radius:.7rem; font-weight:600; display:inline-block; }
.subnav{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 1rem; }
.subnav a{ border:1px solid var(--border); background:var(--bg); padding:.35rem .6rem; border-radius:.6rem; text-decoration:none; color:var(--fg); font-size:.9rem; }
.back-top{ margin-top: 1rem; }
.site-footer{ border-top:1px solid var(--border); margin-top:2rem; padding-top:1rem; color: var(--muted); font-size:.9rem; }

/* Mobile nav */
@media (max-width: 720px){
  .links{ display:none; position:absolute; right:1rem; top:3.25rem; background: var(--bg); border:1px solid var(--border); border-radius:.75rem; padding:.5rem; flex-direction:column; align-items:flex-start; }
  .links.open{ display:flex; }
  .burger{ display:inline-flex; }
  .hero{ grid-template-columns: 1fr; }
  .hero-img{ order: -1; }
}

/* Print */
@media print{
  .site-header, .button, .subnav, .burger{ display:none !important; }
  .card{ border:none; background:#fff; box-shadow:none; padding:0; }
  .container{ max-width: none; }
}
/* Responsive YouTube embeds */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin: 1.5rem 0;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}