/* Black Pyramid page-specific polish. Legacy flipbook styles were removed. */
.brand-mini {
    display: block;
    margin-top: 30px;
    width: 202px;
    height: 100px;
    line-height: 0;
    overflow: hidden
}

.brand-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 52%
}

.hero-art-wrap {
    animation: hero-art-enter 1.15s cubic-bezier(.2, .78, .2, 1) both
}

.hero-logo {
    animation: logo-rise 2.2s 1s cubic-bezier(.2, .8, .2, 1) both, logo-float 5s 3.2s ease-in-out infinite
}

@keyframes hero-art-enter {
    from {
        opacity: 0;
        transform: translateY(5%) scale(.96)
    }

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

@keyframes logo-rise {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 70px)) scale(.9)
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1)
    }
}

.story-copy {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1s ease, transform 1s ease
}

.story.is-revealed .story-copy {
    opacity: 1;
    transform: translateY(0)
}

:root {
    --page-dark: #0b0a09;
    --page-dark-soft: #15120f;
    --page-warm: #241b10;
    --page-paper: #f1ece3;
    --page-paper-shadow: #ddd2c0
}

html {
    background: var(--page-dark)
}

body {
    background: var(--page-dark)
}

section[id] {
    scroll-margin-top: 92px
}

.desktop-nav a,
.mobile-nav a {
    position: relative
}

.desktop-nav a[href="#top"],
.mobile-nav a[href="#top"] {
    order: 1
}

.desktop-nav a[href="#trailer"],
.mobile-nav a[href="#trailer"] {
    order: 2
}

.desktop-nav a[href="#story"],
.mobile-nav a[href="#story"] {
    order: 3
}

.desktop-nav a[href="#scenes"],
.mobile-nav a[href="#scenes"] {
    order: 4
}

.desktop-nav a[href="#features"],
.mobile-nav a[href="#features"] {
    order: 5
}

.desktop-nav a[href="#wishlist"],
.mobile-nav a[href="#wishlist"] {
    order: 6
}

.desktop-nav a.is-active,
.mobile-nav a.is-active {
    color: var(--gold-light)
}

.desktop-nav a.is-active::after,
.mobile-nav a.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -9px;
    height: 1px;
    background: var(--gold-light);
    box-shadow: 0 0 10px rgba(241, 207, 120, .55)
}

.desktop-nav .nav-cta.is-active {
    border-color: var(--gold-light);
    background: rgba(241, 207, 120, .08)
}

.desktop-nav .nav-cta.is-active::after {
    display: none
}

.hero-copy {
    z-index: 2;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .7)
}

.thesis {
    min-height: 310px;
    background: linear-gradient(105deg, var(--page-dark), var(--page-warm) 48%, var(--page-dark-soft))
}

.trailer,
.features {
    position: relative;
    isolation: isolate
}

.trailer::before,
.features::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: min(900px, 80vw);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(241, 207, 120, .24), transparent);
    transform: translateX(-50%)
}

.features {
    background: linear-gradient(180deg, var(--page-dark), #12100e 72%, var(--page-warm))
}

.scene-spread {
    background: linear-gradient(180deg, var(--page-warm) 0%, rgba(241, 236, 227, .98) 13%, var(--page-paper) 84%, var(--page-paper-shadow) 100%);
    box-shadow: inset 0 18px 34px rgba(9, 8, 7, .18), inset 0 -20px 40px rgba(67, 44, 18, .12)
}

.scene-spread::before {
    background: linear-gradient(180deg, rgba(36, 27, 16, .22), transparent 18%), linear-gradient(113deg, transparent 0 49.7%, rgba(111, 79, 37, .08) 50%, transparent 50.3%), radial-gradient(circle at 52% 50%, rgba(213, 177, 104, .13), transparent 52%)
}

.wishlist {
    background: var(--page-dark);
    box-shadow: inset 0 26px 55px rgba(0, 0, 0, .28)
}

.site-footer {
    background: #080807
}

/* The footer uses the same wide edge alignment as the header rather than the
   narrower content shell used by the article sections. */
.site-footer .section-shell {
    width: calc(100% - 96px);
    max-width: none
}

.site-footer .footer-callout {
    left: 48px
}

/* The background fills the viewport; the feature text retains a deliberate,
   readable inner measure instead of touching either edge. */
.features-layout.section-shell {
    width: min(1400px, calc(100% - 160px));
    max-width: none
}

.footer-bottom {
    grid-template-columns: minmax(0, 1.4fr) minmax(240px, .7fr);
    align-items: start
}

.company-name,
.company-contact,
.company-tagline {
    display: block;
    color: var(--muted);
    font: 10px/1.65 'DM Mono', monospace;
    letter-spacing: .03em
}

.company-name {
    margin-top: 10px
}

.company-tagline {
    max-width: 300px;
    margin-top: 7px;
    color: var(--paper);
    font: 500 15px/1.4 Manrope, Arial, sans-serif;
    letter-spacing: 0
}

.company-contact {
    max-width: 280px;
    margin: 3px 0 0;
    font-size: 9px;
    font-style: normal
}

.footer-links {
    gap: 10px !important
}

.footer-links b {
    color: var(--paper);
    font: 700 10px Manrope, Arial, sans-serif;
    letter-spacing: .1em
}

.footer-legal>span:nth-child(2) {
    max-width: 430px;
    text-align: center;
    line-height: 1.55
}

@media(min-width:821px) {
    .hero-art-wrap {
        width: min(840px, 53vw);
        margin-left: clamp(180px, 16vw, 300px)
    }

    .hero-copy {
        width: 330px
    }
}

@media(min-width:821px) and (max-width:1450px) {
    .hero-copy {
        width: 315px
    }

    .hero-copy h1 {
        font-size: clamp(42px, 4vw, 56px)
    }
}

@media(max-width:820px) {
    .site-footer .section-shell {
        width: calc(100% - 40px)
    }

    .site-footer .footer-callout {
        left: 20px
    }

    .features-layout.section-shell {
        width: calc(100% - 40px)
    }

    .footer-bottom {
        grid-template-columns: 1fr
    }

    .footer-legal>span:nth-child(2) {
        text-align: left;
        max-width: none
    }
}

.desktop-nav {
    display: flex
}

.mobile-nav {
    display: none
}

.story-layout {
    grid-template-columns: minmax(0, 650px) 1fr;
    gap: 0;
    min-height: 760px;
    padding-top: 110px;
    padding-bottom: 110px
}

.story-copy {
    max-width: 600px;
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 1.25s ease, transform 1.25s cubic-bezier(.2, .72, .2, 1)
}

.story-copy h2 {
    max-width: 620px;
    font-size: clamp(50px, 4.9vw, 76px);
    line-height: .98
}

.story-copy p:not(.section-label) {
    max-width: 570px;
    font-size: 14px;
    line-height: 1.85
}

.story.is-revealed .story-copy {
    opacity: 1;
    transform: translateY(0)
}

@media(min-width:821px) and (max-width:1450px) {
    .hero-side-note-left {
        display: none
    }
}

@media(max-width:820px) {
    .desktop-nav {
        display: none
    }

    .mobile-nav {
        display: flex
    }

    .desktop-nav a.is-active::after,
    .mobile-nav a.is-active::after {
        bottom: 1px
    }

    .story-layout {
        min-height: 0;
        padding-top: 92px;
        padding-bottom: 92px
    }

    .story-copy {
        max-width: none
    }

    .story-copy h2 {
        font-size: clamp(48px, 13vw, 70px)
    }

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

    .scene-spread {
        box-shadow: inset 0 12px 26px rgba(9, 8, 7, .16), inset 0 -14px 28px rgba(67, 44, 18, .1)
    }
}