/* --- Design tokens --- */
:root{
  --bg: #0b0b0d;
  --card: #121217;
  --text: #e9e9f0;
  --muted: #b7b7c3;
  --link: #7aa2ff;
  --accent: #29d398;
  --border: #22222a;

  --radius: 16px;
  --maxw: 72rem; /* 1152px */
  --shadow: 0 10px 30px rgba(0,0,0,.25);

  /* fluid type scale */
  --step--1: clamp(.9rem, .88rem + .2vw, 1rem);
  --step-0: clamp(1rem, .95rem + .5vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.1rem + .9vw, 1.6rem);
  --step-2: clamp(1.6rem, 1.3rem + 1.2vw, 2rem);
  --step-3: clamp(2rem, 1.6rem + 1.8vw, 2.6rem);
  --step-4: clamp(2.6rem, 2rem + 2.4vw, 3.4rem);
}

/* --- Base --- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font: 400 var(--step-0)/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit}

/* --- Layout --- */
.container{max-width:var(--maxw); margin-inline:auto; padding: clamp(16px, 2.5vw, 32px)}
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,11,13,.75); backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex; gap:.75rem; align-items:center}
.brand__logo{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#5c7cfa,#22d3ee);box-shadow:var(--shadow)}
.brand__title{font-weight:700; letter-spacing:.2px}

/* --- Navigation --- */
.nav{display:flex; flex-wrap:wrap; gap:.75rem}
.nav a{padding:.4rem .7rem; border-radius:10px; border:1px solid transparent}
.nav a[aria-current="page"]{background:var(--card); border-color:var(--border); text-decoration:none}

/* Mobile nav toggle button */
.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px; border:1px solid var(--border);
  background:var(--card); color:var(--text); cursor:pointer;
}
@media (min-width: 900px){ .nav-toggle{ display:none } }

/* Collapsible nav on small screens */
.nav{ max-height:none; overflow:visible; transition:max-height .25s ease }
@media (max-width: 899px){
  .nav{
    position:absolute; right:16px; left:16px; top:64px;
    background: var(--card); border:1px solid var(--border); border-radius:12px;
    padding:8px; display:flex; flex-direction:column;
    gap:.25rem; max-height:0; overflow:hidden;
  }
  .nav.is-open{ max-height: 60vh; }
  .nav a{ display:block; padding:.6rem .7rem; border-radius:10px }
}

/* --- Cards / sections --- */
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow: var(--shadow)}
.card--pad{padding:clamp(16px, 2.2vw, 28px)}
.section{display:grid; gap:clamp(16px, 2vw, 24px);}
.grid{
  display:grid;
  gap:clamp(16px, 2vw, 24px);
  grid-template-columns: 1fr;
}
@media (min-width: 900px){ .grid{ grid-template-columns: 2fr 1fr } }

/* --- Typography --- */
h1{font-size:var(--step-3); line-height:1.15; margin:.2em 0 .4em}
h2{font-size:var(--step-2); line-height:1.2; margin:1.25em 0 .5em}
h3{font-size:var(--step-1); margin:1em 0 .5em}
.lead{font-size:var(--step-1); color:var(--muted)}
small, .muted{color:var(--muted); font-size:var(--step--1)}

/* --- Lists --- */
.prose p{margin:.7em 0}
.prose ul{padding-left:1.2em}
.prose li{margin:.4em 0}

/* --- Ad slots (pre-sized to prevent CLS) --- */
.ad-slot{ display:block; width:100%; text-align:center; margin: 16px auto; }
.ad-slot--rect{ inline-size:336px; block-size:280px; }
.ad-slot--banner{ inline-size:320px; block-size:100px; }
.ad-slot--leader{ inline-size:728px; block-size:90px; }
.ad-frame{ display:inline-block; width:100%; max-width:100% }

/* responsive sizing hints */
@supports (container-type:inline-size){
  .article{container-type:inline-size}
  .ad-slot--rect{ inline-size:min(100cqi, 336px) }
  .ad-slot--banner{ inline-size:min(100cqi, 320px) }
  .ad-slot--leader{ inline-size:min(100cqi, 728px) }
}

/* --- Footer --- */
.footer{border-top:1px solid var(--border); margin-top:32px}
.footer .inner{display:flex; gap:16px; flex-wrap:wrap; align-items:center; justify-content:space-between}

/* --- Accessibility helpers --- */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{left:16px; top:16px; width:auto; height:auto; background:var(--card); padding:.5rem .75rem; border-radius:10px; outline:2px solid var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* --- Click-to-load YouTube (light embed) --- */
.yt-lite{
  position:relative; aspect-ratio:16/9; width:100%;
  border-radius:16px; overflow:hidden; background:#111; cursor:pointer;
  background-size:cover; background-position:center;
}
.yt-lite::after{
  content:"▶";
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  font-size:42px; line-height:1;
  background:rgba(0,0,0,.55);
  padding:.45em .6em; border-radius:12px;
  color:#fff;
}

/* --- Reduce motion --- */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
}