.site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--color-surface);
      border-bottom: 1px solid var(--color-border);
      box-shadow: 0 1px 4px rgba(0,0,0,.05);
    }

    .site-header__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px;
      gap: var(--space-lg);
    }

    /* Logo */
    .site-header__logo {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      flex-shrink: 0;
    }
    .site-header__logo:hover { text-decoration: none; }
    .site-header__logo-mark { display: block; flex-shrink: 0; height: 94px; width: auto; }
    .site-header__logo-text { display: flex; flex-direction: column; line-height: 1.15; }
    .site-header__logo-name {
      font-size: 15px; font-weight: 800;
      color: var(--color-text-primary); letter-spacing: -.02em;
    }
    .site-header__logo-tagline {
      font-size: 10px; font-weight: 500;
      color: var(--color-text-muted); letter-spacing: .04em; text-transform: uppercase;
    }

    /* Main nav — bonus guides */
    .site-header__nav { display: flex; align-items: center; flex: 1; justify-content: center; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
    .site-header__nav::-webkit-scrollbar { display: none; }
    .site-header__nav-link { display: inline-flex; align-items: center; height: 64px; padding-inline: 10px; font-size: 13px; font-weight: 600; color: var(--color-text-secondary); text-decoration: none; white-space: nowrap; position: relative; transition: color .15s; }
    .site-header__nav-link::after { content: ''; position: absolute; bottom: 12px; left: 10px; right: 10px; height: 2px; background: transparent; border-radius: 2px; transition: background .15s; }
    .site-header__nav-link:hover { color: var(--color-text-primary); text-decoration: none; }
    .site-header__nav-link:hover::after { background: var(--color-border); }
    .site-header__nav-link.is-current { color: var(--color-rank); }
    .site-header__nav-link.is-current::after { background: var(--color-rank); }
    @media (max-width: 860px) { .site-header__nav { display: none; } }

    /* --- Burger button --- */
    .mob-menu-btn {
      display: none;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      background: none;
      cursor: pointer;
      color: var(--color-text-secondary);
      flex-shrink: 0;
      padding: 0;
    }
    .mob-menu-btn:hover { border-color: var(--color-rank); color: var(--color-rank); }
    @media (max-width: 860px) { .mob-menu-btn { display: flex; } }

    /* --- Mobile drawer --- */
    .mob-menu {
      position: fixed;
      inset: 0;
      z-index: 200;
      visibility: hidden;
      pointer-events: none;
    }
    .mob-menu.is-open { visibility: visible; pointer-events: auto; }
    .mob-menu__backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,.45);
      opacity: 0;
      transition: opacity .25s;
    }
    .mob-menu.is-open .mob-menu__backdrop { opacity: 1; }
    .mob-menu__panel {
      position: absolute;
      top: 0;
      right: 0;
      width: min(280px, 85vw);
      height: 100%;
      background: var(--color-surface);
      display: flex;
      flex-direction: column;
      padding: 20px 0 24px;
      transform: translateX(100%);
      transition: transform .25s cubic-bezier(.4,0,.2,1);
      box-shadow: -4px 0 24px rgba(0,0,0,.12);
    }
    .mob-menu.is-open .mob-menu__panel { transform: translateX(0); }
    .mob-menu__close {
      align-self: flex-end;
      margin: 0 16px 12px;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      background: none;
      cursor: pointer;
      color: var(--color-text-secondary);
      flex-shrink: 0;
    }
    .mob-menu__close:hover { border-color: var(--color-rank); color: var(--color-rank); }
    .mob-menu__nav { display: flex; flex-direction: column; flex: 1; padding: 0 16px; gap: 4px; }
    .mob-menu__link {
      display: block;
      padding: 12px 14px;
      font-size: 15px;
      font-weight: 600;
      color: var(--color-text-secondary);
      text-decoration: none;
      border-radius: var(--radius-sm);
      transition: background .15s, color .15s;
    }
    .mob-menu__link:hover { background: var(--color-bg); color: var(--color-text-primary); text-decoration: none; }
    .mob-menu__divider { height: 1px; background: var(--color-border); margin: 8px 0; }
    .mob-menu__login {
      display: block;
      padding: 13px 14px;
      font-size: 15px;
      font-weight: 700;
      color: #f9edd8;
      background: var(--gradient-rank);
      border: none;
      border-radius: var(--radius-sm);
      text-align: center;
      text-decoration: none;
      cursor: pointer;
      transition: opacity .15s;
    }
    .mob-menu__login:hover { opacity: .9; text-decoration: none; }
    .mob-menu__link.is-current {
      background: var(--color-featured-bg);
      color: var(--color-rank);
    }
    .mob-menu__actions {
      padding: 0 16px 8px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .mob-menu__btn {
      display: block;
      padding: 13px 14px;
      font-size: 15px;
      font-weight: 700;
      border-radius: var(--radius-sm);
      text-align: center;
      text-decoration: none;
      cursor: pointer;
      transition: opacity .15s, background .15s, color .15s, border-color .15s;
    }
    .mob-menu__btn--join {
      color: #f9edd8;
      background: var(--gradient-rank);
    }
    .mob-menu__btn--join:hover { opacity: .9; text-decoration: none; }
    .mob-menu__btn--login {
      color: var(--color-text-secondary);
      background: none;
      border: 1px solid var(--color-border);
    }
    .mob-menu__btn--login:hover { border-color: var(--color-rank); color: var(--color-rank); text-decoration: none; }


    /* Actions */
    .site-header__actions {
      display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0;
    }
    .site-header__btn {
      display: inline-flex; align-items: center; justify-content: center;
      height: 34px; padding-inline: var(--space-md); border-radius: var(--radius-md);
      font-size: var(--font-size-sm); font-weight: 600; cursor: pointer;
      white-space: nowrap; text-decoration: none;
      transition: background .18s, color .18s, border-color .18s;
    }
    .site-header__btn--login {
      background: none; border: 1px solid var(--color-border); color: var(--color-text-secondary);
    }
    .site-header__btn--login:hover { border-color: var(--color-rank); color: var(--color-rank); text-decoration: none; }
    .site-header__btn--join {
      background: var(--color-rank); border: 1px solid transparent; color: #f9edd8;
    }
    .site-header__btn--join:hover { background: var(--color-cta-hover); text-decoration: none; }

    @media (max-width: 480px) {
      .site-header__logo-tagline { display: none; }
      .site-header__btn--login   { display: none; }
      .site-header__btn--join    { display: none; }
      .mob-menu-btn              { margin-right: -12px; }
      .site-header__logo         { margin-inline-start: -24px; }
      .site-header__inner        { height: 65px; }
    }