@font-face {
    font-family: "Haunted Hill Regular";
    src: url("../fonts/HauntedHillRegular-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Haunted Hill Rough";
    src: url("../fonts/HauntedHillRough-Rough.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

:root {
    --color-soot: #0b0b0a;
    --color-soot-soft: #151411;
    --color-paper: #e6ddc9;
    --color-paper-deep: #cfc3aa;
    --color-oxide: #782e2b;
    --color-oxide-bright: #944039;
    --color-tungsten: #c89046;
    --color-ash: #918d83;

    --color-line-dark: rgba(230, 221, 201, 0.16);
    --color-line-light: rgba(17, 17, 15, 0.16);
    --color-focus: #f2c46d;

    --font-display: Georgia, "Times New Roman", serif;
    --font-sans: Arial, Helvetica, sans-serif;

    --shell: 1180px;
    --gutter: clamp(1rem, 3vw, 2rem);
    --section-space: clamp(4.5rem, 9vw, 8.5rem);

    --radius-small: 0.25rem;
    --transition-fast: 160ms ease;
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    background: var(--color-soot);
    color: var(--color-paper);
    font-family: var(--font-sans);
    line-height: 1.6;
    text-rendering: optimizeLegibility;
}

body.nav-open {
    overflow: hidden;
}

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

a {
    color: inherit;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 4px;
}

button,
input,
select,
textarea {
    font: inherit;
}

.site-shell {
    width: min(100% - (var(--gutter) * 2), var(--shell));
    margin-inline: auto;
}


/* ============================================================
   SKIP LINK
   ============================================================ */

.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 1000;
    padding: 0.65rem 0.9rem;
    background: var(--color-paper);
    color: var(--color-soot);
    transform: translateY(-160%);
    transition: transform var(--transition-fast);
}

.skip-link:focus {
    transform: translateY(0);
}


/* ============================================================
   HEADER
   ============================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(200, 144, 70, 0.18);
    background: rgba(7, 7, 6, 0.93);
    backdrop-filter: blur(14px);
}

.site-header__inner {
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}


/* ============================================================
   BRAND
   ============================================================ */

.brand {
    display: inline-flex;
    flex-direction: column;
    gap: 0.05rem;
    color: inherit;
    line-height: 1;
    text-decoration: none;
}

.brand__name {
    font-family: "Haunted Hill Regular", var(--font-display);
    font-size: clamp(2.2rem, 2.9vw, 3rem);
    font-weight: 400;
    line-height: 0.82;
    letter-spacing: 0.015em;
}

.brand__meta {
    margin-top: 0.5rem;
    color: var(--color-ash);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}


/* ============================================================
   NAVIGATION
   ============================================================ */

.site-nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.6rem);
}

.site-nav a {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.site-nav a:not(.site-nav__cta):hover {
    color: var(--color-tungsten);
}

.site-nav__cta,
.button {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-oxide-bright);
    border-radius: var(--radius-small);
    background: var(--color-oxide-bright);
    color: var(--color-paper);
    padding: 0.78rem 1.15rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.site-nav__cta:hover,
.button:hover {
    border-color: var(--color-tungsten);
    background: var(--color-tungsten);
    color: var(--color-soot);
    transform: translateY(-1px);
}

.button--secondary {
    border-color: rgba(230, 221, 201, 0.5);
    background: rgba(0, 0, 0, 0.34);
    color: var(--color-paper);
}

.button--secondary:hover {
    border-color: var(--color-paper);
    background: rgba(230, 221, 201, 0.1);
    color: var(--color-paper);
}


/* ============================================================
   NAV TOGGLE
   ============================================================ */

.nav-toggle {
    display: none;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}


/* ============================================================
   GENERIC SECTIONS
   ============================================================ */

.section {
    position: relative;
    padding-block: var(--section-space);
    border-bottom: 1px solid var(--color-line-dark);
}

.section--dark {
    background: var(--color-soot-soft);
}

.section--paper {
    background: var(--color-paper);
    color: var(--color-soot);
}

.section--final-cta {
    min-height: 55vh;
    display: grid;
    align-items: center;
}


/* ============================================================
   HERO
   ============================================================ */

.section--hero {
    min-height: calc(100vh - 92px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 0;
    background-image: url("../images/blackwood-house-hero.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(4, 4, 4, 0.95) 0%,
            rgba(4, 4, 4, 0.86) 30%,
            rgba(4, 4, 4, 0.52) 48%,
            rgba(4, 4, 4, 0.14) 69%,
            rgba(4, 4, 4, 0.12) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.2) 0%,
            rgba(0, 0, 0, 0.02) 54%,
            rgba(0, 0, 0, 0.56) 100%
        );
}

.hero-shell {
    position: relative;
    z-index: 3;
    flex: 1;
    width: min(100% - (var(--gutter) * 2), var(--shell));
    display: flex;
    align-items: center;
    padding-top: clamp(4rem, 8vw, 7rem);
    padding-bottom: clamp(6rem, 10vw, 9rem);
}

.hero-content {
    width: min(100%, 750px);
}

.hero-eyebrow {
    margin-bottom: 1rem;
}

.section h1.hero-wordmark {
    position: relative;
    isolation: isolate;
    display: inline-block;
    margin: 0;
    color: var(--color-paper);
    font-family: "Haunted Hill Rough", "Haunted Hill Regular", var(--font-display);
    font-size: clamp(4.6rem, 11vw, 9.2rem);
    font-weight: 400;
    line-height: 0.82;
    letter-spacing: 0.015em;
    text-shadow:
        0 3px 1px rgba(0, 0, 0, 0.65),
        0 12px 30px rgba(0, 0, 0, 0.55);
}

.section h1.hero-wordmark::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    z-index: 2;
    color: transparent;
    background:
        radial-gradient(
            ellipse at 4% 18%,
            rgba(7, 7, 6, 0.95) 0 1.8%,
            transparent 2.1%
        ),
        radial-gradient(
            ellipse at 12% 67%,
            rgba(7, 7, 6, 0.88) 0 1.5%,
            transparent 1.9%
        ),
        radial-gradient(
            ellipse at 23% 38%,
            rgba(7, 7, 6, 0.92) 0 1.1%,
            transparent 1.5%
        ),
        radial-gradient(
            ellipse at 33% 79%,
            rgba(7, 7, 6, 0.94) 0 1.8%,
            transparent 2.2%
        ),
        radial-gradient(
            ellipse at 47% 24%,
            rgba(7, 7, 6, 0.92) 0 1.35%,
            transparent 1.7%
        ),
        radial-gradient(
            ellipse at 57% 61%,
            rgba(7, 7, 6, 0.95) 0 1.65%,
            transparent 2%
        ),
        radial-gradient(
            ellipse at 69% 33%,
            rgba(7, 7, 6, 0.9) 0 1.25%,
            transparent 1.6%
        ),
        radial-gradient(
            ellipse at 79% 73%,
            rgba(7, 7, 6, 0.95) 0 1.75%,
            transparent 2.1%
        ),
        radial-gradient(
            ellipse at 91% 26%,
            rgba(7, 7, 6, 0.9) 0 1.5%,
            transparent 1.9%
        ),
        repeating-linear-gradient(
            102deg,
            transparent 0 28px,
            rgba(7, 7, 6, 0.75) 28px 29px,
            transparent 29px 59px
        );
    -webkit-background-clip: text;
    background-clip: text;
    opacity: 0.48;
    pointer-events: none;
}

.section h1.hero-wordmark::after {
    content: "";
    position: absolute;
    left: 1%;
    right: 1%;
    top: 12%;
    bottom: 6%;
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(
            5deg,
            transparent 0 18%,
            rgba(5, 5, 5, 0.82) 18.2% 18.9%,
            transparent 19.1% 41%,
            rgba(5, 5, 5, 0.72) 41.2% 41.9%,
            transparent 42.1% 72%,
            rgba(5, 5, 5, 0.58) 72.2% 72.6%,
            transparent 72.8% 100%
        );
    opacity: 0.32;
}

.hero-lead {
    margin: 1.4rem 0 0;
    max-width: 21ch;
    color: var(--color-paper);
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.5vw, 2.8rem);
    line-height: 1.08;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}

.hero-facts {
    width: min(100%, 720px);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2.5rem;
}

.hero-fact {
    position: relative;
    min-width: 0;
    padding-right: 1rem;
}

.hero-fact:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0.2rem;
    right: 0;
    width: 1px;
    height: calc(100% - 0.4rem);
    background: rgba(230, 221, 201, 0.3);
}

.hero-fact__label,
.hero-fact__value {
    display: block;
}

.hero-fact__label {
    color: var(--color-paper-deep);
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.hero-fact__value {
    margin-top: 0.08rem;
    color: var(--color-tungsten);
    font-size: clamp(0.95rem, 1.5vw, 1.22rem);
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 2.3rem;
}

.hero-bottom-note {
    position: relative;
    z-index: 4;
    width: 100%;
    border-top: 1px solid rgba(230, 221, 201, 0.18);
    background:
        linear-gradient(
            90deg,
            rgba(7, 7, 6, 0.92),
            rgba(7, 7, 6, 0.72)
        );
    backdrop-filter: blur(8px);
}

.hero-bottom-note__inner {
    min-height: 108px;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 6rem);
    padding-block: 1.4rem;
}

.hero-bottom-note__label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--color-tungsten);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.hero-bottom-note__title {
    display: block;
    color: var(--color-paper);
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.8vw, 2.2rem);
    line-height: 1.05;
}

.hero-bottom-note__copy {
    margin: 0;
    max-width: 58ch;
    color: rgba(230, 221, 201, 0.78);
    font-size: 0.9rem;
    line-height: 1.65;
}


/* ============================================================
   THE HAUNT - BLACKWOOD DOSSIER
   ============================================================ */

.section--haunt {
    position: relative;

    min-height: 780px;

    display: flex;
    align-items: center;

    overflow: hidden;

    padding-block:
        clamp(5.5rem, 9vw, 8.5rem);

    isolation: isolate;

    background:
        radial-gradient(
            circle at 76% 40%,
            rgba(120, 46, 43, 0.16),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #080807 0%,
            #0c0b09 100%
        );
}


/*
 * Approved dossier concept artwork.
 *
 * The left side is deliberately buried under a dark gradient.
 * This keeps all important content live and editable while the
 * artwork supplies the chaotic case-file composition on the right.
 */

.haunt-dossier-art {
    position: absolute;
    inset: 0;

    z-index: -3;

    background-image:
        url("../images/the-haunt-dossier-concept.png");

    background-repeat: no-repeat;

    background-position:
        center center;

    background-size:
        cover;

    filter:
        saturate(0.86)
        contrast(1.08)
        brightness(0.84);

    transform: scale(1.015);
}


.section--haunt::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -2;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(7, 7, 6, 0.99) 0%,
            rgba(7, 7, 6, 0.98) 26%,
            rgba(7, 7, 6, 0.91) 40%,
            rgba(7, 7, 6, 0.66) 53%,
            rgba(7, 7, 6, 0.16) 70%,
            rgba(7, 7, 6, 0.05) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.12) 0%,
            rgba(0, 0, 0, 0) 70%,
            rgba(0, 0, 0, 0.44) 100%
        );
}


/*
 * Old film / dirty paper texture.
 */

.section--haunt::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    opacity: 0.42;

    background:
        radial-gradient(
            circle at 4% 16%,
            rgba(120, 46, 43, 0.42) 0 5px,
            transparent 6px
        ),
        radial-gradient(
            circle at 6% 18%,
            rgba(120, 46, 43, 0.24) 0 16px,
            transparent 17px
        ),
        radial-gradient(
            circle at 40% 78%,
            rgba(120, 46, 43, 0.2) 0 7px,
            transparent 8px
        ),
        repeating-linear-gradient(
            96deg,
            transparent 0 37px,
            rgba(255, 255, 255, 0.014) 37px 38px,
            transparent 38px 76px
        );
}


.haunt-dossier {
    position: relative;

    z-index: 4;

    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);

    align-items: center;

    min-height: 620px;
}


.haunt-dossier__copy {
    position: relative;

    width: min(100%, 610px);

    padding:
        1rem 0
        2rem;
}


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

.haunt-dossier__index {
    display: inline-block;

    margin-bottom: 0.6rem;

    padding-bottom: 0.35rem;

    border-bottom:
        1px solid rgba(201, 144, 70, 0.35);

    color: var(--color-tungsten);
}


.section h2.haunt-dossier__title {
    position: relative;

    display: inline-block;

    margin: 0;

    color: var(--color-paper);

    font-family:
        "Haunted Hill Regular",
        var(--font-display);

    font-size:
        clamp(4.6rem, 8vw, 7.5rem);

    font-weight: 400;

    line-height: 0.82;

    letter-spacing: 0;

    text-shadow:
        0 5px 16px rgba(0, 0, 0, 0.55);
}


/*
 * Drippy / damaged lower edge.
 */

.section h2.haunt-dossier__title::after {
    content: "";

    position: absolute;

    left: 8%;
    right: 4%;

    bottom: -0.16rem;

    height: 8px;

    background:
        linear-gradient(
            90deg,
            transparent 0 12%,
            var(--color-paper) 12% 13%,
            transparent 13% 31%,
            var(--color-paper) 31% 32%,
            transparent 32% 55%,
            var(--color-paper) 55% 56%,
            transparent 56% 100%
        );

    opacity: 0.24;
}


.haunt-dossier__scratch {
    position: relative;

    width: min(100%, 520px);
    height: 16px;

    margin:
        1rem 0
        1.55rem;

    overflow: hidden;
}


.haunt-dossier__scratch::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 7px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--color-paper) 0 22%,
            transparent 22% 25%,
            var(--color-tungsten) 25% 33%,
            transparent 33% 36%,
            var(--color-paper) 36% 73%,
            transparent 73% 78%,
            var(--color-oxide-bright) 78% 100%
        );

    opacity: 0.52;

    transform:
        rotate(-0.4deg);
}


/* ============================================================
   COPY
   ============================================================ */

.haunt-dossier__lead {
    margin:
        0 0
        1.3rem;

    max-width: 31ch;

    color: var(--color-paper);

    font-family:
        var(--font-display);

    font-size:
        clamp(1.65rem, 2.5vw, 2.25rem);

    line-height: 1.22;

    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.76);
}


.haunt-dossier__body {
    max-width: 60ch;

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

    font-size: 0.98rem;

    line-height: 1.72;

    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.94);
}


/* ============================================================
   EVIDENCE CARDS
   ============================================================ */

.haunt-evidence {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 0.7rem;

    margin-top: 2.2rem;

    perspective: 900px;
}


.haunt-evidence__card {
    position: relative;

    min-height: 96px;

    overflow: hidden;

    padding:
        1.05rem
        1rem;

    border:
        1px solid rgba(45, 32, 22, 0.28);

    color: #1c1712;

    background:
        radial-gradient(
            circle at 18% 15%,
            rgba(120, 46, 43, 0.12),
            transparent 28%
        ),
        repeating-linear-gradient(
            1deg,
            rgba(50, 38, 26, 0.032) 0 1px,
            transparent 1px 4px
        ),
        #d2c2a4;

    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.42);

    transform-origin:
        center center;
}


.haunt-evidence__card::before {
    content: "";

    position: absolute;

    inset: 5px;

    border:
        1px solid rgba(59, 44, 30, 0.16);

    pointer-events: none;
}


.haunt-evidence__card--one {
    transform:
        rotate(-2.2deg)
        translateY(2px);
}


.haunt-evidence__card--two {
    transform:
        rotate(1deg)
        translateY(-3px);
}


.haunt-evidence__card--three {
    transform:
        rotate(-1.1deg)
        translateY(3px);
}


.haunt-evidence__label {
    position: relative;
    z-index: 2;

    display: block;

    margin-bottom: 0.45rem;

    color: rgba(24, 18, 13, 0.74);

    font-size: 0.66rem;
    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    text-decoration:
        underline;

    text-underline-offset:
        0.18rem;
}


.haunt-evidence__value {
    position: relative;
    z-index: 2;

    display: block;

    font-family:
        "Courier New",
        monospace;

    font-size:
        clamp(0.95rem, 1.5vw, 1.16rem);

    font-weight: 800;

    letter-spacing: 0.02em;

    text-transform: uppercase;
}


.haunt-evidence__value--red {
    color: #762f2b;
}


.haunt-evidence__fingerprint {
    position: absolute;

    right: 10px;
    bottom: -7px;

    width: 48px;
    aspect-ratio: 1;

    border-radius: 50%;

    opacity: 0.3;

    background:
        repeating-radial-gradient(
            ellipse at center,
            transparent 0 3px,
            #542e25 3px 4px,
            transparent 4px 7px
        );

    transform:
        rotate(18deg)
        scaleY(1.22);
}


/* ============================================================
   CASE STAMP
   ============================================================ */

.haunt-case-stamp {
    position: absolute;

    left: 56%;
    bottom: -2.4rem;

    width: max-content;

    border:
        2px solid rgba(120, 46, 43, 0.42);

    padding:
        0.45rem
        0.7rem;

    color:
        rgba(150, 57, 51, 0.64);

    font-family:
        "Courier New",
        monospace;

    font-size: 0.74rem;
    font-weight: 800;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    transform:
        rotate(-7deg);

    opacity: 0.82;
}


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

.haunt-dossier-mobile-art {
    display: none;

    margin: 0;

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

    box-shadow:
        0 25px 55px rgba(0, 0, 0, 0.55);

    transform:
        rotate(-1.5deg);
}


.haunt-dossier-mobile-art img {
    width: 100%;

    height: auto;
}


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

@media (max-width: 980px) {

    .section--haunt {
        min-height: 720px;
    }


    .section--haunt::before {
        background:
            linear-gradient(
                90deg,
                rgba(7, 7, 6, 0.99) 0%,
                rgba(7, 7, 6, 0.97) 39%,
                rgba(7, 7, 6, 0.8) 57%,
                rgba(7, 7, 6, 0.28) 100%
            );
    }


    .haunt-dossier {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(260px, 0.7fr);
    }


    .haunt-evidence {
        grid-template-columns:
            repeat(3, minmax(130px, 1fr));
    }
}


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

@media (max-width: 760px) {

    .section--haunt {
        min-height: 0;

        display: block;

        padding-block:
            4.5rem;

        background:
            radial-gradient(
                circle at 90% 10%,
                rgba(120, 46, 43, 0.16),
                transparent 26%
            ),
            #090807;
    }


    .haunt-dossier-art {
        display: none;
    }


    .section--haunt::before {
        background:
            linear-gradient(
                180deg,
                rgba(7, 7, 6, 0.98),
                rgba(7, 7, 6, 0.9)
            );
    }


    .haunt-dossier {
        display: block;

        min-height: 0;
    }


    .haunt-dossier__copy {
        width: 100%;

        max-width: 100%;
    }


    .section h2.haunt-dossier__title {
        font-size:
            clamp(4.2rem, 19vw, 6.5rem);
    }


    .haunt-dossier__lead {
        max-width: 100%;

        font-size:
            clamp(1.45rem, 6vw, 1.9rem);
    }


    .haunt-evidence {
        grid-template-columns: 1fr;

        gap: 0.8rem;
    }


    .haunt-evidence__card {
        min-height: 84px;
    }


    .haunt-case-stamp {
        position: static;

        margin-top: 1.8rem;

        transform:
            rotate(-3deg);
    }


    .haunt-dossier-mobile-art {
        display: block;

        margin-top: 3.5rem;
    }
}
/* ============================================================
   FOUNDATION PLACEHOLDERS
   ============================================================ */

.section-placeholder {
    border: 1px dashed var(--color-line-dark);
    padding: clamp(1.25rem, 3vw, 2.25rem);
}

.section--paper .section-placeholder {
    border-color: var(--color-line-light);
}

.section h1,
.section h2,
.section h3 {
    margin-top: 0;
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 0.98;
}

.section h2 {
    margin-bottom: 1rem;
    font-size: clamp(2.6rem, 7vw, 6rem);
    letter-spacing: -0.035em;
}

.section h3 {
    margin-bottom: 0.75rem;
    font-size: clamp(1.55rem, 3vw, 2.3rem);
}

.section p {
    max-width: 68ch;
}

.eyebrow,
.section-index {
    margin: 0 0 0.8rem;
    color: var(--color-tungsten);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.section--paper .section-index,
.section--paper .eyebrow {
    color: var(--color-oxide);
}

.stub-grid {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
}

.stub-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stub-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stub-card {
    min-height: 200px;
    border: 1px solid var(--color-line-dark);
    padding: 1.4rem;
}


/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
    padding-top: clamp(3rem, 7vw, 5.5rem);
    background: #080807;
    color: var(--color-paper);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
}

.brand--footer {
    margin-bottom: 1.2rem;
}

.site-footer__tagline,
.site-footer address,
.site-footer p {
    color: var(--color-ash);
    font-style: normal;
}

.site-footer__heading {
    margin: 0 0 0.8rem;
    color: var(--color-paper);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.site-footer__links {
    display: grid;
    gap: 0.4rem;
}

.site-footer__bottom {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 3.5rem;
    border-top: 1px solid var(--color-line-dark);
    padding-block: 1.4rem;
    font-size: 0.78rem;
}


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

@media (max-width: 920px) {

    .nav-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0.65rem 0;
        font-size: 0.75rem;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .nav-toggle__icon,
    .nav-toggle__icon::before,
    .nav-toggle__icon::after {
        width: 24px;
        height: 2px;
        background: currentColor;
    }

    .nav-toggle__icon {
        position: relative;
    }

    .nav-toggle__icon::before,
    .nav-toggle__icon::after {
        content: "";
        position: absolute;
        left: 0;
    }

    .nav-toggle__icon::before {
        top: -7px;
    }

    .nav-toggle__icon::after {
        top: 7px;
    }

    .site-header__inner {
        min-height: 84px;
    }

    .brand__name {
        font-size: 2rem;
    }

    .site-nav {
        position: fixed;
        inset: 85px 0 auto 0;
        max-height: calc(100vh - 85px);
        display: none;
        align-items: stretch;
        flex-direction: column;
        gap: 0;
        overflow-y: auto;
        border-bottom: 1px solid var(--color-line-dark);
        background: var(--color-soot);
        padding: 1rem var(--gutter) 1.4rem;
    }

    .site-nav.is-open {
        display: flex;
    }

    .site-nav a {
        border-bottom: 1px solid var(--color-line-dark);
        padding: 1rem 0;
    }

    .site-nav__cta {
        margin-top: 1rem;
        border-bottom: 1px solid var(--color-oxide) !important;
        padding-inline: 1rem !important;
    }

    .section--hero {
        min-height: calc(100vh - 84px);
    }

    .hero-shell {
        min-height: 690px;
        padding-top: 5rem;
        padding-bottom: 6rem;
    }

    .hero-content {
        width: min(100%, 650px);
    }

    .hero-facts {
        max-width: 560px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.2rem 1rem;
    }

    .hero-fact:nth-child(2)::after {
        display: none;
    }

    .hero-bottom-note__inner {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .haunt-grid {
        grid-template-columns: 1fr;
    }

    .haunt-copy {
        max-width: 100%;
    }

    .haunt-visual {
        min-height: 440px;
    }

    .haunt-tag {
        right: 8%;
    }

    .stub-grid--three,
    .stub-grid--two,
    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}


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

@media (max-width: 640px) {

    :root {
        --section-space: 4.25rem;
    }

    .site-header__inner {
        min-height: 76px;
    }

    .brand__name {
        font-size: 1.7rem;
    }

    .brand__meta {
        margin-top: 0.4rem;
        font-size: 0.58rem;
    }

    .site-nav {
        inset-block-start: 77px;
        max-height: calc(100vh - 77px);
    }

    .section--hero {
        min-height: auto;
        background-position: 68% center;
    }

    .hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(4, 4, 4, 0.94) 0%,
                rgba(4, 4, 4, 0.78) 62%,
                rgba(4, 4, 4, 0.42) 100%
            ),
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.16),
                rgba(0, 0, 0, 0.54)
            );
    }

    .hero-shell {
        min-height: 680px;
        align-items: flex-start;
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .section h1.hero-wordmark {
        font-size: clamp(4.1rem, 22vw, 6rem);
        line-height: 0.78;
    }

    .hero-lead {
        max-width: 15ch;
        font-size: clamp(1.6rem, 7vw, 2.15rem);
    }

    .hero-facts {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .hero-fact {
        padding-right: 0.5rem;
    }

    .hero-fact:nth-child(2)::after {
        display: none;
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-actions .button {
        width: 100%;
    }

    .hero-bottom-note__inner {
        padding-block: 1.2rem;
    }

    .haunt-copy__lead {
        font-size: 1.35rem;
    }

    .haunt-notes {
        grid-template-columns: 1fr;
    }

    .haunt-visual {
        min-height: 360px;
    }

    .haunt-photo {
        width: min(100%, 300px);
        transform: rotate(-4deg);
    }

    .haunt-tag {
        top: 6%;
        right: 2%;
        padding: 0.7rem 0.8rem;
    }

    .haunt-tag span {
        font-size: 0.8rem;
    }

    .stub-grid--three,
    .stub-grid--two,
    .site-footer__grid {
        grid-template-columns: 1fr;
    }

    .site-footer__bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.5rem;
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* THE HAUNT BAKED TEXT CLEANUP START */

/*
 * The approved dossier concept contains presentation text baked
 * into the source artwork. This mask buries only that left-side
 * mockup text while preserving the photograph, papers, blood,
 * blueprints and evidence collage on the right.
 */

.haunt-dossier-art::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            #080807 0%,
            #080807 31%,
            rgba(8, 8, 7, 0.995) 39%,
            rgba(8, 8, 7, 0.96) 45%,
            rgba(8, 8, 7, 0.78) 51%,
            rgba(8, 8, 7, 0.34) 58%,
            rgba(8, 8, 7, 0.08) 65%,
            transparent 72%
        );
}


/*
 * Add subtle physical texture back into the cleaned area so it
 * does not become a dead flat black rectangle.
 */

.haunt-dossier__copy::before {
    content: "";

    position: absolute;

    top: -3rem;
    right: -3rem;
    bottom: -3rem;
    left: -12vw;

    z-index: -1;

    pointer-events: none;

    opacity: 0.22;

    background:
        radial-gradient(
            circle at 11% 19%,
            rgba(120, 46, 43, 0.28) 0 4px,
            transparent 5px
        ),
        radial-gradient(
            circle at 18% 72%,
            rgba(120, 46, 43, 0.16) 0 9px,
            transparent 10px
        ),
        repeating-linear-gradient(
            97deg,
            transparent 0 46px,
            rgba(230, 221, 201, 0.025) 46px 47px,
            transparent 47px 93px
        );
}


/*
 * Keep the live copy firmly above the artwork and cleanup layers.
 */

.haunt-dossier__copy {
    isolation: isolate;
}


/* Tablet keeps more of the dossier photo visible. */

@media (max-width: 980px) {

    .haunt-dossier-art::after {
        background:
            linear-gradient(
                90deg,
                #080807 0%,
                #080807 37%,
                rgba(8, 8, 7, 0.97) 46%,
                rgba(8, 8, 7, 0.72) 57%,
                rgba(8, 8, 7, 0.18) 69%,
                transparent 78%
            );
    }
}


/*
 * Mobile already swaps to the standalone dossier image below
 * the live content, so no desktop mask is needed there.
 */

@media (max-width: 760px) {

    .haunt-dossier-art::after {
        display: none;
    }

    .haunt-dossier__copy::before {
        left: -2rem;
        right: -2rem;
    }
}

/* THE HAUNT BAKED TEXT CLEANUP END */

/* THE EXPERIENCES PASS START */

/* ============================================================
   THE EXPERIENCES
   ============================================================ */

.section--experiences {
    position: relative;

    overflow: hidden;

    padding-block:
        clamp(5.5rem, 9vw, 8.5rem);

    background:
        radial-gradient(
            circle at 14% 18%,
            rgba(120, 46, 43, 0.18),
            transparent 24%
        ),
        radial-gradient(
            circle at 86% 74%,
            rgba(200, 144, 70, 0.08),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #070706 0%,
            #100e0c 48%,
            #080807 100%
        );

    border-bottom:
        1px solid rgba(230, 221, 201, 0.1);
}


.section--experiences::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.34;

    background:
        repeating-linear-gradient(
            103deg,
            transparent 0 38px,
            rgba(255, 255, 255, 0.018) 38px 39px,
            transparent 39px 81px
        ),
        radial-gradient(
            circle at 8% 64%,
            rgba(120, 46, 43, 0.2) 0 3px,
            transparent 4px
        ),
        radial-gradient(
            circle at 92% 21%,
            rgba(120, 46, 43, 0.15) 0 5px,
            transparent 6px
        );
}


.experiences-noise {
    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.24;

    background:
        repeating-radial-gradient(
            ellipse at center,
            rgba(255, 255, 255, 0.018) 0 1px,
            transparent 1px 4px
        );
}


.experiences-shell {
    position: relative;
    z-index: 2;
}


/* ============================================================
   HEADING
   ============================================================ */

.experiences-heading {
    width: min(100%, 760px);

    margin-bottom:
        clamp(3rem, 6vw, 5rem);
}


.section h2.experiences-title {
    margin: 0;

    color: var(--color-paper);

    font-family:
        "Haunted Hill Regular",
        var(--font-display);

    font-size:
        clamp(4.7rem, 9vw, 8rem);

    font-weight: 400;

    line-height: 0.82;

    letter-spacing: 0;

    text-shadow:
        0 6px 24px rgba(0, 0, 0, 0.5);
}


.experiences-intro {
    margin:
        1.4rem 0 0;

    max-width: 46ch;

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

    font-family:
        var(--font-display);

    font-size:
        clamp(1.15rem, 2vw, 1.5rem);

    line-height: 1.45;
}


/* ============================================================
   THREE ENTRANCES
   ============================================================ */

.experiences-grid {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        clamp(0.5rem, 1.3vw, 1rem);

    min-height: 590px;

    perspective: 1200px;
}


.experience-zone {
    position: relative;

    min-height: 590px;

    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border:
        1px solid rgba(230, 221, 201, 0.13);

    background:
        #11100e;

    box-shadow:
        0 30px 65px rgba(0, 0, 0, 0.46);

    transition:
        transform 220ms ease,
        border-color 220ms ease,
        filter 220ms ease;

    isolation: isolate;
}


.experience-zone:nth-child(1) {
    transform:
        rotate(-0.65deg)
        translateY(10px);
}


.experience-zone:nth-child(2) {
    transform:
        rotate(0.45deg)
        translateY(-5px);
}


.experience-zone:nth-child(3) {
    transform:
        rotate(-0.35deg)
        translateY(14px);
}


.experience-zone:hover {
    z-index: 6;

    border-color:
        rgba(200, 144, 70, 0.48);

    transform:
        rotate(0deg)
        translateY(-12px)
        scale(1.015);

    filter:
        brightness(1.08);
}


.experience-zone::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.04) 0%,
            rgba(0, 0, 0, 0.18) 32%,
            rgba(0, 0, 0, 0.92) 78%,
            rgba(0, 0, 0, 0.98) 100%
        );
}


.experience-zone::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 5;

    pointer-events: none;

    opacity: 0.3;

    background:
        repeating-linear-gradient(
            98deg,
            transparent 0 31px,
            rgba(255, 255, 255, 0.025) 31px 32px,
            transparent 32px 65px
        );
}


/* ============================================================
   TOP LABEL
   ============================================================ */

.experience-zone__topline {
    position: relative;
    z-index: 7;

    display: flex;
    justify-content: space-between;

    gap: 1rem;

    padding:
        1rem
        1.15rem;

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

    background:
        rgba(4, 4, 4, 0.52);

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

    font-size: 0.64rem;
    font-weight: 800;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


/* ============================================================
   CONTENT
   ============================================================ */

.experience-zone__content {
    position: relative;
    z-index: 7;

    padding:
        2rem
        clamp(1.3rem, 2vw, 2rem)
        1.8rem;
}


.experience-zone__number {
    display: block;

    margin-bottom: 0.7rem;

    color:
        rgba(200, 144, 70, 0.62);

    font-family:
        "Courier New",
        monospace;

    font-size:
        clamp(2.5rem, 5vw, 4.4rem);

    font-weight: 800;

    line-height: 1;
}


.experience-zone h3 {
    margin: 0;

    color: var(--color-paper);

    font-family:
        "Haunted Hill Regular",
        var(--font-display);

    font-size:
        clamp(2.5rem, 4.2vw, 4.3rem);

    font-weight: 400;

    line-height: 0.86;
}


.experience-zone__hook {
    margin:
        1.1rem 0
        0.7rem;

    color: var(--color-tungsten);

    font-family:
        var(--font-display);

    font-size:
        clamp(1.08rem, 1.6vw, 1.35rem);

    line-height: 1.3;
}


.experience-zone__content > p:not(.experience-zone__hook) {
    margin:
        0;

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

    font-size: 0.92rem;

    line-height: 1.62;
}


.experience-zone__warning {
    display: inline-block;

    margin-top: 1.4rem;

    border:
        1px solid rgba(120, 46, 43, 0.62);

    padding:
        0.45rem
        0.65rem;

    color:
        rgba(220, 94, 81, 0.86);

    font-family:
        "Courier New",
        monospace;

    font-size: 0.65rem;
    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    transform:
        rotate(-1deg);
}


/* ============================================================
   BLACKWOOD HOUSE ENVIRONMENT
   ============================================================ */

.experience-zone--house {
    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(200, 144, 70, 0.18),
            transparent 20%
        ),
        linear-gradient(
            180deg,
            #24211c 0%,
            #171411 43%,
            #080807 100%
        );
}


.experience-zone--house .experience-zone__environment {
    position: absolute;
    inset: 0;

    z-index: -2;
}


.house-roof {
    position: absolute;

    left: 14%;
    right: 14%;

    top: 13%;

    height: 31%;

    background:
        #090908;

    clip-path:
        polygon(
            50% 0,
            100% 100%,
            0 100%
        );
}


.experience-zone--house .experience-zone__environment::after {
    content: "";

    position: absolute;

    left: 18%;
    right: 18%;

    top: 34%;
    bottom: 20%;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.025) 0 2px,
            transparent 2px 14px
        ),
        #201c18;

    border:
        1px solid rgba(255, 255, 255, 0.03);
}


.house-window {
    position: absolute;

    z-index: 3;

    width: 12%;
    height: 15%;

    background:
        linear-gradient(
            180deg,
            #e1a44d,
            #7d431f
        );

    box-shadow:
        0 0 22px rgba(210, 133, 56, 0.2);
}


.house-window--one {
    top: 42%;
    left: 26%;
}


.house-window--two {
    top: 42%;
    right: 26%;
}


.house-door {
    position: absolute;

    z-index: 3;

    left: 44%;
    top: 52%;

    width: 12%;
    height: 27%;

    background:
        linear-gradient(
            180deg,
            #9c5429,
            #3f2417
        );

    box-shadow:
        0 0 28px rgba(210, 133, 56, 0.14);
}


/* ============================================================
   CRAWLSPACE ENVIRONMENT
   ============================================================ */

.experience-zone--crawlspace {
    background:
        radial-gradient(
            circle at 70% 18%,
            rgba(166, 101, 52, 0.15),
            transparent 16%
        ),
        linear-gradient(
            180deg,
            #1e1b17 0%,
            #12100e 45%,
            #070706 100%
        );
}


.experience-zone--crawlspace .experience-zone__environment {
    position: absolute;
    inset: 0;

    z-index: -2;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0 36px,
            rgba(255, 255, 255, 0.03) 36px 38px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0 63px,
            rgba(255, 255, 255, 0.022) 63px 65px
        );
}


.pipe {
    position: absolute;

    display: block;

    background:
        linear-gradient(
            90deg,
            #191714,
            #5d5144,
            #1b1916
        );

    box-shadow:
        0 8px 14px rgba(0, 0, 0, 0.5);
}


.pipe--one {
    top: 17%;
    left: -3%;

    width: 75%;
    height: 21px;

    transform:
        rotate(2deg);
}


.pipe--two {
    top: 29%;
    right: -5%;

    width: 68%;
    height: 14px;

    transform:
        rotate(-4deg);
}


.pipe--three {
    top: 7%;
    left: 58%;

    width: 18px;
    height: 48%;

    background:
        linear-gradient(
            90deg,
            #141311,
            #51473c,
            #171512
        );
}


.crawl-light {
    position: absolute;

    top: 18%;
    right: 12%;

    width: 72px;
    height: 72px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(233, 175, 93, 0.7) 0,
            rgba(233, 175, 93, 0.24) 28%,
            transparent 67%
        );

    filter:
        blur(3px);
}


/* ============================================================
   TREE LINE ENVIRONMENT
   ============================================================ */

.experience-zone--tree-line {
    background:
        radial-gradient(
            circle at 64% 21%,
            rgba(195, 198, 190, 0.08),
            transparent 17%
        ),
        linear-gradient(
            180deg,
            #151916 0%,
            #0c100d 43%,
            #060706 100%
        );
}


.experience-zone--tree-line .experience-zone__environment {
    position: absolute;
    inset: 0;

    z-index: -2;
}


.tree {
    position: absolute;

    bottom: 15%;

    width: 20px;

    background:
        linear-gradient(
            90deg,
            #080908,
            #242921,
            #080908
        );

    transform-origin:
        bottom center;
}


.tree::before,
.tree::after {
    content: "";

    position: absolute;

    width: 7px;

    background:
        #10140f;

    transform-origin:
        bottom center;
}


.tree::before {
    top: 17%;

    left: 4px;

    height: 40%;

    transform:
        rotate(-38deg);
}


.tree::after {
    top: 27%;

    right: 3px;

    height: 34%;

    transform:
        rotate(34deg);
}


.tree--one {
    left: 14%;

    height: 62%;

    transform:
        rotate(-3deg);
}


.tree--two {
    left: 39%;

    height: 75%;

    transform:
        rotate(2deg);
}


.tree--three {
    right: 28%;

    height: 68%;

    transform:
        rotate(-2deg);
}


.tree--four {
    right: 8%;

    height: 80%;

    transform:
        rotate(4deg);
}


.tree-fog {
    position: absolute;

    left: 4%;
    right: 4%;

    top: 34%;

    height: 24%;

    border-radius: 50%;

    background:
        rgba(196, 205, 199, 0.08);

    filter:
        blur(32px);
}


/* ============================================================
   FOOTER LINE
   ============================================================ */

.experiences-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 2rem;

    margin-top:
        clamp(3rem, 6vw, 5rem);

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

    padding-top: 1.4rem;
}


.experiences-footer p {
    margin: 0;

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

    font-size: 0.82rem;
}


.experiences-footer a {
    color:
        var(--color-tungsten);

    font-size: 0.75rem;
    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


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

@media (max-width: 980px) {

    .experiences-grid {
        grid-template-columns: 1fr;

        gap: 1.4rem;

        min-height: 0;
    }


    .experience-zone {
        min-height: 460px;
    }


    .experience-zone:nth-child(1),
    .experience-zone:nth-child(2),
    .experience-zone:nth-child(3) {
        transform:
            rotate(0deg);
    }


    .experience-zone:hover {
        transform:
            translateY(-6px);
    }


    .experience-zone__content {
        max-width: 560px;
    }
}


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

@media (max-width: 640px) {

    .section h2.experiences-title {
        font-size:
            clamp(4rem, 18vw, 6.2rem);
    }


    .experiences-intro {
        font-size: 1.1rem;
    }


    .experience-zone {
        min-height: 420px;
    }


    .experience-zone__topline {
        padding:
            0.85rem
            0.9rem;
    }


    .experience-zone__content {
        padding:
            1.5rem
            1.1rem;
    }


    .experience-zone h3 {
        font-size:
            clamp(2.7rem, 14vw, 4rem);
    }


    .experiences-footer {
        align-items: flex-start;
        flex-direction: column;

        gap: 0.6rem;
    }
}

/* THE EXPERIENCES PASS END */

/* EXPERIENCES REAL IMAGE PASS START */

/* ============================================================
   EXPERIENCES - REAL IMAGE ENVIRONMENT
   ============================================================ */

.section--experiences {
    position: relative;

    isolation: isolate;

    background:
        linear-gradient(
            180deg,
            rgba(3, 4, 5, 0.56) 0%,
            rgba(3, 4, 5, 0.7) 38%,
            rgba(3, 4, 5, 0.86) 100%
        ),
        url("../images/the-experiences-background.png")
        center 43% / cover no-repeat;

    background-attachment: scroll;
}


/*
 * Dark atmospheric veil so the moon, trees and fog remain visible
 * without competing with the live content.
 */

.section--experiences::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(5, 5, 5, 0.42) 0%,
            rgba(5, 5, 5, 0.16) 48%,
            rgba(5, 5, 5, 0.34) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.12) 0%,
            rgba(0, 0, 0, 0.32) 62%,
            rgba(0, 0, 0, 0.78) 100%
        );
}


/*
 * Low fog bank across the whole section.
 */

.section--experiences::after {
    content: "";

    position: absolute;

    left: -10%;
    right: -10%;

    bottom: 7%;

    height: 25%;

    z-index: 0;

    pointer-events: none;

    border-radius: 50%;

    background:
        rgba(191, 202, 207, 0.08);

    filter:
        blur(54px);

    opacity: 0.72;
}


.experiences-shell {
    position: relative;

    z-index: 3;
}


/* ============================================================
   HEADING
   ============================================================ */

.experiences-heading {
    position: relative;

    width: min(100%, 780px);

    padding:
        1.2rem
        1.4rem
        1.25rem;

    margin-bottom:
        clamp(3rem, 6vw, 5rem);

    border-left:
        2px solid rgba(200, 144, 70, 0.62);

    background:
        linear-gradient(
            90deg,
            rgba(5, 5, 5, 0.74) 0%,
            rgba(5, 5, 5, 0.46) 68%,
            transparent 100%
        );

    backdrop-filter:
        blur(3px);

    box-shadow:
        -18px 0 40px rgba(0, 0, 0, 0.18);
}


/* ============================================================
   THREE IMAGE PORTALS
   ============================================================ */

.experiences-grid {
    gap:
        clamp(0.9rem, 1.7vw, 1.4rem);

    min-height: 650px;
}


.experience-zone {
    min-height: 650px;

    border:
        1px solid rgba(230, 221, 201, 0.19);

    background-color:
        #090908;

    background-repeat:
        no-repeat;

    background-size:
        cover;

    background-position:
        center;

    box-shadow:
        0 32px 70px rgba(0, 0, 0, 0.7),
        inset 0 0 0 1px rgba(255, 255, 255, 0.025);

    transition:
        transform 240ms ease,
        border-color 240ms ease,
        filter 240ms ease,
        box-shadow 240ms ease;

    filter:
        saturate(0.86)
        brightness(0.88)
        contrast(1.08);
}


/*
 * Actual attraction photography.
 */

.experience-zone--house {
    background-image:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.04) 0%,
            rgba(0, 0, 0, 0.14) 30%,
            rgba(0, 0, 0, 0.7) 67%,
            rgba(0, 0, 0, 0.98) 100%
        ),
        url("../images/blackwood-house-experience.png");

    background-position:
        50% 42%;
}


.experience-zone--crawlspace {
    background-image:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.02) 0%,
            rgba(0, 0, 0, 0.16) 30%,
            rgba(0, 0, 0, 0.76) 67%,
            rgba(0, 0, 0, 0.98) 100%
        ),
        url("../images/the-crawlspace-experience.png");

    background-position:
        50% 45%;
}


.experience-zone--tree-line {
    background-image:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.04) 0%,
            rgba(0, 0, 0, 0.14) 32%,
            rgba(0, 0, 0, 0.73) 68%,
            rgba(0, 0, 0, 0.98) 100%
        ),
        url("../images/the-tree-line-experience.png");

    background-position:
        50% 44%;
}


/*
 * Kill the previous CSS-drawn environments.
 * The real photography owns the visual space now.
 */

.experience-zone__environment {
    display: none !important;
}


/* ============================================================
   UNEVEN HORROR COMPOSITION
   ============================================================ */

.experience-zone:nth-child(1) {
    transform:
        rotate(-0.8deg)
        translateY(12px);
}


.experience-zone:nth-child(2) {
    transform:
        rotate(0.55deg)
        translateY(-8px);
}


.experience-zone:nth-child(3) {
    transform:
        rotate(-0.45deg)
        translateY(18px);
}


.experience-zone:hover {
    z-index: 8;

    transform:
        rotate(0deg)
        translateY(-14px)
        scale(1.018);

    border-color:
        rgba(200, 144, 70, 0.65);

    filter:
        saturate(1)
        brightness(1)
        contrast(1.08);

    box-shadow:
        0 38px 80px rgba(0, 0, 0, 0.78),
        0 0 30px rgba(200, 144, 70, 0.08);
}


/* ============================================================
   IMAGE DAMAGE / FILM TEXTURE
   ============================================================ */

.experience-zone::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 5;

    pointer-events: none;

    opacity: 0.38;

    background:
        radial-gradient(
            circle at 9% 20%,
            rgba(120, 46, 43, 0.18) 0 3px,
            transparent 4px
        ),
        radial-gradient(
            circle at 88% 15%,
            rgba(120, 46, 43, 0.14) 0 5px,
            transparent 6px
        ),
        repeating-linear-gradient(
            101deg,
            transparent 0 43px,
            rgba(255, 255, 255, 0.022) 43px 44px,
            transparent 44px 88px
        );
}


.experience-zone__topline {
    background:
        rgba(5, 5, 5, 0.7);

    backdrop-filter:
        blur(4px);

    border-bottom:
        1px solid rgba(230, 221, 201, 0.16);
}


.experience-zone__content {
    padding-top:
        3.5rem;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(4, 4, 4, 0.08) 10%,
            rgba(4, 4, 4, 0.66) 38%,
            rgba(4, 4, 4, 0.94) 76%,
            rgba(4, 4, 4, 0.99) 100%
        );
}


/* ============================================================
   BIGGER TITLES
   ============================================================ */

.experience-zone h3 {
    font-size:
        clamp(3rem, 4.6vw, 4.8rem);

    text-shadow:
        0 4px 20px rgba(0, 0, 0, 0.92);
}


.experience-zone__number {
    color:
        rgba(200, 144, 70, 0.82);

    text-shadow:
        0 3px 16px rgba(0, 0, 0, 0.9);
}


.experience-zone__hook {
    color:
        #dfa24d;

    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.96);
}


.experience-zone__content > p:not(.experience-zone__hook) {
    color:
        rgba(239, 232, 216, 0.78);

    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.98);
}


/* ============================================================
   WARNING TAGS
   ============================================================ */

.experience-zone__warning {
    background:
        rgba(7, 7, 6, 0.74);

    border:
        1px solid rgba(161, 57, 50, 0.72);

    color:
        #cf5c50;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.38);
}


/* ============================================================
   SECTION FOOTER
   ============================================================ */

.experiences-footer {
    position: relative;

    z-index: 4;

    margin-top:
        clamp(4rem, 7vw, 6rem);

    padding:
        1.2rem
        1.35rem;

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

    background:
        rgba(5, 5, 5, 0.62);

    backdrop-filter:
        blur(5px);
}


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

@media (max-width: 980px) {

    .section--experiences {
        background-position:
            61% center;
    }


    .experiences-grid {
        min-height: 0;
    }


    .experience-zone {
        min-height: 560px;
    }


    .experience-zone:nth-child(1),
    .experience-zone:nth-child(2),
    .experience-zone:nth-child(3) {
        transform:
            rotate(0deg)
            translateY(0);
    }


    .experience-zone:hover {
        transform:
            translateY(-6px);
    }


    .experience-zone--house,
    .experience-zone--crawlspace,
    .experience-zone--tree-line {
        background-position:
            center 43%;
    }
}


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

@media (max-width: 640px) {

    .section--experiences {
        background-position:
            58% center;
    }


    .experiences-heading {
        padding:
            1rem
            1rem
            1.1rem;
    }


    .experience-zone {
        min-height: 520px;
    }


    .experience-zone__content {
        padding-top:
            2.6rem;
    }


    .experience-zone h3 {
        font-size:
            clamp(3.2rem, 15vw, 4.6rem);
    }
}

/* EXPERIENCES REAL IMAGE PASS END */

/* EXPERIENCES READABILITY PASS START */

/* ============================================================
   EXPERIENCES READABILITY
   ============================================================ */

/*
 * Top utility labels:
 * PROPERTY 01 / INTERIOR / ACCESS 02 / RESTRICTED / etc.
 */

.experience-zone__topline {
    font-size: 0.76rem;
    line-height: 1.35;
    letter-spacing: 0.13em;
    color: rgba(239, 232, 216, 0.86);
}


/*
 * Card description copy.
 */

.experience-zone__content > p:not(.experience-zone__hook) {
    font-size: 1.02rem;
    line-height: 1.68;
    color: rgba(244, 238, 224, 0.84);
}


/*
 * Gold hook lines.
 */

.experience-zone__hook {
    font-size: clamp(1.15rem, 1.75vw, 1.45rem);
    line-height: 1.35;
}


/*
 * Red warning stamps.
 */

.experience-zone__warning {
    font-size: 0.74rem;
    line-height: 1.25;
    letter-spacing: 0.11em;

    padding:
        0.55rem
        0.72rem;
}


/*
 * Bottom admission strip.
 */

.experiences-footer p {
    font-size: 0.92rem;
    line-height: 1.55;

    color:
        rgba(239, 232, 216, 0.72);
}


.experiences-footer a {
    font-size: 0.82rem;
    line-height: 1.35;
}


/*
 * Slightly strengthen the small orange section label.
 */

.section--experiences .section-index {
    font-size: 0.78rem;
}


/*
 * Preserve breathing room now that body copy is larger.
 */

.experience-zone__content {
    padding-bottom: 2rem;
}


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

@media (max-width: 640px) {

    .experience-zone__topline {
        font-size: 0.72rem;
    }

    .experience-zone__content > p:not(.experience-zone__hook) {
        font-size: 1rem;
        line-height: 1.68;
    }

    .experience-zone__warning {
        font-size: 0.72rem;
    }

    .experiences-footer p {
        font-size: 0.9rem;
    }

    .experiences-footer a {
        font-size: 0.8rem;
    }
}

/* EXPERIENCES READABILITY PASS END */

/* CRAWLSPACE IMAGE REVEAL START */

/*
 * Give the Crawlspace photograph more room before the text takes over.
 */

.experience-zone--crawlspace .experience-zone__content {
    padding-top: 6.5rem;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(4, 4, 4, 0.02) 18%,
            rgba(4, 4, 4, 0.28) 38%,
            rgba(4, 4, 4, 0.72) 58%,
            rgba(4, 4, 4, 0.96) 82%,
            rgba(4, 4, 4, 0.99) 100%
        );
}


/*
 * Shift the source image slightly upward so more of the tunnel depth
 * and lantern remain visible above the title.
 */

.experience-zone--crawlspace {
    background-position: 50% 38%;
}


@media (max-width: 980px) {

    .experience-zone--crawlspace .experience-zone__content {
        padding-top: 5.4rem;
    }
}


@media (max-width: 640px) {

    .experience-zone--crawlspace .experience-zone__content {
        padding-top: 4.5rem;
    }
}

/* CRAWLSPACE IMAGE REVEAL END */

/* TREE LINE IMAGE REVEAL START */

/*
 * Show more of the actual trail so the warning line makes visual sense.
 * This keeps the card layout intact and only opens up more of the scene.
 */

.experience-zone--tree-line {
    background-position: 50% 58%;
}


/*
 * Push the content lower and delay the heavy fade so more of the
 * moonlit woods and path remain visible above the copy.
 */

.experience-zone--tree-line .experience-zone__content {
    padding-top: 6.9rem;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(4, 4, 4, 0.02) 20%,
            rgba(4, 4, 4, 0.22) 38%,
            rgba(4, 4, 4, 0.64) 58%,
            rgba(4, 4, 4, 0.93) 82%,
            rgba(4, 4, 4, 0.99) 100%
        );
}


/*
 * Let a little more of the image breathe before the text stack.
 */

.experience-zone--tree-line .experience-zone__number {
    margin-bottom: 1rem;
}


@media (max-width: 980px) {

    .experience-zone--tree-line {
        background-position: 50% 55%;
    }

    .experience-zone--tree-line .experience-zone__content {
        padding-top: 5.7rem;
    }
}


@media (max-width: 640px) {

    .experience-zone--tree-line {
        background-position: 50% 53%;
    }

    .experience-zone--tree-line .experience-zone__content {
        padding-top: 4.8rem;
    }
}

/* TREE LINE IMAGE REVEAL END */

/* SCHEDULE PASS START */

/* ============================================================
   CHOOSE YOUR NIGHT
   ============================================================ */

.section--schedule {
    position: relative;

    overflow: hidden;

    isolation: isolate;

    padding-block:
        clamp(5.5rem, 9vw, 8rem);

    background:
        linear-gradient(
            180deg,
            rgba(4, 5, 6, 0.64) 0%,
            rgba(4, 5, 6, 0.78) 52%,
            rgba(4, 5, 6, 0.93) 100%
        ),
        url("../images/the-experiences-background.png")
        center 48% / cover no-repeat;
}


.schedule-atmosphere {
    position: absolute;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(3, 3, 3, 0.58) 0%,
            rgba(3, 3, 3, 0.18) 48%,
            rgba(3, 3, 3, 0.52) 100%
        ),
        radial-gradient(
            circle at 82% 18%,
            rgba(210, 218, 221, 0.08),
            transparent 22%
        );

    box-shadow:
        inset 0 80px 100px rgba(0, 0, 0, 0.3),
        inset 0 -100px 120px rgba(0, 0, 0, 0.5);
}


.schedule-shell {
    position: relative;
    z-index: 2;
}


/* ============================================================
   HEADER
   ============================================================ */

.schedule-heading {
    width: min(100%, 760px);

    margin-bottom:
        clamp(3rem, 6vw, 4.5rem);

    padding-left: 1.15rem;

    border-left:
        2px solid rgba(200, 144, 70, 0.7);
}


.section h2.schedule-title {
    margin: 0;

    color: var(--color-paper);

    font-family:
        "Haunted Hill Regular",
        var(--font-display);

    font-size:
        clamp(4.8rem, 9vw, 8rem);

    font-weight: 400;

    line-height: 0.82;

    letter-spacing: 0;
}


.schedule-intro {
    margin:
        1.4rem 0 0;

    max-width: 48ch;

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

    font-family:
        var(--font-display);

    font-size:
        clamp(1.1rem, 2vw, 1.45rem);

    line-height: 1.5;
}


/* ============================================================
   MAIN LAYOUT
   ============================================================ */

.schedule-layout {
    display: grid;

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

    gap:
        clamp(1.2rem, 3vw, 2.5rem);

    align-items: stretch;
}


/* ============================================================
   LEGEND
   ============================================================ */

.schedule-legend {
    display: grid;

    gap: 0.8rem;

    align-content: start;
}


.schedule-legend__item {
    display: grid;

    grid-template-columns:
        28px 1fr;

    gap: 1rem;

    align-items: start;

    min-height: 86px;

    padding:
        1rem
        1.05rem;

    border:
        1px solid rgba(230, 221, 201, 0.14);

    background:
        linear-gradient(
            90deg,
            rgba(10, 9, 8, 0.88),
            rgba(10, 9, 8, 0.64)
        );

    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.35);

    backdrop-filter:
        blur(4px);

    transform:
        rotate(-0.35deg);
}


.schedule-legend__item:nth-child(even) {
    transform:
        rotate(0.3deg);
}


.schedule-legend__dot {
    display: block;

    width: 20px;
    aspect-ratio: 1;

    margin-top: 0.25rem;

    border-radius: 50%;

    box-shadow:
        0 0 18px currentColor;
}


.schedule-legend__dot--peak {
    color: #b33b35;
    background: #b33b35;
}


.schedule-legend__dot--regular {
    color: #c89046;
    background: #c89046;
}


.schedule-legend__dot--light {
    color: #b6b5a8;
    background: #b6b5a8;
}


.schedule-legend__dot--sold {
    color: #4a3735;
    background: #4a3735;
}


.schedule-legend__item strong {
    display: block;

    margin-bottom: 0.25rem;

    color: var(--color-paper);

    font-size: 0.78rem;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.schedule-legend__item p {
    margin: 0;

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

    font-size: 0.85rem;

    line-height: 1.45;
}


/* ============================================================
   CALENDAR
   ============================================================ */

.schedule-calendar {
    position: relative;

    overflow: hidden;

    border:
        1px solid rgba(230, 221, 201, 0.16);

    background:
        linear-gradient(
            180deg,
            rgba(9, 9, 8, 0.94),
            rgba(6, 6, 5, 0.97)
        );

    box-shadow:
        0 28px 65px rgba(0, 0, 0, 0.58);

    backdrop-filter:
        blur(6px);
}


.schedule-calendar::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.26;

    background:
        repeating-linear-gradient(
            98deg,
            transparent 0 43px,
            rgba(255, 255, 255, 0.025) 43px 44px,
            transparent 44px 88px
        );
}


.schedule-calendar__header {
    position: relative;
    z-index: 2;

    min-height: 78px;

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

    gap: 1rem;

    padding:
        1rem
        1.2rem;

    border-bottom:
        1px solid rgba(230, 221, 201, 0.15);
}


.schedule-calendar__month {
    color:
        var(--color-paper);

    font-family:
        "Haunted Hill Regular",
        var(--font-display);

    font-size:
        clamp(2rem, 4vw, 3.2rem);

    line-height: 1;
}


.schedule-calendar__year {
    margin-left: 0.55rem;

    color:
        var(--color-tungsten);

    font-family:
        "Courier New",
        monospace;

    font-size: 1.15rem;

    font-weight: 800;

    letter-spacing: 0.08em;
}


.schedule-calendar__controls {
    display: flex;

    gap: 0.55rem;
}


.schedule-calendar__arrow {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(230, 221, 201, 0.22);

    background:
        rgba(0, 0, 0, 0.34);

    color:
        var(--color-paper);

    font-size: 1.45rem;

    cursor: pointer;
}


.schedule-calendar__arrow:hover {
    border-color:
        var(--color-tungsten);

    background:
        rgba(200, 144, 70, 0.12);
}


.schedule-calendar__weekdays {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(7, minmax(0, 1fr));

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


.schedule-calendar__weekdays span {
    padding:
        0.65rem
        0.25rem;

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

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.13em;

    text-align: center;
    text-transform: uppercase;
}


.schedule-calendar__grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(7, minmax(0, 1fr));
}


.schedule-day {
    position: relative;

    min-height: 74px;

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

    border-right:
        1px solid rgba(230, 221, 201, 0.09);

    border-bottom:
        1px solid rgba(230, 221, 201, 0.09);

    background:
        rgba(255, 255, 255, 0.015);

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

    font-family:
        var(--font-display);

    font-size: 1rem;
}


.schedule-day:nth-child(7n) {
    border-right: 0;
}


.schedule-day--empty {
    color: transparent;

    background:
        rgba(0, 0, 0, 0.18);
}


.schedule-day--active {
    cursor: pointer;
}


.schedule-day--peak {
    border:
        1px solid rgba(179, 59, 53, 0.58);

    background:
        radial-gradient(
            circle at center,
            rgba(179, 59, 53, 0.42),
            rgba(85, 21, 18, 0.52)
        );

    color: #fff2df;

    box-shadow:
        inset 0 0 24px rgba(179, 59, 53, 0.22);
}


.schedule-day--regular {
    border:
        1px solid rgba(200, 144, 70, 0.5);

    background:
        rgba(120, 81, 36, 0.25);

    color:
        #efc17d;
}


.schedule-day--light {
    border:
        1px solid rgba(182, 181, 168, 0.42);

    background:
        rgba(182, 181, 168, 0.12);

    color:
        #d5d4c8;
}


.schedule-day--sold {
    background:
        rgba(68, 47, 45, 0.28);

    color:
        rgba(195, 172, 169, 0.45);

    text-decoration:
        line-through;
}


.schedule-day--active::after {
    content: "";

    position: absolute;

    bottom: 8px;

    left: 50%;

    width: 6px;
    aspect-ratio: 1;

    border-radius: 50%;

    transform:
        translateX(-50%);

    background:
        currentColor;

    box-shadow:
        0 0 8px currentColor;
}


.schedule-day:hover {
    z-index: 3;

    filter:
        brightness(1.3);

    box-shadow:
        0 0 24px rgba(200, 144, 70, 0.1);
}


/* ============================================================
   BOTTOM PANEL
   ============================================================ */

.schedule-bottom {
    position: relative;

    display: grid;

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

    gap:
        clamp(1.2rem, 3vw, 2.5rem);

    align-items: center;

    margin-top:
        clamp(2rem, 4vw, 3rem);

    padding:
        1rem;

    border:
        1px solid rgba(230, 221, 201, 0.15);

    background:
        linear-gradient(
            90deg,
            rgba(6, 6, 5, 0.92),
            rgba(8, 8, 7, 0.78)
        );

    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.42);

    backdrop-filter:
        blur(6px);
}


.schedule-bottom__photo {
    min-height: 135px;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.04),
            rgba(0, 0, 0, 0.3)
        ),
        url("../images/blackwood-house-experience.png")
        center 55% / cover no-repeat;

    border:
        1px solid rgba(230, 221, 201, 0.13);

    transform:
        rotate(-2deg);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.46);
}


.schedule-bottom__eyebrow {
    margin:
        0 0
        0.35rem;

    color:
        var(--color-tungsten);

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.schedule-bottom h3 {
    margin:
        0 0
        0.55rem;

    color:
        var(--color-paper);

    font-family:
        "Haunted Hill Regular",
        var(--font-display);

    font-size:
        clamp(2rem, 4vw, 3.2rem);

    font-weight: 400;

    line-height: 0.9;
}


.schedule-bottom__copy > p:last-child {
    margin: 0;

    max-width: 54ch;

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

    font-size: 0.9rem;

    line-height: 1.6;
}


.schedule-bottom__button {
    min-width: 180px;

    min-height: 58px;

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

    gap: 1rem;

    border:
        1px solid rgba(167, 55, 48, 0.78);

    background:
        linear-gradient(
            135deg,
            rgba(119, 32, 27, 0.9),
            rgba(73, 20, 18, 0.94)
        );

    color:
        var(--color-paper);

    padding:
        0.8rem
        1.2rem;

    font-size: 0.75rem;
    font-weight: 800;

    letter-spacing: 0.13em;

    text-decoration: none;
    text-transform: uppercase;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.38);
}


.schedule-bottom__button:hover {
    border-color:
        var(--color-tungsten);

    color:
        var(--color-tungsten);
}


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

@media (max-width: 960px) {

    .schedule-layout {
        grid-template-columns: 1fr;
    }


    .schedule-legend {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .schedule-bottom {
        grid-template-columns:
            180px
            1fr;
    }


    .schedule-bottom__button {
        grid-column:
            1 / -1;
    }
}


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

@media (max-width: 640px) {

    .section--schedule {
        background-position:
            60% center;
    }


    .section h2.schedule-title {
        font-size:
            clamp(4rem, 18vw, 6rem);
    }


    .schedule-legend {
        grid-template-columns: 1fr;
    }


    .schedule-calendar {
        overflow-x: auto;
    }


    .schedule-calendar__header,
    .schedule-calendar__weekdays,
    .schedule-calendar__grid {
        min-width: 620px;
    }


    .schedule-day {
        min-height: 68px;
    }


    .schedule-bottom {
        grid-template-columns: 1fr;
    }


    .schedule-bottom__photo {
        min-height: 190px;
    }


    .schedule-bottom__button {
        width: 100%;
    }
}

/* SCHEDULE PASS END */

/* CREEPY CALENDAR PASS START */

/* ============================================================
   BLACKWOOD WALL CALENDAR
   ============================================================ */

.schedule-calendar {
    position: relative;

    overflow: visible;

    border: 0;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(75, 54, 36, 0.035) 0 1px,
            transparent 1px 4px
        ),
        radial-gradient(
            circle at 15% 18%,
            rgba(115, 34, 29, 0.16),
            transparent 18%
        ),
        radial-gradient(
            circle at 87% 83%,
            rgba(45, 31, 20, 0.18),
            transparent 24%
        ),
        #c9b993;

    color: #18120d;

    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.68),
        0 0 0 1px rgba(49, 34, 22, 0.52);

    transform:
        rotate(-0.4deg);

    clip-path:
        polygon(
            0.7% 1.2%,
            7% 0.4%,
            12% 1.1%,
            20% 0.3%,
            28% 0.8%,
            35% 0.2%,
            43% 0.9%,
            52% 0.2%,
            60% 0.8%,
            70% 0.3%,
            79% 0.9%,
            88% 0.2%,
            99.2% 1%,
            99.6% 12%,
            99% 24%,
            99.7% 38%,
            99% 52%,
            99.6% 68%,
            99% 82%,
            99.4% 98.8%,
            88% 99.4%,
            77% 98.9%,
            65% 99.5%,
            54% 98.9%,
            42% 99.6%,
            31% 98.8%,
            19% 99.4%,
            8% 98.8%,
            0.6% 99.2%,
            1.1% 84%,
            0.4% 68%,
            1% 52%,
            0.4% 35%,
            1% 18%
        );
}


/*
 * Torn paper shadow underneath.
 */

.schedule-calendar::before {
    content: "";

    position: absolute;

    inset: 12px -8px -12px 10px;

    z-index: -1;

    background:
        rgba(31, 21, 14, 0.86);

    filter:
        blur(9px);

    transform:
        rotate(1.2deg);

    opacity: 0.7;
}


/*
 * Blood stains and dirty handling marks.
 */

.schedule-calendar::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 8;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 91% 10%,
            rgba(103, 20, 17, 0.72) 0 8px,
            rgba(103, 20, 17, 0.32) 9px 13px,
            transparent 14px
        ),
        radial-gradient(
            circle at 94% 15%,
            rgba(103, 20, 17, 0.55) 0 4px,
            transparent 5px
        ),
        radial-gradient(
            ellipse at 5% 82%,
            rgba(95, 23, 18, 0.32) 0 21px,
            transparent 23px
        ),
        linear-gradient(
            106deg,
            transparent 0 72%,
            rgba(97, 22, 18, 0.16) 72.5% 73%,
            transparent 73.5% 100%
        );

    mix-blend-mode:
        multiply;

    opacity: 0.88;
}


/* ============================================================
   CALENDAR HEADER
   ============================================================ */

.schedule-calendar__header {
    min-height: 92px;

    border-bottom:
        2px solid rgba(49, 34, 22, 0.62);

    background:
        linear-gradient(
            180deg,
            rgba(94, 30, 25, 0.18),
            transparent
        );

    padding:
        1rem
        1.35rem;
}


.schedule-calendar__month {
    color:
        #3a1713;

    font-family:
        "Haunted Hill Regular",
        var(--font-display);

    font-size:
        clamp(2.8rem, 5vw, 4.2rem);

    text-shadow:
        1px 1px 0 rgba(255, 255, 255, 0.12);
}


.schedule-calendar__year {
    color:
        #6f261f;

    font-size: 1.25rem;
}


.schedule-calendar__arrow {
    border:
        1px solid rgba(59, 40, 27, 0.62);

    background:
        rgba(37, 26, 18, 0.13);

    color:
        #2a1c13;

    box-shadow:
        inset 0 0 10px rgba(54, 39, 27, 0.08);
}


.schedule-calendar__arrow:hover {
    border-color:
        #792c25;

    background:
        rgba(121, 44, 37, 0.14);

    color:
        #792c25;
}


/* ============================================================
   WEEKDAY STRIP
   ============================================================ */

.schedule-calendar__weekdays {
    border-top:
        1px solid rgba(59, 40, 27, 0.14);

    border-bottom:
        2px solid rgba(59, 40, 27, 0.5);

    background:
        rgba(72, 48, 31, 0.06);
}


.schedule-calendar__weekdays span {
    color:
        rgba(42, 28, 18, 0.76);

    font-family:
        "Courier New",
        monospace;

    font-size:
        0.74rem;

    font-weight: 800;
}


/* ============================================================
   DATE GRID
   ============================================================ */

.schedule-calendar__grid {
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0 71px,
            rgba(58, 41, 27, 0.09) 71px 72px
        );
}


.schedule-day {
    min-height: 78px;

    border-right:
        1px solid rgba(54, 37, 24, 0.26);

    border-bottom:
        1px solid rgba(54, 37, 24, 0.26);

    background:
        rgba(255, 249, 232, 0.06);

    color:
        rgba(31, 22, 14, 0.76);

    font-family:
        "Courier New",
        monospace;

    font-size:
        1.05rem;

    font-weight: 700;

    text-decoration:
        none;
}


.schedule-day--empty {
    background:
        rgba(58, 42, 28, 0.07);
}


/* ============================================================
   ACTIVE NIGHTS
   ============================================================ */

.schedule-day--peak {
    border:
        1px solid rgba(111, 31, 25, 0.68);

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(133, 36, 29, 0.94),
            rgba(80, 22, 18, 0.96)
        );

    color:
        #f4e7cf;

    box-shadow:
        inset 0 0 18px rgba(0, 0, 0, 0.28),
        0 0 12px rgba(103, 26, 21, 0.36);
}


.schedule-day--regular {
    border:
        1px solid rgba(142, 92, 33, 0.62);

    background:
        rgba(147, 94, 35, 0.72);

    color:
        #24170e;
}


.schedule-day--light {
    border:
        1px solid rgba(88, 82, 69, 0.54);

    background:
        rgba(178, 171, 149, 0.56);

    color:
        #241d14;
}


.schedule-day--sold {
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(65, 31, 28, 0.44) 0 6px,
            rgba(52, 25, 23, 0.62) 6px 12px
        );

    color:
        rgba(228, 204, 189, 0.42);
}


/*
 * Mark active dates like they were circled or stabbed with a pen.
 */

.schedule-day--active::before {
    content: "";

    position: absolute;

    inset: 7px;

    border:
        1px solid rgba(82, 24, 20, 0.32);

    transform:
        rotate(-3deg);

    pointer-events: none;
}


.schedule-day--active::after {
    bottom: 7px;

    width: 7px;

    background:
        currentColor;

    box-shadow:
        0 0 8px currentColor;
}


/* ============================================================
   SCRATCH MARKS
   ============================================================ */

.schedule-calendar__grid::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 7;

    pointer-events: none;

    background:
        linear-gradient(
            111deg,
            transparent 0 18%,
            rgba(56, 38, 25, 0.12) 18.2% 18.5%,
            transparent 18.7% 46%,
            rgba(56, 38, 25, 0.14) 46.2% 46.5%,
            transparent 46.7% 100%
        );

    opacity: 0.58;
}


/* ============================================================
   HOVER
   ============================================================ */

.schedule-day--active:hover {
    z-index: 10;

    filter:
        brightness(1.18)
        saturate(1.14);

    transform:
        scale(1.045);

    box-shadow:
        0 0 20px rgba(90, 29, 23, 0.38);
}


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

@media (max-width: 640px) {

    .schedule-calendar {
        transform:
            rotate(0deg);
    }

    .schedule-day {
        min-height: 72px;
    }
}

/* CREEPY CALENDAR PASS END */

/* TICKETS PASS START */

/* ============================================================
   ADMISSION
   ============================================================ */

.section--tickets {
    position: relative;

    overflow: hidden;

    isolation: isolate;

    padding-block:
        clamp(5.5rem, 9vw, 8rem);

    background:
        linear-gradient(
            180deg,
            rgba(4, 4, 4, 0.78) 0%,
            rgba(4, 4, 4, 0.86) 52%,
            rgba(4, 4, 4, 0.96) 100%
        ),
        url("../images/the-experiences-background.png")
        center 58% / cover no-repeat;
}


.tickets-atmosphere {
    position: absolute;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 80% 22%,
            rgba(182, 190, 193, 0.07),
            transparent 25%
        ),
        radial-gradient(
            circle at 12% 77%,
            rgba(120, 46, 43, 0.13),
            transparent 22%
        ),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.38),
            transparent 48%,
            rgba(0, 0, 0, 0.32)
        );
}


.section--tickets::after {
    content: "";

    position: absolute;

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

    height: 22%;

    z-index: 0;

    pointer-events: none;

    border-radius: 50%;

    background:
        rgba(193, 201, 203, 0.06);

    filter:
        blur(52px);
}


.tickets-shell {
    position: relative;

    z-index: 2;
}


/* ============================================================
   HEADING
   ============================================================ */

.tickets-heading {
    width: min(100%, 680px);

    margin-bottom:
        clamp(3rem, 6vw, 4.8rem);

    padding-left: 1.1rem;

    border-left:
        2px solid rgba(200, 144, 70, 0.65);
}


.section h2.tickets-title {
    margin: 0;

    color: var(--color-paper);

    font-family:
        "Haunted Hill Regular",
        var(--font-display);

    font-size:
        clamp(4.8rem, 9vw, 8rem);

    font-weight: 400;

    line-height: 0.82;

    letter-spacing: 0;
}


.tickets-intro {
    margin:
        1.35rem 0 0;

    max-width: 48ch;

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

    font-family:
        var(--font-display);

    font-size:
        clamp(1.1rem, 2vw, 1.4rem);

    line-height: 1.5;
}


/* ============================================================
   TICKET BOARD
   ============================================================ */

.tickets-board {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        clamp(1.6rem, 4vw, 3.5rem);

    align-items: center;
}


.tickets-board::before {
    content: "";

    position: absolute;

    inset: -8% -4%;

    z-index: -1;

    opacity: 0.16;

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

    filter:
        grayscale(0.8)
        contrast(1.15)
        brightness(0.46);

    transform:
        rotate(-1deg);
}


/* ============================================================
   TICKET BASE
   ============================================================ */

.admission-ticket {
    position: relative;

    min-height: 500px;

    display: grid;

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

    overflow: hidden;

    color: #20170f;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(67, 48, 31, 0.028) 0 1px,
            transparent 1px 4px
        ),
        radial-gradient(
            circle at 81% 18%,
            rgba(120, 46, 43, 0.1),
            transparent 17%
        ),
        #cdbd9b;

    box-shadow:
        0 32px 75px rgba(0, 0, 0, 0.65);

    clip-path:
        polygon(
            1% 0.8%,
            8% 0.2%,
            16% 0.8%,
            26% 0.2%,
            36% 0.7%,
            48% 0.2%,
            61% 0.8%,
            73% 0.2%,
            86% 0.7%,
            99% 0.3%,
            99.5% 14%,
            99% 30%,
            99.6% 47%,
            99% 63%,
            99.5% 80%,
            99% 99%,
            87% 99.5%,
            75% 98.9%,
            61% 99.5%,
            48% 98.9%,
            35% 99.6%,
            22% 98.9%,
            10% 99.5%,
            0.5% 99%,
            1% 80%,
            0.4% 61%,
            1% 42%,
            0.5% 22%
        );

    transition:
        transform 220ms ease,
        filter 220ms ease;
}


.admission-ticket--general {
    transform:
        rotate(-1.25deg);
}


.admission-ticket--fast {
    transform:
        rotate(1.1deg)
        translateY(10px);

    background:
        repeating-linear-gradient(
            0deg,
            rgba(82, 19, 16, 0.042) 0 1px,
            transparent 1px 4px
        ),
        radial-gradient(
            circle at 77% 18%,
            rgba(116, 22, 18, 0.22),
            transparent 22%
        ),
        #c4ae8e;
}


.admission-ticket:hover {
    z-index: 5;

    transform:
        rotate(0deg)
        translateY(-8px);

    filter:
        brightness(1.04);
}


/* ============================================================
   PERFORATED STUB
   ============================================================ */

.admission-ticket__stub {
    position: relative;

    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    padding:
        1.4rem
        0.65rem;

    border-right:
        2px dashed rgba(55, 38, 24, 0.42);

    background:
        rgba(73, 50, 31, 0.09);
}


.admission-ticket__stub::before,
.admission-ticket__stub::after {
    content: "";

    position: absolute;

    right: -10px;

    width: 18px;
    aspect-ratio: 1;

    border-radius: 50%;

    background:
        #090908;
}


.admission-ticket__stub::before {
    top: -8px;
}


.admission-ticket__stub::after {
    bottom: -8px;
}


.admission-ticket__vertical {
    writing-mode:
        vertical-rl;

    transform:
        rotate(180deg);

    color:
        #6f281f;

    font-family:
        "Haunted Hill Regular",
        var(--font-display);

    font-size:
        1.65rem;

    line-height: 1;

    text-transform: uppercase;
}


.admission-ticket__serial {
    writing-mode:
        vertical-rl;

    transform:
        rotate(180deg);

    color:
        rgba(41, 27, 17, 0.62);

    font-family:
        "Courier New",
        monospace;

    font-size: 0.66rem;

    font-weight: 800;

    letter-spacing: 0.13em;
}


/* ============================================================
   MAIN TICKET BODY
   ============================================================ */

.admission-ticket__main {
    position: relative;

    padding:
        clamp(1.5rem, 3vw, 2.2rem);
}


.admission-ticket__main::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            110deg,
            transparent 0 31%,
            rgba(72, 47, 30, 0.08) 31.2% 31.5%,
            transparent 31.7% 66%,
            rgba(72, 47, 30, 0.07) 66.2% 66.5%,
            transparent 66.7% 100%
        );
}


.admission-ticket__topline {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 1.5rem;

    padding-bottom: 0.8rem;

    border-bottom:
        1px solid rgba(54, 37, 24, 0.34);

    color:
        rgba(44, 29, 18, 0.66);

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.admission-ticket__price-row {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 1rem;
}


.admission-ticket__type {
    display: block;

    margin-bottom: 0.4rem;

    color:
        #2c1d12;

    font-family:
        "Haunted Hill Regular",
        var(--font-display);

    font-size:
        clamp(2.3rem, 4vw, 3.5rem);

    line-height: 0.9;
}


.admission-ticket__price {
    display: block;

    color:
        #72271f;

    font-family:
        "Courier New",
        monospace;

    font-size:
        clamp(3.4rem, 6vw, 5.6rem);

    line-height: 0.95;
}


.admission-ticket__stamp {
    margin-top: 0.5rem;

    border:
        2px solid rgba(89, 42, 28, 0.46);

    padding:
        0.45rem
        0.55rem;

    color:
        rgba(72, 34, 23, 0.7);

    font-family:
        "Courier New",
        monospace;

    font-size: 0.62rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    transform:
        rotate(-7deg);
}


.admission-ticket__stamp--red {
    border-color:
        rgba(119, 31, 26, 0.72);

    color:
        rgba(119, 31, 26, 0.82);

    transform:
        rotate(6deg);
}


.admission-ticket__description {
    position: relative;
    z-index: 2;

    margin:
        1.3rem 0
        1.5rem;

    max-width: 48ch;

    color:
        rgba(39, 26, 16, 0.78);

    font-size: 0.96rem;

    line-height: 1.62;
}


/* ============================================================
   DETAILS
   ============================================================ */

.admission-ticket__details {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        0.6rem
        1rem;

    margin:
        0 0
        1.7rem;

    padding: 0;

    list-style: none;
}


.admission-ticket__details li {
    position: relative;

    padding-left: 1rem;

    color:
        rgba(39, 26, 16, 0.72);

    font-size: 0.82rem;

    font-weight: 700;
}


.admission-ticket__details li::before {
    content: "x";

    position: absolute;

    left: 0;

    color:
        #792c25;

    font-family:
        "Courier New",
        monospace;

    font-weight: 800;
}


/* ============================================================
   BUTTON
   ============================================================ */

.admission-ticket__button {
    position: relative;
    z-index: 2;

    min-height: 50px;

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

    border:
        1px solid rgba(62, 41, 25, 0.72);

    background:
        rgba(40, 26, 15, 0.88);

    color:
        #e1d3b6;

    padding:
        0.72rem
        1rem;

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.11em;

    text-decoration: none;
    text-transform: uppercase;
}


.admission-ticket__button:hover {
    background:
        #6f281f;

    border-color:
        #6f281f;

    color:
        #f1e5ca;
}


.admission-ticket__button--fast {
    background:
        #72271f;

    border-color:
        #72271f;
}


/* ============================================================
   WARNING
   ============================================================ */

.tickets-warning {
    display: flex;
    align-items: center;

    gap: 1rem;

    margin-top:
        clamp(3rem, 6vw, 4.5rem);

    padding:
        1rem
        1.15rem;

    border:
        1px solid rgba(128, 47, 41, 0.34);

    background:
        rgba(7, 7, 6, 0.7);

    backdrop-filter:
        blur(5px);
}


.tickets-warning__mark {
    flex: 0 0 auto;

    width: 34px;
    aspect-ratio: 1;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(178, 67, 58, 0.62);

    border-radius: 50%;

    color:
        #cb554b;

    font-family:
        "Courier New",
        monospace;

    font-weight: 800;
}


.tickets-warning p {
    margin: 0;

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

    font-size: 0.88rem;
}


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

@media (max-width: 900px) {

    .tickets-board {
        grid-template-columns: 1fr;

        gap: 2rem;
    }


    .admission-ticket {
        min-height: 0;
    }


    .admission-ticket--general,
    .admission-ticket--fast {
        transform:
            rotate(0deg);
    }
}


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

@media (max-width: 640px) {

    .section h2.tickets-title {
        font-size:
            clamp(4rem, 18vw, 6rem);
    }


    .admission-ticket {
        grid-template-columns:
            58px
            minmax(0, 1fr);
    }


    .admission-ticket__vertical {
        font-size: 1.25rem;
    }


    .admission-ticket__price-row {
        flex-direction: column;
    }


    .admission-ticket__stamp {
        margin-top: 0;
    }


    .admission-ticket__details {
        grid-template-columns: 1fr;
    }


    .admission-ticket__button {
        width: 100%;
    }


    .tickets-warning {
        align-items: flex-start;
    }
}

/* TICKETS PASS END */

/* TICKETS READABILITY START */

/*
 * Slightly enlarge the utility labels without changing the
 * approved ticket composition.
 */

.admission-ticket__topline {
    font-size: 0.76rem;
    line-height: 1.4;
    letter-spacing: 0.11em;
}

.admission-ticket__serial {
    font-size: 0.72rem;
}

.admission-ticket__stamp {
    font-size: 0.69rem;
    line-height: 1.3;
}

@media (max-width: 640px) {

    .admission-ticket__topline {
        font-size: 0.72rem;
    }

    .admission-ticket__serial {
        font-size: 0.68rem;
    }

    .admission-ticket__stamp {
        font-size: 0.66rem;
    }
}

/* TICKETS READABILITY END */

/* CONDITIONS PASS START */

.section--conditions {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    padding-block:
        clamp(5.5rem, 9vw, 8rem);

    background:
        linear-gradient(
            180deg,
            rgba(3, 3, 3, 0.78) 0%,
            rgba(3, 3, 3, 0.88) 55%,
            rgba(3, 3, 3, 0.97) 100%
        ),
        url("../images/the-crawlspace-experience.png")
        center 48% / cover no-repeat;
}


.conditions-atmosphere {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 81% 22%,
            rgba(193, 134, 66, 0.12),
            transparent 19%
        ),
        radial-gradient(
            circle at 18% 74%,
            rgba(120, 46, 43, 0.18),
            transparent 24%
        ),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.38),
            transparent 52%,
            rgba(0, 0, 0, 0.4)
        );
}


.section--conditions::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    opacity: 0.24;

    background:
        repeating-linear-gradient(
            101deg,
            transparent 0 39px,
            rgba(255, 255, 255, 0.018) 39px 40px,
            transparent 40px 83px
        );
}


.conditions-shell {
    position: relative;
    z-index: 2;
}


.conditions-heading {
    width: min(100%, 860px);

    margin-bottom:
        clamp(3rem, 6vw, 5rem);

    padding-left: 1.1rem;

    border-left:
        2px solid rgba(200, 144, 70, 0.68);
}


.section h2.conditions-title {
    margin: 0;

    color: var(--color-paper);

    font-family:
        "Haunted Hill Regular",
        var(--font-display);

    font-size:
        clamp(4.5rem, 8.5vw, 7.7rem);

    font-weight: 400;

    line-height: 0.82;
    letter-spacing: 0;
}


.conditions-intro {
    margin: 1.4rem 0 0;

    max-width: 58ch;

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

    font-family:
        var(--font-display);

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

    line-height: 1.5;
}


.conditions-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(360px, 0.78fr);

    gap:
        clamp(2rem, 5vw, 5rem);

    align-items: center;
}


/* ============================================================
   WARNING SHEET
   ============================================================ */

.conditions-warning {
    position: relative;

    overflow: hidden;

    padding:
        clamp(1.8rem, 4vw, 3rem);

    color: #20170f;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(64, 45, 29, 0.028) 0 1px,
            transparent 1px 4px
        ),
        radial-gradient(
            circle at 87% 14%,
            rgba(110, 30, 25, 0.15),
            transparent 16%
        ),
        #cbb995;

    box-shadow:
        0 32px 75px rgba(0, 0, 0, 0.64);

    transform:
        rotate(-0.7deg);

    clip-path:
        polygon(
            1% 1%,
            11% 0.3%,
            19% 1%,
            30% 0.2%,
            42% 0.8%,
            53% 0.2%,
            67% 0.9%,
            79% 0.2%,
            91% 0.8%,
            99% 0.4%,
            99.5% 19%,
            99% 38%,
            99.6% 57%,
            99% 78%,
            99.4% 99%,
            88% 99.6%,
            76% 98.9%,
            61% 99.5%,
            48% 98.9%,
            34% 99.6%,
            21% 98.9%,
            9% 99.5%,
            0.5% 99%,
            1% 80%,
            0.4% 59%,
            1% 38%,
            0.5% 18%
        );
}


.conditions-warning::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 93% 12%,
            rgba(100, 22, 18, 0.62) 0 8px,
            rgba(100, 22, 18, 0.25) 9px 14px,
            transparent 15px
        ),
        radial-gradient(
            circle at 89% 18%,
            rgba(100, 22, 18, 0.4) 0 4px,
            transparent 5px
        ),
        linear-gradient(
            105deg,
            transparent 0 69%,
            rgba(67, 43, 27, 0.09) 69.3% 69.7%,
            transparent 70% 100%
        );
}


.conditions-warning__pin {
    position: absolute;

    top: 10px;
    left: 50%;

    width: 18px;
    aspect-ratio: 1;

    border-radius: 50%;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            circle at 35% 30%,
            #bc8c50,
            #4d3422 72%
        );

    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.38);
}


.conditions-warning__eyebrow {
    margin: 0 0 0.6rem;

    color: #742a22;

    font-family:
        "Courier New",
        monospace;

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.conditions-warning h3 {
    margin: 0 0 1rem;

    color: #2b1b11;

    font-family:
        "Haunted Hill Regular",
        var(--font-display);

    font-size:
        clamp(2.9rem, 5vw, 4.8rem);

    font-weight: 400;

    line-height: 0.86;
}


.conditions-warning__lead {
    margin: 0 0 1.7rem;

    max-width: 52ch;

    color:
        rgba(40, 27, 17, 0.78);

    font-family:
        var(--font-display);

    font-size:
        clamp(1.05rem, 1.7vw, 1.3rem);

    line-height: 1.48;
}


.conditions-warning__list {
    display: grid;
    gap: 0;
}


.conditions-warning__row {
    display: grid;

    grid-template-columns:
        48px
        1fr;

    gap: 1rem;

    padding: 1rem 0;

    border-top:
        1px solid rgba(61, 41, 25, 0.28);
}


.conditions-warning__number {
    color:
        rgba(114, 42, 34, 0.74);

    font-family:
        "Courier New",
        monospace;

    font-size: 1rem;
    font-weight: 800;
}


.conditions-warning__row strong {
    display: block;

    margin-bottom: 0.22rem;

    color: #2e1e13;

    font-size: 0.86rem;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.conditions-warning__row p {
    margin: 0;

    color:
        rgba(40, 27, 17, 0.72);

    font-size: 0.9rem;

    line-height: 1.5;
}


.conditions-warning__stamp {
    position: absolute;

    right: 7%;
    bottom: 4%;

    border:
        2px solid rgba(116, 33, 27, 0.52);

    padding:
        0.45rem
        0.65rem;

    color:
        rgba(116, 33, 27, 0.66);

    font-family:
        "Courier New",
        monospace;

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.11em;

    text-transform: uppercase;

    transform:
        rotate(-8deg);
}


/* ============================================================
   SCENE COLLAGE
   ============================================================ */

.conditions-scenes {
    position: relative;

    min-height: 690px;
}


.conditions-scene {
    position: absolute;

    margin: 0;

    overflow: hidden;

    border:
        9px solid #c7b897;

    background: #1a1713;

    box-shadow:
        0 24px 50px rgba(0, 0, 0, 0.58);
}


.conditions-scene__image {
    width: 100%;
    height: 100%;

    background-repeat: no-repeat;
    background-size: cover;

    filter:
        saturate(0.74)
        contrast(1.08)
        brightness(0.82);
}


.conditions-scene figcaption {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding:
        0.8rem
        0.9rem;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(0, 0, 0, 0.92)
        );

    color:
        var(--color-paper);
}


.conditions-scene figcaption span {
    display: block;

    color:
        var(--color-tungsten);

    font-size: 0.62rem;
    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.conditions-scene figcaption strong {
    display: block;

    margin-top: 0.15rem;

    font-family:
        "Haunted Hill Regular",
        var(--font-display);

    font-size: 1.7rem;

    font-weight: 400;
}


.conditions-scene--crawl {
    top: 4%;
    left: 1%;

    z-index: 3;

    width: 74%;
    height: 42%;

    transform:
        rotate(-6deg);
}


.conditions-scene--crawl .conditions-scene__image {
    background-image:
        url("../images/the-crawlspace-experience.png");

    background-position:
        center 45%;
}


.conditions-scene--house {
    top: 29%;
    right: 0;

    z-index: 4;

    width: 72%;
    height: 40%;

    transform:
        rotate(5deg);
}


.conditions-scene--house .conditions-scene__image {
    background-image:
        url("../images/blackwood-house-experience.png");

    background-position:
        center 46%;
}


.conditions-scene--trees {
    bottom: 2%;
    left: 5%;

    z-index: 5;

    width: 72%;
    height: 39%;

    transform:
        rotate(-3deg);
}


.conditions-scene--trees .conditions-scene__image {
    background-image:
        url("../images/the-tree-line-experience.png");

    background-position:
        center 55%;
}


.conditions-scribble {
    position: absolute;

    right: -2%;
    bottom: 5%;

    z-index: 8;

    width: min(250px, 58%);

    padding:
        1rem
        1.1rem;

    background:
        #c3b28f;

    color:
        #321b15;

    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.44);

    transform:
        rotate(7deg);
}


.conditions-scribble span {
    font-family:
        "Courier New",
        monospace;

    font-size: 0.78rem;
    font-weight: 800;

    line-height: 1.45;
}


/* ============================================================
   BOTTOM STRIP
   ============================================================ */

.conditions-bottom {
    display: grid;

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

    gap: 0;

    margin-top:
        clamp(3.5rem, 7vw, 5rem);

    border:
        1px solid rgba(230, 221, 201, 0.14);

    background:
        rgba(5, 5, 5, 0.72);

    backdrop-filter:
        blur(6px);
}


.conditions-bottom__block {
    position: relative;

    padding:
        1rem
        1.2rem;

    border-right:
        1px solid rgba(230, 221, 201, 0.13);
}


.conditions-bottom__block:last-child {
    border-right: 0;
}


.conditions-bottom__block span,
.conditions-bottom__block strong {
    display: block;
}


.conditions-bottom__block span {
    margin-bottom: 0.2rem;

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

    font-size: 0.64rem;
    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.conditions-bottom__block strong {
    color:
        var(--color-tungsten);

    font-size: 0.88rem;

    text-transform: uppercase;
}


.conditions-bottom__block--red strong {
    color: #c65249;
}


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

@media (max-width: 980px) {

    .conditions-layout {
        grid-template-columns: 1fr;
    }

    .conditions-scenes {
        min-height: 620px;
        width: min(100%, 650px);
        margin-inline: auto;
    }

    .conditions-bottom {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .conditions-bottom__block:nth-child(2) {
        border-right: 0;
    }

    .conditions-bottom__block:nth-child(-n+2) {
        border-bottom:
            1px solid rgba(230, 221, 201, 0.13);
    }
}


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

@media (max-width: 640px) {

    .section h2.conditions-title {
        font-size:
            clamp(3.9rem, 17vw, 5.8rem);
    }

    .conditions-warning {
        transform:
            rotate(0deg);
    }

    .conditions-warning__row {
        grid-template-columns:
            38px
            1fr;
    }

    .conditions-warning__stamp {
        position: static;
        width: max-content;
        margin-top: 1.4rem;
    }

    .conditions-scenes {
        min-height: 540px;
    }

    .conditions-scene--crawl,
    .conditions-scene--house,
    .conditions-scene--trees {
        width: 78%;
    }

    .conditions-scribble {
        width: 62%;
    }

    .conditions-bottom {
        grid-template-columns: 1fr;
    }

    .conditions-bottom__block {
        border-right: 0;

        border-bottom:
            1px solid rgba(230, 221, 201, 0.13);
    }

    .conditions-bottom__block:last-child {
        border-bottom: 0;
    }
}

/* CONDITIONS PASS END */

/* CONDITIONS COLLAGE FIX START */

/*
 * Move the Blackwood House photo just enough to stop it from
 * covering the Crawlspace caption while preserving the collage.
 */

.conditions-scene--house {
    top: 36%;
    right: -2%;
    width: 69%;
    height: 38%;
}


/*
 * Keep the Crawlspace label comfortably readable.
 */

.conditions-scene--crawl figcaption {
    padding-bottom: 1rem;
}


/* Tablet */

@media (max-width: 980px) {

    .conditions-scene--house {
        top: 35%;
        right: 0;
        width: 68%;
    }
}


/* Mobile */

@media (max-width: 640px) {

    .conditions-scene--house {
        top: 34%;
        right: 0;
        width: 74%;
    }
}

/* CONDITIONS COLLAGE FIX END */

/* CONDITIONS CAPTION CLEAR START */

/*
 * Final small shift so the full Crawlspace caption remains visible.
 */

.conditions-scene--house {
    top: 39%;
    right: -6%;
    width: 64%;
    height: 36%;
}


/* Tablet */

@media (max-width: 980px) {

    .conditions-scene--house {
        top: 38%;
        right: -3%;
        width: 64%;
        height: 36%;
    }
}


/* Mobile */

@media (max-width: 640px) {

    .conditions-scene--house {
        top: 37%;
        right: -4%;
        width: 70%;
        height: 35%;
    }
}

/* CONDITIONS CAPTION CLEAR END */

/* HOUSE CAPTION FIX START */

/*
 * Keep the approved collage exactly where it is.
 * Move only the Blackwood House caption to the top so the
 * Tree Line photograph cannot cover it.
 */

.conditions-scene--house figcaption {
    top: 0;
    bottom: auto;

    padding:
        0.9rem
        0.95rem
        1.8rem;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.92) 0%,
            rgba(0, 0, 0, 0.58) 58%,
            transparent 100%
        );
}

/* HOUSE CAPTION FIX END */

/* KNOW BEFORE YOU GO START */

/* ============================================================
   KNOW BEFORE YOU GO
   ============================================================ */

.section--know {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    padding-block:
        clamp(5.5rem, 9vw, 8rem);

    background:
        linear-gradient(
            180deg,
            rgba(4, 4, 4, 0.72) 0%,
            rgba(4, 4, 4, 0.86) 55%,
            rgba(4, 4, 4, 0.96) 100%
        ),
        url("../images/the-tree-line-experience.png")
        center 53% / cover no-repeat;
}


.know-atmosphere {
    position: absolute;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 82% 17%,
            rgba(203, 208, 210, 0.08),
            transparent 24%
        ),
        radial-gradient(
            circle at 12% 82%,
            rgba(117, 42, 35, 0.17),
            transparent 22%
        ),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.34),
            transparent 48%,
            rgba(0, 0, 0, 0.38)
        );
}


.section--know::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    opacity: 0.25;

    background:
        repeating-linear-gradient(
            99deg,
            transparent 0 42px,
            rgba(255, 255, 255, 0.018) 42px 43px,
            transparent 43px 87px
        );
}


.know-shell {
    position: relative;
    z-index: 2;
}


/* ============================================================
   HEADING
   ============================================================ */

.know-heading {
    width: min(100%, 880px);

    margin-bottom:
        clamp(3rem, 6vw, 5rem);

    padding-left: 1.1rem;

    border-left:
        2px solid rgba(200, 144, 70, 0.68);
}


.section h2.know-title {
    margin: 0;

    color: var(--color-paper);

    font-family:
        "Haunted Hill Regular",
        var(--font-display);

    font-size:
        clamp(4.5rem, 8.5vw, 7.7rem);

    font-weight: 400;

    line-height: 0.82;
    letter-spacing: 0;
}


.know-intro {
    margin: 1.4rem 0 0;

    max-width: 58ch;

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

    font-family:
        var(--font-display);

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

    line-height: 1.5;
}


/* ============================================================
   NOTICE WALL
   ============================================================ */

.notice-wall {
    position: relative;

    min-height: 980px;

    padding:
        clamp(2rem, 4vw, 4rem);

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

    background:
        linear-gradient(
            180deg,
            rgba(24, 20, 15, 0.92),
            rgba(11, 10, 8, 0.96)
        );

    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.62);
}


.notice-wall::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.28;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(137, 105, 69, 0.045) 0 2px,
            transparent 2px 24px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(137, 105, 69, 0.03) 0 1px,
            transparent 1px 52px
        );
}


/* ============================================================
   PROPERTY PHOTO
   ============================================================ */

.notice-wall__photo {
    position: absolute;

    top: 3%;
    right: 4%;

    z-index: 2;

    width: 34%;

    padding:
        0.8rem
        0.8rem
        2.5rem;

    background:
        #c7b997;

    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.54);

    transform:
        rotate(5deg);
}


.notice-wall__photo-image {
    aspect-ratio: 4 / 3;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(0, 0, 0, 0.22)
        ),
        url("../images/blackwood-house-experience.png")
        center 48% / cover no-repeat;

    filter:
        saturate(0.72)
        contrast(1.08)
        brightness(0.83);
}


.notice-wall__photo span {
    position: absolute;

    left: 1rem;
    bottom: 0.6rem;

    color:
        #3e2819;

    font-family:
        "Courier New",
        monospace;

    font-size: 0.7rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* ============================================================
   POSTED NOTICES
   ============================================================ */

.posted-notice {
    position: absolute;

    z-index: 4;

    padding:
        1.5rem
        1.6rem;

    color:
        #25180f;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(65, 44, 28, 0.026) 0 1px,
            transparent 1px 4px
        ),
        #cbbb99;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.5);

    clip-path:
        polygon(
            1% 1%,
            12% 0.3%,
            24% 1%,
            39% 0.2%,
            54% 0.8%,
            69% 0.2%,
            84% 0.9%,
            99% 0.3%,
            99.5% 22%,
            99% 47%,
            99.5% 72%,
            99% 99%,
            82% 99.5%,
            64% 98.9%,
            46% 99.6%,
            28% 98.9%,
            10% 99.5%,
            0.5% 99%,
            1% 70%,
            0.4% 41%,
            1% 18%
        );
}


.posted-notice::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            109deg,
            transparent 0 61%,
            rgba(73, 49, 31, 0.08) 61.2% 61.5%,
            transparent 61.7% 100%
        );
}


.posted-notice--rules {
    top: 8%;
    left: 4%;

    width: 53%;

    transform:
        rotate(-2deg);
}


.posted-notice--health {
    top: 42%;
    right: 5%;

    width: 43%;

    transform:
        rotate(2.5deg);
}


.posted-notice--weather {
    bottom: 5%;
    left: 6%;

    width: 41%;

    transform:
        rotate(1.4deg);
}


.posted-notice--arrival {
    top: 49%;
    left: 8%;

    width: 37%;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(57, 41, 29, 0.032) 0 1px,
            transparent 1px 4px
        ),
        #b9aa8c;

    transform:
        rotate(-3deg);
}


/* ============================================================
   TAPE + PIN
   ============================================================ */

.posted-notice__tape {
    position: absolute;

    top: -13px;
    left: 42%;

    width: 92px;
    height: 28px;

    background:
        rgba(197, 175, 127, 0.56);

    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.13);

    transform:
        rotate(3deg);
}


.posted-notice__tape--red {
    background:
        rgba(113, 42, 34, 0.6);

    transform:
        rotate(-5deg);
}


.posted-notice__pin {
    position: absolute;

    top: 11px;
    left: 50%;

    width: 16px;
    aspect-ratio: 1;

    border-radius: 50%;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            circle at 35% 30%,
            #ad8150,
            #49311f 72%
        );

    box-shadow:
        0 4px 7px rgba(0, 0, 0, 0.35);
}


/* ============================================================
   NOTICE TYPE
   ============================================================ */

.posted-notice__label {
    margin:
        0 0
        0.45rem;

    color:
        #7d2c24;

    font-family:
        "Courier New",
        monospace;

    font-size: 0.69rem;
    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.posted-notice h3 {
    margin:
        0 0
        0.85rem;

    color:
        #2e1c12;

    font-family:
        "Haunted Hill Regular",
        var(--font-display);

    font-size:
        clamp(2.3rem, 4vw, 3.8rem);

    font-weight: 400;

    line-height: 0.88;
}


.posted-notice p,
.posted-notice li,
.posted-notice dd {
    color:
        rgba(42, 28, 18, 0.78);

    font-size: 0.88rem;

    line-height: 1.5;
}


.posted-notice ul {
    margin:
        1rem 0 0;

    padding-left: 1.1rem;
}


.posted-notice li + li {
    margin-top: 0.55rem;
}


.posted-notice__callout {
    display: inline-block;

    margin-top: 0.65rem;

    border:
        1px solid rgba(118, 41, 33, 0.46);

    padding:
        0.55rem
        0.7rem;

    color:
        #772b23;

    font-family:
        "Courier New",
        monospace;

    font-size: 0.7rem;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    transform:
        rotate(-1deg);
}


/* ============================================================
   ARRIVAL TABLE
   ============================================================ */

.posted-notice dl {
    margin: 0;
}


.posted-notice dl > div {
    display: grid;

    grid-template-columns:
        92px
        1fr;

    gap: 0.8rem;

    padding:
        0.6rem 0;

    border-top:
        1px solid rgba(64, 43, 27, 0.23);
}


.posted-notice dt {
    color:
        #792d25;

    font-family:
        "Courier New",
        monospace;

    font-size: 0.67rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.posted-notice dd {
    margin: 0;
}


/* ============================================================
   PROPERTY WARNING
   ============================================================ */

.notice-wall__warning {
    position: absolute;

    right: 7%;
    bottom: 4%;

    z-index: 7;

    width: 39%;

    padding:
        1.2rem
        1.3rem;

    border:
        2px solid rgba(137, 49, 41, 0.62);

    background:
        rgba(44, 11, 10, 0.88);

    color:
        var(--color-paper);

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.44);

    transform:
        rotate(-1deg);
}


.notice-wall__warning span {
    display: block;

    margin-bottom: 0.45rem;

    color:
        #cf665c;

    font-family:
        "Courier New",
        monospace;

    font-size: 0.65rem;

    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.notice-wall__warning strong {
    display: block;

    margin-bottom: 0.5rem;

    font-family:
        var(--font-display);

    font-size:
        1.25rem;

    line-height: 1.25;
}


.notice-wall__warning p {
    margin: 0;

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

    font-size: 0.82rem;

    line-height: 1.5;
}


/* ============================================================
   SCRIBBLE
   ============================================================ */

.notice-wall__scribble {
    position: absolute;

    top: 37%;
    left: 49%;

    z-index: 8;

    max-width: 260px;

    padding:
        0.9rem
        1rem;

    background:
        #c8b995;

    color:
        #3f2018;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.36);

    font-family:
        "Courier New",
        monospace;

    font-size: 0.72rem;

    font-weight: 800;

    line-height: 1.45;

    transform:
        rotate(6deg);
}


/* ============================================================
   BOTTOM STRIP
   ============================================================ */

.know-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 2rem;

    margin-top:
        clamp(2.5rem, 5vw, 4rem);

    padding:
        1.15rem
        1.25rem;

    border:
        1px solid rgba(230, 221, 201, 0.13);

    background:
        rgba(5, 5, 5, 0.72);

    backdrop-filter:
        blur(6px);
}


.know-bottom span,
.know-bottom strong {
    display: block;
}


.know-bottom span {
    color:
        rgba(230, 221, 201, 0.48);

    font-size: 0.65rem;

    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.know-bottom strong {
    margin-top: 0.18rem;

    color:
        var(--color-paper);

    font-family:
        var(--font-display);

    font-size: 1.1rem;
}


.know-bottom a {
    flex: 0 0 auto;

    border:
        1px solid rgba(142, 54, 47, 0.68);

    background:
        rgba(111, 37, 32, 0.8);

    color:
        var(--color-paper);

    padding:
        0.7rem
        1rem;

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.1em;

    text-decoration: none;

    text-transform: uppercase;
}


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

@media (max-width: 980px) {

    .notice-wall {
        min-height: 1220px;
    }


    .notice-wall__photo {
        width: 42%;
    }


    .posted-notice--rules {
        width: 58%;
    }


    .posted-notice--health {
        top: 45%;
        width: 46%;
    }


    .posted-notice--arrival {
        top: 52%;
        width: 42%;
    }


    .posted-notice--weather {
        width: 44%;
    }


    .notice-wall__warning {
        width: 45%;
    }
}


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

@media (max-width: 700px) {

    .section h2.know-title {
        font-size:
            clamp(3.9rem, 17vw, 5.8rem);
    }


    .notice-wall {
        min-height: 0;

        display: grid;

        gap: 1.2rem;

        padding:
            1.2rem;
    }


    .notice-wall__photo,
    .posted-notice,
    .notice-wall__warning,
    .notice-wall__scribble {
        position: relative;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        width: 100%;

        transform:
            rotate(0deg);
    }


    .notice-wall__photo {
        order: 1;
    }


    .posted-notice--rules {
        order: 2;
    }


    .posted-notice--health {
        order: 3;
    }


    .posted-notice--weather {
        order: 4;
    }


    .posted-notice--arrival {
        order: 5;
    }


    .notice-wall__scribble {
        order: 6;
    }


    .notice-wall__warning {
        order: 7;
    }


    .know-bottom {
        align-items: flex-start;

        flex-direction: column;
    }


    .know-bottom a {
        width: 100%;

        text-align: center;
    }
}

/* KNOW BEFORE YOU GO END */

/* NOTICE WALL OVERLAP FIX START */

/*
 * Give the lower notice wall enough room for Arrival and
 * Weather to exist as separate readable sheets.
 */

.notice-wall {
    min-height: 1320px;
}


/*
 * Arrival stays in the lower-left cluster but moves slightly
 * upward and narrows just enough to clear the next notice.
 */

.posted-notice--arrival {
    top: 46%;
    left: 5%;

    width: 36%;

    z-index: 6;
}


/*
 * Weather now gets its own readable space underneath Arrival.
 */

.posted-notice--weather {
    top: 76%;
    bottom: auto;
    left: 6%;

    width: 42%;

    z-index: 7;

    transform:
        rotate(1.4deg);
}


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

@media (max-width: 980px) {

    .notice-wall {
        min-height: 1420px;
    }

    .posted-notice--arrival {
        top: 48%;
        left: 4%;

        width: 40%;
    }

    .posted-notice--weather {
        top: 77%;
        left: 5%;

        width: 45%;
    }
}


/* ============================================================
   MOBILE
   Preserve the existing stacked mobile layout.
   ============================================================ */

@media (max-width: 700px) {

    .notice-wall {
        min-height: 0;
    }

    .posted-notice--arrival,
    .posted-notice--weather {
        position: relative;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        width: 100%;

        transform:
            rotate(0deg);
    }
}

/* NOTICE WALL OVERLAP FIX END */

/* WITNESS STATEMENTS START */

/* ============================================================
   WITNESS STATEMENTS
   ============================================================ */

.section--witness {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    padding-block:
        clamp(5.5rem, 9vw, 8rem);

    background:
        linear-gradient(
            180deg,
            rgba(4, 4, 4, 0.76) 0%,
            rgba(4, 4, 4, 0.88) 56%,
            rgba(4, 4, 4, 0.97) 100%
        ),
        url("../images/blackwood-house-experience.png")
        center 52% / cover no-repeat;
}


.witness-atmosphere {
    position: absolute;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 80% 18%,
            rgba(195, 204, 208, 0.07),
            transparent 23%
        ),
        radial-gradient(
            circle at 13% 78%,
            rgba(121, 43, 36, 0.17),
            transparent 25%
        ),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.4),
            transparent 49%,
            rgba(0, 0, 0, 0.38)
        );
}


.section--witness::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    opacity: 0.22;

    background:
        repeating-linear-gradient(
            102deg,
            transparent 0 41px,
            rgba(255, 255, 255, 0.018) 41px 42px,
            transparent 42px 87px
        );
}


.witness-shell {
    position: relative;
    z-index: 2;
}


/* ============================================================
   HEADING
   ============================================================ */

.witness-heading {
    width: min(100%, 850px);

    margin-bottom:
        clamp(3rem, 6vw, 5rem);

    padding-left: 1.1rem;

    border-left:
        2px solid rgba(200, 144, 70, 0.68);
}


.section h2.witness-title {
    margin: 0;

    color: var(--color-paper);

    font-family:
        "Haunted Hill Regular",
        var(--font-display);

    font-size:
        clamp(4.5rem, 8.5vw, 7.7rem);

    font-weight: 400;

    line-height: 0.82;
}


.witness-intro {
    margin: 1.4rem 0 0;

    max-width: 54ch;

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

    font-family:
        var(--font-display);

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

    line-height: 1.5;
}


/* ============================================================
   WITNESS BOARD
   ============================================================ */

.witness-board {
    position: relative;

    min-height: 930px;

    border:
        1px solid rgba(230, 221, 201, 0.11);

    background:
        linear-gradient(
            180deg,
            rgba(23, 18, 14, 0.92),
            rgba(10, 9, 8, 0.97)
        );

    box-shadow:
        0 34px 78px rgba(0, 0, 0, 0.62);
}


.witness-board::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.3;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(139, 105, 67, 0.045) 0 2px,
            transparent 2px 26px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(139, 105, 67, 0.026) 0 1px,
            transparent 1px 58px
        );
}


/* ============================================================
   NOTES
   ============================================================ */

.witness-note {
    position: absolute;

    z-index: 4;

    width: 39%;

    min-height: 260px;

    padding:
        1.6rem
        1.7rem;

    color: #271910;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(61, 43, 28, 0.028) 0 1px,
            transparent 1px 4px
        ),
        #c8b895;

    box-shadow:
        0 22px 48px rgba(0, 0, 0, 0.5);

    clip-path:
        polygon(
            1% 1%,
            11% 0.3%,
            24% 0.9%,
            38% 0.2%,
            52% 0.8%,
            67% 0.2%,
            82% 0.9%,
            99% 0.3%,
            99.5% 22%,
            99% 49%,
            99.6% 75%,
            99% 99%,
            80% 99.5%,
            62% 98.9%,
            43% 99.6%,
            25% 98.9%,
            9% 99.5%,
            0.5% 99%,
            1% 71%,
            0.4% 42%,
            1% 18%
        );
}


.witness-note--one {
    top: 7%;
    left: 5%;

    transform:
        rotate(-3deg);
}


.witness-note--two {
    top: 12%;
    right: 5%;

    transform:
        rotate(2.6deg);

    background:
        repeating-linear-gradient(
            0deg,
            rgba(61, 43, 28, 0.03) 0 1px,
            transparent 1px 4px
        ),
        #b9aa8d;
}


.witness-note--three {
    bottom: 8%;
    left: 7%;

    transform:
        rotate(2deg);
}


.witness-note--four {
    bottom: 10%;
    right: 7%;

    transform:
        rotate(-2.4deg);

    background:
        repeating-linear-gradient(
            0deg,
            rgba(61, 43, 28, 0.03) 0 1px,
            transparent 1px 4px
        ),
        #c0af8f;
}


/* ============================================================
   TAPE + PIN
   ============================================================ */

.witness-note__tape {
    position: absolute;

    top: -13px;
    left: 39%;

    width: 96px;
    height: 28px;

    background:
        rgba(196, 175, 128, 0.58);

    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.12);

    transform:
        rotate(4deg);
}


.witness-note__tape--red {
    background:
        rgba(112, 40, 34, 0.62);

    transform:
        rotate(-5deg);
}


.witness-note__pin {
    position: absolute;

    top: 10px;
    left: 50%;

    width: 16px;
    aspect-ratio: 1;

    border-radius: 50%;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            circle at 35% 30%,
            #af8250,
            #49311f 72%
        );

    box-shadow:
        0 4px 7px rgba(0, 0, 0, 0.35);
}


/* ============================================================
   REVIEW CONTENT
   ============================================================ */

.witness-note__rating {
    display: inline-block;

    margin-bottom: 1rem;

    border:
        1px solid rgba(113, 42, 34, 0.48);

    padding:
        0.35rem
        0.5rem;

    color:
        #762c24;

    font-family:
        "Courier New",
        monospace;

    font-size: 0.7rem;
    font-weight: 800;

    letter-spacing: 0.09em;

    transform:
        rotate(-2deg);
}


.witness-note blockquote {
    margin: 0;

    color:
        #2a1a11;

    font-family:
        var(--font-display);

    font-size:
        clamp(1.25rem, 2.1vw, 1.75rem);

    line-height: 1.42;
}


.witness-note footer {
    margin-top: 1.4rem;

    padding-top: 0.8rem;

    border-top:
        1px solid rgba(62, 42, 27, 0.26);
}


.witness-note footer strong,
.witness-note footer span {
    display: block;
}


.witness-note footer strong {
    color:
        #752b23;

    font-family:
        "Courier New",
        monospace;

    font-size: 0.8rem;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


.witness-note footer span {
    margin-top: 0.2rem;

    color:
        rgba(43, 29, 19, 0.62);

    font-size: 0.7rem;

    font-weight: 700;
}


/* ============================================================
   EXIT PHOTO
   ============================================================ */

.witness-photo {
    position: absolute;

    z-index: 7;

    top: 37%;
    left: 39%;

    width: 27%;

    padding:
        0.75rem
        0.75rem
        2.3rem;

    background:
        #c6b794;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.52);

    transform:
        rotate(5deg);
}


.witness-photo__image {
    aspect-ratio: 4 / 3;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(0, 0, 0, 0.24)
        ),
        url("../images/the-tree-line-experience.png")
        center 58% / cover no-repeat;

    filter:
        saturate(0.72)
        contrast(1.08)
        brightness(0.78);
}


.witness-photo span {
    position: absolute;

    left: 1rem;
    bottom: 0.55rem;

    color:
        #3e2819;

    font-family:
        "Courier New",
        monospace;

    font-size: 0.67rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* ============================================================
   BOARD DETAILS
   ============================================================ */

.witness-stamp {
    position: absolute;

    z-index: 9;

    top: 46%;
    right: 6%;

    border:
        2px solid rgba(128, 44, 37, 0.56);

    padding:
        0.55rem
        0.7rem;

    color:
        rgba(183, 74, 64, 0.72);

    font-family:
        "Courier New",
        monospace;

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    transform:
        rotate(-8deg);
}


.witness-scribble {
    position: absolute;

    z-index: 8;

    top: 49%;
    left: 8%;

    max-width: 250px;

    padding:
        0.9rem
        1rem;

    background:
        #beae8d;

    color:
        #3d2018;

    box-shadow:
        0 13px 28px rgba(0, 0, 0, 0.4);

    font-family:
        "Courier New",
        monospace;

    font-size: 0.73rem;
    font-weight: 800;

    line-height: 1.45;

    transform:
        rotate(-6deg);
}


/* ============================================================
   BOTTOM STRIP
   ============================================================ */

.witness-bottom {
    display: grid;

    grid-template-columns:
        1fr
        1fr
        auto;

    align-items: center;

    gap: 1rem;

    margin-top:
        clamp(2.5rem, 5vw, 4rem);

    border:
        1px solid rgba(230, 221, 201, 0.13);

    background:
        rgba(5, 5, 5, 0.72);

    backdrop-filter:
        blur(6px);
}


.witness-bottom > div {
    padding:
        1rem
        1.2rem;

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


.witness-bottom span,
.witness-bottom strong {
    display: block;
}


.witness-bottom span {
    color:
        rgba(230, 221, 201, 0.48);

    font-size: 0.64rem;

    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.witness-bottom strong {
    margin-top: 0.2rem;

    color:
        var(--color-tungsten);

    font-family:
        var(--font-display);

    font-size: 1.1rem;
}


.witness-bottom a {
    margin-right: 1rem;

    border:
        1px solid rgba(143, 54, 47, 0.68);

    background:
        rgba(111, 37, 32, 0.82);

    color:
        var(--color-paper);

    padding:
        0.75rem
        1rem;

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.1em;

    text-decoration: none;
    text-transform: uppercase;
}


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

@media (max-width: 980px) {

    .witness-board {
        min-height: 1080px;
    }


    .witness-note {
        width: 44%;
    }


    .witness-photo {
        width: 31%;
        left: 34%;
    }
}


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

@media (max-width: 700px) {

    .section h2.witness-title {
        font-size:
            clamp(3.9rem, 17vw, 5.8rem);
    }


    .witness-board {
        min-height: 0;

        display: grid;

        gap: 1.2rem;

        padding:
            1.2rem;
    }


    .witness-note,
    .witness-photo,
    .witness-stamp,
    .witness-scribble {
        position: relative;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        width: 100%;

        transform:
            rotate(0deg);
    }


    .witness-stamp {
        width: max-content;
    }


    .witness-bottom {
        grid-template-columns: 1fr;
    }


    .witness-bottom > div {
        border-right: 0;

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


    .witness-bottom a {
        margin:
            0
            1rem
            1rem;

        text-align: center;
    }
}

/* WITNESS STATEMENTS END */

/* WITNESS PHOTO LAYER FIX START */

/*
 * Keep the center photo in the collage, but move it behind
 * the witness statements so no review text gets covered.
 */

.witness-photo {
    z-index: 3;
}


/*
 * Witness sheets remain above the photograph.
 */

.witness-note {
    z-index: 5;
}


/*
 * Small handwritten details and stamp stay above everything.
 */

.witness-scribble,
.witness-stamp {
    z-index: 8;
}


/*
 * Slightly reduce the photo so more of all four statements
 * remains visible while preserving the center collage.
 */

.witness-photo {
    width: 24%;
    left: 38%;
    top: 38%;
}


/* Tablet */

@media (max-width: 980px) {

    .witness-photo {
        width: 27%;
        left: 36%;
    }
}


/* Mobile already becomes a stacked layout. */

@media (max-width: 700px) {

    .witness-photo {
        width: 100%;
        left: auto;
        top: auto;

        z-index: auto;
    }
}

/* WITNESS PHOTO LAYER FIX END */

/* FAQ PASS START */

/* ============================================================
   FAQ
   ============================================================ */

.section--faq {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    padding-block:
        clamp(5.5rem, 9vw, 8rem);

    background:
        linear-gradient(
            180deg,
            rgba(4, 4, 4, 0.76) 0%,
            rgba(4, 4, 4, 0.88) 55%,
            rgba(4, 4, 4, 0.97) 100%
        ),
        url("../images/the-experiences-background.png")
        center 55% / cover no-repeat;
}


.faq-atmosphere {
    position: absolute;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(201, 206, 208, 0.08),
            transparent 24%
        ),
        radial-gradient(
            circle at 12% 76%,
            rgba(117, 41, 35, 0.16),
            transparent 24%
        ),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.4),
            transparent 50%,
            rgba(0, 0, 0, 0.38)
        );
}


.section--faq::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    opacity: 0.24;

    background:
        repeating-linear-gradient(
            103deg,
            transparent 0 41px,
            rgba(255, 255, 255, 0.018) 41px 42px,
            transparent 42px 88px
        );
}


.faq-shell {
    position: relative;
    z-index: 2;
}


/* ============================================================
   HEADING
   ============================================================ */

.faq-heading {
    width: min(100%, 920px);

    margin-bottom:
        clamp(3rem, 6vw, 5rem);

    padding-left: 1.1rem;

    border-left:
        2px solid rgba(200, 144, 70, 0.68);
}


.section h2.faq-title {
    margin: 0;

    color: var(--color-paper);

    font-family:
        "Haunted Hill Regular",
        var(--font-display);

    font-size:
        clamp(4.2rem, 8vw, 7.2rem);

    font-weight: 400;

    line-height: 0.84;
}


.faq-intro {
    margin:
        1.4rem 0 0;

    max-width: 56ch;

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

    font-family:
        var(--font-display);

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

    line-height: 1.5;
}


/* ============================================================
   LAYOUT
   ============================================================ */

.faq-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(300px, 0.52fr);

    gap:
        clamp(2rem, 5vw, 4.5rem);

    align-items: start;
}


/* ============================================================
   FILE
   ============================================================ */

.faq-file {
    position: relative;

    padding:
        clamp(1.5rem, 3vw, 2.3rem);

    color:
        #24170f;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(62, 43, 28, 0.028) 0 1px,
            transparent 1px 4px
        ),
        #c7b795;

    box-shadow:
        0 32px 72px rgba(0, 0, 0, 0.64);

    transform:
        rotate(-0.55deg);

    clip-path:
        polygon(
            1% 0.8%,
            12% 0.2%,
            24% 0.8%,
            38% 0.2%,
            52% 0.8%,
            67% 0.2%,
            82% 0.8%,
            99% 0.3%,
            99.5% 18%,
            99% 39%,
            99.6% 61%,
            99% 81%,
            99.4% 99%,
            83% 99.6%,
            64% 98.9%,
            46% 99.6%,
            28% 98.9%,
            10% 99.5%,
            0.5% 99%,
            1% 76%,
            0.4% 52%,
            1% 27%
        );
}


.faq-file__tab {
    position: absolute;

    top: -38px;
    left: 1.4rem;

    padding:
        0.65rem
        1rem;

    background:
        #8a322a;

    color:
        #eadbc0;

    font-family:
        "Courier New",
        monospace;

    font-size: 0.7rem;

    font-weight: 800;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    transform:
        rotate(-1deg);
}


.faq-file__header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 1rem;

    padding-bottom: 1rem;

    border-bottom:
        2px solid rgba(62, 42, 27, 0.32);
}


.faq-file__header span {
    color:
        #762b23;

    font-family:
        "Courier New",
        monospace;

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.faq-file__header strong {
    color:
        rgba(45, 29, 18, 0.72);

    font-size: 0.72rem;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


/* ============================================================
   FAQ ITEMS
   ============================================================ */

.faq-list {
    margin-top: 0.5rem;
}


.faq-item {
    position: relative;

    border-bottom:
        1px solid rgba(64, 43, 27, 0.28);
}


.faq-item summary {
    position: relative;

    display: grid;

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

    gap: 0.8rem;

    align-items: center;

    min-height: 80px;

    padding:
        0.8rem
        0;

    cursor: pointer;

    list-style: none;
}


.faq-item summary::-webkit-details-marker {
    display: none;
}


.faq-item__number {
    color:
        #812f27;

    font-family:
        "Courier New",
        monospace;

    font-size: 0.83rem;

    font-weight: 800;
}


.faq-item__question {
    color:
        #2d1c12;

    font-family:
        "Haunted Hill Regular",
        var(--font-display);

    font-size:
        clamp(1.8rem, 3vw, 2.75rem);

    line-height: 0.95;
}


.faq-item__mark {
    width: 30px;
    aspect-ratio: 1;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(105, 43, 34, 0.5);

    color:
        #7c2d25;

    font-family:
        "Courier New",
        monospace;

    font-size: 1.1rem;

    transition:
        transform 180ms ease,
        background 180ms ease;
}


.faq-item[open] .faq-item__mark {
    background:
        rgba(116, 42, 34, 0.11);

    transform:
        rotate(45deg);
}


.faq-item__answer {
    padding:
        0
        3.2rem
        1.2rem
        3.4rem;
}


.faq-item__answer p {
    margin: 0;

    color:
        rgba(43, 29, 19, 0.75);

    font-size: 0.94rem;

    line-height: 1.62;
}


/* ============================================================
   STAMP
   ============================================================ */

.faq-file__stamp {
    width: max-content;

    margin:
        1.7rem
        0
        0
        auto;

    border:
        2px solid rgba(116, 40, 34, 0.5);

    padding:
        0.5rem
        0.7rem;

    color:
        rgba(116, 40, 34, 0.65);

    font-family:
        "Courier New",
        monospace;

    font-size: 0.66rem;

    font-weight: 800;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    transform:
        rotate(-5deg);
}


/* ============================================================
   SIDE COLUMN
   ============================================================ */

.faq-side {
    position: relative;

    min-height: 650px;
}


.faq-photo {
    position: relative;

    margin: 0;

    padding:
        0.8rem
        0.8rem
        2.5rem;

    background:
        #c6b794;

    box-shadow:
        0 24px 54px rgba(0, 0, 0, 0.56);

    transform:
        rotate(5deg);
}


.faq-photo__image {
    aspect-ratio:
        4 / 5;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(0, 0, 0, 0.24)
        ),
        url("../images/blackwood-house-experience.png")
        center 49% / cover no-repeat;

    filter:
        saturate(0.74)
        contrast(1.08)
        brightness(0.8);
}


.faq-photo figcaption {
    position: absolute;

    left: 1rem;
    bottom: 0.6rem;

    color:
        #3e2819;

    font-family:
        "Courier New",
        monospace;

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 0.07em;
}


/* ============================================================
   SIDE NOTE
   ============================================================ */

.faq-note {
    position: absolute;

    z-index: 5;

    right: -3%;
    bottom: 10%;

    width: 88%;

    padding:
        1.3rem
        1.4rem;

    background:
        #b9a989;

    color:
        #2b1b11;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.5);

    transform:
        rotate(-4deg);
}


.faq-note span,
.faq-note strong {
    display: block;
}


.faq-note span {
    color:
        #792d25;

    font-family:
        "Courier New",
        monospace;

    font-size: 0.66rem;

    font-weight: 800;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.faq-note strong {
    margin:
        0.35rem 0
        0.55rem;

    font-family:
        "Haunted Hill Regular",
        var(--font-display);

    font-size: 2.5rem;

    font-weight: 400;

    line-height: 0.9;
}


.faq-note p {
    margin: 0;

    color:
        rgba(43, 29, 19, 0.72);

    font-size: 0.86rem;

    line-height: 1.5;
}


/* ============================================================
   SCRIBBLE
   ============================================================ */

.faq-scribble {
    position: absolute;

    z-index: 7;

    left: -10%;
    bottom: 0;

    width: 82%;

    padding:
        0.85rem
        0.95rem;

    background:
        #c5b592;

    color:
        #3f2018;

    box-shadow:
        0 13px 28px rgba(0, 0, 0, 0.4);

    font-family:
        "Courier New",
        monospace;

    font-size: 0.72rem;

    font-weight: 800;

    line-height: 1.45;

    transform:
        rotate(6deg);
}


/* ============================================================
   BOTTOM CTA
   ============================================================ */

.faq-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 2rem;

    margin-top:
        clamp(3rem, 6vw, 4.5rem);

    padding:
        1rem
        1.2rem;

    border:
        1px solid rgba(230, 221, 201, 0.13);

    background:
        rgba(5, 5, 5, 0.74);

    backdrop-filter:
        blur(6px);
}


.faq-bottom span,
.faq-bottom strong {
    display: block;
}


.faq-bottom span {
    color:
        rgba(230, 221, 201, 0.48);

    font-size: 0.64rem;

    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.faq-bottom strong {
    margin-top: 0.18rem;

    color:
        var(--color-paper);

    font-family:
        var(--font-display);

    font-size: 1.15rem;
}


.faq-bottom a {
    flex: 0 0 auto;

    border:
        1px solid rgba(143, 54, 47, 0.68);

    background:
        rgba(111, 37, 32, 0.82);

    color:
        var(--color-paper);

    padding:
        0.75rem
        1rem;

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.1em;

    text-decoration: none;

    text-transform: uppercase;
}


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

@media (max-width: 980px) {

    .faq-layout {
        grid-template-columns: 1fr;
    }

    .faq-side {
        width: min(100%, 560px);

        min-height: 640px;

        margin-inline: auto;
    }
}


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

@media (max-width: 700px) {

    .section h2.faq-title {
        font-size:
            clamp(3.8rem, 16vw, 5.6rem);
    }

    .faq-file {
        transform:
            rotate(0deg);
    }

    .faq-file__header {
        align-items: flex-start;

        flex-direction: column;
    }

    .faq-item summary {
        grid-template-columns:
            34px
            minmax(0, 1fr)
            32px;
    }

    .faq-item__question {
        font-size:
            clamp(1.65rem, 8vw, 2.3rem);
    }

    .faq-item__answer {
        padding:
            0
            0.4rem
            1.1rem
            2.65rem;
    }

    .faq-side {
        min-height: 570px;
    }

    .faq-note {
        right: 0;

        width: 90%;
    }

    .faq-scribble {
        left: 0;

        width: 82%;
    }

    .faq-bottom {
        align-items: flex-start;

        flex-direction: column;
    }

    .faq-bottom a {
        width: 100%;

        text-align: center;
    }
}

/* FAQ PASS END */

/* FAQ PHOTO CAPTION FIX START */

/*
 * Keep the approved side composition intact.
 * Move the photo caption into the image so the note cannot cover it.
 */

.faq-photo figcaption {
    top: 1rem;
    bottom: auto;

    left: 1rem;
    right: auto;

    z-index: 4;

    padding:
        0.45rem
        0.6rem;

    background:
        rgba(4, 4, 4, 0.72);

    color:
        #e6dcc4;

    border:
        1px solid rgba(230, 220, 196, 0.18);

    font-size: 0.7rem;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.35);
}

/* FAQ PHOTO CAPTION FIX END */

/* SAFE FINAL CTA START */

/* ============================================================
   FINAL WARNING
   ============================================================ */

.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;
}


.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.62)
        contrast(1.12)
        saturate(0.8);

    transform:
        scale(1.035);
}


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

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(1, 1, 1, 0.99) 0%,
            rgba(1, 1, 1, 0.92) 26%,
            rgba(1, 1, 1, 0.62) 47%,
            rgba(1, 1, 1, 0.25) 73%,
            rgba(1, 1, 1, 0.18) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.18),
            rgba(0, 0, 0, 0.34)
        );
}


.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%);
    }
}


.final-warning__shell {
    position: relative;

    width: 100%;
}


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

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

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


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

    color:
        var(--color-paper);

    font-family:
        "Haunted Hill Regular",
        var(--font-display);

    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);
}


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

    margin:
        0 0
        1rem;

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

    font-family:
        var(--font-display);

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

    line-height: 1.55;
}


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

    color:
        var(--color-tungsten);

    font-family:
        "Haunted Hill Regular",
        var(--font-display);

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

    line-height: 1;
}


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

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

    gap:
        1rem
        1.2rem;
}


.final-ticket {
    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%
        );
}


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

    filter:
        brightness(1.05);
}


.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",
        var(--font-display);

    font-size: 1.3rem;

    text-transform:
        uppercase;
}


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

    padding:
        1rem
        1.2rem;
}


.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;
}


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

    color:
        #7b2d25;

    font-family:
        "Haunted Hill Regular",
        var(--font-display);

    font-size:
        2.7rem;

    font-weight: 400;

    line-height: 0.92;
}


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

    font-family:
        var(--font-display);

    font-size:
        0.8rem;

    font-style: normal;
}


.final-warning__secondary {
    color:
        rgba(230, 221, 201, 0.72);

    font-size:
        0.7rem;

    font-weight: 800;

    letter-spacing:
        0.1em;

    text-decoration:
        underline;

    text-underline-offset:
        4px;

    text-transform:
        uppercase;
}


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

.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.64);

    font-family:
        "Courier New",
        monospace;

    text-transform:
        uppercase;
}


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

    font-size:
        0.62rem;

    font-weight: 800;
}


.final-warning__status strong {
    color:
        #c85047;

    font-size:
        0.72rem;
}


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

.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);
}


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


.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;
}


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

    font-family:
        "Haunted Hill Regular",
        var(--font-display);

    font-size: 2.1rem;

    font-weight: 400;
}


.final-warning__note p {
    margin: 0;

    font-family:
        "Courier New",
        monospace;

    font-size:
        0.67rem;

    line-height: 1.45;
}


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

@media (max-width: 900px) {

    .final-warning__note {
        right: 1%;

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


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

@media (max-width: 640px) {

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


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


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


    .final-warning__actions {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .final-ticket {
        width: 100%;
    }


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


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

        flex-direction:
            column;
    }


    .final-warning__note {
        position: relative;

        right: auto;
        bottom: auto;

        width:
            min(88%, 320px);

        margin:
            3rem 0
            0 auto;
    }
}

/* SAFE FINAL CTA END */