/* ============================================================
   YOU FIRST FREE
   FINAL WARNING
   Standalone stylesheet
   ============================================================ */

.section--final-warning {
    position: relative;
    min-height: clamp(720px, 82vh, 940px);

    display: flex;
    align-items: center;

    overflow: hidden;
    isolation: isolate;

    padding-block: clamp(6rem, 10vw, 9rem);

    border-top: 1px solid rgba(230, 221, 201, 0.12);

    background: #030303;
}


/* ============================================================
   HOUSE BACKGROUND
   ============================================================ */

.section--final-warning .final-warning__background {
    position: absolute;
    inset: 0;

    z-index: -3;

    background:
        url("../images/blackwood-house-experience.png")
        67% 50% / cover no-repeat;

    filter:
        brightness(0.68)
        contrast(1.12)
        saturate(0.82);

    transform: scale(1.035);
}


.section--final-warning .final-warning__background::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.99) 0%,
            rgba(0, 0, 0, 0.92) 24%,
            rgba(0, 0, 0, 0.67) 45%,
            rgba(0, 0, 0, 0.28) 72%,
            rgba(0, 0, 0, 0.16) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.12),
            rgba(0, 0, 0, 0.32)
        );
}


/* ============================================================
   FOG
   ============================================================ */

.section--final-warning .final-warning__fog {
    position: absolute;

    left: -10%;
    right: -10%;
    bottom: -8%;

    z-index: -1;

    height: 34%;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            rgba(195, 202, 204, 0.13),
            transparent 68%
        );

    filter: blur(32px);

    animation:
        finalWarningFog 8s ease-in-out infinite alternate;
}


@keyframes finalWarningFog {
    from {
        transform: translateX(-2%);
    }

    to {
        transform: translateX(3%);
    }
}


/* ============================================================
   SHELL
   ============================================================ */

.section--final-warning .final-warning__shell {
    position: relative;

    width: 100%;
}


.section--final-warning .final-warning__content {
    width: min(100%, 700px);

    padding-left: clamp(1rem, 2vw, 1.35rem);

    border-left:
        2px solid rgba(198, 141, 63, 0.72);
}


/* ============================================================
   TITLE
   ============================================================ */

.section--final-warning h2.final-warning__title {
    margin: 0.3rem 0 1.5rem;

    color: var(--color-paper, #eee5d0);

    font-family:
        "Haunted Hill Regular",
        Georgia,
        serif;

    font-size:
        clamp(5rem, 9vw, 8.3rem);

    font-weight: 400;

    line-height: 0.82;

    letter-spacing: 0;

    text-shadow:
        0 8px 30px rgba(0, 0, 0, 0.62);
}


.section--final-warning .final-warning__lead {
    max-width: 52ch;

    margin: 0 0 1rem;

    color:
        rgba(230, 221, 201, 0.82);

    font-family:
        var(--font-display, Georgia, serif);

    font-size:
        clamp(1.12rem, 2vw, 1.42rem);

    line-height: 1.55;
}


.section--final-warning .final-warning__line {
    margin: 0 0 2rem;

    color:
        var(--color-tungsten, #d99a43);

    font-family:
        "Haunted Hill Regular",
        Georgia,
        serif;

    font-size:
        clamp(2.1rem, 4vw, 3.4rem);

    line-height: 1;
}


/* ============================================================
   ACTIONS
   ============================================================ */

.section--final-warning .final-warning__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 1rem 1.2rem;
}


/* ============================================================
   FINAL TICKET
   ============================================================ */

.section--final-warning .final-ticket {
    position: relative;

    display: grid;

    grid-template-columns:
        58px
        minmax(0, 1fr);

    width: min(100%, 390px);

    min-height: 116px;

    overflow: hidden;

    color: #25180f;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(64, 44, 28, 0.03) 0 1px,
            transparent 1px 4px
        ),
        #c9b996;

    text-decoration: none;

    box-shadow:
        0 22px 52px rgba(0, 0, 0, 0.52);

    transform: rotate(-1.2deg);

    transition:
        transform 180ms ease,
        filter 180ms ease;

    clip-path:
        polygon(
            1% 1%,
            13% 0.3%,
            27% 0.9%,
            41% 0.2%,
            56% 0.8%,
            72% 0.2%,
            88% 0.9%,
            99% 0.3%,
            99.5% 28%,
            99% 58%,
            99.5% 99%,
            84% 99.5%,
            66% 98.9%,
            47% 99.6%,
            28% 98.9%,
            10% 99.5%,
            0.5% 99%,
            1% 64%,
            0.4% 32%
        );
}


.section--final-warning .final-ticket:hover {
    transform:
        rotate(0deg)
        translateY(-5px);

    filter: brightness(1.05);
}


.section--final-warning .final-ticket__stub {
    display: flex;
    align-items: center;
    justify-content: center;

    writing-mode: vertical-rl;

    transform: rotate(180deg);

    border-left:
        2px dashed rgba(55, 38, 24, 0.4);

    color: #752b23;

    font-family:
        "Haunted Hill Regular",
        Georgia,
        serif;

    font-size: 1.3rem;

    text-transform: uppercase;
}


.section--final-warning .final-ticket__main {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 1rem 1.2rem;
}


.section--final-warning .final-ticket__main small {
    color:
        rgba(43, 29, 18, 0.62);

    font-family:
        "Courier New",
        monospace;

    font-size: 0.64rem;

    font-weight: 800;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.section--final-warning .final-ticket__main strong {
    margin: 0.2rem 0 0.15rem;

    color: #7b2d25;

    font-family:
        "Haunted Hill Regular",
        Georgia,
        serif;

    font-size: 2.7rem;

    font-weight: 400;

    line-height: 0.92;
}


.section--final-warning .final-ticket__main em {
    color:
        rgba(43, 29, 18, 0.7);

    font-family:
        var(--font-display, Georgia, serif);

    font-size: 0.8rem;

    font-style: normal;
}


/* ============================================================
   SECONDARY LINK
   ============================================================ */

.section--final-warning .final-warning__secondary {
    color:
        rgba(230, 221, 201, 0.76);

    font-size: 0.7rem;

    font-weight: 800;

    letter-spacing: 0.1em;

    text-decoration: underline;

    text-underline-offset: 4px;

    text-transform: uppercase;
}


/* ============================================================
   STATUS
   ============================================================ */

.section--final-warning .final-warning__status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 0.55rem 0.75rem;

    width: max-content;
    max-width: 100%;

    margin-top: 2rem;

    padding: 0.65rem 0.8rem;

    border:
        1px solid rgba(137, 49, 42, 0.42);

    background:
        rgba(31, 8, 7, 0.68);

    font-family:
        "Courier New",
        monospace;

    text-transform: uppercase;
}


.section--final-warning .final-warning__status span,
.section--final-warning .final-warning__status small {
    color:
        rgba(230, 221, 201, 0.5);

    font-size: 0.62rem;

    font-weight: 800;
}


.section--final-warning .final-warning__status strong {
    color: #c85047;

    font-size: 0.72rem;
}


/* ============================================================
   FRONT PORCH NOTE
   ============================================================ */

.section--final-warning .final-warning__note {
    position: absolute;

    right: 2%;
    bottom: -4rem;

    width:
        min(300px, 28vw);

    padding: 1rem 1.1rem;

    background:
        #bfaf8c;

    color:
        #321d14;

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.52);

    transform: rotate(5deg);
}


.section--final-warning .final-warning__note span,
.section--final-warning .final-warning__note strong {
    display: block;
}


.section--final-warning .final-warning__note span {
    color: #7a2d25;

    font-family:
        "Courier New",
        monospace;

    font-size: 0.62rem;

    font-weight: 800;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.section--final-warning .final-warning__note strong {
    margin: 0.25rem 0 0.3rem;

    font-family:
        "Haunted Hill Regular",
        Georgia,
        serif;

    font-size: 2.1rem;

    font-weight: 400;
}


.section--final-warning .final-warning__note p {
    margin: 0;

    font-family:
        "Courier New",
        monospace;

    font-size: 0.67rem;

    line-height: 1.45;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    .section--final-warning .final-warning__note {
        right: 1%;

        width:
            min(260px, 34vw);
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 640px) {

    .section--final-warning {
        min-height: 780px;
    }


    .section--final-warning .final-warning__background {
        background-position:
            64% center;
    }


    .section--final-warning h2.final-warning__title {
        font-size:
            clamp(4rem, 18vw, 6rem);
    }


    .section--final-warning .final-warning__actions {
        align-items: stretch;

        flex-direction: column;
    }


    .section--final-warning .final-ticket {
        width: 100%;
    }


    .section--final-warning .final-warning__secondary {
        width: max-content;
    }


    .section--final-warning .final-warning__status {
        align-items: flex-start;

        flex-direction: column;
    }


    .section--final-warning .final-warning__note {
        position: relative;

        right: auto;
        bottom: auto;

        width:
            min(88%, 320px);

        margin:
            3rem 0
            0 auto;
    }
}

/* FINAL CTA BOUNDARIES START */

/*
 * The atmosphere may span the whole viewport.
 * The actual composition does not.
 */

.section--final-warning .final-warning__shell {
    width:
        min(
            calc(100% - clamp(2rem, 8vw, 8rem)),
            1180px
        );

    max-width: 1180px;

    margin-inline: auto;
}


/*
 * Keep the copy column readable instead of stretching
 * with ultra-wide displays.
 */

.section--final-warning .final-warning__content {
    width: min(100%, 680px);
    max-width: 680px;
}


/*
 * The porch note is positioned relative to the bounded shell,
 * not the edge of the browser window.
 */

.section--final-warning .final-warning__note {
    right: 0;
}


/*
 * Prevent the ticket itself from becoming visually oversized.
 */

.section--final-warning .final-ticket {
    width: min(100%, 390px);
    max-width: 390px;
}


/*
 * Large desktop breathing room without letting the
 * composition drift apart.
 */

@media (min-width: 1500px) {

    .section--final-warning .final-warning__shell {
        width:
            min(
                calc(100% - 8rem),
                1180px
            );
    }

    .section--final-warning .final-warning__note {
        right: 0;
    }
}


/*
 * Tablet keeps normal responsive margins.
 */

@media (max-width: 900px) {

    .section--final-warning .final-warning__shell {
        width:
            min(
                calc(100% - 3rem),
                1180px
            );
    }
}


/*
 * Mobile gets safe side padding.
 */

@media (max-width: 640px) {

    .section--final-warning .final-warning__shell {
        width:
            calc(100% - 2rem);

        max-width: none;
    }

    .section--final-warning .final-warning__content {
        width: 100%;
        max-width: none;
    }

    .section--final-warning .final-ticket {
        width: 100%;
        max-width: none;
    }
}

/* FINAL CTA BOUNDARIES END */