/* =========================================================
   HALCYON & GRACE — RESPONSIVE STYLES

   Header:
   701–1050px  = two-row tablet header
   0–700px     = compact header + hamburger navigation

   Collection hero:
   0–1220px    = stacked text + artwork
   1221px+     = desktop two-column hero

   Film cards:
   0–600px     = one-column grid
   601–900px   = two-column grid
   901–1220px  = three-column grid + accordion
   1221px+     = desktop slide-out panels
========================================================= */


/* =========================================================
   HEADER — TABLET
========================================================= */

@media (min-width: 701px) and (max-width: 1050px) {

    .site-header {
        padding-left: 28px;
        padding-right: 28px;
    }

    .site-header .header-container {
        grid-template-columns: 1fr auto;
        gap: 24px 32px;
    }

    .site-brand {
        justify-self: start;
    }

    .header-search {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .site-header .main-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
    }

    .site-header .main-nav__list {
        flex-direction: row;
        justify-content: center;
        gap: clamp(24px, 5vw, 42px);
    }
}


/* =========================================================
   HEADER — MOBILE / HAMBURGER
========================================================= */

@media (max-width: 700px) {

    .site-header {
        padding: 18px 20px;
    }

    .site-header .header-container {
        position: relative;

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

        align-items: center;

        gap: 12px;
    }

    .site-brand {
        grid-column: 2;
        justify-self: center;

        max-width: 100%;
        min-width: 0;
    }

    .site-brand__name {
        font-size: clamp(1.35rem, 7vw, 1.65rem);
        letter-spacing: 0.035em;
        white-space: nowrap;
    }

    .site-brand__tagline {
        font-size: 0.58rem;
        letter-spacing: 0.28em;
    }

    .menu-toggle {
        display: block;

        grid-column: 3;
        grid-row: 1;

        justify-self: end;

        color: #ffffff;
    }

    .header-search {
        display: none;
    }

    .site-header .main-nav {
        grid-column: 1 / -1;
        grid-row: 2;

        width: 100%;
        max-height: 0;

        overflow: hidden;

        opacity: 0;
        visibility: hidden;

        justify-self: stretch;

        transition:
            max-height 260ms ease,
            opacity 180ms ease,
            visibility 180ms ease;
    }

    .site-header .main-nav.is-open {
        max-height: 420px;

        opacity: 1;
        visibility: visible;
    }

    .site-header .main-nav__list {
        flex-direction: column;
        align-items: center;

        gap: 0;

        width: 100%;

        padding: 18px 0 4px;
    }

    .site-header .main-nav__list li {
        width: 100%;
        text-align: center;
    }

    .site-header .main-nav__link {
        display: block;

        width: 100%;

        padding: 10px 12px;
    }
}


/* =========================================================
   COLLECTION INTRO / HERO — STACKED THROUGH 1220px
========================================================= */

@media (max-width: 1220px) {

    .collection-intro__inner {
        grid-template-columns: 1fr;

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

        padding: 0;
    }

    .collection-intro__content {
        width: 100%;
        min-height: auto;

        padding: 52px 44px 48px;

        box-sizing: border-box;

        align-items: center;
    }

    .collection-intro .collection-intro__header {
        width: 100%;
        max-width: 820px;

        text-align: center;
    }

    .collection-intro .collection-intro__title {
        width: 100%;
        max-width: 100%;

        font-size: clamp(3.15rem, 7vw, 4.6rem);

        line-height: 0.98;
        letter-spacing: 0.055em;

        white-space: normal;

        text-align: center;
    }

    .collection-intro__subtitle {
        max-width: 680px;

        margin-left: auto;
        margin-right: auto;

        text-align: center;
    }

    .collection-intro__divider {
        margin-left: auto;
        margin-right: auto;
    }

    .curators-note {
        width: 100%;
        max-width: 680px;

        margin-left: auto;
        margin-right: auto;

        text-align: left;
    }

    .collection-artwork {
        width: 100%;
        min-width: 0;
        min-height: 0;
    }

    .collection-artwork__image {
        display: block;

        width: 100%;
        height: auto;
        min-height: 0;

        object-fit: cover;
    }
}


/* =========================================================
   COLLECTION FILM GRID
========================================================= */

@media (max-width: 900px) {

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

@media (max-width: 600px) {

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


/* =========================================================
   COLLECTION FILM CARDS — ACCORDION THROUGH 1220px
========================================================= */

@media (max-width: 1220px) {

    .film-card {
        overflow: hidden;
    }

    .film-card .film-card__details,
    .film-card:nth-child(3n) .film-card__details {
        position: relative;

        top: auto;
        left: auto;
        right: auto;

        width: 100%;
        height: auto;

        box-sizing: border-box;
        margin: 0;

        padding: 0 24px;

        opacity: 0;
        visibility: hidden;

        max-height: 0;
        overflow: hidden;

        transform: none;

        box-shadow: none;

        transition:
            max-height 0.4s ease,
            opacity 0.3s ease,
            visibility 0.3s ease,
            padding 0.3s ease;
    }

    .film-card .film-card__details::before,
    .film-card:nth-child(3n) .film-card__details::before {
        display: none;
    }

    .film-card:hover .film-card__details,
    .film-card:nth-child(3n):hover .film-card__details {
        left: auto;
        right: auto;

        opacity: 0;
        visibility: hidden;

        max-height: 0;

        padding-top: 0;
        padding-bottom: 0;

        transform: none;
        box-shadow: none;
    }

    .film-card.is-open .film-card__details,
    .film-card.is-open:hover .film-card__details,
    .film-card:nth-child(3n).is-open .film-card__details,
    .film-card:nth-child(3n).is-open:hover .film-card__details {
        left: auto;
        right: auto;

        opacity: 1;
        visibility: visible;

        max-height: 700px;

        padding: 26px 24px 28px;

        transform: none;
        box-shadow: none;
    }
}


/* =========================================================
   MOBILE CONTENT — 700px AND BELOW
========================================================= */

@media (max-width: 700px) {

    .collection-intro__content {
        padding: 46px 24px 42px;
    }

    .collection-intro .collection-intro__title {
        font-size: clamp(2.2rem, 11vw, 3rem);
        letter-spacing: 0.04em;
    }

    .collection-intro__subtitle {
        font-size: 1.1rem;
        line-height: 1.4;
    }

    .film-about {
        grid-template-columns: 1fr;
        gap: 42px;

        margin-top: 56px;
        padding: 48px 0 52px;
    }

    .film-about__heading {
        max-width: none;
        font-size: 2rem;
        line-height: 1.12;
    }

    .film-about__synopsis {
        max-width: none;
        font-size: 1rem;
        line-height: 1.65;
    }

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

    .film-newsletter__inner {
        grid-template-columns: 1fr;
        gap: 34px;

        padding-top: 40px;
        align-items: start;
    }

    .film-newsletter__copy {
        max-width: none;
    }

    .film-newsletter__heading {
        margin: 12px 0 16px;
        font-size: 2rem;
        line-height: 1.08;
    }

    .film-newsletter__description {
        max-width: none;
        font-size: 1rem;
        line-height: 1.6;
    }

    .film-newsletter__form,
    .film-newsletter__field {
        width: 100%;
    }

    .film-continue {
        padding: 64px 0 30px;
    }

    .film-next {
        width: 100%;
        max-width: none;
        aspect-ratio: 16 / 9;

        margin-top: 20px;
    }

    .film-next__content {
        left: 22px;
        right: 22px;
        bottom: 20px;

        max-width: none;
    }

    .film-next__eyebrow {
        margin-bottom: 8px;
        font-size: 0.62rem;
    }

    .film-next__title {
        margin-bottom: 12px;
        font-size: 1.65rem;
        line-height: 1.05;
    }

    .film-next__action {
        font-size: 0.64rem;
    }

    .film-continue__return {
        margin-top: 24px;
        line-height: 1.5;
    }

    .homepage-newsletter {
        width: 100%;

        padding: 30px 20px 45px;

        box-sizing: border-box;
    }

    .homepage-newsletter__inner {
        width: 100%;
        max-width: 100%;

        grid-template-columns: 1fr;
        gap: 34px;

        padding-top: 40px;

        align-items: start;

        box-sizing: border-box;
    }

    .homepage-newsletter__copy,
    .homepage-newsletter__form,
    .homepage-newsletter__field {
        width: 100%;
        max-width: 100%;

        box-sizing: border-box;
    }

    .homepage-newsletter__heading {
        font-size: 2rem;
        line-height: 1.08;
    }

    .homepage-newsletter__description {
        max-width: none;
        font-size: 1rem;
        line-height: 1.6;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .film-curator__inner {
        padding: 56px 24px 62px;
    }

    .film-curator__heading {
        font-size: 1.85rem;
        line-height: 1.12;
        margin-bottom: 24px;
    }

    .film-curator__text p {
        font-size: 0.98rem;
        line-height: 1.65;
    }
	.site-header {
    padding-left: 10px;
    padding-right: 10px;
}

.site-header .header-container {
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    gap: 6px;
}

.menu-toggle {
    width: 32px;
    height: 32px;
    padding: 4px;
}

.menu-toggle__line {
    width: 20px;
}
}