/* Explain: Base reset, typography, and global background for the site. - */
* {
    box-sizing: border-box;
}

html {
    scroll-padding-top: var(--header-offset);
    background: var(--background-color);
    text-rendering: optimizeLegibility;
}

body {
    margin: 0;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--gold-color) 24%, transparent), transparent 31rem),
        radial-gradient(circle at 88% 16%, color-mix(in srgb, var(--champagne-color) 16%, transparent), transparent 34rem),
        radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--gold-muted) 18%, transparent), transparent 36rem),
        linear-gradient(180deg, var(--black-color), color-mix(in srgb, var(--gold-muted) 15%, var(--black-color)) 46%, var(--black-color));
    color: var(--text-color);
}

::selection {
    background: var(--gold-color);
    color: var(--black-color);
}

button,
a {
    cursor: pointer;
}

input,
button,
textarea,
select {
    font: inherit;
}

:focus-visible {
    outline: 3px solid var(--gold-color);
    outline-offset: 3px;
}

img,
video {
    max-width: 100%;
}

main {
    position: relative;
    z-index: 1;
}

main > section {
    position: relative;
    isolation: isolate;
}

main > section:not(.hero-campaign)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--gold-color) 13%, transparent), transparent 24rem),
        radial-gradient(circle at 88% 2%, color-mix(in srgb, var(--champagne-color) 8%, transparent), transparent 26rem),
        linear-gradient(135deg, color-mix(in srgb, var(--gold-color) 5%, transparent), transparent 34%, color-mix(in srgb, var(--gold-muted) 6%, transparent));
    opacity: 0.22;
}

main > section:not(.hero-campaign)::after {
    content: "";
    position: absolute;
    inset-x: 0;
    top: 0;
    z-index: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold-color) 55%, transparent), transparent);
}

main > section > .mx-auto,
main > section > .relative,
main > section > form,
main > section > div:not(.absolute) {
    position: relative;
    z-index: 1;
}

main[id],
section[id],
article[id],
div[id] {
    scroll-margin-top: var(--header-offset);
}

.premium-prose p + p {
    margin-top: 1rem;
}

@media (max-width: 767px) {
    :root {
        --header-height: 3.25rem;
        --header-offset: calc(var(--header-height) + 0.5rem);
    }
}

/* Global readability repair: keep every section dark, cinematic, and readable. */
main > section {
    background-color: var(--black-color);
    color: var(--text-color);
}

main > section[class*="bg-[color-mix"] {
    background-color: color-mix(in srgb, var(--gold-color) 4%, var(--black-color));
}

main > section[class*="bg-[var(--black-color)]"] {
    background-color: var(--black-color);
}

main > section p,
main > section li,
main > section span,
main > section small,
main > section label {
    color: inherit;
}

main > section p:not(.eyebrow),
main > section li,
main > section small {
    color: var(--text-muted);
}

main > section h1,
main > section h2,
main > section h3,
main > section h4,
main > section strong {
    color: var(--white-color);
}