/* ---------- Global settings ---------- */

body {

    margin:0;
    padding:0;

    background-color:#090909;

    color:#EDE9E3;

    font-family:Arial, sans-serif;
}


/* ---------- Main page ---------- */

.threshold-page {

    position:relative;

    min-height:100vh;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 55% 42%,
            rgba(80,45,30,0.12),
            transparent 35%
        ),
        #090909;
}


/* ---------- Theatre image ---------- */

.threshold-image {

    position:absolute;

    top:18vh;
    left:50%;

    transform:translateX(-50%);

    width:min(64vw,820px);

    margin:0;

    z-index:1;
}

.threshold-image img {

    display:block;

    width:100%;
    height:auto;

    opacity:0.79;

    box-shadow:

        0 0 100px rgba(0,0,0,0.95),

        inset 0 0 160px rgba(0,0,0,0.75);
}


/* ---------- Atmospheric overlay ---------- */

.threshold-overlay {

    position:absolute;
    inset:0;

    pointer-events:none;

    background:

    radial-gradient(
        ellipse at center,
        rgba(0,0,0,0) 28%,
        rgba(0,0,0,0.68) 70%,
        rgba(0,0,0,0.95) 100%
    );
}



/* ---------- Title container ---------- */

.threshold-title {

    position:absolute;

    top:5.6vh;

    left:50%;

    transform:translateX(-50%);

    z-index:3;

    width:90%;

    text-align:center;
}

.threshold-title h1 {

    margin:0;

    font-family:Baskerville, "Baskerville Old Face",
                "Times New Roman", serif;

    font-size:3.8rem;

    font-weight:400;

    letter-spacing:0.03em;

    color:#EDE9E3;

    white-space:nowrap;

    text-shadow:
        0 0 12px rgba(0,0,0,0.65);

}

.large-letter {

    font-size:1.10em;

}

/* ---------- Company name ---------- */

.company-name {

    position:absolute;

    bottom:65.5px;

    left:50%;

    transform:translateX(-50%);

    text-align:center;

    z-index:3;
}

.company-name p {

    margin:0;

    font-family:Baskerville,
                "Baskerville Old Face",
                "Times New Roman",
                serif;

    font-size:1.7rem;

    letter-spacing:0.20em;

    color:rgba(237,233,227,0.35);
}
/* smaller th in 9thCircle */

.small-th {

    font-size:0.74em;

}


/* ---------- Logo ---------- */

.threshold-logo {
    position:absolute;
    left:calc(50% + 32vw);
    bottom:3.5vh;
    transform:translateX(-50%);
    z-index:3;
}

.threshold-logo img {
    width:55px;
    opacity:0.60;
    filter:
        brightness(1.25)
        drop-shadow(0 0 4px rgba(255,255,255,0.07));
}
/* ---------- Enter button ---------- */

.enter-link {

    position:absolute;

    bottom:18px;

    left:50%;

    transform:translateX(-50%);

    display:inline-block;

    padding:8px 18px;

    color:rgba(237,233,227,0.34);

    text-decoration:none;

    border:1px solid rgba(237,233,227,0.18);

    letter-spacing:0.30em;

    text-transform:uppercase;

    font-size:0.62rem;

    transition:0.45s;
}

.enter-link:hover {

    color:rgba(237,233,227,0.85);

    border-color:rgba(237,233,227,0.55);

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

}

/* ---------- Home page ---------- */

.home-page {

    min-height:100vh;

    background:#090909;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    color:#EDE9E3;

    text-align:center;
	
	position:relative;
    
	overflow:hidden;

}

.home-page::before {

    content:"";

    position:absolute;

    inset:0;

    background-image:
    url("../assets/images/doors.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    opacity:0.38;

    z-index:0;
}

.home-logo {

    margin-bottom:40px;
}

.home-logo img {

    width:55px;

    opacity:0.55;
}

.home-title h1 {

    margin:0;

    font-family:Baskerville,
    "Times New Roman",
    serif;

    font-size:2.4rem;

    font-weight:400;
}

.home-title p {

    margin-top:10px;

    letter-spacing:0.35em;

    font-size:0.7rem;

    opacity:0.5;
}

.rooms-nav {

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-top:70px;
}

.rooms-nav a {

    color:rgba(237,233,227,0.72);

    text-decoration:none;

    font-size:1.2rem;

    transition:0.3s;
}

.rooms-nav a:hover {

    color:#EDE9E3;

    transform:translateX(6px);

}

.rooms-line {

    margin-top:80px;

    opacity:0.4;

    font-size:0.8rem;
}

 

.home-logo,
.home-title,
.rooms-nav,
.rooms-line {
    position:relative;
    z-index:3;
}

/* ---------- Listing pages ---------- */

.listing-page {
    min-height:100vh;
    background:#090909;
    color:#EDE9E3;
    padding:70px;
}

.listing-page h1 {
    font-family:Baskerville, "Times New Roman", serif;
    font-size:3.5rem;
    font-weight:400;
    margin:0 0 80px 0;
}

.work-list {
    display:flex;
    flex-direction:column;
    gap:28px;
    max-width:283px;
	
	margin-top:-40px;
}

.work-item {
    color:rgba(237,233,227,0.72);
    text-decoration:none;
    border-bottom:1px solid rgba(237,233,227,0.14);
    padding-bottom:18px;
    transition:0.35s;
}

.work-item span {
    display:block;
    font-family:Baskerville, "Times New Roman", serif;
    font-size:2rem;
}

.work-item small {
    display:block;
    margin-top:6px;
    opacity:0.45;
    letter-spacing:0.12em;
    text-transform:uppercase;
    font-size:0.65rem;
}

.work-item:hover {
    color:#EDE9E3;
    transform:translateX(8px);
}

.back-link {
    display:inline-block;
    margin-bottom:60px;
    color:rgba(237,233,227,0.42);
    text-decoration:none;
    font-size:0.75rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
}

.back-link:hover {
    color:#EDE9E3;
}

/* ---------- Listing page image ---------- */

.listing-page {
    position:relative;
    overflow:hidden;
}

.listing-image {
    position:absolute;

    right:1vw;
    top:25vh;

    width:min(65vw,980px);

    opacity:0.42;

    margin:0;
	
	-webkit-mask-image:
        radial-gradient(
            ellipse at center,
            black 37%,
            rgba(0,0,0,0.8) 50%,
            transparent 100%
        );

    mask-image:
        radial-gradient(
            ellipse at center,
            black 45%,
            rgba(0,0,0,0.7) 65%,
            transparent 100%
        );
}

.listing-image img {
    width:100%;
    display:block;

    box-shadow:
        0 0 120px rgba(0,0,0,0.98);
}

/* ---------- Film page ---------- */

.film-page {

    min-height:100vh;

    background:#090909;

    color:#EDE9E3;

    padding:70px;
}

 

.film-details {

    max-width:900px;

    margin:auto;

    text-align:center;
}



.film-meta {

    margin-top:12px;

    letter-spacing:0.25em;

    font-size:0.65rem;

    text-transform:uppercase;

    color:rgba(237,233,227,0.45);

    text-align:center;
}

.film-description {

    margin-top:35px;

    line-height:1.5;

    color:rgba(237,233,227,0.70);

    text-align:center;
}

.black-light-page .film-meta,
.black-light-page .film-description,
.carousel-page .film-meta,
.carousel-page .film-description {

    text-align:left;

    position:relative;

    left:90px;
}

.watch-section {

    margin-top:30px;

    text-align:center;
}

.watch-section h2 {

    font-family:Baskerville,
    "Times New Roman",
    serif;

    font-weight:400;
}

.video-placeholder {

    margin:40px auto;

    width:min(100%,1000px);

    min-height:500px;

    border:1px solid rgba(237,233,227,0.12);

    display:flex;

    align-items:center;

    justify-content:center;

    color:rgba(237,233,227,0.35);
}

.video-frame {
    width:min(94vw,1600px);
    aspect-ratio:2048 / 819;
    margin:30px auto;
    transform:translateX(-7.2vw);
    background:#000;
    box-shadow:0 0 100px rgba(0,0,0,0.95);
    overflow:hidden;
}

@media (min-width:1400px) {

    .video-frame {
        transform:translateX(-12.5vw);
        width:min(88vw,1500px);
    }

}

.film-video {
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    object-position:48% center;
    background:#000;
	opacity:0.985;
}

.film-still {

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    opacity:0.92;
}


.film-video::-webkit-media-controls-start-playback-button {
    display:none !important;
    -webkit-appearance:none;
}

.film-video::-webkit-media-controls-overlay-play-button {
    display:none !important;
}

.film-link {

    color:rgba(237,233,227,0.72);

    text-decoration:none;

    border-bottom:1px solid
    rgba(237,233,227,0.18);

    transition:0.35s;
}

.film-link:hover {

    color:#EDE9E3;

    border-bottom-color:
    rgba(237,233,227,0.55);
}

 .feature-title {
    font-family:Baskerville, "Times New Roman", serif;

    font-size:3.0rem;

    font-weight:400;

    position:relative;

    left:-260px;
    color:#EDE9E3;
}

.feature-documents {
    display:flex;
    justify-content:center;
    gap:90px;
    margin-top:110px;
	align-items:flex-start;
}

.document-card {
    width:260px;
    min-height:340px;
    padding:34px 28px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;

    color:rgba(237,233,227,0.72);
    text-decoration:none;

    border:1px solid rgba(237,233,227,0.16);
    background:rgba(237,233,227,0.035);

    box-shadow:0 0 80px rgba(0,0,0,0.8);
    transition:0.4s;
}

.document-card span {
    font-family:Baskerville, "Times New Roman", serif;
    font-size:2rem;
    line-height:1.2;
}

.document-card small {
    font-size:0.65rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:rgba(237,233,227,0.38);
}

.document-card:hover {
    border-color:rgba(237,233,227,0.28);
}

.document-card img {
    width:100%;
    height:auto;
    display:block;
}

.pitch-deck {
    padding:0;
    overflow:hidden;
}

.opening-scenes {
    width:300px;

    padding:0;

    overflow:hidden;

    transform:translate(-10px,-40px);
}

.opening-scenes img {

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}

.pitch-deck {

    width:305px;

    padding:0;

    min-height:0;
    height:auto;

    display:block;

    overflow:hidden;

    transform:translate(40px,144px);
}

.pitch-deck img {

    width:100%;
    height:auto;

    display:block;
}

.black-light-bg {
    position:absolute;
    inset:0;

	background:
    radial-gradient(
        ellipse at center,
        rgba(0,0,0,0) 25%,
        rgba(0,0,0,0.55) 75%,
        rgba(0,0,0,0.85) 100%
    );
	
    background-image:url("../assets/images/black-light-background.jpg");
    background-size:125%;
    background-position:center;

    opacity:0.09;

    z-index:0;

    pointer-events:none;
	
	
}

.film-page {
    position:relative;
    overflow:hidden;
}

.film-details,
.feature-documents,
.back-link {
    position:relative;
    z-index:2;
}

/* ---------- About page ---------- */

.about-content {

    max-width:700px;

    margin:0 auto;

    color:rgba(237,233,227,0.78);
}

.about-content p {

    margin:0 0 32px 0;

    line-height:1.9;

    font-size:1rem;
}

.about-content .feature-title {

    margin-bottom:60px;
}

.about-title {

    font-family:Baskerville, "Times New Roman", serif;

    font-size:2.5rem;

    font-weight:400;

    margin:0 0 60px 0;

    color:#EDE9E3;
}

.back-link {

    position:relative;

    z-index:2;
}

/* ---------- About background ---------- */

.about-bg {

    position:absolute;

    inset:0;

    background-image:
    url("../assets/images/about-image.jpg");

    background-size:90%;

    background-position:155% 55%;

    opacity:0.042;

    pointer-events:none;

    z-index:0;
}


.about-bg::after {

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        ellipse at 135% 95%,
        rgba(0,0,0,0) 20%,
        rgba(0,0,0,0.45) 70%,
        rgba(0,0,0,0.88) 100%
    );
}

.contact-email {

    margin-top:60px;
	
	position:relative;

    left:2px;

    top:-10px;

    font-size:1.15rem;
}

.contact-email-link {

    color:rgba(237,233,227,0.70);

    text-decoration:none;

    transition:0.3s;
}

.contact-email-link:hover {

    color:#EDE9E3;
}

.carousel-documents {
    justify-content:flex-start;
    margin-left:11vw;
    margin-top:65px;
}

.carousel-script {
    width:300px;
    min-height:0;
    height:auto;
    padding:0;
    overflow:hidden;
    transform:none;
}

.carousel-script img {
    width:100%;
    height:auto;
    display:block;
}

.carousel-title {

    position:relative;

    left:-285px;
}

.carousel-page {
    position:relative;
    overflow:hidden;
}

.carousel-bg {

    position:absolute;
    inset:0;

	
    background-image:
        url("../assets/images/carousel-image.jpg");

    background-size:100%;

    background-repeat:no-repeat;

    background-position:70% 30%;

    opacity:0.52;

    pointer-events:none;

    z-index:0;
}

.carousel-bg::after {

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            to bottom,
            rgba(0,0,0,0.95) 0%,
            rgba(0,0,0,0.45) 12%,
            rgba(0,0,0,0) 30%
        ),

        radial-gradient(
            ellipse at center,
            rgba(0,0,0,0) 20%,
            rgba(0,0,0,0.45) 70%,
            rgba(0,0,0,0.90) 100%
        );
}

.carousel-page .film-details,
.carousel-page .feature-documents,
.carousel-page .back-link {

    position:relative;
    z-index:1;
}

@media (min-width:1400px) {

    .carousel-bg {
        background-size:91%;
        background-position:72% 38%;
    }

    .carousel-documents {
        margin-left:20vw;
        margin-top:80px;
    }

    .carousel-title {
        left:-288px;
    }

}

.coming-soon-page {
    min-height:100vh;
    background:#090909;
    color:#EDE9E3;
    position:relative;
    padding:70px;
}

.coming-soon-text {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);

    color:rgba(237,233,227,0.55);
    font-size:1rem;
    letter-spacing:0.12em;
}

.audio-page {
    min-height:100vh;
    background:#090909;
    position:relative;
}

.audio-content {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    text-align:center;
}

.audio-title {
    font-family:Baskerville, serif;
    font-size:3rem;
    font-weight:400;
    color:#EDE9E3;
    margin-bottom:40px;
}

.audio-content audio {
    width:400px;
    opacity:0.8;
}

/* ---------- Sketchbook ---------- */

.sketchbook-page h1 {

    text-align:center;

    margin-bottom:90px;
}

.sketchbook-list {

    width:100%;

    max-width:none;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:34px;

    margin-top:40px;
}

.sketchbook-list .work-item {

    width:320px;

    text-align:center;

    border-bottom:1px solid
    rgba(237,233,227,0.08);

    padding-bottom:18px;
}

.sketchbook-list .work-item span {

    display:block;

    font-family:Baskerville,
                "Times New Roman",
                serif;

    font-size:2rem;
}

.sketchbook-list .work-item:hover {

    transform:none;
}

/* ---------- Photographs ---------- */

.photographs-page {
    min-height:100vh;
    background:#090909;
    color:#EDE9E3;
    padding:30px;
}

.photographs-title {

    font-family:Baskerville,
                "Times New Roman",
                serif;

    font-size:.9rem;

    font-weight:400;

    text-align:center;

    position:relative;

    top:100px;

    color:rgba(237,233,227,0.65);
}

.triptych {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    width:102%;
	margin-top:115px;
}

.triptych img {

    width:33%;

    max-height:100vh;

    object-fit:contain;

    opacity:0.94;
}

/* ---------- Coming Soon ---------- */

.coming-soon-page {

    min-height:100vh;

    background:#090909;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;
}

.coming-soon-content {

    text-align:center;
}

.coming-soon-content h1 {

    font-family:Baskerville,
                "Times New Roman",
                serif;

    font-size:3rem;

    font-weight:400;

    color:#EDE9E3;

    margin-bottom:20px;
}

.coming-soon-content p {

    color:rgba(237,233,227,0.55);

    letter-spacing:0.12em;

    text-transform:uppercase;

    font-size:0.8rem;
}

@media (max-width:900px) {

    .film-page {
        padding:40px 28px;
    }

    .feature-title,
    .black-light-title,
    .carousel-title {
        left:0;
        text-align:center;
        font-size:2.4rem;
    }

    .black-light-page .film-meta,
    .black-light-page .film-description,
    .carousel-page .film-meta,
    .carousel-page .film-description {
        left:0;
        text-align:center;
    }

    .feature-documents {
        flex-direction:column;
        align-items:center;
        gap:50px;
        margin-top:70px;
    }

    .opening-scenes,
    .pitch-deck,
    .carousel-script {
        transform:none;
        width:min(82vw,320px);
        margin:0 auto;
    }

    .pitch-deck {
        width:min(82vw,340px);
    }

    .carousel-documents {
        margin-left:0;
        margin-top:70px;
        justify-content:center;
    }

    .black-light-bg,
    .carousel-bg {
        background-size:cover;
        background-position:center;
    }
}

.audio-page .back-link {

    position:absolute;

    top:70px;

    left:70px;
}

@media (max-width:700px) {

    .threshold-title {
        top:7vh;
        width:92%;
    }

    .threshold-title h1 {
        font-size:2.15rem;
        white-space:normal;
        line-height:1.05;
        letter-spacing:0.02em;
    }

    .threshold-image {
        top:24vh;
        width:92vw;
    }

    .company-name {
        bottom:82px;
        width:90%;
    }

    .company-name p {
        font-size:1.05rem;
        letter-spacing:0.16em;
    }

    .threshold-logo {
        left:50%;
        bottom:48px;
    }

    .threshold-logo img {
        width:42px;
    }

    .enter-link {
        bottom:16px;
        font-size:0.55rem;
        padding:7px 14px;
    }
}