/* Telar Indigo - header / navigation (kebab-compound sub-elements) */
.topbar{
  position:sticky;top:0;z-index:50;
  background:var(--bg-darkest);
  border-bottom:1px solid var(--color-line);
}
.topbar-row{
  display:flex;align-items:center;justify-content:space-between;
  min-height:68px;gap:var(--space-3);
}
.brand-mark{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-display);font-weight:600;font-size:1.22rem;
  color:var(--color-paper);text-decoration:none;letter-spacing:.01em;
}
.brand-mark:hover{color:var(--color-paper);}
.brand-mark img{width:34px;height:34px;}
.brand-mark span small{display:block;font-family:var(--ff-body);font-weight:500;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--color-accent);}

.topbar-nav{display:flex;align-items:center;gap:var(--space-4);}
.topbar-links{display:flex;gap:var(--space-3);list-style:none;margin:0;padding:0;}
.topbar-links a{color:var(--color-paper-dim);text-decoration:none;font-size:.97rem;font-weight:500;padding:6px 2px;border-bottom:2px solid transparent;transition:color .18s var(--ease),border-color .18s var(--ease);}
.topbar-links a:hover,.topbar-links a[aria-current="page"]{color:var(--color-paper);border-color:var(--color-accent);}

.menu-toggle{
  display:none;width:48px;height:48px;border:1px solid var(--color-line);
  background:var(--color-ink);border-radius:var(--radius);cursor:pointer;
  align-items:center;justify-content:center;
}
.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{
  content:"";display:block;width:20px;height:2px;background:var(--color-paper);position:relative;transition:transform .2s var(--ease),opacity .2s var(--ease);
}
.menu-toggle span::before{position:absolute;top:-6px;left:0;}
.menu-toggle span::after{position:absolute;top:6px;left:0;}
.menu-toggle[aria-expanded="true"] span{background:transparent;}
.menu-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg);}

.drawer-panel{
  position:fixed;inset:0;z-index:260;
  background:var(--bg-darkest);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--gutter);
  transform:translateX(100%);transition:transform .26s var(--ease);
  visibility:hidden;
}
.drawer-panel.open{transform:none;visibility:visible;}
.drawer-panel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2);}
.drawer-panel a{color:var(--color-paper);text-decoration:none;font-family:var(--ff-display);font-size:1.7rem;}
.drawer-panel a:hover{color:var(--color-accent);}
.drawer-close{position:absolute;top:18px;right:18px;width:48px;height:48px;background:var(--color-ink);border:1px solid var(--color-line);border-radius:var(--radius);color:var(--color-paper);font-size:1.4rem;cursor:pointer;}

@media (max-width:840px){
  .topbar-links{display:none;}
  .topbar-nav .btn{display:none;}
  .menu-toggle{display:inline-flex;}
}