/*
Retreat-OS shared brand lockup — the single source of truth for how the
Retreat-OS logo and wordmark appear on every public page.
Every public HTML page must:
1. load this file in :
2. use this exact lockup markup (size modifier optional):
Retreat-OS
Sizes: default 54px · .ros-brand--md 44px · .ros-brand--sm 24px
Backgrounds: add .ros-brand--on-light on light pages (drops the dark-theme glow).
Do not restyle .ros-brand* from page CSS or reference any other logo file;
`npm run check` enforces this.
*/
.ros-brand {
--ros-brand-size: 54px;
display: inline-flex;
align-items: center;
gap: calc(var(--ros-brand-size) * .185);
min-width: 0;
color: inherit;
text-decoration: none;
font-size: calc(var(--ros-brand-size) * .4);
font-weight: 800;
letter-spacing: -.02em;
line-height: 1;
white-space: nowrap;
}
.ros-brand--md { --ros-brand-size: 44px; }
.ros-brand--sm { --ros-brand-size: 24px; }
/* The PNG carries ~20% transparent padding; trim it so the mark aligns optically. */
.ros-brand-logo {
display: block;
flex: 0 0 auto;
width: var(--ros-brand-size);
height: var(--ros-brand-size);
margin-left: calc(var(--ros-brand-size) * -.185);
margin-right: calc(var(--ros-brand-size) * -.11);
filter: drop-shadow(0 0 calc(var(--ros-brand-size) * .33) rgba(39, 216, 236, .28));
}
.ros-brand--on-light .ros-brand-logo { filter: none; }
.ros-brand-name { display: block; }
.ros-brand:focus-visible {
outline: 2px solid currentColor;
outline-offset: 4px;
border-radius: 10px;
}
/* Fallback particle timing keeps animations valid if reduced-motion is toggled off after load. */
.particle {
--duration: 15s;
--delay: 0s;
}