/* Shared site header (partials/header.html). Plain CSS so it renders the
   same on Tailwind-CDN pages, Lumen's compiled app.css pages and the gallery.
   Fixed over the page by default (company pages pad their content for it);
   pages with <body class="sl-header-flow"> keep it in the flow instead so it
   never covers a full-height hero. */
.sl-header {
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    position: fixed; top: 0; left: 0; right: 0; z-index: 50; margin: 0;
    background: rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(168, 85, 247, 0.2);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 1rem; line-height: 1.5rem; letter-spacing: normal; text-align: left;
    color: #fff; box-sizing: border-box;
}
.sl-header-flow .sl-header { position: sticky; }
.sl-header *, .sl-header *::before, .sl-header *::after { box-sizing: border-box; }
.sl-header .sl-header__inner {
    max-width: 80rem; margin: 0 auto; padding: 1rem 1.5rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.sl-header a { color: inherit; text-decoration: none; border: 0; }
.sl-header .sl-header__brand { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.sl-header .sl-header__logo {
    flex: none; width: 2rem; height: 2rem; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    background: #9333ea; /* same as .sl-header__cta */
    font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
    font-size: 1.125rem; line-height: 1; color: #fff;
}
/* Playfair's caps sit low in its line box: nudge the letters up (sub-pixel) so the ink is centred. */
.sl-header .sl-header__logo > span { display: block; transform: translateY(-0.047em); }
.sl-header .sl-header__name { display: block; min-width: 0; }
.sl-header .sl-header__title {
    display: block; font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; letter-spacing: -0.025em; white-space: nowrap;
}
.sl-header .sl-header__sub { display: block; margin-top: -0.25rem; font-size: 0.75rem; line-height: 1rem; color: #c084fc; }
.sl-header .sl-header__links { display: flex; align-items: center; gap: 0.25rem; flex: none; }
.sl-header .sl-header__links a:not(.sl-header__cta) {
    padding: 0.5rem 0.75rem; font-size: 0.75rem; line-height: 1rem;
    letter-spacing: 0.2em; text-transform: uppercase; color: #a1a1aa;
    white-space: nowrap; transition: color .15s;
}
.sl-header .sl-header__links a:not(.sl-header__cta):hover { color: #fff; }
.sl-header .sl-header__cta {
    flex: none; margin-left: 0.5rem; padding: 0.625rem 1.25rem; border-radius: 9999px;
    background: #9333ea; color: #fff; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600;
    white-space: nowrap; transition: background-color .15s;
}
.sl-header .sl-header__cta:hover { background: #7e22ce; }
.sl-header a:focus-visible { outline: 2px solid rgba(168, 85, 247, 0.9); outline-offset: 3px; border-radius: 9999px; }

/* Phones: logo mark only, tighter links — everything stays on one line. */
@media (max-width: 639px) {
    .sl-header .sl-header__inner { padding: 0.75rem 1rem; gap: 0.5rem; }
    .sl-header .sl-header__name { display: none; }
    .sl-header .sl-header__links { gap: 0; }
    .sl-header .sl-header__links a:not(.sl-header__cta) { padding: 0.5rem 0.35rem; font-size: 0.6875rem; letter-spacing: 0.06em; }
    .sl-header .sl-header__cta { margin-left: 0.3rem; padding: 0.5rem 0.8rem; font-size: 0.8125rem; }
}
@media (max-width: 359px) {
    .sl-header .sl-header__inner { padding: 0.75rem 0.625rem; gap: 0.375rem; }
    .sl-header .sl-header__logo { width: 1.75rem; height: 1.75rem; font-size: 1rem; }
    .sl-header .sl-header__logo > span { transform: translateY(-0.0375em); }
    .sl-header .sl-header__links a:not(.sl-header__cta) { padding: 0.5rem 0.25rem; font-size: 0.625rem; letter-spacing: 0.03em; }
    .sl-header .sl-header__cta { margin-left: 0.25rem; padding: 0.45rem 0.7rem; font-size: 0.75rem; }
}