/* =============================================================
   R A R A O M T   ::   m a i n . c s s
   foundations + topbar + hero + buttons + age band
   ============================================================= */


/* ------- root tokens (intentionally non-round, non-typical) -- */

:root {

    --paint-asphalt        : #0c0d10;
    --paint-asphalt-soft   : #14161a;
    --paint-tarmac         : #1d2025;

    --paint-bone           : #ecead8;
    --paint-bone-dim       : #cfcfbf;

    --paint-rust           : #c2392b;
    --paint-rust-burnt     : #8a2418;
    --paint-flag-yellow    : #f1c233;
    --paint-flame          : #ee6f24;
    --paint-grease         : #2a2c33;

    --paint-line           : #2c2f36;
    --paint-line-soft      : #232629;

    --type-shout           : 'Bungee Inline', 'Impact', sans-serif;
    --type-banner          : 'Bebas Neue', 'Oswald', sans-serif;
    --type-mono            : 'JetBrains Mono', 'Consolas', monospace;
    --type-body            : 'JetBrains Mono', 'Inter', sans-serif;

    --space-1              : 7px;
    --space-2              : 13px;
    --space-3              : 22px;
    --space-4              : 37px;
    --space-5              : 58px;
    --space-6              : 91px;

    --bend-1               : 3px;
    --bend-2               : 7px;
    --bend-3               : 11px;

    --rule-thin            : 1px solid var(--paint-line);
    --rule-double          : 3px double var(--paint-line);

    --shadow-low           : 0 2px 0 rgba(0,0,0,.55);
    --shadow-mid           : 0 14px 33px -18px rgba(0,0,0,.62);

    --max-shell            : 1262px;

}


/* ------- reset (deliberately mid-trim, not full normalize) --- */

*,
*::before,
*::after  { box-sizing : border-box; }

html      { scroll-behavior: smooth; }

body {

    margin               : 0;
    padding              : 0;
    background           : var(--paint-asphalt);
    color                : var(--paint-bone);
    font-family          : var(--type-body);
    font-size            : 15.5px;
    line-height          : 1.62;
    -webkit-font-smoothing: antialiased;

    background-image: 
        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,.012) 0,
            rgba(255,255,255,.012) 1px,
            transparent 1px,
            transparent 18px
        );

}

img    { max-width: 100%; display: block; }

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

h1,h2,h3,h4,h5  { margin: 0 0 .55em; line-height: 1.18; }

h1 { font-family: var(--type-shout);  font-weight: 400; font-size: clamp(34px, 5.4vw, 67px); letter-spacing: 1px; }
h2 { font-family: var(--type-banner); font-weight: 400; font-size: clamp(28px, 3.6vw, 47px); letter-spacing: 1.4px; text-transform: uppercase; }
h3 { font-family: var(--type-banner); font-weight: 400; font-size: clamp(21px, 2.4vw, 31px); letter-spacing: 1px;  text-transform: uppercase; }
h4 { font-family: var(--type-mono);   font-weight: 800; font-size: 16.5px; letter-spacing: .5px; }

p      { margin: 0 0 1.05em; }

::selection { background: var(--paint-rust); color: var(--paint-bone); }



/* =============================================================
   t o p   b a r   ( logo only, dead center )
   ============================================================= */

.strip-top {

    position           : sticky;
    top                : 0;
    z-index            : 70;

    background         : var(--paint-asphalt-soft);
    border-bottom      : var(--rule-thin);

    padding            : 14px 0 12px;

    backdrop-filter    : blur(3px);

}

    .strip-top__inner {

        max-width      : var(--max-shell);
        margin         : 0 auto;
        padding        : 0 var(--space-3);

        display        : flex;
        justify-content: center;
        align-items    : center;

    }

        .logoslot {

            display       : inline-flex;
            align-items   : center;
            justify-content: center;
            padding       : 4px 22px;

            border-left   : 2px solid var(--paint-line);
            border-right  : 2px solid var(--paint-line);

        }

            .logoslot__mark {

                height        : 36px;
                width         : auto;
                filter        : brightness(0) invert(1) drop-shadow(0 0 1px rgba(0,0,0,.6));
                transition    : transform .35s ease;

            }

            .logoslot:hover .logoslot__mark { transform: rotate(-1.5deg) scale(1.04); }



/* =============================================================
   1 8 +   r i b b o n   ( under topbar )
   ============================================================= */

.agestrip {

    background     : var(--paint-rust-burnt);
    color          : var(--paint-bone);
    border-bottom  : 2px solid #000;

}

    .agestrip__pad {

        max-width    : var(--max-shell);
        margin       : 0 auto;
        padding      : 8px var(--space-3);

        display      : flex;
        align-items  : center;
        gap          : 14px;

        font-family  : var(--type-mono);
        font-size    : 12.5px;
        letter-spacing: .8px;
        text-transform: uppercase;

    }

        .agestrip__chip {

            display        : inline-block;
            padding        : 3px 9px;
            background     : #000;
            color          : var(--paint-flag-yellow);
            font-weight    : 800;
            border         : 1px solid var(--paint-flag-yellow);

        }

        .agestrip__line { opacity: .92; }



/* =============================================================
   h e r o    ( banner-throttle )
   ============================================================= */

.banner-throttle {

    position       : relative;
    overflow       : hidden;
    isolation      : isolate;

    min-height     : 640px;

    display        : flex;
    align-items    : center;

}

    .banner-throttle__bg {

        position             : absolute;
        inset                : 0;
        z-index              : -2;

        background-size      : cover;
        background-position  : center 28%;
        background-repeat    : no-repeat;

        filter               : saturate(.78) contrast(1.08);

        animation            : banner-throttle-drift 26s ease-in-out infinite alternate;

    }

    @keyframes banner-throttle-drift {
        from { transform: scale(1.04) translateX(-1.2%); }
        to   { transform: scale(1.10) translateX( 1.2%); }
    }

    .banner-throttle__veil {

        position : absolute;
        inset    : 0;
        z-index  : -1;

        background:
            linear-gradient(
                118deg,
                rgba(12,13,16,.92) 0%,
                rgba(12,13,16,.74) 38%,
                rgba(12,13,16,.42) 65%,
                rgba(12,13,16,.78) 100%
            ),
            radial-gradient(
                circle at 78% 42%,
                rgba(194,57,43,.32) 0%,
                rgba(194,57,43,0) 55%
            );

    }

    .banner-throttle__weld {

        max-width  : var(--max-shell);
        margin     : 0 auto;
        padding    : var(--space-6) var(--space-3) var(--space-5);
        width      : 100%;

    }

        .banner-throttle__cue {

            font-family   : var(--type-mono);
            font-size     : 12.5px;
            letter-spacing: 2px;
            color         : var(--paint-flag-yellow);
            text-transform: uppercase;

            margin-bottom : var(--space-3);
            padding-left  : 14px;
            border-left   : 3px solid var(--paint-rust);

        }

        .banner-throttle__shout {

            margin-bottom : var(--space-3);
            text-shadow   : 4px 4px 0 #000;

        }

        .banner-throttle__shout em {

            font-style    : normal;
            color         : var(--paint-flag-yellow);
            text-shadow   : 4px 4px 0 var(--paint-rust-burnt);

        }

        .banner-throttle__shout span {

            display       : block;
            margin-top    : 13px;
            font-family   : var(--type-mono);
            font-size     : 16.5px;
            letter-spacing: 1px;
            text-transform: none;
            text-shadow   : none;
            font-weight   : 400;
            color         : var(--paint-bone-dim);
            max-width     : 700px;

        }

        .banner-throttle__paragraph {

            max-width  : 645px;
            font-size  : 15.4px;
            line-height: 1.7;
            color      : var(--paint-bone-dim);
            margin     : 0 0 var(--space-4);
            padding    : 17px 19px;
            border-left: var(--rule-double);
            background : rgba(0,0,0,.42);
            backdrop-filter: blur(2px);

        }

        .banner-throttle__hand {

            display    : flex;
            flex-wrap  : wrap;
            gap        : 16px;
            margin-bottom: var(--space-5);

        }

        .banner-throttle__metra {

            display              : grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap                  : 0;

            background           : rgba(0,0,0,.55);
            border               : var(--rule-thin);
            border-color         : var(--paint-line-soft);
            max-width            : 720px;

        }

            .metra-cell {

                padding       : 17px 14px 14px;
                border-right  : var(--rule-thin);
                border-color  : var(--paint-line-soft);

            }

            .metra-cell:last-child { border-right: 0; }

                .metra-cell__big {

                    font-family   : var(--type-shout);
                    font-size     : 32px;
                    color         : var(--paint-flag-yellow);
                    line-height   : 1;
                    margin-bottom : 5px;

                }

                .metra-cell__cap {

                    font-family   : var(--type-mono);
                    font-size     : 11.5px;
                    text-transform: uppercase;
                    letter-spacing: 1.2px;
                    color         : var(--paint-bone-dim);
                    opacity       : .85;

                }



/* =============================================================
   b u t t o n s    ( "btn-roar" )
   ============================================================= */

.btn-roar {

    display          : inline-flex;
    flex-direction   : column;
    align-items      : flex-start;
    justify-content  : center;

    padding          : 13px 27px 15px;
    min-width        : 233px;

    background       : var(--paint-bone);
    color            : var(--paint-asphalt);

    border           : 2px solid var(--paint-bone);
    border-radius    : var(--bend-1);

    cursor           : pointer;
    transition       : transform .22s ease, background .22s ease, color .22s ease;

    position         : relative;
    overflow         : hidden;

}

    .btn-roar::before {

        content      : '';
        position     : absolute;
        inset        : auto 0 0 0;
        height       : 4px;
        background   : repeating-linear-gradient(
                          90deg,
                          var(--paint-flag-yellow) 0,
                          var(--paint-flag-yellow) 6px,
                          #000 6px,
                          #000 12px
                       );

    }

    .btn-roar__sub {

        display        : block;
        font-family    : var(--type-mono);
        font-size      : 10.5px;
        text-transform : uppercase;
        letter-spacing : 1.7px;
        opacity        : .68;
        margin-bottom  : 2px;

    }

    .btn-roar__top {

        display        : block;
        font-family    : var(--type-banner);
        font-size      : 22px;
        letter-spacing : 1.5px;
        text-transform : uppercase;

    }

    .btn-roar:hover {

        transform     : translate(-1px, -2px);
        box-shadow    : 4px 5px 0 #000;

    }

    .btn-roar--ignite {

        background    : var(--paint-rust);
        color         : var(--paint-bone);
        border-color  : var(--paint-rust-burnt);

    }

        .btn-roar--ignite:hover {
            background : var(--paint-rust-burnt);
        }

    .btn-roar--coast {

        background    : transparent;
        color         : var(--paint-bone);
        border-color  : var(--paint-bone);

    }

        .btn-roar--coast:hover {
            background : var(--paint-bone);
            color      : var(--paint-asphalt);
        }



/* =============================================================
   r e s p o n s i v e   ( hero + topbar )
   ============================================================= */

@media (max-width: 880px) {

    .banner-throttle              { min-height: 540px; }
    .banner-throttle__weld        { padding: var(--space-5) var(--space-3) var(--space-4); }

    .banner-throttle__metra       { grid-template-columns: repeat(2, 1fr); }
    .metra-cell:nth-child(2)      { border-right: 0; }
    .metra-cell:nth-child(1),
    .metra-cell:nth-child(2)      { border-bottom: var(--rule-thin); border-color: var(--paint-line-soft); }

    .agestrip__pad {
        flex-direction : column;
        align-items    : flex-start;
        gap            : 6px;
    }

    .btn-roar      { min-width: 100%; }

}

@media (max-width: 520px) {

    h1 { font-size: 33px; }
    h2 { font-size: 26px; }

    .banner-throttle__paragraph   { font-size: 14.4px; }
    .logoslot__mark               { height: 30px; }

}