/* =========================================================
   HALCYON & GRACE
   INDIVIDUAL FILM PAGE
========================================================= */


/* ---------------------------------------------------------
   VIEWING SECTION
--------------------------------------------------------- */

.film-viewing {
    padding: 60px 24px 0px;
}


.film-viewing__inner {
    width: min(1180px, 100%);
    margin: 0 auto;
}


/* ---------------------------------------------------------
   BACK TO COLLECTION
--------------------------------------------------------- */

.film-viewing__back {
    display: inline-block;

    margin-bottom: 48px;

    color: #8a8178;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 0.7rem;
    font-weight: 700;

    letter-spacing: 0.14em;
    text-transform: uppercase;

    text-decoration: none;

    transition: color 180ms ease;
}


.film-viewing__back:hover {
    color: #f4510b;
}


/* ---------------------------------------------------------
   FILM HEADER
--------------------------------------------------------- */

.film-viewing__header {
    max-width: 1050px;

    margin-bottom: 42px;
}


.film-viewing__title {
    margin: 0 0 12px;

    color: #1d1b19;

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

    font-size: clamp(2.4rem, 4.3vw, 4rem);
    font-weight: 400;

    line-height: 1;

    letter-spacing: -0.025em;
}


.film-viewing__meta {
    margin: 0 0 26px;

    color: #5F5750;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 0.82rem;
    font-weight: 700;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}


.film-viewing__meta span {
    margin: 0 10px;

    color: #ec1375;
}


.film-viewing__intro {
    max-width: 700px;

    margin: 0;

    color: #4a433d;

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

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

    line-height: 1.55;

    font-style: italic;
}


/* ---------------------------------------------------------
   FILM PLAYER
--------------------------------------------------------- */

.film-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}

.film-player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}



/* =========================================================
   ABOUT THE FILM
========================================================= */

.film-about {
    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(280px, 0.75fr);

    gap: 90px;

    margin-top: 80px;
    padding: 72px 0 76px;

    border-top: 1px solid rgba(29, 27, 25, 0.18);
}


/* ---------------------------------------------------------
   LEFT COLUMN
--------------------------------------------------------- */

.film-section-label {
    margin: 0 0 18px;

    color: #ec1375;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

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

    letter-spacing: 0.16em;
    text-transform: uppercase;
}


.film-about__heading {
    max-width: 650px;

    margin: 0 0 28px;

    color: #1d1b19;

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

    font-size: clamp(1.8rem, 2.6vw, 2.5rem);
    font-weight: 400;

    line-height: 1.1;
}


.film-about__synopsis {
    max-width: 680px;

    margin: 0;

    color: #413b36;

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

    font-size: 1.08rem;
    line-height: 1.75;
}


/* ---------------------------------------------------------
   FILM FACTS
--------------------------------------------------------- */

.film-facts {
    display: grid;

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

    gap: 28px 36px;

    margin: 0;
}


.film-facts__item {
    margin: 0;
}


.film-facts__item--wide {
    grid-column: 1 / -1;
}


.film-facts dt {
    margin: 0 0 6px;

    color: #8a8178;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

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

    letter-spacing: 0.15em;
    text-transform: uppercase;
}


.film-facts dd {
    margin: 0;

    color: #1d1b19;

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

    font-size: 0.98rem;
    line-height: 1.45;
}

/* =========================================================
   WHY IT'S IN LOCKED IN
========================================================= */

.film-curator {
    margin-top: 10px;

    background: #171615;
}


.film-curator__inner {
    width: min(1180px, 100%);

    margin: 0 auto;

    padding: 76px 70px 82px;
}


.film-curator__label {
    margin: 0 0 18px;

    color: #f4510b;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

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

    letter-spacing: 0.16em;
    text-transform: uppercase;
}


.film-curator__heading {
    max-width: 760px;

    margin: 0 0 30px;

    color: #f7f1e7;

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

    font-size: clamp(1.9rem, 3vw, 2.7rem);
    font-weight: 400;

    line-height: 1.12;
}


.film-curator__text {
    max-width: 790px;
}


.film-curator__text p {
    margin: 0 0 20px;

    color: rgba(247, 241, 231, 0.84);

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

    font-size: 1.05rem;
    line-height: 1.75;
}


.film-curator__text p:last-child {
    margin-bottom: 0;
}
/* =========================================================
   CONTINUE THE COLLECTION
========================================================= */

.film-continue {
    padding: 82px 0 35px;
}


.film-continue__inner {
    width: min(1180px, 100%);
    margin: 0 auto;
}


/* ---------------------------------------------------------
   NEXT FILM
--------------------------------------------------------- */

.film-next {
    position: relative;

    display: block;

    width: 68%;
	max-width: 800px;
	
    aspect-ratio: 16 / 7;

    margin-top: 22px;

    overflow: hidden;

    color: #fff;
    text-decoration: none;

    background: #111;
}


.film-next__image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 700ms ease;
}


.film-next__shade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.82) 0%,
            rgba(0, 0, 0, 0.60) 40%,
            rgba(0, 0, 0, 0.18) 75%,
            rgba(0, 0, 0, 0.08) 100%
        );

    transition: background 400ms ease;
}


.film-next__content {
    position: absolute;

    left: 38px;
    bottom: 32px;

    max-width: 560px;

    z-index: 2;
}


.film-next__eyebrow {
    margin: 0 0 10px;

    color: #f4510b;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

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

    letter-spacing: 0.17em;
    text-transform: uppercase;
}


.film-next__title {
    margin: 0 0 16px;

    color: #f7f1e7;

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

    font-size: clamp(1.7rem, 3vw, 2.7rem);
    font-weight: 400;

    line-height: 1.05;
}


.film-next__action {
    display: inline-flex;

    align-items: center;
    gap: 12px;

    padding-bottom: 5px;

    border-bottom: 1px solid #ec1375;

    color: #f7f1e7;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

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

    letter-spacing: 0.14em;
    text-transform: uppercase;
}


.film-next__action span {
    font-size: 1rem;

    transition: transform 250ms ease;
}


/* ---------------------------------------------------------
   HOVER
--------------------------------------------------------- */

.film-next:hover .film-next__image {
    transform: scale(1.025);
}


.film-next:hover .film-next__action span {
    transform: translateX(6px);
}


/* ---------------------------------------------------------
   RETURN TO COLLECTION
--------------------------------------------------------- */

.film-continue__return {
    display: inline-block;

    margin-top: 30px;

    color: #777069;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

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

    letter-spacing: 0.14em;
    text-transform: uppercase;

    text-decoration: none;

    transition: color 180ms ease;
}


.film-continue__return:hover {
    color: #f4510b;
}
/* =========================================================
   FILM PAGE NEWSLETTER
========================================================= */

.film-newsletter {
    padding: 0px 0 90px;
}


.film-newsletter__inner {
    width: min(1180px, 100%);
    margin: 0 auto;

    padding-top: 47px;

    border-top: 1px solid rgba(30, 27, 24, 0.18);

    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);

    gap: 90px;

    align-items: end;
}


.film-newsletter__copy {
    max-width: 650px;
}


.film-newsletter__heading {
    margin: 16px 0 18px;

    color: #1c1a18;

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

    font-size: clamp(2rem, 3.5vw, 3.2rem);
    font-weight: 400;

    line-height: 1.08;
}


.film-newsletter__description {
    max-width: 560px;

    margin: 0;

    color: #5e5851;

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

    font-size: 1rem;
    line-height: 1.65;
}


/* ---------------------------------------------------------
   FORM
--------------------------------------------------------- */

.film-newsletter__form {
    width: 100%;
}


.film-newsletter__label {
    display: block;

    margin-bottom: 10px;

    color: #777069;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

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

    letter-spacing: 0.15em;
    text-transform: uppercase;
}


.film-newsletter__field {
    display: flex;

    border-bottom: 1px solid #1c1a18;
}


.film-newsletter__input {
    flex: 1;

    min-width: 0;

    padding: 13px 4px;

    border: 0;
    outline: 0;

    background: transparent;

    color: #1c1a18;

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

    font-size: 1rem;
}


.film-newsletter__input::placeholder {
    color: #9b948c;
}


.film-newsletter__button {
    padding: 13px 4px 13px 22px;

    border: 0;

    background: transparent;

    color: #f4510b;

    cursor: pointer;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

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

    letter-spacing: 0.15em;
    text-transform: uppercase;

    transition: color 180ms ease;
}


.film-newsletter__button:hover {
    color: #ec1375;
}

.film-newsletter__error {
    margin: 12px 0 0;
    color: #b23a3a;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
}