/* ========================================
   STEADFAST RACING - GLOBAL / TOKENS
======================================== */

:root {
    --sr-black:      #090B0D;
    --sr-graphite:   #14181C;
    --sr-gunmetal:   #232A30;

    --sr-white:      #F3F5F4;
    --sr-ice:        #A9C1C7;
    --sr-lime:       #6197B2;

    --sr-text-primary:   #F3F5F4;
    --sr-text-secondary: #A9B1B7;

    --sr-border:       rgba(255,255,255,.10);
    --sr-border-hover: rgba(97,151,178,.45);

    --sr-radius-sm: 6px;
    --sr-radius-md: 10px;
    --sr-radius-lg: 14px;

    --sr-container: 1440px;
    --sr-gutter: 4vw;

    --sr-ease: cubic-bezier(.16,1,.3,1);

    --sr-font-head: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
    --sr-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --sr-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* SR monogram used as the leading mark on every eyebrow. */
    --sr-mark: url("/wp-content/uploads/2026/09/Untitled-design.webp");
    --sr-mark-w: 32px;
    --sr-mark-h: 17px;

    --sr-header-h: 82px;
}

/* ========================================
   BASE / THEME RESET
======================================== */

html { scroll-behavior: smooth; }

body.sr-site {
    background: var(--sr-black);
    color: var(--sr-text-primary);
    font-family: var(--sr-font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.sr-site #page,
.sr-site .site-content,
.sr-site #content,
.sr-site .ast-container,
.sr-site #primary,
.sr-site .entry-content {
    background: transparent;
    max-width: none;
    width: auto;
    padding: 0;
    margin: 0;
}

.sr-site .entry-content > * { margin: 0; }
.sr-site .ast-no-sidebar .entry-content .alignwide { margin: 0; }
.sr-site .site-content .ast-container { display: block; }
.sr-site .ast-single-post .entry-header,
.sr-site .ast-archive-description { display: none; }

.sr-site h1, .sr-site h2, .sr-site h3, .sr-site h4 {
    font-family: var(--sr-font-head);
    color: var(--sr-text-primary);
    margin: 0;
}

.sr-site p { margin: 0; }
.sr-site img { max-width: 100%; height: auto; display: block; }
.sr-site a,
.sr-site .entry-content a,
.sr-site .entry-content a:hover,
.sr-site .entry-content a:focus {
    color: inherit;
    text-decoration: none;
}

.sr-site section[id] { scroll-margin-top: calc(var(--sr-header-h) + 12px); }

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    white-space: nowrap;
}

.sr-site ::selection { background: var(--sr-lime); color: var(--sr-black); }

.sr-site :focus-visible {
    outline: 2px solid var(--sr-lime);
    outline-offset: 3px;
}

.sr-skip {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--sr-lime); color: var(--sr-black);
    padding: .75rem 1.25rem; font-family: var(--sr-font-mono); font-size: .75rem;
}
.sr-skip:focus { left: 0; }

/* ========================================
   LAYOUT PRIMITIVES
======================================== */

.sr-container {
    width: min(100% - (var(--sr-gutter) * 2), var(--sr-container));
    margin-inline: auto;
    position: relative;
    z-index: 2;
}

.sr-section {
    position: relative;
    padding-block: clamp(5rem, 11vw, 10rem);
    overflow: hidden;
}

.sr-section--graphite { background: var(--sr-graphite); }
.sr-section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }

.sr-section__header { max-width: 62ch; }
.sr-section__header--wide { max-width: 100%; }

/* ========================================
   TYPOGRAPHY SYSTEM
======================================== */

.sr-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--sr-font-mono);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--sr-ice);
}

/* The SR monogram replaces the old lime rule. It is the recurring brand
   marker that opens every eyebrow, so it stays decorative and hidden from
   assistive tech. */
.sr-eyebrow::before {
    content: "";
    width: var(--sr-mark-w);
    height: var(--sr-mark-h);
    background: var(--sr-mark) left center / contain no-repeat;
    flex: none;
}

.sr-eyebrow--bare::before { display: none; }

.sr-section-title {
    font-family: var(--sr-font-head);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -.035em;
    line-height: .92;
    font-size: clamp(2.5rem, 5vw, 5rem);
    margin-top: 1.4rem;
}

.sr-section-title em {
    font-style: normal;
    color: var(--sr-lime);
}

.sr-section-copy {
    color: var(--sr-text-secondary);
    font-size: 1.0625rem;
    max-width: 58ch;
    margin-top: 1.6rem;
}

.sr-h3 {
    font-family: var(--sr-font-head);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -.025em;
    line-height: 1.02;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
}

.sr-mono {
    font-family: var(--sr-font-mono);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sr-ice);
}

.sr-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--sr-lime);
    display: inline-block;
    flex: none;
}

.sr-dot--pulse { animation: sr-pulse 2.6s var(--sr-ease) infinite; }

@keyframes sr-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.7); }
}

/* ========================================
   BUTTONS
======================================== */

.sr-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .95rem 1.55rem;
    border-radius: var(--sr-radius-sm);
    font-family: var(--sr-font-body);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    line-height: 1;
    border: 1px solid transparent;
    overflow: hidden;
    transition: background .28s var(--sr-ease), color .28s var(--sr-ease),
                border-color .28s var(--sr-ease), transform .28s var(--sr-ease);
}

.sr-btn span[aria-hidden] {
    transition: transform .28s var(--sr-ease);
}

.sr-btn:hover span[aria-hidden] { transform: translateX(5px); }

/* Primary CTA: lime with a black gradient falling to the bottom edge.

   The element selectors matter. Astra's `.entry-content a` colour rule and
   this sheet's own link reset both outrank a bare `.sr-btn--primary`, which
   is what left the label rendering white on lime. Qualifying with `a.` /
   `button.` restores the intended contrast.

   The darkest stop is held at #426D83 so the near-black label still clears
   4.5:1 across the whole gradient. */
.sr-site a.sr-btn--primary,
.sr-site button.sr-btn--primary,
.sr-site .entry-content a.sr-btn--primary {
    background: linear-gradient(165deg,
        #BDD7E4 0%,
        var(--sr-lime) 32%,
        #78AAC2 66%,
        #426D83 100%);
    color: #09151C;
    font-weight: 800;
    letter-spacing: .1em;
    border-color: rgba(9,11,13,.4);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.42),
        inset 0 -1px 0 rgba(9,11,13,.28),
        0 10px 26px -14px rgba(97,151,178,.6);
}

.sr-site a.sr-btn--primary:hover,
.sr-site button.sr-btn--primary:hover,
.sr-site .entry-content a.sr-btn--primary:hover {
    background: linear-gradient(165deg,
        #E1EFF5 0%,
        #A1C4D5 32%,
        #83B0C6 66%,
        #4E8099 100%);
    color: #09151C;
}

.sr-site a.sr-btn--secondary,
.sr-site button.sr-btn--secondary,
.sr-site .entry-content a.sr-btn--secondary {
    background: transparent;
    color: var(--sr-white);
    border-color: var(--sr-border);
}

.sr-btn--secondary::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    height: 1px; width: 100%;
    background: var(--sr-lime);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .35s var(--sr-ease);
}

.sr-btn--secondary:hover {
    border-color: var(--sr-border-hover);
    background: rgba(255,255,255,.03);
}
.sr-btn--secondary:hover::after { transform: scaleX(1); }

.sr-btn--ghost {
    padding: 0;
    background: none;
    border: 0;
    color: var(--sr-white);
    font-family: var(--sr-font-mono);
    font-size: .72rem;
    letter-spacing: .14em;
}

.sr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin-top: 2.4rem;
}

/* ========================================
   CARDS
======================================== */

.sr-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
    border: 1px solid var(--sr-border);
    border-radius: var(--sr-radius-md);
    overflow: hidden;
    transition: border-color .35s var(--sr-ease), background .35s var(--sr-ease),
                transform .45s var(--sr-ease);
}

.sr-card::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    height: 2px; width: 100%;
    background: var(--sr-lime);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .5s var(--sr-ease);
    z-index: 3;
}

.sr-card:hover,
.sr-card:focus-within {
    border-color: var(--sr-border-hover);
    background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
}

.sr-card:hover::after,
.sr-card:focus-within::after { transform: scaleX(1); }

.sr-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--sr-gunmetal);
}

.sr-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .7s var(--sr-ease), filter .7s var(--sr-ease);
}

.sr-card:hover .sr-card__media img { transform: scale(1.045); }

.sr-card__media::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(9,11,13,0) 40%, rgba(9,11,13,.75) 100%);
}

.sr-card__index {
    position: absolute;
    left: 1rem; top: 1rem;
    z-index: 2;
    font-family: var(--sr-font-mono);
    font-size: .7rem;
    letter-spacing: .14em;
    color: var(--sr-white);
    background: rgba(9,11,13,.6);
    backdrop-filter: blur(6px);
    padding: .3rem .55rem;
    border-radius: 3px;
}

.sr-card__body {
    padding: 1.6rem 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    flex: 1;
}

.sr-card__body p {
    color: var(--sr-text-secondary);
    font-size: .95rem;
    line-height: 1.6;
}

.sr-card__link {
    margin-top: auto;
    padding-top: .4rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--sr-font-mono);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sr-lime);
}

.sr-card__link span { transition: transform .3s var(--sr-ease); }
.sr-card:hover .sr-card__link span { transform: translateX(5px); }

.sr-card__stretch {
    position: absolute; inset: 0; z-index: 4;
}

/* ========================================
   IMAGE REVEAL + PARALLAX
======================================== */

.sr-image-reveal {
    position: relative;
    overflow: hidden;
    border-radius: var(--sr-radius-lg);
    background: var(--sr-gunmetal);
}

.sr-image-reveal img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.sr-image-reveal__label {
    position: absolute;
    left: 1rem; bottom: 1rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(9,11,13,.66);
    backdrop-filter: blur(8px);
    border: 1px solid var(--sr-border);
    padding: .4rem .7rem;
    border-radius: 4px;
}

/* Parallax media. Deliberately no static `will-change`: promoting these
   permanently keeps a compositing layer alive inside the rounded,
   overflow-hidden reveal frames, which can suppress paint of the image
   entirely. translate3d already promotes the layer while scrolling. */
.sr-parallax-wrap { overflow: hidden; }

/* ========================================
   TECHNICAL BACKGROUND
======================================== */

.sr-tech-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.sr-tech-bg__grid {
    position: absolute;
    inset: -20% 0 -20% 0;
    background-image:
        linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 88px 88px;
    opacity: .55;
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%);
            mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%);
}

.sr-tech-bg__line {
    position: absolute;
    top: 50%; left: 50%;
    width: 150%;
    transform: translate(-50%, -50%);
    opacity: .5;
}

.sr-tech-bg__line path { vector-effect: non-scaling-stroke; }

/* ========================================
   SCANLINE
   A lime pulse that travels along a hairline rule. Reused on section
   boundaries as the site's "speed trail" motif. Stagger the delay and
   duration between instances so they never fire in unison.
======================================== */

.sr-scanline {
    position: absolute;
    left: 0;
    top: 0;
    height: 1px;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 4;
}

.sr-scanline--bottom { top: auto; bottom: 0; }

.sr-scanline::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 1px;
    width: 22%;
    background: linear-gradient(90deg, transparent, var(--sr-lime), transparent);
    animation: sr-scan var(--sr-scan-duration, 5.5s) var(--sr-ease) infinite;
    animation-delay: var(--sr-scan-delay, 0s);
}

.sr-scanline--reverse::after {
    background: linear-gradient(90deg, transparent, var(--sr-ice), transparent);
    animation-name: sr-scan-reverse;
}

@keyframes sr-scan {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(560%); }
}

@keyframes sr-scan-reverse {
    0%   { transform: translateX(560%); }
    100% { transform: translateX(-120%); }
}

/* ========================================
   MOTION UTILITIES
======================================== */

.sr-js .js-sr-reveal,
.sr-js .js-sr-reveal-left,
.sr-js .js-sr-reveal-right {
    opacity: 0;
    transition: opacity .7s var(--sr-ease), transform .7s var(--sr-ease);
    transition-delay: var(--sr-delay, 0s);
}

.sr-js .js-sr-reveal        { transform: translateY(26px); }
.sr-js .js-sr-reveal-left   { transform: translateX(-34px); }
.sr-js .js-sr-reveal-right  { transform: translateX(34px); }

.js-sr-reveal.is-visible,
.js-sr-reveal-left.is-visible,
.js-sr-reveal-right.is-visible {
    opacity: 1;
    transform: none;
}

/* Horizontal wipe.

   The wipe is a sliding panel, NOT `clip-path` on the container. A clip-path
   on the element being observed collapses its intersection rectangle to zero,
   so IntersectionObserver never reports it as intersecting and the reveal
   never fires. The panel leaves the element's box intact. */
.js-sr-image-reveal { position: relative; }

.sr-js .js-sr-image-reveal::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--sr-gunmetal);
    transform-origin: right center;
    transition: transform .9s var(--sr-ease);
    transition-delay: var(--sr-delay, 0s);
}

.js-sr-image-reveal.is-visible::before { transform: scaleX(0); }

/* Retire the panel once the wipe has run so it stops costing a layer. */
.js-sr-image-reveal.sr-revealed::before { display: none; }

.js-sr-image-reveal img {
    transform: scale(1.06);
    transition: transform 1.1s var(--sr-ease);
    transition-delay: var(--sr-delay, 0s);
}
.js-sr-image-reveal.is-visible img { transform: scale(1); }

.sr-line-mask { display: block; overflow: hidden; }
.sr-js .sr-line-mask > span {
    display: block;
    transform: translateY(105%);
    transition: transform .78s var(--sr-ease);
    transition-delay: var(--sr-delay, 0s);
}
.is-visible > .sr-line-mask > span,
.sr-line-mask.is-visible > span { transform: none; }

/* ========================================
   HEADER
======================================== */

.sr-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    height: var(--sr-header-h);
    display: flex;
    align-items: center;
    transition: background .4s var(--sr-ease), border-color .4s var(--sr-ease),
                backdrop-filter .4s var(--sr-ease), height .4s var(--sr-ease);
    border-bottom: 1px solid transparent;
}

.sr-header.is-stuck {
    background: rgba(9,11,13,.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom-color: rgba(255,255,255,.07);
    height: 70px;
}

.sr-header__inner {
    width: min(100% - (var(--sr-gutter) * 2), var(--sr-container));
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.sr-logo { flex: none; display: block; }
.sr-logo img {
    height: 30px;
    width: auto;
    filter: invert(1) brightness(1.9);
    transition: height .4s var(--sr-ease);
}
.sr-header.is-stuck .sr-logo img { height: 26px; }

.sr-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.sr-nav ul {
    display: flex;
    align-items: center;
    gap: 1.9rem;
    list-style: none;
    margin: 0; padding: 0;
}

.sr-nav a {
    position: relative;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sr-text-secondary);
    padding-block: .4rem;
    transition: color .25s var(--sr-ease);
}

.sr-nav a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    height: 1px; width: 100%;
    background: var(--sr-lime);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .32s var(--sr-ease);
}

.sr-nav a:hover { color: var(--sr-white); }
.sr-nav a:hover::after,
.sr-nav .current-menu-item > a::after { transform: scaleX(1); }
.sr-nav .current-menu-item > a { color: var(--sr-white); }

.sr-header .sr-btn { padding: .7rem 1.15rem; font-size: .72rem; }

.sr-burger {
    display: none;
    margin-left: auto;
    width: 42px; height: 42px;
    background: none;
    border: 1px solid var(--sr-border);
    border-radius: var(--sr-radius-sm);
    cursor: pointer;
    position: relative;
}

.sr-burger span {
    position: absolute;
    left: 11px;
    width: 18px; height: 1.5px;
    background: var(--sr-white);
    transition: transform .35s var(--sr-ease), opacity .2s linear;
}
.sr-burger span:nth-child(1) { top: 15px; }
.sr-burger span:nth-child(2) { top: 20px; }
.sr-burger span:nth-child(3) { top: 25px; }

.sr-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.sr-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sr-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ========================================
   FOOTER
======================================== */

.sr-footer {
    position: relative;
    background: var(--sr-black);
    border-top: 1px solid var(--sr-border);
    padding-block: clamp(3.5rem, 6vw, 5.5rem) 2rem;
    overflow: hidden;
}

.sr-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.sr-footer__logo img {
    height: 34px; width: auto;
    filter: invert(1) brightness(1.9);
}

.sr-footer p { color: var(--sr-text-secondary); font-size: .95rem; }
.sr-footer__tag { margin-top: 1.4rem; max-width: 40ch; }

.sr-footer h2 {
    font-family: var(--sr-font-mono);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--sr-ice);
    margin-bottom: 1.1rem;
}

.sr-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.sr-footer ul a {
    font-size: .92rem;
    color: var(--sr-text-secondary);
    transition: color .25s var(--sr-ease);
}
.sr-footer ul a:hover { color: var(--sr-lime); }

.sr-footer__base {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--sr-border);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
}

.sr-footer__base .sr-mono { font-size: .68rem; }

/* ========================================
   THEME OVERRIDES
======================================== */

/* Astra's scroll-to-top control, brought into the Steadfast palette. */
.sr-site #ast-scroll-top {
    background: rgba(20, 24, 28, .82) !important;
    backdrop-filter: blur(10px);
    border: 1px solid var(--sr-border);
    border-radius: var(--sr-radius-sm);
    color: var(--sr-white) !important;
    width: 42px;
    height: 42px;
    line-height: 40px;
    transition: border-color .3s var(--sr-ease), color .3s var(--sr-ease);
}

.sr-site #ast-scroll-top:hover {
    border-color: var(--sr-border-hover);
    color: var(--sr-lime) !important;
}