/* A compact 3D cosmic plaque matching the member-page logo. */
.public-cosmic-brand {
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 14px;
    border:1px solid #88dfff99;
    border-radius:14px;
    background:radial-gradient(ellipse at 15% 50%,#569aff59,transparent 65%),linear-gradient(120deg,#101c36,#211138);
    box-shadow:0 0 18px #4ac3ff4d,0 0 40px #9d5aff33,inset 0 1px #dbedff40;
    text-decoration:none;
}

/* The violet sphere is shaded and framed by its own luminous orbital ring. */
.public-cosmic-brand .brand-icon {
    position:relative;
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:50%;
    background:radial-gradient(circle at 28% 22%,#fff,#bc91ff 20%,#7043bc 50%,#191d50 85%);
    box-shadow:inset -3px -4px 6px #060a2399,0 0 15px #9a7aff80;
    color:#fff;
    font-size:18px;
    font-weight:800;
}

.public-cosmic-brand .brand-icon::after {
    content:'';
    position:absolute;
    inset:-5px -12px;
    border:1px solid #9deaff;
    border-bottom-color:#b986ff;
    border-radius:50%;
    transform:rotate(-30deg) scaleY(.55);
    box-shadow:0 0 10px #6bd9ffa6;
}

/* Keep the wordmark and tagline vertically aligned as in the member header. */
.public-brand-wordmark { display:flex; flex-direction:column; gap:5px; }

.public-cosmic-brand .brand-text {
    font-size:16px;
    font-weight:800;
    letter-spacing:.12em;
    background:linear-gradient(100deg,#fff,#58e8ff 25%,#d290ff 65%,#ff9ee5);
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 0 7px #637bdd);
}

.public-brand-tagline { font-size:7px; letter-spacing:.3em; color:#afc9ed; }

@media(prefers-reduced-motion:no-preference) {
    .public-cosmic-brand .brand-icon::after { animation:public-logo-ring 4s ease-in-out infinite; }
}

@keyframes public-logo-ring {
    0%,100% { transform:rotate(-30deg) scaleY(.55); }
    50% { transform:rotate(30deg) scaleY(.8); }
}

@media(max-width:600px) {
    .public-cosmic-brand { padding:8px 10px; gap:9px; }
    .public-cosmic-brand .brand-text { font-size:12px; }
    .public-brand-tagline { font-size:6px; }
}
/* Shared specificity overrides member/header defaults without changing navigation. */
.member-area .member-header .public-cosmic-brand,
.public-cosmic-brand {
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:10px 14px;
    border:1px solid #88dfff99;
    border-radius:14px;
    background:radial-gradient(ellipse at 15% 50%,#569aff59,transparent 65%),linear-gradient(120deg,#101c36,#211138);
    box-shadow:0 0 18px #4ac3ff4d,0 0 40px #9d5aff33,inset 0 1px #dbedff40;
    text-decoration:none;
    flex-shrink:0;
}

.member-area .member-header .public-cosmic-brand .brand-icon,
.public-cosmic-brand .brand-icon {
    position:relative;
    width:36px;
    height:36px;
    font:800 18px 'Trebuchet MS',Arial,sans-serif;
}

.member-area .member-header .public-cosmic-brand .brand-text,
.public-cosmic-brand .brand-text {
    font:800 16px 'Trebuchet MS',Arial,sans-serif;
    letter-spacing:.12em;
    background:linear-gradient(100deg,#fff,#58e8ff 25%,#d290ff 65%,#ff9ee5);
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 0 7px #637bdd);
}

/* Keep standalone About/Projects branding outside the content fetched by panels. */
.standalone-logo-header { padding:24px; text-align:center; }

.public-cosmic-brand:focus-visible { outline:2px solid #8ae4ff; outline-offset:5px; }

@media(max-width:600px) {
    .member-area .member-header .public-cosmic-brand,
    .public-cosmic-brand { padding:8px 10px; gap:9px; }
    .member-area .member-header .public-cosmic-brand .brand-text,
    .public-cosmic-brand .brand-text { font-size:12px; }
}
/* Account motion preferences also pause the shared logo's decorative ring. */
.member-area[data-reduce-motion='true'] .public-cosmic-brand .brand-icon::after {
    animation:none;
}
/* The homepage groups its logo and Projects control on the left. */
.top-header .public-header-left {
    display:flex;
    align-items:center;
    gap:14px;
    flex-shrink:0;
}

@media(max-width:600px) {
    .top-header .public-header-left { gap:8px; }
    .public-header-left .top-nav-button { padding:9px 10px; font-size:12px; }
}