@import "https://fonts.googleapis.com/css2?family=Anton&family=Archivo+Black&family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@500;600;700&display=swap";

@font-face {
    font-family: Geist;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/fef07dbb0973bf53-s.12tyk43_3sh9u.woff2)format("woff2");
    unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
}

@font-face {
    font-family: Geist;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/8a480f0b521d4e75-s.0jzbimsg8vl84.woff2)format("woff2");
    unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116
}

@font-face {
    font-family: Geist;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/53b9e256198e5412-s.0-wfv7uh4i7h9.woff2)format("woff2");
    unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB
}

@font-face {
    font-family: Geist;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/7178b3e590c64307-s.0nx0ww8fni_q3.woff2)format("woff2");
    unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, 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: Geist;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/caa3a2e1cccd8315-s.p.09~u27dqhyhd6.woff2)format("woff2");
    unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: Geist Fallback;
    src: local(Arial);
    ascent-override: 95.94%;
    descent-override: 28.16%;
    line-gap-override: 0.0%;
    size-adjust: 104.76%
}

.geist_a71539c9-module__T19VSG__className {
    font-family: Geist, Geist Fallback;
    font-style: normal
}

.geist_a71539c9-module__T19VSG__variable {
    --font-geist-sans: "Geist", "Geist Fallback"
}

@font-face {
    font-family: Geist Mono;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/5ce348bf30bf5439-s.0zgw-jeven.3w.woff2)format("woff2");
    unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
}

@font-face {
    font-family: Geist Mono;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/4fa387ec64143e14-s.0wkzw~je483f-.woff2)format("woff2");
    unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116
}

@font-face {
    font-family: Geist Mono;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/6306c77e7c8268e4-s.0rhz0arwfsn~5.woff2)format("woff2");
    unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F
}

@font-face {
    font-family: Geist Mono;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/7d817b4c03b0c5f1-s.0l76wvqk9d84w.woff2)format("woff2");
    unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB
}

@font-face {
    font-family: Geist Mono;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/bbc41e54d2fcbd21-s.0k4k9394f2q-k.woff2)format("woff2");
    unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, 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: Geist Mono;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/797e433ab948586e-s.p.08e28id.o-okb.woff2)format("woff2");
    unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: Geist Mono Fallback;
    src: local(Arial);
    ascent-override: 74.67%;
    descent-override: 21.92%;
    line-gap-override: 0.0%;
    size-adjust: 134.59%
}

.geist_mono_8d43a2aa-module__8Li5zG__className {
    font-family: Geist Mono, Geist Mono Fallback;
    font-style: normal
}

.geist_mono_8d43a2aa-module__8Li5zG__variable {
    --font-geist-mono: "Geist Mono", "Geist Mono Fallback"
}

@layer theme {

    :root,
    :host {
        --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --spacing: .25rem;
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono)
    }
}

@layer base {

    *,
    :after,
    :before,
    ::backdrop {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    html,
    :host {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings, normal);
        font-variation-settings: var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color: transparent
    }

    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px
    }

    abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: inherit;
        font-weight: inherit
    }

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

    b,
    strong {
        font-weight: bolder
    }

    code,
    kbd,
    samp,
    pre {
        font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
        font-feature-settings: var(--default-mono-font-feature-settings, normal);
        font-variation-settings: var(--default-mono-font-variation-settings, normal);
        font-size: 1em
    }

    small {
        font-size: 80%
    }

    sub,
    sup {
        vertical-align: baseline;
        font-size: 75%;
        line-height: 0;
        position: relative
    }

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse
    }

    :-moz-focusring {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

    ol,
    ul,
    menu {
        list-style: none
    }

    img,
    svg,
    video,
    canvas,
    audio,
    iframe,
    embed,
    object {
        vertical-align: middle;
        display: block
    }

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

    button,
    input,
    select,
    optgroup,
    textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    :where(select:is([multiple], [size])) optgroup {
        font-weight: bolder
    }

    :where(select:is([multiple], [size])) optgroup option {
        padding-inline-start: 20px
    }

    ::file-selector-button {
        margin-inline-end: 4px
    }

    ::placeholder {
        opacity: 1
    }

    @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
        ::placeholder {
            color: currentColor
        }

        @supports (color:color-mix(in lab, red, red)) {
            ::placeholder {
                color: color-mix(in oklab, currentcolor 50%, transparent)
            }
        }
    }

    textarea {
        resize: vertical
    }

    ::-webkit-search-decoration {
        -webkit-appearance: none
    }

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit
    }

    ::-webkit-datetime-edit {
        display: inline-flex
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }

    ::-webkit-datetime-edit {
        padding-block: 0
    }

    ::-webkit-datetime-edit-year-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-month-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-day-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-hour-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-minute-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-second-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-millisecond-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0
    }

    ::-webkit-calendar-picker-indicator {
        line-height: 1
    }

    :-moz-ui-invalid {
        box-shadow: none
    }

    button,
    input:where([type=button], [type=reset], [type=submit]) {
        appearance: button
    }

    ::file-selector-button {
        appearance: button
    }

    ::-webkit-inner-spin-button {
        height: auto
    }

    ::-webkit-outer-spin-button {
        height: auto
    }

    [hidden]:where(:not([hidden=until-found])) {
        display: none !important
    }
}

@layer components;

@layer utilities {
    .visible {
        visibility: visible
    }

    .relative {
        position: relative
    }

    .start {
        inset-inline-start: var(--spacing)
    }

    .table {
        display: table
    }

    .antialiased {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale
    }
}

:root {
    --black: #171715;
    --ink: #161613;
    --red: #f12612;
    --orange: #ff6811;
    --yellow: #ffa900;
    --cream: #f1ead6;
    --green: #177a3a
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    background: var(--black);
    color: var(--cream);
    margin: 0;
    font-family: Inter, Arial, sans-serif
}

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

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

h1,
h2,
h3,
p {
    overflow-wrap: break-word
}

::selection {
    background: var(--cream);
    color: var(--red)
}

body:before {
    content: "";
    z-index: 100;
    pointer-events: none;
    opacity: .2;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.46'/%3E%3C/svg%3E");
    position: fixed;
    inset: 0
}

.topline {
    background: var(--cream);
    height: 32px;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: .09em;
    white-space: nowrap;
    font: 900 14px/32px Barlow Condensed;
    overflow: hidden
}

.topline-track {
    will-change: transform;
    width: max-content;
    animation: 30s linear infinite marquee;
    display: flex
}

.topline-track span {
    flex: none;
    padding-right: clamp(46px, 5vw, 110px);
    display: block
}

.header {
    background: var(--black);
    z-index: 20;
    border-bottom: 2px solid #3a352d;
    grid-template-columns: 170px 1fr auto;
    align-items: center;
    gap: 32px;
    height: 92px;
    padding: 8px 4vw;
    display: grid;
    position: relative
}

.logo img {
    object-fit: contain;
    width: 116px;
    height: 78px
}

.header nav {
    text-transform: uppercase;
    justify-content: center;
    gap: clamp(22px, 3.2vw, 54px);
    font: 800 17px/1 Barlow Condensed;
    display: flex
}

.header nav a {
    border-bottom: 3px solid #0000;
    padding: 12px 0
}

.header nav a:hover,
.header nav a:focus-visible {
    color: var(--orange);
    border-color: var(--orange)
}

.header-cta {
    background: var(--cream);
    color: var(--ink);
    text-transform: uppercase;
    box-shadow: 5px 5px 0 var(--red);
    align-items: center;
    gap: 25px;
    padding: 17px 22px;
    font: 900 18px/1 Barlow Condensed;
    transition: transform .18s, box-shadow .18s;
    display: flex
}

.header-cta:hover {
    box-shadow: 8px 8px 0 var(--red);
    transform: translate(-2px, -2px)
}

.hero {
    background: var(--red);
    grid-template-columns: 1fr;
    min-height: calc(100vh - 124px);
    display: grid;
    position: relative;
    overflow: hidden
}

.hero:after {
    content: "";
    width: 48vw;
    height: 48vw;
    box-shadow: inset 0 0 0 3vw var(--red), inset 0 0 0 6vw #ffa90057;
    pointer-events: none;
    border: 4vw solid #ffa90057;
    border-radius: 50%;
    position: absolute;
    bottom: -24vw;
    right: -10vw
}

.hero-copy {
    z-index: 2;
    flex-direction: column;
    justify-content: center;
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: clamp(70px, 9vw, 150px) clamp(38px, 8vw, 130px);
    display: flex;
    position: relative
}

.eyebrow {
    background: var(--black);
    text-transform: uppercase;
    letter-spacing: .08em;
    align-self: flex-start;
    margin: 0 0 20px;
    padding: 8px 12px;
    font: 800 18px/1 Barlow Condensed
}

.hero h1 {
    text-transform: uppercase;
    letter-spacing: -.045em;
    color: var(--cream);
    text-shadow: 8px 8px 0 var(--black);
    margin: 0;
    font: 400 clamp(110px, 15vw, 230px)/.76 Anton, sans-serif
}

.hero h1 span {
    display: block
}

.hero-intro {
    text-transform: uppercase;
    max-width: 740px;
    margin: 38px 0 26px;
    font: 700 clamp(19px, 1.6vw, 25px)/1.35 Barlow Condensed
}

.hero-date {
    border: 3px solid var(--black);
    background: #f1ead614;
    grid-template-columns: max-content max-content 1fr;
    max-width: 900px;
    display: grid
}

.hero-date div {
    padding: 15px 18px
}

.hero-date div+div {
    border-left: 3px solid var(--black)
}

.hero-date small {
    text-transform: uppercase;
    letter-spacing: .09em;
    margin-bottom: 6px;
    font: 800 12px/1 Barlow Condensed;
    display: block
}

.hero-date strong {
    white-space: nowrap;
    text-transform: uppercase;
    font: 900 clamp(16px, 1.5vw, 24px)/1 Barlow Condensed;
    display: block
}

.actions {
    gap: 12px;
    max-width: 900px;
    margin-top: 18px;
    display: flex
}

.button {
    border: 3px solid var(--black);
    text-transform: uppercase;
    min-height: 63px;
    box-shadow: 5px 5px 0 var(--black);
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    padding: 0 21px;
    font: 900 clamp(19px, 1.6vw, 25px)/1 Barlow Condensed;
    transition: transform .18s, box-shadow .18s;
    display: flex
}

.button:hover,
.button:focus-visible {
    box-shadow: 8px 8px 0 var(--black);
    transform: translate(-2px, -2px)
}

.button.black {
    background: var(--black);
    color: var(--cream);
    flex: 1
}

.button.cream {
    background: var(--cream);
    color: var(--ink);
    flex: 1
}

.hero-seal {
    border: 5px solid var(--black);
    background: var(--yellow);
    width: 126px;
    height: 126px;
    color: var(--black);
    box-shadow: 5px 5px 0 var(--black);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    gap: 6px;
    display: flex;
    position: absolute;
    top: 6vh;
    right: 3.5vw;
    transform: rotate(9deg)
}

.hero-seal b {
    font: 400 62px/.8 Anton
}

.hero-seal span {
    text-transform: uppercase;
    font: 900 15px/.9 Barlow Condensed
}

.countdown {
    background: var(--black);
    min-height: 150px;
    color: var(--cream);
    border-top: 2px solid #3a352d;
    border-bottom: 2px solid #3a352d;
    grid-template-columns: minmax(240px, .78fr) 1.8fr;
    align-items: center;
    gap: 38px;
    padding: 26px 6vw;
    display: grid
}

.countdown-copy {
    gap: 7px;
    display: grid
}

.countdown-copy .section-index {
    color: var(--orange);
    margin: 0;
    font-size: 13px
}

.countdown-copy h2 {
    text-transform: uppercase;
    letter-spacing: -.03em;
    margin: 0;
    font: 400 clamp(37px, 4vw, 62px)/.84 Anton
}

.countdown-copy>p:last-child {
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .8;
    margin: 0;
    font: 800 15px/1 Barlow Condensed
}

.countdown-grid {
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    display: grid
}

.countdown-unit {
    border-left: 2px solid var(--red);
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    padding: 5px 20px;
    display: flex
}

.countdown-unit:first-child {
    border-left: 0
}

.countdown-unit strong {
    color: var(--orange);
    letter-spacing: -.03em;
    font: 400 clamp(49px, 5vw, 76px)/.8 Anton
}

.countdown-unit span {
    text-transform: uppercase;
    font: 900 clamp(14px, 1.3vw, 19px)/1 Barlow Condensed
}

.countdown-message {
    background: var(--red);
    min-height: 88px;
    color: var(--cream);
    border: 3px solid var(--orange);
    box-shadow: 6px 6px 0 var(--orange);
    text-transform: uppercase;
    justify-content: center;
    align-items: center;
    gap: 18px;
    padding: 16px 24px;
    display: flex;
    transform: rotate(-1deg)
}

.countdown-message strong {
    font: 400 clamp(40px, 5vw, 72px)/.8 Anton
}

.countdown-message span {
    font: 900 clamp(16px, 1.5vw, 23px)/1 Barlow Condensed
}

.countdown-message.past {
    background: var(--cream);
    color: var(--ink);
    border-color: var(--green);
    box-shadow: 6px 6px 0 var(--green)
}

.section-index {
    text-transform: uppercase;
    letter-spacing: .1em;
    margin: 0 0 20px;
    font: 900 16px/1 Barlow Condensed
}

.jhayam {
    background: var(--cream);
    min-height: 850px;
    color: var(--ink);
    grid-template-columns: 1fr minmax(380px, 600px);
    align-items: center;
    gap: 7vw;
    padding: 90px 7vw;
    display: grid;
    position: relative;
    overflow: hidden
}

.jhayam:before {
    content: "";
    width: 46vw;
    height: 46vw;
    box-shadow: inset 0 0 0 3.5vw var(--cream), inset 0 0 0 7vw #f126122e;
    border: 4vw solid #f126122e;
    border-radius: 50%;
    position: absolute;
    bottom: -22vw;
    left: -13vw
}

.jhayam-copy {
    z-index: 2;
    position: relative
}

.direct {
    background: var(--red);
    color: var(--cream);
    text-transform: uppercase;
    margin: 18px 0 0;
    padding: 9px 13px;
    font: 900 20px/1 Barlow Condensed;
    display: inline-block;
    transform: rotate(-1deg)
}

.jhayam h2 {
    text-transform: uppercase;
    letter-spacing: -.05em;
    color: var(--cream);
    -webkit-text-stroke: 4px var(--ink);
    text-shadow: 9px 9px 0 var(--ink);
    margin: 20px 0 25px;
    font: 400 clamp(120px, 16vw, 250px)/.75 Anton
}

.lead {
    max-width: 720px;
    font: 700 clamp(20px, 1.7vw, 27px)/1.45 Barlow Condensed
}

.sound-note {
    text-transform: uppercase;
    align-items: center;
    gap: 20px;
    margin-top: 38px;
    font: 900 18px/1.1 Barlow Condensed;
    display: flex
}

.speaker-stack {
    background: var(--ink);
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    width: 98px;
    height: 74px;
    padding: 7px;
    display: grid;
    transform: rotate(-2deg)
}

.speaker-stack i {
    border: 2px solid var(--cream);
    display: block;
    position: relative
}

.speaker-stack i:after {
    content: "";
    border: 2px solid var(--cream);
    border-radius: 50%;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.jhayam-art {
    box-shadow: 18px 18px 0 var(--black);
    margin: 0;
    position: relative;
    transform: rotate(1.5deg)
}

.jhayam-art:before {
    content: "";
    z-index: 2;
    background: #eedca7c7;
    height: 35px;
    position: absolute;
    inset: -15px 18% auto;
    transform: rotate(-3deg)
}

.jhayam-art img {
    object-fit: cover;
    object-position: center top;
    width: 100%;
    max-height: 720px
}

.jhayam-art figcaption {
    background: var(--black);
    color: var(--cream);
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 9px 14px;
    font: 800 13px/1 Barlow Condensed;
    position: absolute;
    bottom: 28px;
    right: -24px;
    transform: rotate(2deg)
}

.secondary-acts {
    background: var(--orange);
    min-height: 850px;
    color: var(--ink);
    grid-template-columns: .84fr 1.2fr;
    align-items: center;
    gap: 7vw;
    padding: 90px 7vw;
    display: grid;
    position: relative;
    overflow: hidden
}

.secondary-acts:before {
    content: "";
    width: 52vw;
    height: 52vw;
    box-shadow: inset 0 0 0 3vw var(--orange), inset 0 0 0 6vw #ffa9004d;
    border: 4vw solid #ffa9004d;
    border-radius: 50%;
    position: absolute;
    bottom: -26vw;
    right: -12vw
}

.secondary-copy,
.secondary-art-grid {
    z-index: 1;
    position: relative
}

.secondary-copy h2 {
    text-transform: uppercase;
    letter-spacing: -.05em;
    color: var(--cream);
    text-shadow: 8px 8px 0 var(--ink);
    margin: 18px 0 24px;
    font: 400 clamp(104px, 12vw, 205px)/.72 Anton
}

.secondary-copy h2 em {
    color: var(--red);
    font-style: normal
}

.secondary-direct {
    background: var(--ink);
    margin-top: 8px;
    transform: rotate(-1deg)
}

.secondary-copy .lead {
    max-width: 560px
}

.secondary-art-grid {
    max-width: 620px;
    display: block
}

.pacha-art {
    box-shadow: 18px 18px 0 var(--black);
    margin: 0;
    position: relative;
    transform: rotate(-1.5deg)
}

.pacha-art:before {
    content: "";
    z-index: 2;
    background: #f1ead6cc;
    height: 35px;
    position: absolute;
    inset: -15px 20% auto;
    transform: rotate(3deg)
}

.pacha-art img {
    aspect-ratio: 3/4;
    object-fit: cover;
    object-position: center top;
    width: 100%
}

.pacha-art figcaption {
    background: var(--black);
    color: var(--cream);
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 9px 14px;
    font: 800 13px/1 Barlow Condensed;
    position: absolute;
    bottom: 28px;
    right: -24px;
    transform: rotate(2deg)
}

.capim {
    background: var(--black);
    min-height: 620px;
    color: var(--cream);
    grid-template-columns: 1fr minmax(330px, 520px);
    align-items: center;
    gap: 7vw;
    padding: 88px 7vw;
    display: grid;
    position: relative;
    overflow: hidden
}

.capim:before {
    content: "";
    width: 48vw;
    height: 48vw;
    box-shadow: inset 0 0 0 3vw var(--black), inset 0 0 0 6vw #21774259;
    border: 4vw solid #21774273;
    border-radius: 50%;
    position: absolute;
    top: -23vw;
    left: -12vw
}

.capim-copy,
.capim-poster {
    z-index: 1;
    position: relative
}

.capim-direct {
    background: var(--green);
    color: var(--cream);
    margin-top: 8px
}

.capim h2 {
    text-transform: uppercase;
    letter-spacing: -.05em;
    color: var(--cream);
    text-shadow: 8px 8px 0 var(--red);
    margin: 20px 0 25px;
    font: 400 clamp(110px, 14vw, 215px)/.72 Anton
}

.capim h2 em {
    color: var(--green);
    font-style: normal
}

.capim .lead {
    max-width: 620px
}

.capim-poster {
    background: var(--cream);
    min-height: 390px;
    color: var(--ink);
    border: 4px solid var(--cream);
    box-shadow: 16px 16px 0 var(--red);
    flex-direction: column;
    justify-content: flex-end;
    padding: 38px 42px;
    display: flex;
    transform: rotate(2deg)
}

.capim-poster:before {
    content: "";
    border: 3px solid var(--ink);
    opacity: .85;
    position: absolute;
    inset: 20px
}

.capim-poster .speaker-stack {
    background: var(--ink);
    position: absolute;
    top: 40px;
    right: 38px;
    transform: rotate(4deg)
}

.capim-poster strong {
    letter-spacing: -.04em;
    font: 400 clamp(72px, 8vw, 126px)/.72 Anton;
    position: relative
}

.capim-poster strong em {
    color: var(--green);
    font-style: normal
}

.capim-poster small {
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-top: 20px;
    font: 900 18px/1 Barlow Condensed;
    position: relative
}

.experience {
    background: var(--black);
    grid-template-columns: minmax(260px, .7fr) 1fr minmax(260px, .7fr);
    align-items: center;
    gap: 4vw;
    padding: 88px 4vw;
    display: grid;
    position: relative;
    overflow: hidden
}

.identity-card {
    margin: 0;
    box-shadow: 12px 12px #030302
}

.identity-card img {
    aspect-ratio: 3/4;
    object-fit: cover;
    width: 100%
}

.card-one {
    transform: rotate(-2.5deg)
}

.card-two {
    transform: rotate(2.5deg)
}

.experience-copy {
    text-align: center;
    z-index: 2;
    position: relative
}

.experience-copy h2 {
    text-transform: uppercase;
    letter-spacing: -.035em;
    margin: 0;
    font: 400 clamp(72px, 8vw, 128px)/.8 Anton
}

.experience-copy h2 em {
    color: var(--orange);
    font-style: normal
}

.experience-copy>p:not(.section-index) {
    max-width: 600px;
    margin: 32px auto 0;
    font: 700 21px/1.5 Barlow Condensed
}

.scribble {
    color: var(--green);
    letter-spacing: -.2em;
    margin-top: 20px;
    font: 900 74px/1 Arial;
    display: block;
    transform: rotate(-4deg)
}

.fair {
    background: var(--red);
    min-height: 680px;
    color: var(--cream);
    grid-template-columns: minmax(300px, .9fr) minmax(420px, 1.1fr);
    align-items: center;
    gap: 6vw;
    padding: 110px 7vw;
    display: grid;
    position: relative;
    overflow: hidden
}

.fair:before {
    content: "";
    background: repeating-linear-gradient(74deg, #0000 0 29px, #ffa9001f 30px 32px);
    position: absolute;
    inset: 0
}

.fair>* {
    z-index: 1;
    min-width: 0;
    position: relative
}

.fair-title {
    align-self: center;
    min-width: 0
}

.fair-kicker {
    text-transform: uppercase;
    letter-spacing: .1em;
    margin: 0 0 22px;
    font: 900 18px/1 Barlow Condensed
}

.fair-title h2 {
    text-transform: uppercase;
    letter-spacing: -.05em;
    max-width: 480px;
    color: var(--cream);
    text-shadow: 9px 9px 0 var(--black);
    margin: 0;
    font: 400 clamp(92px, 9vw, 150px)/.76 Anton
}

.fair-title h2 em {
    color: var(--orange);
    font-style: normal
}

.fair-copy {
    min-width: 0;
    max-width: 660px
}

.fair-copy p {
    text-transform: uppercase;
    max-width: 620px;
    margin: 0;
    font: 700 clamp(26px, 2.5vw, 40px)/1.08 Barlow Condensed
}

.fair-copy .button {
    width: 100%;
    min-height: 78px;
    margin-top: 38px;
    font-size: clamp(22px, 2vw, 32px)
}

.fair-copy small,
.service small {
    margin-top: 17px;
    font: 600 15px/1.45 Inter;
    display: block
}

.fair-burst {
    display: none
}

.service {
    background: var(--cream);
    color: var(--ink);
    padding: 95px 7vw 115px
}

.service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    display: grid
}

.service article {
    border: 4px solid var(--ink);
    min-height: 470px;
    box-shadow: 9px 9px 0 var(--ink);
    flex-direction: column;
    padding: 38px;
    display: flex;
    position: relative
}

.service article:first-child {
    background: var(--orange)
}

.service article:nth-child(2) {
    background: var(--yellow)
}

.service article:nth-child(3) {
    background: var(--red);
    color: var(--cream)
}

.service article:nth-child(3) a {
    border-color: var(--cream)
}

.tag {
    text-transform: uppercase;
    letter-spacing: .07em;
    border: 2px solid;
    align-self: flex-start;
    padding: 8px 11px;
    font: 900 14px/1 Barlow Condensed
}

.service-icon {
    font: 400 64px/1 Anton;
    position: absolute;
    top: 28px;
    right: 34px
}

.service h3 {
    text-transform: uppercase;
    letter-spacing: -.03em;
    max-width: 600px;
    margin: 70px 0 16px;
    font: 400 clamp(64px, 6vw, 98px)/.82 Anton
}

.service p {
    max-width: 580px;
    font: 700 19px/1.45 Barlow Condensed
}

.service article>a {
    border-top: 3px solid var(--ink);
    text-transform: uppercase;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 24px;
    font: 900 22px/1 Barlow Condensed;
    display: flex
}

footer {
    background: var(--black);
    border-top: 2px solid #3a352d;
    grid-template-columns: 116px 1fr auto;
    align-items: center;
    gap: 30px;
    padding: 42px 7vw;
    display: grid
}

footer img {
    object-fit: contain;
    width: 106px;
    height: 96px
}

.footer-info,
.footer-meta {
    text-transform: uppercase;
    gap: 7px;
    min-width: 0;
    font-family: Barlow Condensed;
    display: grid
}

.footer-info b {
    font-size: 22px
}

.footer-info span {
    opacity: .72;
    font-size: 16px
}

.footer-info a,
.footer-meta>a {
    text-transform: uppercase;
    font: 800 16px/1 Barlow Condensed
}

.footer-meta {
    text-align: right;
    justify-items: end;
    gap: 8px
}

.footer-meta span {
    opacity: .62;
    font: 600 12px/1.3 Inter
}

.footer-meta small {
    opacity: .72;
    font: 600 13px/1 Inter
}

.footer-meta small strong {
    color: var(--orange);
    font-weight: 800
}

.hero h1 {
    line-height: .88
}

.secondary-copy h2,
.capim h2,
.capim-poster strong {
    line-height: .86
}

.experience-copy h2 {
    line-height: .94
}

.fair-title h2 {
    line-height: .9
}

.service h3 {
    line-height: .96
}

@keyframes marquee {
    to {
        transform: translate(-16.6667%)
    }
}

@media (max-width:1100px) {
    .hero-copy {
        padding: 70px 7vw
    }

    .hero h1 {
        font-size: 15vw
    }

    .hero-seal {
        display: none
    }

    .jhayam {
        grid-template-columns: 1fr 44%;
        gap: 5vw
    }

    .secondary-acts {
        grid-template-columns: 1fr;
        gap: 45px
    }

    .secondary-copy {
        max-width: 700px
    }

    .secondary-art-grid {
        max-width: 850px
    }

    .capim {
        grid-template-columns: 1fr;
        gap: 45px
    }

    .capim-copy {
        max-width: 700px
    }

    .capim-poster {
        max-width: 620px
    }

    .experience {
        grid-template-columns: 1fr 1.2fr
    }

    .card-two {
        display: none
    }

    .fair {
        grid-template-columns: 1fr 1fr
    }

    .fair-burst {
        display: none
    }

    .service-grid {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width:800px) {
    .header {
        grid-template-columns: 120px 1fr
    }

    .logo img {
        width: 92px;
        height: 68px
    }

    .header nav {
        justify-content: flex-end
    }

    .header-cta {
        display: none
    }

    .hero-copy {
        padding: 56px 6vw 72px
    }

    .hero h1 {
        font-size: 22vw
    }

    .hero-date {
        grid-template-columns: 1fr
    }

    .hero-date div+div {
        border-left: 0;
        border-top: 3px solid var(--black)
    }

    .countdown {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .countdown-grid {
        max-width: 850px
    }

    .jhayam {
        grid-template-columns: 1fr;
        padding: 75px 6vw
    }

    .jhayam h2 {
        font-size: 27vw
    }

    .jhayam-art {
        max-width: 620px;
        margin: 20px auto 0
    }

    .secondary-acts,
    .capim,
    .fair,
    .service {
        padding: 75px 6vw
    }

    .secondary-art-grid {
        max-width: 850px
    }

    .capim-poster {
        max-width: 100%
    }

    .experience {
        grid-template-columns: 1fr
    }

    .card-one {
        max-width: 320px;
        margin: auto
    }

    .fair,
    .service-grid {
        grid-template-columns: 1fr
    }

    footer {
        grid-template-columns: 90px 1fr;
        padding: 38px 6vw
    }

    .footer-meta {
        text-align: left;
        grid-column: 1/-1;
        justify-items: start
    }
}

@media (max-width:560px) {
    .topline {
        height: 28px;
        font-size: 12px;
        line-height: 28px
    }

    .header {
        height: 82px;
        padding: 7px 5vw
    }

    .logo img {
        width: 88px;
        height: 68px
    }

    .header nav {
        display: none
    }

    .hero {
        min-height: auto
    }

    .hero-copy {
        padding: 48px 5vw 60px
    }

    .eyebrow {
        font-size: 15px
    }

    .hero h1 {
        text-shadow: 5px 5px 0 var(--black);
        font-size: 25vw
    }

    .hero-intro {
        margin-top: 28px
    }

    .actions {
        display: grid
    }

    .button {
        min-height: 58px;
        font-size: 19px
    }

    .countdown {
        padding: 28px 5vw
    }

    .countdown-copy h2 {
        font-size: 16vw
    }

    .countdown-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px
    }

    .countdown-unit {
        border-left: 0;
        border-top: 2px solid var(--red);
        padding: 8px 12px
    }

    .countdown-unit strong {
        font-size: 16vw
    }

    .countdown-unit span {
        font-size: 13px
    }

    .countdown-message {
        text-align: center;
        gap: 8px;
        min-height: 120px;
        padding: 16px;
        display: grid
    }

    .countdown-message strong {
        font-size: 16vw
    }

    .countdown-message span {
        font-size: 17px
    }

    .jhayam {
        padding: 64px 5vw
    }

    .jhayam h2 {
        -webkit-text-stroke: 2px var(--ink);
        text-shadow: 5px 5px 0 var(--ink);
        font-size: 28vw
    }

    .jhayam-art {
        box-shadow: 10px 10px 0 var(--black)
    }

    .secondary-acts,
    .capim,
    .fair,
    .service {
        padding: 65px 5vw
    }

    .secondary-copy h2 {
        font-size: 24vw
    }

    .secondary-art-grid {
        max-width: 100%
    }

    .pacha-art {
        max-width: 430px;
        margin: 0 auto
    }

    .capim h2 {
        font-size: 27vw
    }

    .capim-poster {
        min-height: 330px;
        padding: 28px
    }

    .capim-poster .speaker-stack {
        transform-origin: 100% 0;
        top: 29px;
        right: 26px;
        transform: scale(.82)rotate(4deg)
    }

    .capim-poster strong {
        font-size: 21vw
    }

    .experience {
        grid-template-columns: 1fr;
        padding: 64px 5vw
    }

    .card-one {
        max-width: 320px;
        margin: auto
    }

    .experience-copy h2 {
        font-size: 20vw
    }

    .service article {
        min-height: 440px;
        padding: 28px
    }

    .service h3 {
        font-size: 18vw
    }

    .service-icon {
        right: 25px
    }

    .fair-title h2 {
        font-size: 21vw
    }

    .fair-kicker {
        font-size: 15px
    }

    .fair-copy p {
        font-size: 19px
    }

    .fair-copy .button {
        min-height: 64px;
        margin-top: 28px;
        font-size: 19px
    }

    footer {
        grid-template-columns: 78px 1fr;
        gap: 20px;
        padding: 35px 5vw
    }

    footer img {
        width: 78px;
        height: 72px
    }

    .footer-info b {
        font-size: 18px
    }

    .footer-info span {
        font-size: 14px
    }

    .footer-meta {
        text-align: left;
        grid-column: 1/-1;
        justify-items: start
    }

    .footer-meta>a {
        grid-column: auto
    }
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    .topline-track {
        animation: none
    }

    .button,
    .header-cta {
        transition: none
    }
}

.jhayam h2 em {
    color: var(--red);
    font-style: normal
}

.fair-burst {
    visibility: hidden;
    display: none !important
}

.fair:after {
    content: none !important;
    display: none !important
}

.secondary-copy h2 {
    white-space: nowrap;
    font-size: clamp(86px, 9vw, 160px);
    line-height: .78
}

.experience-copy h2 {
    font-size: clamp(52px, 5.2vw, 84px);
    line-height: .9
}

.experience-copy h2 span {
    white-space: nowrap
}

@media (max-width:800px) {
    .secondary-copy h2 {
        font-size: clamp(76px, 17vw, 150px)
    }

    .experience-copy h2 {
        font-size: clamp(44px, 10.5vw, 82px)
    }
}

@media (max-width:560px) {
    .secondary-copy h2 {
        font-size: 19vw
    }

    .experience-copy h2 {
        font-size: 10.8vw
    }
}