/* Top bar: a hairline strip of glass. The links are chips, kept small and
   precise so they read as a mark, not a gimmick. */
.chip-rail{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.82);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
}
.chip-rail-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);min-height:68px}

.brand{display:flex;align-items:center;gap:var(--s3);flex:0 0 auto}
.brand-mark{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:conic-gradient(var(--accent-btn) 0 12.5%,#ffffff 0 25%,var(--accent-btn) 0 37.5%,#ffffff 0 50%,
    var(--accent-btn) 0 62.5%,#ffffff 0 75%,var(--accent-btn) 0 87.5%,#ffffff 0);
  box-shadow:inset 0 0 0 3px #fff,0 0 0 1px var(--line-2);
}
.brand-mark span{width:18px;height:18px;border-radius:50%;background:#fff;color:var(--text);
  display:grid;place-items:center;font-size:10px;line-height:1}
.brand-text{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.03em;
  color:var(--text);line-height:1.2}
.brand-text small{display:block;font-family:var(--body);font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.custom-logo{max-height:34px;width:auto}

.chips{list-style:none;display:flex;align-items:center;gap:var(--s2)}
.chips a{
  display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  background:
    radial-gradient(circle,#ffffff 0 62%,transparent 62%),
    conic-gradient(#dbe3ea 0 12.5%,#c3cfd9 0 25%,#dbe3ea 0 37.5%,#c3cfd9 0 50%,
                   #dbe3ea 0 62.5%,#c3cfd9 0 75%,#dbe3ea 0 87.5%,#c3cfd9 0);
  box-shadow:0 0 0 1px var(--line-2),var(--lift-1);
  color:var(--text-2);font-size:10px;font-weight:600;letter-spacing:-.01em;text-align:center;
  transition:color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.chips a:hover{color:var(--text);transform:translateY(-2px);box-shadow:0 0 0 1px var(--line-accent),var(--lift-2)}
.chips a{color:var(--text-2)}
.chips li.is-current a{color:var(--accent-text);box-shadow:0 0 0 1px var(--line-accent)}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:10px}
.burger span{width:22px;height:2px;border-radius:2px;background:var(--text)}

.panel-overlay{position:fixed;inset:0;background:rgba(16,34,48,.42);opacity:0;pointer-events:none;
  transition:opacity .2s ease;z-index:70;backdrop-filter:blur(3px)}
.panel-overlay.is-open{opacity:1;pointer-events:auto}
.panel{
  position:fixed;top:0;right:0;height:100%;width:min(304px,86vw);z-index:80;
  background:var(--surface);border-left:1px solid var(--line-2);box-shadow:var(--lift-3);
  transform:translateX(102%);transition:transform .22s ease;
  padding:var(--s5) var(--s4);display:flex;flex-direction:column;gap:var(--s5);
}
.panel.is-open{transform:none}
.panel-head{display:flex;align-items:center;justify-content:space-between}
.panel-title{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.03em;color:var(--text)}
.panel-close{background:none;border:0;color:var(--text-3);font-size:26px;line-height:1;cursor:pointer;padding:0 4px}
.panel .menu{list-style:none;display:flex;flex-direction:column;gap:2px}
.panel .menu a{display:flex;align-items:center;gap:var(--s3);padding:14px var(--s3);
  border-radius:var(--r-xs);color:var(--text);font-weight:500;font-size:16px}
.panel .menu a::before{content:"";width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  background:var(--accent-btn);box-shadow:0 0 0 3px var(--accent-dim)}
.panel .menu a:hover{background:var(--surface-2);color:var(--text)}
@media (prefers-reduced-motion:reduce){.panel,.panel-overlay{transition:none}}