/* ============================================================
       === STEELY-NAV v3.1 — Canonical nav CSS. Identical on every page: edit tools/steely-nav/ and run
       === tools/steely-nav/apply.js (tools/check-site.js enforces it). Scoped to nav.steely-nav with its own
       === colors and fonts (--sn-*), so it looks the same whatever the page palette. Fixed 64px bar.
       ============================================================ */
    html{scroll-padding-top:72px}
    nav.steely-nav{
      --sn-border:rgba(100,160,220,0.12);--sn-steel:#4a7fa5;--sn-bright:#6aaedc;--sn-silver:#a8bfcf;
      --sn-pale:#d4e6f1;--sn-white:#eef4f8;--sn-text:#8aa8be;--sn-dim:#657a89;
      --sn-head:'Inter Tight','Rajdhani',system-ui,sans-serif;
      --sn-body:'Inter Tight','Barlow',system-ui,sans-serif;
      --sn-mono:'Share Tech Mono',ui-monospace,monospace;
      position:fixed;top:0;left:0;right:0;z-index:200;box-sizing:border-box;
      display:flex;align-items:center;justify-content:space-between;
      height:64px;padding:0 4%;margin:0;
      background:rgba(8,12,16,0.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
      border-bottom:1px solid var(--sn-border);
      font-family:var(--sn-body);line-height:normal;text-align:left;
    }
    nav.steely-nav *{box-sizing:border-box}
    nav.steely-nav .logo-wrap{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
    nav.steely-nav .logo{
      font-family:var(--sn-head);font-size:1.6rem;font-weight:700;line-height:1;
      letter-spacing:3px;text-transform:uppercase;text-decoration:none;
      color:var(--sn-white);display:flex;align-items:center;gap:0;
    }
    nav.steely-nav .logo span{color:var(--sn-bright)}
    nav.steely-nav .logo-tag{
      font-family:var(--sn-mono);font-size:0.55rem;font-weight:400;
      letter-spacing:2px;text-transform:uppercase;color:var(--sn-text);
      margin-top:0.25rem;opacity:0.75;
    }
    nav.steely-nav #nav-menu{list-style:none;display:flex;gap:0;align-items:center;margin:0;padding:0}
    nav.steely-nav #nav-menu > li{margin:0;padding:0;line-height:normal}
    nav.steely-nav #nav-menu > li > a,
    nav.steely-nav .nav-trigger{
      display:block;height:64px;line-height:64px;padding:0 1.1rem;margin:0;white-space:nowrap;
      color:var(--sn-text);text-decoration:none;background:transparent;
      font-family:var(--sn-head);font-size:0.85rem;font-weight:600;
      letter-spacing:1.5px;text-transform:uppercase;
      border:0;border-bottom:2px solid transparent;border-radius:0;cursor:pointer;
      transition:color 0.2s,border-color 0.2s;
    }
    nav.steely-nav #nav-menu > li > a:hover,
    nav.steely-nav .nav-trigger:hover,
    nav.steely-nav .nav-dropdown.open > .nav-trigger{color:var(--sn-bright);border-bottom-color:var(--sn-steel)}
    nav.steely-nav #nav-menu > li > a.nav-labs{color:var(--sn-silver);border-bottom:1px dashed var(--sn-dim)}
    nav.steely-nav #nav-menu > li > a.nav-labs:hover{color:var(--sn-bright)}
    nav.steely-nav #nav-menu > li > a.nav-cta{
      margin-left:1rem;height:36px;line-height:36px;padding:0 1.4rem;
      background:linear-gradient(135deg,var(--sn-steel),var(--sn-bright));
      color:#fff;border-radius:3px;border-bottom:none;
      font-weight:700;letter-spacing:2px;transition:opacity 0.2s;
    }
    nav.steely-nav #nav-menu > li > a.nav-cta:hover{opacity:0.85;color:#fff}
    nav.steely-nav a:focus-visible,nav.steely-nav button:focus-visible{outline:2px solid var(--sn-bright);outline-offset:2px}

    /* NT8 Indicators drop-down: hover (desktop) or click/tap/keyboard (.open, set by the nav JS). */
    nav.steely-nav .nav-dropdown{position:relative}
    nav.steely-nav .nav-trigger::after{
      content:'';display:inline-block;width:0.38em;height:0.38em;margin-left:0.5rem;
      border-right:1.5px solid var(--sn-steel);border-bottom:1.5px solid var(--sn-steel);
      transform:translateY(-0.22em) rotate(45deg);transition:transform 0.2s;
    }
    nav.steely-nav .nav-dropdown.open > .nav-trigger::after{transform:translateY(0.05em) rotate(225deg)}
    nav.steely-nav .nav-dropdown-menu{
      position:absolute;top:64px;left:0;width:690px;max-width:calc(100vw - 8vw);
      display:grid;grid-template-columns:repeat(3,1fr);gap:0.2rem 0.9rem;
      padding:1rem 1rem 0.6rem;
      background:rgba(13,17,23,0.98);border:1px solid var(--sn-border);border-top:0;
      border-radius:0 0 10px 10px;box-shadow:0 18px 50px rgba(0,0,0,0.45);
      opacity:0;visibility:hidden;transform:translateY(-8px);
      transition:opacity 0.2s,visibility 0.2s,transform 0.2s;
    }
    nav.steely-nav .nav-dropdown.open > .nav-dropdown-menu{opacity:1;visibility:visible;transform:none}
    @media (hover:hover) and (min-width:1121px){
      nav.steely-nav .nav-dropdown:hover > .nav-dropdown-menu{opacity:1;visibility:visible;transform:none}
    }
    nav.steely-nav .nav-drop-group{display:flex;flex-direction:column;min-width:0}
    nav.steely-nav .nav-drop-label{
      font-family:var(--sn-mono);font-size:0.62rem;letter-spacing:2px;text-transform:uppercase;
      color:var(--sn-steel);padding:0.15rem 0.6rem 0.45rem;line-height:1.35;
    }
    nav.steely-nav .nav-drop-label span{display:block;color:var(--sn-dim);letter-spacing:1.5px}
    nav.steely-nav .nav-drop-label.is-sub{margin-top:0.55rem}
    nav.steely-nav .nav-dropdown-menu a{
      display:block;padding:0.5rem 0.6rem;border-radius:6px;text-decoration:none;
      font-family:var(--sn-body);text-transform:none;letter-spacing:0;line-height:1.2;white-space:normal;
    }
    nav.steely-nav .nav-dropdown-menu a:hover{background:rgba(106,174,220,0.08)}
    nav.steely-nav .nav-drop-title{display:block;color:var(--sn-pale);font-family:var(--sn-head);font-size:0.92rem;font-weight:600}
    nav.steely-nav .nav-dropdown-menu a:hover .nav-drop-title{color:var(--sn-white)}
    nav.steely-nav .nav-drop-sub{display:block;color:var(--sn-text);font-size:0.75rem;font-weight:400;margin-top:0.15rem;line-height:1.3}
    nav.steely-nav .nav-drop-foot{
      grid-column:1/-1;display:flex;flex-wrap:wrap;gap:0.2rem 1rem;
      margin-top:0.5rem;padding-top:0.5rem;border-top:1px solid var(--sn-border);
    }
    nav.steely-nav .nav-drop-foot a{
      color:var(--sn-bright);font-family:var(--sn-mono);font-size:0.72rem;
      letter-spacing:1.5px;text-transform:uppercase;padding:0.4rem 0.6rem;
    }

    nav.steely-nav .hamburger{
      display:none;background:none;border:none;cursor:pointer;
      width:40px;height:40px;position:relative;z-index:210;margin:0 -0.25rem 0 0;padding:0;
      flex-direction:column;align-items:center;justify-content:center;gap:5px;
    }
    nav.steely-nav .hamburger span{
      display:block;width:22px;height:2px;background:var(--sn-pale);
      border-radius:1px;transition:transform 0.3s,opacity 0.3s;
    }
    nav.steely-nav .hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    nav.steely-nav .hamburger.active span:nth-child(2){opacity:0}
    nav.steely-nav .hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

    /* 1121-1279px: tighter link padding so labels never wrap onto the content below the bar. */
    @media (min-width:1121px) and (max-width:1279px){
      nav.steely-nav #nav-menu > li > a,
      nav.steely-nav .nav-trigger{padding-left:0.6rem;padding-right:0.6rem;letter-spacing:1px}
    }

    /* <=1120px: hamburger panel; the drop-down becomes a tap-to-open list inside it. */
    @media (max-width:1120px){
      nav.steely-nav .hamburger{display:flex}
      nav.steely-nav #nav-menu{
        display:none;position:fixed;top:64px;left:0;right:0;
        flex-direction:column;align-items:stretch;gap:0;padding:0.6rem 4% 1rem;
        max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;
        background:#080c10;border-bottom:1px solid var(--sn-border);
      }
      nav.steely-nav #nav-menu.open{display:flex}
      nav.steely-nav #nav-menu > li{width:100%}
      nav.steely-nav #nav-menu > li > a,
      nav.steely-nav .nav-trigger{
        display:flex;align-items:center;width:100%;min-height:46px;height:auto;line-height:1.4;
        padding:0.75rem 1rem;font-size:0.9375rem;letter-spacing:0.05em;border-bottom:none;text-align:left;
      }
      nav.steely-nav .nav-trigger{justify-content:space-between}
      nav.steely-nav #nav-menu > li > a.nav-labs{border-bottom:none}
      nav.steely-nav #nav-menu > li > a.nav-cta{justify-content:center;height:auto;line-height:1.4;margin:0.5rem 0 0;padding:0.75rem 1rem}
      nav.steely-nav .nav-dropdown-menu{
        position:static;width:auto;max-width:none;display:none;grid-template-columns:1fr;gap:0.1rem;
        margin:0 0 0.5rem;padding:0.5rem 0.4rem 0.3rem;border:0;border-radius:6px;
        background:rgba(13,17,23,0.65);box-shadow:none;opacity:1;visibility:visible;transform:none;transition:none;
      }
      nav.steely-nav .nav-dropdown.open > .nav-dropdown-menu{display:grid}
      nav.steely-nav .nav-drop-label{padding-top:0.6rem}
    }
      /* Eight top-level items (About 2026-10-16, Blog 2026-10-19): tighter padding from 1121 to 1420px keeps the bar on one line. */
      @media (min-width:1121px) and (max-width:1420px){
        nav.steely-nav #nav-menu > li > a,nav.steely-nav .nav-trigger{padding-left:.48rem;padding-right:.48rem;letter-spacing:.6px}
        nav.steely-nav #nav-menu > li > a.nav-cta{margin-left:.5rem}
      }
      /* 1121-1199px: smaller labels too (measured: eight items overflow by ~57px at 1121px with a scrollbar). */
      @media (min-width:1121px) and (max-width:1199px){
        nav.steely-nav #nav-menu > li > a,nav.steely-nav .nav-trigger{padding-left:.4rem;padding-right:.4rem;font-size:.8rem;letter-spacing:.4px}
      }
    /* === /STEELY-NAV v3.1 CSS === */