@font-face {
    font-family: Manrope;
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/manrope-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0100-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: Manrope;
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/manrope-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
*, *::before, *::after { box-sizing: border-box; }
body {
    position: relative;
    isolation: isolate;
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 32px 24px;
    background: #1d1428;
    color: #f7f1fa;
    font-family: Manrope, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.page-background {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
.page-background picture, .page-background img {
    display: block;
    width: 100%;
    height: 100%;
}
.page-background img {
    object-fit: cover;
    object-position: 65% 54%;
}
.page-background::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #1d1428e0 0%, #1d1428b8 50%, #1d14288c 100%),
        linear-gradient(0deg, #1d1428cc 0%, #1d142800 55%, #1d142833 100%);
}
main { position: relative; z-index: 1; }
.cursor-light { display: none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .cursor-light {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        pointer-events: none;
    }
    /* The same warm light, size and easing as the main page hero. */
    .fx-lamp {
        position: absolute;
        top: 0;
        left: 0;
        width: 860px;
        height: 860px;
        margin: -430px 0 0 -430px;
        border-radius: 50%;
        background: radial-gradient(closest-side, #ffc79e52, #ff8f4f24 45%, #ff8a4a00);
        opacity: 0;
        transform: translate3d(var(--fx-px, 70vw), var(--fx-py, 360px), 0);
        transition: opacity .9s, transform 1s cubic-bezier(.16, 1, .3, 1);
    }
    .is-lit .fx-lamp { opacity: 1; }
}
/*
main { width: min(100%, 620px); }
*/
.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 2.5vw, 30px);
}
.brand-icon {
    display: block;
    width: clamp(68px, 11vw, 124px);
    height: auto;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}
.brand-type { min-width: 0; }
h1 {
    margin: 0;
    font-size: clamp(2rem, 7vw, 4.75rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.tagline {
    margin: 5px 0 0;
    color: #d4c1e7;
    font-size: clamp(.5rem, 1vw, .68rem);
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: .22em;
    text-transform: uppercase;
}
nav {
    width: min(100%, 550px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 6vw, 64px);
    margin: clamp(0px, 6vw, 0px) auto 0;
}
nav a {
    display: inline;
    align-items: center;
    min-height: 54px;
    padding: 16px 0;
    border-bottom: 1px solid #655073;
    color: #e2d4ed;
    font-size: clamp(.78rem, 1.2vw, .94rem);
    font-weight: 400;
    letter-spacing: .025em;
    line-height: 1.6;
    text-decoration: none;
    transition: color .2s, border-color .2s;
}
nav a span {
    font-size: 2.5em;
    font-weight: bold;
    line-height: 1em;
}
nav a:last-child { justify-content: flex-end; text-align: right; }
nav a:hover { color: #fff; border-color: #d4c1e7; }
nav a:focus-visible { outline: 2px solid #d4c1e7; outline-offset: 8px; }
::selection { background: #d4c1e7; color: #1d1428; }
@media (max-width: 600px) {
    .page-background img { object-position: 65% 30%; }
    .page-background::after {
        background: linear-gradient(0deg, #1d1428e6 0%, #1d1428b8 50%, #1d142880 100%);
    }
}
@media (max-width: 420px) {
    .tagline { margin-top: 5px; letter-spacing: .14em; }
}
@media (prefers-reduced-motion: reduce) {
    nav a { transition: none; }
}