:root{
    --bg:            #0a0906;
    --bg-2:          #121009;
    --panel:         #17140d;
    --panel-line:    #2a2417;
    --gold-deep:     #8a6a1f;
    --gold:          #caa03d;
    --gold-bright:   #f0c464;
    --text:          #ece5d3;
    --text-muted:    #9c9482;
    --smoke:         #4a453a;
    --shadow:        rgba(0,0,0,.55);
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:
      radial-gradient(ellipse 900px 500px at 85% -10%, rgba(202,160,61,.10), transparent 60%),
      radial-gradient(ellipse 700px 500px at 10% 10%, rgba(202,160,61,.05), transparent 55%),
      var(--bg);
    color:var(--text);
    font-family:'Inter', sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  a{ color:inherit; text-decoration:none; }
  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-size:.72rem;
    color:var(--gold);
  }
  h1,h2,h3{
    font-family:'Oswald', sans-serif;
    text-transform:uppercase;
    margin:0;
    letter-spacing:.01em;
  }

  /* ---------- Header ---------- */
  header{
    position:sticky; top:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:14px clamp(20px,5vw,56px);
    background:rgba(10,9,6,.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--panel-line);
  }
  .brand{ display:flex; align-items:center; gap:12px; }
  .brand-mark{
    font-family:'Oswald',sans-serif; font-weight:700; font-size:1.15rem;
    letter-spacing:.03em; text-transform:uppercase;
    color:var(--text);
  }
  .brand-mark span{ color:var(--gold); }

  nav{ display:flex; align-items:center; gap:clamp(18px,3vw,34px); }
  .nav-link{
    font-family:'JetBrains Mono', monospace;
    font-size:.82rem; letter-spacing:.04em;
    color:var(--text-muted);
    text-transform:uppercase;
    transition:color .2s ease;
    white-space:nowrap;
    background:none; border:none; padding:0; cursor:pointer;
  }
  .nav-link:hover, .nav-link.active{ color:var(--gold-bright); }

  .dropdown{ position:relative; }
  .dropdown > .nav-link{ display:flex; align-items:center; gap:6px; cursor:pointer; background:none; border:none; padding:0; font-family:'JetBrains Mono', monospace; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; }
  .dropdown .caret{
    display:inline-block; width:0; height:0;
    border-left:4px solid transparent; border-right:4px solid transparent;
    border-top:5px solid currentColor;
    transition:transform .2s ease;
  }
  .dropdown:hover .caret, .dropdown:focus-within .caret{ transform:rotate(180deg); }

  .dropdown-menu{
    position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-6px);
    min-width:200px;
    width:max-content;
    max-width:240px;
    background:var(--panel);
    border:1px solid var(--panel-line);
    border-radius:2px;
    box-shadow:0 18px 40px var(--shadow);
    padding:6px;
    opacity:0; visibility:hidden;
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .dropdown-menu::before{
    content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%) rotate(45deg);
    width:11px; height:11px; background:var(--panel); border-left:1px solid var(--panel-line); border-top:1px solid var(--panel-line);
  }
  .dropdown:hover .dropdown-menu,
  .dropdown:focus-within .dropdown-menu{
    opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
  }
  .dropdown-menu a{
    display:flex; align-items:center; gap:10px;
    padding:11px 14px;
    font-family:'JetBrains Mono', monospace;
    font-size:.8rem; letter-spacing:.03em;
    color:var(--text);
    border-radius:1px;
    transition:background .15s ease, color .15s ease, padding-left .15s ease;
  }
  .dropdown-menu a::before{
    content:"›"; color:var(--gold); font-family:'Oswald',sans-serif; font-size:1rem;
  }
  .dropdown-menu a:hover{ background:rgba(202,160,61,.08); color:var(--gold-bright); padding-left:18px; }
  .dropdown-menu a.active{ color:var(--gold-bright); }
  .dropdown-menu a.active::before{ content:"●"; font-size:.55rem; }

  .header-logo img{
    height:46px; width:auto; display:block;
    filter:drop-shadow(0 0 14px rgba(202,160,61,.25));
  }

  /* ---------- Mobile hamburger ---------- */
  .hamburger{
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:stretch;
    gap:5px;
    width:32px; height:32px;
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
    z-index:110;
  }
  .hamburger span{
    display:block;
    width:100%; height:2px;
    background:var(--gold);
    border-radius:2px;
    transition:transform .25s ease, opacity .2s ease;
  }
  .hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .hamburger.open span:nth-child(2){ opacity:0; }
  .hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  body.nav-open{ overflow:hidden; }

  @media (max-width:860px){
    .brand{ display:none; }
    .hamburger{ display:flex; }

    nav{
      position:fixed;
      top:0; left:0;
      width:100%; height:100vh;
      margin:0;
      background:rgba(10,9,6,.98);
      backdrop-filter:blur(10px);
      flex-direction:column;
      align-items:stretch;
      gap:0;
      padding:88px 28px 40px;
      transform:translateX(-100%);
      transition:transform .3s ease;
      overflow-y:auto;
      z-index:105;
    }
    nav.open{ transform:translateX(0); }

    nav .nav-link{
      width:100%;
      padding:16px 0;
      border-bottom:1px solid var(--panel-line);
      font-size:.95rem;
      justify-content:space-between;
    }
    nav > a.nav-link:last-child{ border-bottom:none; }

    .dropdown{ width:100%; }
    .dropdown > .nav-link{
      width:100%; padding:16px 0;
      border-bottom:1px solid var(--panel-line);
      justify-content:space-between;
    }
    .dropdown .caret{ transition:transform .2s ease; }
    .dropdown.open .caret{ transform:rotate(180deg); }

    .dropdown-menu{
      position:static;
      transform:none;
      opacity:1; visibility:visible;
      display:none;
      box-shadow:none;
      border:none;
      background:transparent;
      padding:0;
      margin:0 0 6px;
      min-width:0; width:100%; max-width:none;
    }
    .dropdown-menu::before{ display:none; }
    .dropdown.open .dropdown-menu{ display:block; }

    /* The desktop hover/focus rule (higher specificity) otherwise re-applies
       translateX(-50%) here and shoves the full-width mobile menu off-screen. */
    .dropdown:hover .dropdown-menu,
    .dropdown:focus-within .dropdown-menu{
      position:static;
      transform:none;
    }
    .dropdown-menu a{
      padding:13px 0 13px 14px;
      border-bottom:1px solid var(--panel-line);
    }
    .dropdown-menu a:hover{ padding-left:20px; }
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    padding:clamp(60px,9vw,96px) clamp(20px,6vw,56px) clamp(40px,6vw,60px);
    max-width:1180px; margin:0 auto;
    overflow:hidden;
  }
  .hero-inner{ position:relative; z-index:2; max-width:760px; }
  .hero h1{
    font-size:clamp(2.4rem, 6vw, 4.2rem);
    line-height:.98;
    margin:16px 0 20px;
    color:var(--text);
  }
  .hero h1 em{
    font-style:normal; color:var(--gold);
    text-shadow:0 0 30px rgba(202,160,61,.35);
  }
  .hero p.lede{
    font-size:1.05rem; line-height:1.65; color:var(--text-muted);
    max-width:600px; margin:0;
  }

  .smoke-wrap{
    position:absolute; right:clamp(-40px,2vw,30px); top:0; bottom:0;
    width:min(40vw, 420px);
    pointer-events:none;
    z-index:1;
    opacity:.7;
  }
  .smoke-wrap svg{ width:100%; height:100%; }
  .wisp{
    stroke:var(--gold);
    stroke-width:1.4;
    fill:none;
    stroke-linecap:round;
    opacity:.3;
    filter:blur(.4px);
    stroke-dasharray:900;
    stroke-dashoffset:900;
    animation:drift 9s ease-in-out infinite;
  }
  .wisp:nth-child(2){ animation-delay:1.4s; opacity:.2; stroke:var(--gold-bright); }
  .wisp:nth-child(3){ animation-delay:2.8s; opacity:.14; }
  @keyframes drift{
    0%{ stroke-dashoffset:900; opacity:0; transform:translateY(0); }
    12%{ opacity:.3; }
    70%{ opacity:.1; }
    100%{ stroke-dashoffset:0; opacity:0; transform:translateY(-26px); }
  }
  @media (prefers-reduced-motion: reduce){ .wisp{ animation:none; opacity:.15; stroke-dashoffset:0; } }

  /* ---------- Section shared ---------- */
  section{ padding:clamp(20px,4vw,40px) clamp(20px,6vw,56px) clamp(60px,8vw,90px); max-width:1180px; margin:0 auto; }
  .section-head{ margin-bottom:34px; display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; }
  .section-head h2{ font-size:clamp(1.4rem,2.6vw,1.8rem); }
  .count-tag{
    font-family:'JetBrains Mono', monospace; font-size:.78rem; color:var(--text-muted);
    letter-spacing:.03em;
  }
  .count-tag strong{ color:var(--gold); }

  .divider{
    height:50px; max-width:1180px; margin:0 auto; padding:0 clamp(20px,6vw,56px);
    opacity:.5;
  }
  .divider svg{ width:100%; height:100%; display:block; }
  .divider path{ stroke:var(--panel-line); stroke-width:1; fill:none; }
  .divider path.hl{ stroke:var(--gold-deep); stroke-width:1.2; }

  /* ---------- Video grid ---------- */
  .video-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
  }
  @media (max-width:920px){ .video-grid{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:600px){ .video-grid{ grid-template-columns:1fr; } }

  .video-card{
    display:block;
    background:linear-gradient(180deg, var(--panel), var(--bg-2));
    border:1px solid var(--panel-line);
    border-radius:3px;
    overflow:hidden;
    transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .video-card:hover{
    border-color:var(--gold-deep);
    transform:translateY(-4px);
    box-shadow:0 16px 34px rgba(0,0,0,.4);
  }
  .thumb-wrap{
    position:relative;
    aspect-ratio:16/9;
    background:#000;
    overflow:hidden;
  }
  .thumb-wrap img{
    width:100%; height:100%; object-fit:cover; display:block;
    filter:saturate(.92) contrast(1.02);
    transition:transform .35s ease, filter .35s ease;
  }
  .video-card:hover .thumb-wrap img{ transform:scale(1.05); filter:saturate(1.05) contrast(1.04); }
  .thumb-wrap::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 55%, rgba(10,9,6,.75) 100%);
  }
  .play-badge{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:52px; height:52px; border-radius:50%;
    background:rgba(10,9,6,.55);
    border:1px solid rgba(202,160,61,.55);
    display:flex; align-items:center; justify-content:center;
    z-index:2;
    transition:background .2s ease, transform .2s ease;
  }
  .video-card:hover .play-badge{ background:var(--gold); transform:translate(-50%,-50%) scale(1.06); }
  .play-badge svg{ width:18px; height:18px; margin-left:2px; fill:var(--gold-bright); transition:fill .2s ease; }
  .video-card:hover .play-badge svg{ fill:#100c04; }

  .video-meta{ padding:18px 18px 20px; }
  .video-meta .tag{
    font-family:'JetBrains Mono', monospace; font-size:.68rem; letter-spacing:.12em;
    color:var(--gold); text-transform:uppercase;
  }
  .video-meta h3{
    font-size:1.05rem; text-transform:none; line-height:1.35;
    margin:10px 0 0; color:var(--text); letter-spacing:0;
    font-weight:500;
  }
  .watch-row{
    display:flex; align-items:center; gap:8px; margin-top:16px;
    font-family:'JetBrains Mono', monospace; font-size:.75rem; letter-spacing:.04em;
    color:var(--text-muted); text-transform:uppercase;
    transition:color .2s ease, gap .2s ease;
  }
  .video-card:hover .watch-row{ color:var(--gold-bright); gap:12px; }
  .watch-row svg{ width:12px; height:12px; }

  /* ---------- CTA strip ---------- */
  .cta-strip{
    display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
    margin-top:50px;
    padding:30px 32px;
    border:1px solid var(--panel-line);
    border-radius:3px;
    background:linear-gradient(135deg, rgba(202,160,61,.07), transparent 60%);
  }
  .cta-strip h3{ font-size:1.3rem; margin:0 0 6px; }
  .cta-strip p{ margin:0; color:var(--text-muted); font-size:.92rem; }
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:13px 24px;
    font-family:'JetBrains Mono', monospace;
    font-size:.82rem; letter-spacing:.05em; text-transform:uppercase;
    border-radius:2px;
    transition:transform .18s ease, box-shadow .18s ease;
    border:1px solid transparent;
    white-space:nowrap;
  }
  .btn-gold{
    background:linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
    color:#100c04; font-weight:600;
    box-shadow:0 10px 26px rgba(202,160,61,.22);
  }
  .btn-gold:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(202,160,61,.35); }
  .btn svg{ width:16px; height:16px; }

  /* ---------- Footer ---------- */
  footer{
    border-top:1px solid var(--panel-line);
    padding:34px clamp(20px,6vw,56px) 44px;
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
    max-width:1180px; margin:0 auto;
  }
  footer .brand-mark{ font-size:.95rem; }
  .footer-links{ display:flex; gap:24px; flex-wrap:wrap; }
  .footer-links a{
    font-family:'JetBrains Mono', monospace; font-size:.78rem; color:var(--text-muted);
    letter-spacing:.03em;
  }
  .footer-links a:hover{ color:var(--gold-bright); }
  .footer-note{
    width:100%; margin-top:18px; font-family:'JetBrains Mono', monospace;
    font-size:.72rem; color:var(--smoke); letter-spacing:.03em;
  }


  /* =====================================================================
     HOMEPAGE-ONLY OVERRIDES (scoped to <body class="page-home">)
     ===================================================================== */
  body.page-home .hero{
    padding:clamp(70px,12vw,130px) clamp(20px,6vw,56px) clamp(60px,8vw,90px);
  }
  body.page-home .hero-inner{ max-width:720px; }
  body.page-home .hero h1{
    font-size:clamp(2.6rem, 7vw, 5rem);
    margin:16px 0 22px;
  }
  body.page-home .hero p.lede{
    font-size:1.08rem; max-width:560px; margin:0 0 34px;
  }
  body.page-home .smoke-wrap{
    right:clamp(0px,4vw,60px); width:min(46vw, 520px); opacity:.9;
  }
  body.page-home .wisp{ opacity:.35; }
  body.page-home .wisp:nth-child(2){ opacity:.22; }
  body.page-home .wisp:nth-child(3){ opacity:.16; }

  body.page-home section{ padding:clamp(50px,8vw,80px) clamp(20px,6vw,56px); }
  body.page-home .section-head{
    display:block; margin-bottom:38px; max-width:640px;
  }
  body.page-home .section-head h2{ font-size:clamp(1.7rem,3.4vw,2.3rem); margin-top:10px; }
  body.page-home .section-head p{ color:var(--text-muted); margin-top:14px; line-height:1.6; }

  /* Hero CTA row (homepage only) */
  .cta-row{ display:flex; flex-wrap:wrap; gap:16px; }
  .btn-ghost{
    background:transparent;
    color:var(--gold-bright);
    border-color:var(--panel-line);
  }
  .btn-ghost:hover{ border-color:var(--gold); background:rgba(202,160,61,.06); transform:translateY(-2px); }

  /* Feature cards (homepage only) */
  .card-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:22px; }
  @media (max-width:760px){ .card-grid{ grid-template-columns:1fr; } }
  .card{
    background:linear-gradient(180deg, var(--panel), var(--bg-2));
    border:1px solid var(--panel-line);
    border-radius:3px;
    padding:32px;
    position:relative;
    overflow:hidden;
    transition:border-color .2s ease, transform .2s ease;
  }
  .card:hover{ border-color:var(--gold-deep); transform:translateY(-3px); }
  .card::after{
    content:""; position:absolute; inset:auto -40% -60% auto;
    width:220px; height:220px; border-radius:50%;
    background:radial-gradient(circle, rgba(202,160,61,.14), transparent 70%);
    pointer-events:none;
  }
  .card .tag{
    font-family:'JetBrains Mono', monospace; font-size:.72rem; letter-spacing:.14em;
    color:var(--gold); text-transform:uppercase;
  }
  .card h3{ font-size:1.5rem; margin:14px 0 12px; }
  .card p{ color:var(--text-muted); line-height:1.6; margin:0 0 22px; font-size:.95rem; }
  .card .btn{ padding:11px 20px; font-size:.78rem; }
  .yt-icon{ color:#ff2f2f; }

  /* Topic chips (homepage only) */
  .topics{ display:flex; flex-wrap:wrap; gap:12px; }
  .chip{
    font-family:'JetBrains Mono', monospace;
    font-size:.78rem; letter-spacing:.03em;
    padding:9px 16px;
    border:1px solid var(--panel-line);
    border-radius:20px;
    color:var(--text-muted);
    transition:all .18s ease;
  }
  .chip:hover{ color:var(--gold-bright); border-color:var(--gold-deep); background:rgba(202,160,61,.06); }