html {
    font-size: clamp(13px, calc(10px + 0.42vw), 16px);
}

body {
    color: var(--color-text);
    font-family:
        "Plus Jakarta Sans",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-primary);
    font-weight: 600;
    line-height: 1.1;
}

a {
    color: inherit;
    text-decoration: none;
}

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

/* ==========================================================================
   Screen Reader Helper Class & Skip Link
   ========================================================================== */

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus,
.skip-link:focus {
    background-color: var(--color-primary, #0F1C2E);
    clip: auto !important;
    clip-path: none;
    color: var(--color-white, #FFFFFF);
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    height: auto;
    left: 1rem;
    padding: 1rem 1.5rem;
    position: fixed;
    top: 1rem;
    width: auto;
    z-index: 100000;
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

/* Public-page eyebrow labels use the brand accent color. */
.site-main p[class*="__eyebrow"] {
    color: var(--color-accent);
}