/*
* Component styles. Phase 1.2 v0 — only the brand lockup so far.
* Phase 2 will populate this file with the full component library.
*/
/* ---------- Brand lockup (header + footer mark) ---------- */
.brand-lockup {
display: inline-flex;
align-items: flex-end;
gap: 0.625rem; /* lockup-specific — 10px gap is the tuned mark↔wordmark distance, not on the spacing scale */
color: var(--color-brand-primary);
text-decoration: none;
line-height: 1;
}
.brand-lockup:hover {
color: var(--color-brand-primary-hover);
}
.brand-lockup__mark {
display: inline-flex;
width: 2rem;
height: 2rem;
flex-shrink: 0;
}
.brand-lockup__mark svg {
width: 100%;
height: 100%;
display: block;
}
.brand-lockup__wordmark {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-tight);
line-height: 0.85;
color: inherit;
}
.brand-lockup--small .brand-lockup__mark { width: 1.5rem; height: 1.5rem; }
.brand-lockup--small .brand-lockup__wordmark { font-size: var(--text-base); }
.brand-lockup--large .brand-lockup__mark { width: 2.75rem; height: 2.75rem; }
.brand-lockup--large .brand-lockup__wordmark { font-size: var(--text-2xl); }
/* ---------- Ornament stage: sun-cursor drop shadow ---------- */
/*
* Wraps an ornament ![]()
. Picks up --sun-shadow-* custom properties driven
* by /static/js/sun-cursor.js. Falls back to a quiet baseline shadow when
* the JS hasn't loaded or prefers-reduced-motion is set (the JS no-ops
* under reduced-motion, and the fallback values stay neutral).
*/
/*
* Apply the filter to each inline