/* TopNOTE Learning brand application v0.5 — Preview only.
   Uses the founder-approved onyx + metallic champagne TopNOTE artwork.
*/
.topnote-logo{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  object-position:center;
  border-radius:18px;
  background:#101419;
}

/* The approved source artwork is square. These viewports crop only the surrounding
   onyx field so the wordmark remains prominent without altering the logo itself. */
.topnote-logo--access{
  width:min(100%,460px);
  height:150px;
  margin:4px 0 14px;
  object-fit:cover;
  object-position:center;
  border:1px solid rgba(219,177,121,.16);
  box-shadow:0 14px 36px rgba(15,18,22,.12);
}
.topnote-logo--sidebar{
  width:188px;
  height:74px;
  object-fit:cover;
  object-position:center;
  border-radius:12px;
  border:1px solid rgba(219,177,121,.12);
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}

.topnote-brand-kicker{
  font-size:10px;
  letter-spacing:.19em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--jade-deep);
}
.sidebar .topnote-brand-kicker{color:#a9c8bd}
.sidebar-brand{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.sidebar-brand:after{margin-top:10px}
.access-brand-lockup{margin-bottom:8px}
.access-brand-lockup .topnote-brand-kicker{margin-bottom:8px}

/* Keep the brand compact enough that navigation never competes with study actions. */
.nav-stack{min-height:0}
.sidebar{overflow:hidden}
.sidebar .nav-stack{
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.16) transparent;
}
.sidebar .nav-stack::-webkit-scrollbar{width:5px}
.sidebar .nav-stack::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:99px}

@media(max-width:760px){
  .topnote-logo--access{width:min(100%,360px);height:124px;border-radius:15px}
  .topnote-logo--sidebar{display:none}
}