:root {
    --ink: #0b0a09;
    --ink-2: #131110;
    --paper: #ede6d7;
    --muted: #a59c8e;
    --gold: #d4a447;
    --gold-light: #f1cf78;
    --blue: #6ca7bf;
    --line: rgba(241, 207, 120, .2);
    --shell: min(1200px, calc(100% - 96px))
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    background: var(--ink)
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--paper);
    font-family: Manrope, Arial, sans-serif;
    overflow-x: hidden
}

body.modal-open {
    overflow: hidden
}

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

button {
    font: inherit;
    color: inherit;
    cursor: pointer
}

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

.section-shell {
    width: var(--shell);
    margin-inline: auto
}

.grain {
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    opacity: .055;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 82px;
    padding: 0 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 40;
    transition: .35s ease;
    border-bottom: 1px solid transparent
}

.site-header.is-scrolled {
    background: rgba(11, 10, 9, .84);
    border-bottom-color: var(--line);
    backdrop-filter: blur(18px)
}

.brand-mini {
    display: flex;
    align-items: center;
    gap: 13px;
    font: 700 10px Manrope, sans-serif;
    letter-spacing: .25em
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--gold-light);
    color: var(--gold-light);
    font: 600 10px Cinzel, serif;
    transform: rotate(45deg);
    letter-spacing: 0
}

.brand-mark::first-line {
    transform: rotate(-45deg)
}

.desktop-nav {
    display: flex;
    gap: 31px;
    align-items: center;
    font: 500 10px 'DM Mono', monospace;
    letter-spacing: .12em;
    text-transform: uppercase
}

.desktop-nav a {
    color: var(--muted);
    transition: color .25s
}

.desktop-nav a:hover {
    color: var(--paper)
}

.desktop-nav .nav-cta {
    padding: 10px 17px;
    border: 1px solid var(--gold);
    color: var(--gold-light)
}

.desktop-nav .nav-cta span {
    font-size: 14px;
    margin-left: 6px
}

.menu-toggle,
.mobile-nav {
    display: none
}

.hero {
    position: relative;
    min-height: 100svh;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 55%, #302713 0, #13110e 30%, var(--ink) 66%)
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, var(--ink), transparent 22%, transparent 74%, rgba(11, 10, 9, .56));
    z-index: -1
}

.hero-grid {
    position: absolute;
    inset: 0;
    opacity: .13;
    background-image: linear-gradient(rgba(241, 207, 120, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(241, 207, 120, .11) 1px, transparent 1px);
    background-size: 86px 86px;
    mask-image: linear-gradient(90deg, transparent, black 25%, black 75%, transparent)
}

.hero-topline,
.hero-bottomline {
    position: absolute;
    left: 48px;
    right: 48px;
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font: 10px 'DM Mono', monospace;
    letter-spacing: .15em
}

.hero-topline {
    top: 115px
}

.hero-bottomline {
    bottom: 31px;
    align-items: center
}

.hero-bottomline a {
    color: var(--gold-light);
    font-size: 9px
}

.hero-bottomline b {
    font-size: 15px;
    margin-left: 8px;
    font-weight: 400
}

.hero-side-note {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--muted);
    font: 9px 'DM Mono', monospace;
    letter-spacing: .18em;
    line-height: 1.75;
    writing-mode: vertical-rl
}

.hero-side-note i {
    display: block;
    width: 1px;
    height: 60px;
    background: var(--gold)
}

.hero-side-note-left {
    left: 46px;
    top: 37%;
    transform: rotate(180deg)
}

.hero-side-note-right {
    right: 46px;
    top: 36%
}

.hero-art-wrap {
    position: relative;
    width: min(920px, 78vw);
    margin-top: -2vh;
    animation: rise 1.1s cubic-bezier(.2, .75, .2, 1) both
}

.hero-art {
    width: 100%;
    filter: saturate(.82) contrast(1.07) drop-shadow(0 28px 45px rgba(0, 0, 0, .58))
}

.hero-art::after {
    content: ""
}

.hero-aura {
    position: absolute;
    inset: 18% 10%;
    z-index: -1;
    background: radial-gradient(ellipse, rgba(209, 164, 69, .34), rgba(66, 118, 142, .09) 48%, transparent 72%);
    filter: blur(42px);
    transform: rotate(-6deg)
}

.hero-logo {
    position: absolute;
    left: 50%;
    top: 88%;
    width: min(460px, 54%);
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 15px 16px rgba(0, 0, 0, .8));
    animation: float 5s ease-in-out infinite
}

.hero-copy {
    position: absolute;
    left: max(48px, calc((100% - 1200px)/2));
    bottom: 12%;
    width: 360px
}

.kicker,
.section-label {
    color: var(--gold-light);
    font: 10px 'DM Mono', monospace;
    letter-spacing: .19em;
    text-transform: uppercase
}

.kicker {
    margin: 0 0 18px
}

.hero-copy h1 {
    margin: 0 0 20px;
    font: 600 clamp(38px, 4.2vw, 64px)/.97 Cinzel, Georgia, serif;
    letter-spacing: -.045em
}

.hero-copy h1 em,
.section-heading h2 em,
.story-copy h2 em,
.features-heading h2 em,
.manifesto em,
.wishlist-content h2 em,
.modal-panel h2 em {
    color: var(--gold-light);
    font-style: normal
}

.hero-copy>p:not(.kicker) {
    max-width: 300px;
    margin: 0 0 25px;
    color: #c4bbab;
    font-size: 13px;
    line-height: 1.75
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 21px;
    border: 1px solid transparent;
    font: 700 10px Manrope, sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    transition: .25s ease
}

.button span {
    font-size: 16px;
    font-weight: 400
}

.button-gold {
    background: linear-gradient(110deg, #b6842c, #f0cd74);
    border-color: var(--gold-light);
    color: #171109;
    box-shadow: 0 8px 30px rgba(212, 164, 71, .16)
}

.button-gold:hover {
    transform: translateY(-3px);
    filter: brightness(1.08);
    box-shadow: 0 12px 35px rgba(212, 164, 71, .3)
}

.thesis {
    position: relative;
    min-height: 340px;
    padding: 104px max(48px, calc((100% - 1200px)/2));
    display: grid;
    grid-template-columns: 1fr 2.3fr 1fr;
    gap: 50px;
    align-items: center;
    background: linear-gradient(105deg, #11100e, #211a10 48%, #10100f);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.thesis .section-label {
    align-self: start;
    white-space: nowrap
}

.section-label span {
    display: inline-block;
    width: 34px;
    height: 1px;
    background: currentColor;
    margin-left: 10px;
    vertical-align: middle
}

.thesis-copy {
    max-width: 720px;
    margin: 0;
    font: 500 clamp(24px, 3.1vw, 43px)/1.18 Cinzel, Georgia, serif;
    letter-spacing: -.025em
}

.thesis-copy em {
    color: var(--gold-light);
    font-style: normal
}

.thesis-stamp {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--gold);
    font: 46px Cinzel, serif;
    opacity: .8
}

.thesis-stamp span {
    font: 9px 'DM Mono', monospace;
    line-height: 1.45;
    letter-spacing: .16em
}

.trailer {
    padding-top: 150px;
    padding-bottom: 145px
}

.section-heading {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    column-gap: 12%;
    align-items: end;
    margin-bottom: 56px
}

.section-heading .section-label {
    align-self: start
}

.section-heading h2 {
    margin: 0;
    font: 600 clamp(51px, 6.8vw, 94px)/.91 Cinzel, Georgia, serif;
    letter-spacing: -.055em
}

.section-lede {
    max-width: 350px;
    margin: 0 0 3px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.85
}

.trailer-card {
    position: relative;
    overflow: hidden;
    background: #090909;
    border: 1px solid var(--line);
    box-shadow: 0 35px 80px rgba(0, 0, 0, .35)
}

.trailer-video {
    width: 100%;
    aspect-ratio: 1.9;
    object-fit: cover;
    opacity: .8;
    filter: saturate(.65) contrast(1.14)
}

.video-shade {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, transparent 20%, rgba(0, 0, 0, .46)), linear-gradient(0deg, rgba(0, 0, 0, .7), transparent 42%);
    pointer-events: none
}

.video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 82px;
    height: 82px;
    border: 1px solid var(--gold-light);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(10, 10, 9, .3);
    color: var(--gold-light);
    transform: translate(-50%, -50%);
    transition: .25s
}

.video-play:hover {
    background: var(--gold-light);
    color: var(--ink);
    transform: translate(-50%, -50%) scale(1.08)
}

.video-play.is-hidden {
    opacity: 0;
    pointer-events: none
}

.video-play span {
    margin-left: 4px
}

.video-sound {
    position: absolute;
    right: 25px;
    top: 22px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border: 1px solid rgba(241, 207, 120, .55);
    background: rgba(8, 8, 7, .5);
    color: var(--paper);
    text-transform: uppercase
}

.video-sound span {
    color: var(--gold-light);
    font-size: 15px
}

.video-sound small {
    font: 9px 'DM Mono', monospace;
    letter-spacing: .1em
}

.video-sound.is-on {
    color: var(--gold-light)
}

.video-meta {
    position: absolute;
    left: 25px;
    right: 25px;
    bottom: 22px;
    display: flex;
    justify-content: space-between;
    font: 10px 'DM Mono', monospace;
    letter-spacing: .14em
}

.trailer-note {
    margin: 13px 0 0;
    text-align: right;
    color: var(--muted);
    font: 9px 'DM Mono', monospace;
    letter-spacing: .15em
}

.trailer-note span {
    color: var(--gold);
    padding: 0 8px
}

.story {
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.story-backdrop {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #0b0a09 0%, rgba(11, 10, 9, .88) 35%, rgba(11, 10, 9, .15) 100%), url("../materials/heng.png") center/cover;
    opacity: .48;
    filter: saturate(.55)
}

.story-layout {
    position: relative;
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 8%;
    align-items: center;
    min-height: 900px;
    padding-top: 130px;
    padding-bottom: 130px
}

.story-copy {
    max-width: 430px
}

.story-copy h2 {
    margin: 0 0 28px;
    font: 600 clamp(47px, 5.8vw, 84px)/.93 Cinzel, Georgia, serif;
    letter-spacing: -.055em
}

.story-copy p:not(.section-label) {
    margin: 0 0 18px;
    color: #c3bbac;
    font-size: 13px;
    line-height: 1.9
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    margin-top: 17px;
    color: var(--gold-light);
    font: 10px 'DM Mono', monospace;
    letter-spacing: .15em;
    text-transform: uppercase
}

.text-link span {
    font-size: 16px
}

.features {
    padding-top: 155px;
    padding-bottom: 150px
}

.features-layout {
    display: grid;
    grid-template-columns: .9fr 1.4fr;
    gap: 12%
}

.features-heading h2 {
    margin: 36px 0 0;
    font: 600 clamp(50px, 5.8vw, 83px)/.92 Cinzel, Georgia, serif;
    letter-spacing: -.055em
}

.features-list {
    border-top: 1px solid var(--line)
}

.feature {
    display: grid;
    grid-template-columns: 52px 1fr 30px;
    gap: 23px;
    align-items: start;
    padding: 28px 0;
    border-bottom: 1px solid rgba(241, 207, 120, .16);
    transition: .25s
}

.feature:hover {
    padding-left: 10px
}

.feature-number,
.feature-arrow {
    color: var(--gold);
    font: 11px 'DM Mono', monospace;
    letter-spacing: .1em
}

.feature h3 {
    margin: 0 0 10px;
    font: 600 20px Cinzel, Georgia, serif
}

.feature p {
    max-width: 460px;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.75
}

.feature-arrow {
    text-align: right;
    font-size: 17px
}

.manifesto {
    min-height: 470px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 50px;
    padding: 80px max(48px, calc((100% - 1200px)/2));
    background: radial-gradient(ellipse at 50% 48%, #30220d, #15120f 36%, #0b0a09 73%);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.manifesto p {
    margin: 0;
    text-align: center;
    font: 600 clamp(47px, 6.5vw, 86px)/.93 Cinzel, Georgia, serif;
    letter-spacing: -.05em
}

.manifesto>span {
    grid-column: 2;
    justify-self: center;
    color: var(--muted);
    font: 9px 'DM Mono', monospace;
    letter-spacing: .24em
}

.manifesto-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold))
}

.manifesto-line:last-of-type {
    background: linear-gradient(90deg, var(--gold), transparent)
}

.wishlist {
    position: relative;
    min-height: 830px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #12100d
}

.wishlist-image {
    position: absolute;
    inset: 0;
    background: #12100d;
    filter: saturate(.55)
}

.wishlist-image::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(0deg, rgba(9, 8, 7, .93), rgba(9, 8, 7, .42) 54%, rgba(9, 8, 7, .68));
    pointer-events: none
}

.wishlist-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover
}

.wishlist-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 540px;
    padding: 105px 24px;
    text-align: center
}

.final-logo {
    width: min(380px, 78vw);
    margin-bottom: 34px;
    filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .8))
}

.wishlist-content h2 {
    margin: 22px 0;
    font: 600 clamp(53px, 7vw, 90px)/.92 Cinzel, Georgia, serif;
    letter-spacing: -.06em
}

.wishlist-content>p:not(.section-label) {
    max-width: 370px;
    margin: 0 0 28px;
    color: #c3bbac;
    font-size: 13px;
    line-height: 1.8
}

.wishlist-content>small {
    margin-top: 16px;
    color: var(--muted);
    font: 9px 'DM Mono', monospace;
    letter-spacing: .15em
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 25px;
    background: rgba(2, 2, 2, .82);
    backdrop-filter: blur(16px);
    opacity: 0;
    visibility: hidden;
    transition: .3s
}

.modal.is-open {
    opacity: 1;
    visibility: visible
}

.modal-panel {
    position: relative;
    width: min(510px, 100%);
    padding: 58px;
    background: linear-gradient(145deg, #2a2114, #12100d 72%);
    border: 1px solid var(--line);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
    transform: translateY(18px);
    transition: .35s
}

.modal.is-open .modal-panel {
    transform: translateY(0)
}

.modal-panel h2 {
    margin: 22px 0 17px;
    font: 600 47px/.94 Cinzel, Georgia, serif;
    letter-spacing: -.05em
}

.modal-panel>p:not(.section-label) {
    max-width: 360px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8
}

.modal-panel small {
    display: block;
    margin-top: 17px;
    color: var(--muted);
    font: 10px 'DM Mono', monospace
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 18px;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 30px;
    font-weight: 300
}

.site-footer {
    background: #080807
}

.footer-image {
    position: relative;
    min-height: 380px;
    overflow: hidden;
    border-top: 1px solid var(--line)
}

.footer-image>img {
    width: 100%;
    height: 100%;
    min-height: 380px;
    object-fit: cover;
    filter: saturate(.55) brightness(.45)
}

.footer-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(8, 8, 7, .7), transparent 50%, rgba(8, 8, 7, .55)), linear-gradient(0deg, rgba(8, 8, 7, .86), transparent 65%)
}

.footer-callout {
    position: absolute;
    left: max(48px, calc((100% - 1200px)/2));
    bottom: 48px;
    display: flex;
    align-items: center;
    gap: 28px;
    color: var(--gold-light);
    font: 10px 'DM Mono', monospace;
    letter-spacing: .18em
}

.button-outline {
    padding: 13px 18px;
    border-color: var(--gold-light);
    color: var(--gold-light)
}

.button-outline:hover {
    background: var(--gold-light);
    color: var(--ink)
}

.footer-bottom {
    display: grid;
    grid-template-columns: 1.4fr 1fr .7fr;
    gap: 50px;
    padding: 42px 0 36px;
    border-bottom: 1px solid var(--line)
}

.footer-logo {
    width: 175px
}

.footer-bottom p {
    margin: 13px 0 0;
    color: var(--muted);
    font: 9px 'DM Mono', monospace;
    letter-spacing: .15em
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 13px
}

.footer-links a,
.footer-legal {
    color: var(--muted);
    font: 10px 'DM Mono', monospace;
    letter-spacing: .12em;
    text-transform: uppercase
}

.footer-links a:hover,
.footer-legal a:hover {
    color: var(--gold-light)
}

.footer-legal {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 19px 0 23px;
    font-size: 9px
}

.footer-legal a {
    color: var(--gold)
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(3%) scale(.97)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

@keyframes float {

    0%,
    100% {
        transform: translate(-50%, -50%)
    }

    50% {
        transform: translate(-50%, calc(-50% - 8px))
    }
}

@media(max-width:820px) {
    :root {
        --shell: calc(100% - 40px)
    }

    .site-header {
        height: 68px;
        padding: 0 20px
    }

    .desktop-nav {
        display: none
    }

    .menu-toggle {
        display: block;
        width: 34px;
        padding: 8px 0;
        border: 0;
        background: none
    }

    .menu-toggle span {
        display: block;
        height: 1px;
        margin: 6px 0;
        background: var(--paper)
    }

    .mobile-nav {
        position: absolute;
        left: 0;
        right: 0;
        top: 68px;
        display: flex;
        flex-direction: column;
        gap: 3px;
        padding: 15px 20px 20px;
        background: rgba(11, 10, 9, .97);
        border-bottom: 1px solid var(--line);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: .25s
    }

    .mobile-nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0)
    }

    .mobile-nav a {
        padding: 13px 0;
        color: var(--paper);
        font: 10px 'DM Mono', monospace;
        letter-spacing: .14em;
        text-transform: uppercase
    }

    .hero {
        min-height: 800px;
        align-items: center
    }

    .hero-topline,
    .hero-bottomline {
        left: 20px;
        right: 20px;
        font-size: 8px
    }

    .hero-topline {
        top: 92px
    }

    .hero-bottomline {
        bottom: 20px;
        align-items: end
    }

    .hero-bottomline span:first-child,
    .hero-bottomline span:last-child {
        max-width: 95px;
        line-height: 1.5
    }

    .hero-bottomline a {
        font-size: 8px;
        text-align: center
    }

    .hero-side-note {
        display: none
    }

    .hero-art-wrap {
        width: 138vw;
        margin-top: -11vh
    }

    .hero-logo {
        width: 66%;
        top: 58%
    }

    .hero-copy {
        left: 20px;
        bottom: 100px;
        width: calc(100% - 40px)
    }

    .hero-copy h1 {
        font-size: clamp(40px, 12vw, 62px)
    }

    .hero-copy>p:not(.kicker) {
        max-width: 270px;
        font-size: 12px
    }

    .thesis {
        min-height: 380px;
        display: block;
        padding: 82px 20px
    }

    .thesis-copy {
        margin-top: 34px;
        font-size: 30px
    }

    .thesis-stamp {
        margin-top: 34px;
        justify-self: start
    }

    .trailer {
        padding-top: 95px;
        padding-bottom: 100px
    }

    .section-heading {
        display: block;
        margin-bottom: 35px
    }

    .section-heading h2 {
        margin: 20px 0 25px;
        font-size: clamp(50px, 14vw, 76px)
    }

    .section-lede {
        font-size: 12px
    }

    .trailer-video {
        aspect-ratio: 1/1.15
    }

    .video-meta {
        left: 15px;
        right: 15px;
        bottom: 16px;
        font-size: 8px
    }

    .video-sound {
        right: 14px;
        top: 14px
    }

    .video-sound small {
        font-size: 8px
    }

    .video-play {
        width: 64px;
        height: 64px
    }

    .trailer-note {
        font-size: 8px;
        line-height: 1.6
    }

    .story-layout {
        display: block;
        min-height: 0;
        padding-top: 100px;
        padding-bottom: 100px
    }

    .story-copy {
        max-width: none
    }

    .story-copy h2 {
        font-size: clamp(48px, 13vw, 72px);
        margin-top: 20px
    }

    .story-copy p:not(.section-label) {
        font-size: 12px
    }

    .features {
        padding-top: 100px;
        padding-bottom: 100px
    }

    .features-layout {
        display: block;
    }

    .features-heading h2 {
        margin: 22px 0 55px;
        font-size: clamp(50px, 13vw, 72px)
    }

    .feature {
        grid-template-columns: 35px 1fr 20px;
        gap: 12px;
        padding: 23px 0
    }

    .feature h3 {
        font-size: 17px
    }

    .feature p {
        font-size: 11px
    }

    .manifesto {
        min-height: 430px;
        display: flex;
        flex-direction: column;
        gap: 28px;
        padding: 75px 20px
    }

    .manifesto-line {
        width: 100%
    }

    .manifesto>span {
        order: 3
    }

    .wishlist {
        min-height: 770px
    }

    .wishlist-content {
        padding: 90px 20px
    }

    .final-logo {
        width: min(360px, 88vw)
    }

    .wishlist-content h2 {
        font-size: clamp(54px, 15vw, 78px)
    }

    .modal-panel {
        padding: 48px 27px 35px
    }

    .modal-panel h2 {
        font-size: 39px
    }

    .footer-image,
    .footer-image>img {
        min-height: 290px
    }

    .footer-callout {
        left: 20px;
        right: 20px;
        bottom: 28px;
        justify-content: space-between;
        gap: 12px;
        font-size: 8px
    }

    .footer-bottom {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
        padding: 32px 0
    }

    .footer-bottom>div:first-child {
        grid-column: 1/-1
    }

    .footer-legal {
        flex-direction: column;
        gap: 11px;
        padding-bottom: 24px;
        font-size: 8px
    }
}

@media(prefers-reduced-motion:reduce) {

    *,
    *:before,
    *:after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important
    }
}